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

10
Parts/Button.js
View File

@ -1,13 +1,13 @@
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"
const BtnBase = styled.button(({ type }) => [
tw`bg-secondary hover:bg-trinary disabled:bg-trinary m-2 outline-none focus:outline-none text-primary font-bold ease-linear transition-all duration-150`,
colors[type], colorsHover[type], colorsDisabled[type]
tw`bg-secondary hover:bg-trinary disabled:bg-trinary m-2 outline-none focus:outline-none text-primary font-bold ease-linear transition-all duration-150`,
colors[type], colorsHover[type], colorsDisabled[type]
])
/*

27
Parts/Card.js
View File

@ -1,19 +1,18 @@
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">
<div tw="relative w-full max-w-full flex-grow flex-1">
{ props.desc != null ? <h2 tw="text-primary text-xl font-semibold">{props.desc}</h2> : ""}
</div>
{props.children}
return <div tw="rounded-t px-6 py-4 pb-2 bg-transparent">
<div tw="flex flex-wrap items-center">
<div tw="relative w-full max-w-full flex-grow flex-1">
{ props.desc != null ? <h2 tw="text-primary text-xl font-semibold">{props.desc}</h2> : ""}
</div>
</div>;
}
{props.children}
</div>
</div>;
}

18
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";
@ -25,16 +25,16 @@ function generateGetBoundingClientRect(x = 0, y = 0) { return () => ({ width: 0,
function GetPlacement(tooltipModel) {
switch (tooltipModel.xAlign) {
case "right":
return "left";
case "left":
return "right";
case "right":
return "left";
case "left":
return "right";
}
switch (tooltipModel.yAlign) {
case "top":
return "bottom";
case "bottom":
return "top";
case "top":
return "bottom";
case "bottom":
return "top";
}
}

62
Parts/Colors.js
View File

@ -1,47 +1,47 @@
import tw, {styled} from "twin.macro"
import 'styled-components/macro'
import "styled-components/macro"
export let colors = {
error: tw`bg-red-600`,
accent: tw`bg-accent`,
accent2: tw`bg-accent2`,
accent3: tw`bg-accent3`,
accent4: tw`bg-accent4`,
accent5: tw`bg-accent5`,
error: tw`bg-red-600`,
accent: tw`bg-accent`,
accent2: tw`bg-accent2`,
accent3: tw`bg-accent3`,
accent4: tw`bg-accent4`,
accent5: tw`bg-accent5`,
}
export let colorsHover = {
error: tw`hover:bg-red-700`,
accent: tw`hover:bg-accent-dark`,
accent2: tw`hover:bg-accent2-dark`,
accent3: tw`hover:bg-accent3-dark`,
accent4: tw`hover:bg-accent4-dark`,
accent5: tw`hover:bg-accent5-dark`,
error: tw`hover:bg-red-700`,
accent: tw`hover:bg-accent-dark`,
accent2: tw`hover:bg-accent2-dark`,
accent3: tw`hover:bg-accent3-dark`,
accent4: tw`hover:bg-accent4-dark`,
accent5: tw`hover:bg-accent5-dark`,
}
export let colorsDisabled = {
error: tw`disabled:bg-red-700`,
accent: tw`disabled:bg-accent-dark`,
accent2: tw`disabled:bg-accent2-dark`,
accent3: tw`disabled:bg-accent3-dark`,
accent4: tw`disabled:bg-accent4-dark`,
accent5: tw`disabled:bg-accent5-dark`,
error: tw`disabled:bg-red-700`,
accent: tw`disabled:bg-accent-dark`,
accent2: tw`disabled:bg-accent2-dark`,
accent3: tw`disabled:bg-accent3-dark`,
accent4: tw`disabled:bg-accent4-dark`,
accent5: tw`disabled:bg-accent5-dark`,
}
export let textColors = {
error: tw`text-red-600`,
accent: tw`text-accent`,
accent2: tw`text-accent2`,
accent3: tw`text-accent3`,
accent4: tw`text-accent4`,
accent5: tw`text-accent5`,
error: tw`text-red-600`,
accent: tw`text-accent`,
accent2: tw`text-accent2`,
accent3: tw`text-accent3`,
accent4: tw`text-accent4`,
accent5: tw`text-accent5`,
}
export let textColorsHover = {
error: tw`hover:text-red-700`,
accent: tw`hover:text-accent-dark`,
accent2: tw`hover:text-accent2-dark`,
accent3: tw`hover:text-accent3-dark`,
accent4: tw`hover:text-accent4-dark`,
accent5: tw`hover:text-accent5-dark`,
error: tw`hover:text-red-700`,
accent: tw`hover:text-accent-dark`,
accent2: tw`hover:text-accent2-dark`,
accent3: tw`hover:text-accent3-dark`,
accent4: tw`hover:text-accent4-dark`,
accent5: tw`hover:text-accent5-dark`,
}

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>

81
Parts/Input.js
View File

@ -1,46 +1,47 @@
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 }) {
return (
<div css={title != null && tw`my-1`}>
{title && (
<label {...label} css={[tw`block text-secondary text-sm font-bold mb-2`, label?.css]} htmlFor={id ?? name ?? title}>
{title}
</label>
)}
<input {...props} name={name || title} id={id || name || title} tw="bg-primary appearance-none border-2 border-secondary rounded w-full py-2 px-4 text-primary leading-tight focus:outline-none focus:bg-secondary focus:border-accent transition duration-150 " />
{children}
</div>
)
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 && 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}
</label>
)}
<input {...props} name={name || title} id={id || name || title} tw="bg-primary appearance-none border-2 border-secondary rounded w-full py-2 px-4 text-primary leading-tight focus:outline-none focus:bg-secondary focus:border-accent transition duration-150 " />
{children}
</div>
)
}
export function TextArea({ label, title, name, id, children, ...props }) {
return (
<div tw="my-1">
{title && (
<label {...label} css={[tw`block text-secondary text-sm font-bold mb-2`, label?.css]} htmlFor={id ?? name ?? title}>
{title}
</label>
)}
<textarea {...props} name={name ?? title} id={id ?? name ?? title} tw="bg-primary appearance-none border-2 border-secondary rounded w-full py-2 px-4 text-primary leading-tight focus:outline-none focus:bg-secondary focus:border-accent transition duration-150 " />
{children}
</div>
)
export function TextArea({ label, title, className, name, id, children, ...props }) {
return (
<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}
</label>
)}
<textarea {...props} name={name ?? title} id={id ?? name ?? title} tw="bg-primary appearance-none border-2 border-secondary rounded w-full py-2 px-4 text-primary leading-tight focus:outline-none focus:bg-secondary focus:border-accent transition duration-150 " />
{children}
</div>
)
}
export function CheckBox({ label, title, name, id, children, ...props }) {
return (
<div tw="my-1 flex text-secondary">
<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]}>
{title}
</label>
) : null
}
{children}
</div >
)
export function CheckBox({ label, title, className, name, id, children, ...props }) {
return (
<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]}>
{title}
</label>
) : null
}
{children}
</div >
)
}

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}

22
Parts/Modal.js
View File

@ -1,17 +1,17 @@
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">
<Third {...props} onClick={e=>e.stopPropagation()}>
{props.children}
</Third>
</div>
}
return null;
if (isOpen) {
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>
</div>
}
return null;
}
export default Modal

102
Parts/Pagination.js
View File

@ -1,62 +1,62 @@
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>
console.log(css)
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 }) {
function RenderButtons() {
switch (maxPages) {
case 1:
return <CustomBtn tw="rounded-xl" setPage={setPage} currentPage={currentPage}>1</CustomBtn>;
case 2:
return <>
<CustomBtn tw="rounded-l-xl" setPage={setPage} currentPage={currentPage}>1</CustomBtn>
<CustomBtn tw="rounded-r-xl" setPage={setPage} currentPage={currentPage}>2</CustomBtn>
</>
case 3:
return <>
<CustomBtn tw="rounded-l-xl" setPage={setPage} currentPage={currentPage}>1</CustomBtn>
<CustomBtn setPage={setPage} currentPage={currentPage}>2</CustomBtn>
<CustomBtn tw="rounded-r-xl" setPage={setPage} currentPage={currentPage}>3</CustomBtn>
</>
case 4:
return <>
<CustomBtn tw="rounded-l-xl" setPage={setPage} currentPage={currentPage}>1</CustomBtn>
<CustomBtn setPage={setPage} currentPage={currentPage}>2</CustomBtn>
<CustomBtn setPage={setPage} currentPage={currentPage}>3</CustomBtn>
<CustomBtn tw="rounded-r-xl" setPage={setPage} currentPage={currentPage}>4</CustomBtn>
</>
case 5:
return <>
<CustomBtn tw="rounded-l-xl" setPage={setPage} currentPage={currentPage}>1</CustomBtn>
<CustomBtn setPage={setPage} currentPage={currentPage}>2</CustomBtn>
<CustomBtn setPage={setPage} currentPage={currentPage}>3</CustomBtn>
<CustomBtn setPage={setPage} currentPage={currentPage}>4</CustomBtn>
<CustomBtn tw="rounded-r-xl" setPage={setPage} currentPage={currentPage}>5</CustomBtn>
</>
default: {
return <>
{currentPage > 3 && <CustomBtn css={[tw`rounded-l-xl`]} page={1} setPage={setPage} currentPage={currentPage}>&lt;</CustomBtn>}
<CustomBtn css={[currentPage <= 3 &&tw`rounded-l-xl`]} setPage={setPage} currentPage={currentPage}>{Math.max(currentPage-2,1)}</CustomBtn>
<CustomBtn setPage={setPage} currentPage={currentPage}>{Math.max(currentPage-2,1)+1}</CustomBtn>
<CustomBtn setPage={setPage} currentPage={currentPage}>{Math.max(currentPage-2,1)+2}</CustomBtn>
{(maxPages - currentPage) >= 1 && <CustomBtn css={[(Math.max(currentPage-2,1)+3)==maxPages && tw`rounded-r-xl`]} setPage={setPage} currentPage={currentPage}>{Math.max(currentPage-2,1)+3}</CustomBtn>}
{(maxPages - currentPage) >= 2 && <CustomBtn css={[(Math.max(currentPage-2,1)+4)==maxPages && tw`rounded-r-xl`]} tw="rounded-r-xl" setPage={setPage} currentPage={currentPage}>{Math.max(currentPage-2,1)+4}</CustomBtn>}
{(maxPages - currentPage) >= 3 && <CustomBtn css={[tw`rounded-r-xl`]} page={maxPages} setPage={setPage} currentPage={currentPage}>&gt;</CustomBtn>}
</>
}
}
function RenderButtons() {
switch (maxPages) {
case 1:
return <CustomBtn tw="rounded-xl" setPage={setPage} currentPage={currentPage}>1</CustomBtn>;
case 2:
return <>
<CustomBtn tw="rounded-l-xl" setPage={setPage} currentPage={currentPage}>1</CustomBtn>
<CustomBtn tw="rounded-r-xl" setPage={setPage} currentPage={currentPage}>2</CustomBtn>
</>
case 3:
return <>
<CustomBtn tw="rounded-l-xl" setPage={setPage} currentPage={currentPage}>1</CustomBtn>
<CustomBtn setPage={setPage} currentPage={currentPage}>2</CustomBtn>
<CustomBtn tw="rounded-r-xl" setPage={setPage} currentPage={currentPage}>3</CustomBtn>
</>
case 4:
return <>
<CustomBtn tw="rounded-l-xl" setPage={setPage} currentPage={currentPage}>1</CustomBtn>
<CustomBtn setPage={setPage} currentPage={currentPage}>2</CustomBtn>
<CustomBtn setPage={setPage} currentPage={currentPage}>3</CustomBtn>
<CustomBtn tw="rounded-r-xl" setPage={setPage} currentPage={currentPage}>4</CustomBtn>
</>
case 5:
return <>
<CustomBtn tw="rounded-l-xl" setPage={setPage} currentPage={currentPage}>1</CustomBtn>
<CustomBtn setPage={setPage} currentPage={currentPage}>2</CustomBtn>
<CustomBtn setPage={setPage} currentPage={currentPage}>3</CustomBtn>
<CustomBtn setPage={setPage} currentPage={currentPage}>4</CustomBtn>
<CustomBtn tw="rounded-r-xl" setPage={setPage} currentPage={currentPage}>5</CustomBtn>
</>
default: {
return <>
{currentPage > 3 && <CustomBtn css={[tw`rounded-l-xl`]} page={1} setPage={setPage} currentPage={currentPage}>&lt;</CustomBtn>}
<CustomBtn css={[currentPage <= 3 &&tw`rounded-l-xl`]} setPage={setPage} currentPage={currentPage}>{Math.max(currentPage-2,1)}</CustomBtn>
<CustomBtn setPage={setPage} currentPage={currentPage}>{Math.max(currentPage-2,1)+1}</CustomBtn>
<CustomBtn setPage={setPage} currentPage={currentPage}>{Math.max(currentPage-2,1)+2}</CustomBtn>
{(maxPages - currentPage) >= 1 && <CustomBtn css={[(Math.max(currentPage-2,1)+3)==maxPages && tw`rounded-r-xl`]} setPage={setPage} currentPage={currentPage}>{Math.max(currentPage-2,1)+3}</CustomBtn>}
{(maxPages - currentPage) >= 2 && <CustomBtn css={[(Math.max(currentPage-2,1)+4)==maxPages && tw`rounded-r-xl`]} tw="rounded-r-xl" setPage={setPage} currentPage={currentPage}>{Math.max(currentPage-2,1)+4}</CustomBtn>}
{(maxPages - currentPage) >= 3 && <CustomBtn css={[tw`rounded-r-xl`]} page={maxPages} setPage={setPage} currentPage={currentPage}>&gt;</CustomBtn>}
</>
}
return (
<div {...props}>
<RenderButtons />
</div>
)
}
}
return (
<div {...props}>
<RenderButtons />
</div>
)
}

32
Parts/RangeSlider.js
View File

@ -2,25 +2,25 @@ 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 }) {
let ref = useRef(null)
let ref = useRef(null)
useEffect(() => {
if (ref.current) {
ref.current.style.left = (((Math.max(Math.min(value-min, max-min), 0)) * 100) / ((max-min)+2)) + `%`;
}
})
useEffect(() => {
if (ref.current) {
ref.current.style.left = (((Math.max(Math.min(value-min, max-min), 0)) * 100) / ((max-min)+2)) + "%";
}
})
return (
<div tw="flex flex-col py-2" {...props}>
<div className="rs-label w-full" ref={ref}>
{!right ? (rangeType + "" + value) : (value + "" + rangeType)}
</div>
<input type="range" className="rs-range relative range" min={min} max={max} value={value} onChange={({target: {value: radius}})=>onChange(radius)} />
</div>
);
return (
<div tw="flex flex-col py-2" {...props}>
<div className="rs-label w-full" ref={ref}>
{!right ? (rangeType + "" + value) : (value + "" + rangeType)}
</div>
<input type="range" className="rs-range relative range" min={min} max={max} value={value} onChange={({target: {value: radius}})=>onChange(radius)} />
</div>
);
}

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">

24
Parts/Text.js
View File

@ -1,15 +1,15 @@
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() {
return (
<div>
return (
<div>
</div>
)
</div>
)
}
const Divider = styled.hr(tw`my-2 md:min-w-full border-secondary`)
@ -21,12 +21,12 @@ export {DividerGreen}
const ClickableText = styled.button(({ type }) => [
// The common button styles added with the tw import
tw`text-secondary hover:text-primary font-semibold cursor-pointer`,
// The common button styles added with the tw import
tw`text-secondary hover:text-primary font-semibold cursor-pointer`,
// Use props to conditionally style your components
textColors[type], textColorsHover[type]
])
// Use props to conditionally style your components
textColors[type], textColorsHover[type]
])
export {ClickableText}
export default 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 {