change props children in input

This commit is contained in:
honzapatCZ 2025-03-31 11:24:49 +02:00
parent f082308d5d
commit b46be19a22

View File

@ -5,11 +5,11 @@ import { useField as useFormikField, useFormikContext, FieldHookConfig } from "f
//const useFormikField = null; //const useFormikField = null;
//const useFormikContext = ()=>{}; //const useFormikContext = ()=>{};
export function useField(props){ export function useField(props) {
let getField = useFormikField; let getField = useFormikField;
const context = useFormikContext(); const context = useFormikContext();
if(!context){ if (!context) {
getField = (propsOrFieldName: FieldHookConfig<any>)=>{ getField = (propsOrFieldName: FieldHookConfig<any>) => {
return [props, null, null]; return [props, null, null];
} }
} }
@ -25,8 +25,9 @@ export default function Input(
} }
) { ) {
/*name, id*/ /*name, id*/
let { children, ...otherProps } = props;
const [field, meta, helpers] = useField(props); const [field, meta, helpers] = useField(otherProps);
return ( return (
<div css={[props.title && tw`my-1`, tw`relative`]} className={props.className}> <div css={[props.title && tw`my-1`, tw`relative`]} className={props.className}>
@ -43,7 +44,7 @@ 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}
{...props} {...otherProps}
{...field} {...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 " 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 "
/> />
@ -69,7 +70,7 @@ export function TextArea({
<label <label
{...label} {...label}
css={[tw`block text-secondary text-sm font-bold mb-2`, label?.css]} css={[tw`block text-secondary text-sm font-bold mb-2`, label?.css]}
> >
{title} {title}
</label> </label>
@ -100,12 +101,12 @@ export function TextArea({
export function CheckBox({ export function CheckBox({
label, label,
title, title,
children, children,
...props ...props
}) { }) {
const [field, meta, helpers] = useField(props); const [field, meta, helpers] = useField(props);
return ( return (
<div tw="my-1 flex text-secondary"> <div tw="my-1 flex text-secondary">