Nejcraft/nej-react-components
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

no message

Browse Source
This commit is contained in:
Regi 2022-03-04 13:57:28 +01:00
parent f591e46b67
commit be59cd8df2
13 changed files with 206 additions and 203 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
Parts/Button.js
View File

@ -1,7 +1,7 @@
import React from 'react'
import React from "react"
import tw, {styled} from "twin.macro"
import 'styled-components/macro'
import { colors, colorsDisabled, colorsHover } from './Colors'
import "styled-components/macro"
import { colors, colorsDisabled, colorsHover } from "./Colors"

11
Parts/Card.js
View File

@ -1,12 +1,11 @@
import React from "react";
import tw, {styled} from "twin.macro"
import 'styled-components/macro'
import "styled-components/macro"
let Card = styled.div(tw`relative flex flex-col min-w-0 break-words bg-primary w-full shadow-xl rounded-2xl`)
export default Card;
export default function Card(props) {
return <div {...props} css={[tw`relative flex flex-col min-w-0 break-words bg-primary w-full shadow-xl rounded-2xl`, props.css]}>
{props.children}
</div>;
}
export function CardHeader(props) {
return <div tw="rounded-t px-6 py-4 pb-2 bg-transparent">
<div tw="flex flex-wrap items-center">

2
Parts/Charts.js
View File

@ -1,5 +1,5 @@
import React, { useRef, useState } from "react";
import Chart from 'chart.js/auto';
import Chart from "chart.js/auto";
import Card, { CardHeader } from "./Card";
import { createPopper } from "@popperjs/core";

2
Parts/Colors.js
View File

@ -1,6 +1,6 @@
import tw, {styled} from "twin.macro"
import 'styled-components/macro'
import "styled-components/macro"
export let colors = {

16
Parts/DropDown.js
View File

@ -2,7 +2,7 @@ import React, { cloneElement, isValidElement, useEffect, useImperativeHandle, us
import { createPopper } from "@popperjs/core";
import tw, { styled } from "twin.macro"
import 'styled-components/macro'
import "styled-components/macro"
import { colors, colorsDisabled, colorsHover, textColors, textColorsHover } from "./Colors";
const DropDownItem = styled.button(({ type }) => [
@ -14,7 +14,7 @@ const DropDownItem = styled.button(({ type }) => [
])
export { DropDownItem }
let Dropdown = React.forwardRef(({ children, dropdownCss, onValueChanged, button, popper, placement, hover, ...props }, ref) => {
let Dropdown = React.forwardRef(({ children, dropdownCss, onValueChanged, button, buttonProps, popper, placement, hover, ...props }, ref) => {
// dropdown props
const [overButton, setOverButton] = React.useState(false);
const [overDropDown, setOverDropDown] = React.useState(false);
@ -45,17 +45,16 @@ let Dropdown = React.forwardRef(({ children, dropdownCss, onValueChanged, button
}
}
useEffect(() => {
if ('ontouchend' in window) {
document.addEventListener('touchend', handleOutsideClick)
if ("ontouchend" in window) {
document.addEventListener("touchend", handleOutsideClick)
} else {
document.addEventListener('click', handleOutsideClick)
document.addEventListener("click", handleOutsideClick)
}
// Specify how to clean up after this effect:
return function cleanup() {
document.removeEventListener('touchend', handleOutsideClick)
document.removeEventListener('click', handleOutsideClick)
document.removeEventListener("touchend", handleOutsideClick)
document.removeEventListener("click", handleOutsideClick)
};
});
@ -82,6 +81,7 @@ let Dropdown = React.forwardRef(({ children, dropdownCss, onValueChanged, button
}}
onMouseEnter={() => { setOverButton(true); hover && openDropdownPopover() }}
onMouseLeave={() => { setOverButton(false); (!overDropDown && hover) && closeDropdownPopover() }}
{...buttonProps}
>
{button}
</button>

19
Parts/Input.js
View File

@ -1,10 +1,11 @@
import React from 'react'
import tw from 'twin.macro'
import 'styled-components/macro'
import React from "react"
export default function Input({ label, title, name, id, children, ...props }) {
import tw, { styled } from "twin.macro"
import "styled-components/macro"
export default function Input({ label, title, className, name, id, children, ...props }) {
return (
<div css={title != null && tw`my-1`}>
<div css={[title && tw`my-1`]} className={className}>
{title && (
<label {...label} css={[tw`block text-secondary text-sm font-bold mb-2`, label?.css]} htmlFor={id ?? name ?? title}>
{title}
@ -15,9 +16,9 @@ export default function Input({ label, title, name, id, children, ...props }) {
</div>
)
}
export function TextArea({ label, title, name, id, children, ...props }) {
export function TextArea({ label, title, className, name, id, children, ...props }) {
return (
<div tw="my-1">
<div css={[title && tw`my-1`]} className={className}>
{title && (
<label {...label} css={[tw`block text-secondary text-sm font-bold mb-2`, label?.css]} htmlFor={id ?? name ?? title}>
{title}
@ -29,9 +30,9 @@ export function TextArea({ label, title, name, id, children, ...props }) {
)
}
export function CheckBox({ label, title, name, id, children, ...props }) {
export function CheckBox({ label, title, className, name, id, children, ...props }) {
return (
<div tw="my-1 flex text-secondary">
<div tw="my-1 flex text-secondary" className={className}>
<input {...props} type="checkbox" name={name ?? title} id={id ?? name ?? title} tw="checked:bg-accent w-6 h-6 rounded-full bg-secondary border-secondary border-4 appearance-none cursor-pointer " />
{title != null ? (
<label {...label} htmlFor={id ?? name ?? title} css={[tw`block font-bold px-2`, label?.css]}>

7
Parts/Layout.js
View File

@ -1,6 +1,6 @@
import React from 'react'
import React from "react"
import tw, {styled} from "twin.macro"
import 'styled-components/macro'
import "styled-components/macro"
const Full = styled.div(tw`w-full lg:px-2 py-2`)
export {Full}
@ -11,6 +11,9 @@ export {Half}
const Quarter = styled.div(tw`w-full lg:w-6/12 xl:w-3/12 lg:px-2 py-2 `)
export {Quarter}
const Sixth = styled.div(tw`w-full lg:w-1/5 xl:w-1/6 lg:px-2 py-2 `)
export {Sixth}
const Third = styled.div(tw`w-full lg:w-4/12 lg:px-2 py-2 `)
export {Third}

8
Parts/Modal.js
View File

@ -1,12 +1,12 @@
import React from 'react'
import { Third } from './Layout'
import React from "react"
import { Third } from "./Layout"
import tw, { styled } from "twin.macro"
import 'styled-components/macro'
import "styled-components/macro"
function Modal({ isOpen, onBackdropClick, ...props }) {
if (isOpen) {
return <div onClick={onBackdropClick} tw="fixed flex flex-col justify-center items-center inset-0 bg-gray-800 bg-opacity-75">
return <div onClick={onBackdropClick} tw="fixed flex flex-col justify-center items-center inset-0 bg-gray-800 bg-opacity-75 z-50">
<Third {...props} onClick={e=>e.stopPropagation()}>
{props.children}
</Third>

4
Parts/Pagination.js
View File

@ -1,10 +1,10 @@
import Button from "./Button";
import tw, { styled } from "twin.macro"
import 'styled-components/macro'
import "styled-components/macro"
function CustomBtn({children, setPage, currentPage, page, css, ...props}){
console.log(css)
return <Button onClick={()=>{setPage(page??children); console.log(page??children)}} css={[tw`rounded-none mx-0`, currentPage==children && tw`bg-accent`, css]} {...props}>{children}</Button>
return <Button onClick={()=>setPage(Number(page??children))} css={[tw`rounded-none mx-0`, currentPage==children && tw`bg-accent`, css]} {...props}>{children}</Button>
}
export default function Pagination({ currentPage, maxPages, setPage, ...props }) {

6
Parts/RangeSlider.js
View File

@ -2,8 +2,8 @@ import React, { useState, useEffect, useRef } from "react";
import styles from "./RangeSlider.scss"
import tw from 'twin.macro'
import 'styled-components/macro'
import tw from "twin.macro"
import "styled-components/macro"
export function RangeSlider({ value=0, rangeType="", onChange, min=0, max=10, right = true, ...props }) {
@ -11,7 +11,7 @@ export function RangeSlider({ value=0, rangeType="", onChange, min=0, max=10, ri
useEffect(() => {
if (ref.current) {
ref.current.style.left = (((Math.max(Math.min(value-min, max-min), 0)) * 100) / ((max-min)+2)) + `%`;
ref.current.style.left = (((Math.max(Math.min(value-min, max-min), 0)) * 100) / ((max-min)+2)) + "%";
}
})

2
Parts/Table.js
View File

@ -1,6 +1,6 @@
import React from "react";
import tw, {styled} from "twin.macro"
import 'styled-components/macro'
import "styled-components/macro"
export function Table(props) {
return <div tw="block w-full overflow-x-auto text-secondary">

6
Parts/Text.js
View File

@ -1,7 +1,7 @@
import React from 'react'
import React from "react"
import tw, {styled} from "twin.macro"
import 'styled-components/macro'
import { textColors, textColorsHover } from './Colors'
import "styled-components/macro"
import { textColors, textColorsHover } from "./Colors"
function Text() {

6
globalStyle.js
View File

@ -1,6 +1,6 @@
import React, { useState } from 'react'
import { createGlobalStyle } from 'styled-components'
import tw, { theme, GlobalStyles as BaseStyles } from 'twin.macro'
import React, { useState } from "react"
import { createGlobalStyle } from "styled-components"
import tw, { theme, GlobalStyles as BaseStyles } from "twin.macro"
const CustomStyles = createGlobalStyle`
body {