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

Compare commits

base: Nejcraft:3eb417f83a977a7cef40f04e99cc97f371671929
Branches Tags
Nejcraft:master
Nejcraft:astro
...
compare: Nejcraft:46f43159cd6541766c6babba428008c0b8401add
Branches Tags
Nejcraft:master
Nejcraft:astro

2 Commits
3eb417f83a ... 46f43159cd

Author SHA1 Message Date
honzapatCZ
46f43159cd mrege 2024-09-14 18:38:18 +02:00
honzapatCZ
d72f46721b accounting table changes 2024-09-14 18:36:31 +02:00
2 changed files with 27 additions and 10 deletions
Show Stats Expand all files Collapse all files

24
Parts/Input.js
View File

@ -1,7 +1,6 @@
import React from "react";
import tw, { styled } from "twin.macro";
;
//import { useField as useFormikField, useFormikContext } from "formik";
const useFormikField = null;
const useFormikContext = ()=>{};
@ -17,13 +16,14 @@ export function useField(props){
return getField(props);
}
export default function Input({ label, title, children, ...props }) {
export default function Input({ label, title, children, className, ...props }) {
/*name, id*/
props.id = props.id ?? props.name ?? title;
const [field, meta, helpers] = useField(props);
return (
<div css={[title && tw`my-1`]} >
<div css={[title && tw`my-1`, tw`relative`]} className={className}>
{title && (
<label
{...label}
@ -35,8 +35,8 @@ export default function Input({ label, title, children, ...props }) {
)}
{/*name={name || title} id={id || name || title}*/}
<input
{...field}
{...props}
{...field}
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}
@ -78,7 +78,17 @@ export function TextArea({
</div>
);
}
/**
* Renders a checkbox input with optional label and error message.
*
* @param {Object} props - The properties for the CheckBox component.
* @param {string} props.label - The label for the checkbox.
* @param {string} props.title - The title for the checkbox.
* @param {string} props.className - The class name for the container div.
* @param {ReactNode} props.children - The children components.
* @param {Object} props... - Additional properties for the checkbox input.
* @return {ReactElement} The rendered CheckBox component.
*/
export function CheckBox({
label,
title,
@ -92,6 +102,7 @@ export function CheckBox({
return (
<div tw="my-1 flex text-secondary">
<input
checked={field.value}
{...props}
{...field}
type="checkbox"
@ -106,6 +117,9 @@ export function CheckBox({
</label>
) : null}
{children}
{meta?.touched && meta.error ? (
<div tw="text-[#c23c3c]">{meta.error}</div>
) : null}
</div>
);
}

9
Parts/Table.js
View File

@ -11,15 +11,18 @@ export function Table(props) {
}
const TablePart = styled.td(tw`border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4`)
const TablePart = styled.td(tw`border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs p-4`)
export {TablePart}
const TableHeader = styled.th(tw`px-6 py-3 align-middle text-xs uppercase whitespace-nowrap font-bold text-left text-secondary border-b-2 border-secondary`)
const TableRow = styled.tr(tw`odd:bg-black/10 hover:bg-black/15`)
export {TableRow}
const TableHeader = styled.th(tw`px-6 py-3 align-middle text-xs uppercase font-bold text-left text-secondary border-b-2 border-secondary`)
export {TableHeader}
const TableNote = styled.p(tw`text-xs font-normal italic normal-case`)
export {TableNote}
const TableSidePart = styled.td(tw`border-t-0 px-8 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 pl-6 py-3 align-middle text-xs uppercase whitespace-nowrap font-bold text-left w-1/3 text-secondary border-r-2 border-secondary`)
const TableSidePart = styled.td(tw`border-t-0 px-8 align-middle border-l-0 border-r-0 text-xs p-4 pl-6 py-3 align-middle text-xs uppercase whitespace-nowrap font-bold text-left w-1/3 text-secondary border-r-2 border-secondary`)
export {TableSidePart}