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

Fixed up checkbox

Browse Source
This commit is contained in:
honzapatCZ 2025-09-26 20:08:56 +02:00
parent 5859820f2e
commit 59aa96507a
1 changed files with 25 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
Parts/Input.tsx
View File

@ -6,8 +6,8 @@ import { IMaskInput, IMaskInputProps, IMaskMixinProps } from 'react-imask';
//const useFormikField = null; //const useFormikField = null;
//const useFormikContext = ()=>{}; //const useFormikContext = ()=>{};
export function useField(props) { export function useField<Val=any>(props) {
let getField = useFormikField; let getField = useFormikField<Val>;
const context = useFormikContext(); const context = useFormikContext();
if (!context) { if (!context) {
getField = (propsOrFieldName: FieldHookConfig<any>) => { getField = (propsOrFieldName: FieldHookConfig<any>) => {
@ -45,8 +45,8 @@ export default function Input(
{/*name={name || title} id={id || name || title}*/} {/*name={name || title} id={id || name || title}*/}
<input <input
id={props.id ?? props.name ?? props.title} id={props.id ?? props.name ?? props.title}
{...otherProps as any}
{...field} {...field}
{...otherProps as any}
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 " 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 "
/> />
{props.children} {props.children}
@ -147,37 +147,41 @@ export function TextArea({
* @param {Object} props... - Additional properties for the checkbox input. * @param {Object} props... - Additional properties for the checkbox input.
* @return {ReactElement} The rendered CheckBox component. * @return {ReactElement} The rendered CheckBox component.
*/ */
export function CheckBox({ export function CheckBox(
label, props: (Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "checked"> | Omit<FieldHookConfig<boolean>, "value">) & {
title, label?: React.ComponentPropsWithoutRef<"label">;
title?: string;
children?: React.ReactNode;
className?: string;
value?: boolean
}
) {
/*name, id*/
const { children, ...otherProps } = props;
children, const [field, meta, helpers] = useField<boolean>(otherProps);
...props
}) {
const [field, meta, helpers] = useField(props);
return ( return (
<div tw="my-1 flex text-secondary"> <div tw="my-1 flex text-secondary">
<input <input
checked={field.value} id={props.id ?? props.name ?? props.title}
{...props} checked={otherProps?.value == undefined ? field.value : otherProps?.value}
{...field} {...field}
{...otherProps as any}
type="checkbox" type="checkbox"
tw="checked:bg-accent w-6 h-6 rounded-full bg-secondary border-secondary border-4 appearance-none cursor-pointer " tw="checked:bg-accent w-6 h-6 rounded-full bg-secondary border-secondary border-4 appearance-none cursor-pointer "
/> />
{title != null ? ( {props.title && (
<label <label
{...label} {...props.label}
css={[tw`block font-bold px-2`, label?.css]} htmlFor={props.id ?? props.name ?? props.title}
css={[tw`block text-secondary text-sm font-bold mb-2`, props.label?.css]}
> >
{title} {/*htmlFor={id ?? name ?? title}*/}
{props.title}
</label> </label>
) : null} )}
{children} {children}
{meta?.touched && meta.error ? (
<div tw="text-[#c23c3c]">{meta.error}</div>
) : null}
</div> </div>
); );
} }