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

do not send empty data

Browse Source
This commit is contained in:
honzapatCZ 2026-08-25 13:28:01 +02:00
parent 99f2115a1c
commit 20ebb1a87a
1 changed files with 38 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
Parts/Input.tsx
View File

@ -23,13 +23,23 @@ export default function Input(
title?: string;
children?: React.ReactNode;
className?: string;
sendEmpty?: boolean;
}
) {
/*name, id*/
let { children, ...otherProps } = props;
let { children, sendEmpty = false, ...otherProps } = props;
const [field, meta, helpers] = useField(otherProps);
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
if (otherProps.onChange) {
otherProps.onChange(e);
return;
}
const val = (!sendEmpty && e.target.value === "") ? null : e.target.value;
field.onChange({ target: { value: val, name: field.name } });
};
return (
<div css={[props.title && tw`my-1`, tw`relative`]} className={props.className}>
{props.title && (
@ -46,6 +56,8 @@ export default function Input(
<input
id={props.id ?? props.name ?? props.title}
{...field}
value={field.value ?? ""}
onChange={handleChange}
{...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 "
/>
@ -65,10 +77,11 @@ export function MaskedInput(
title?: string;
children?: React.ReactNode;
className?: string;
sendEmpty?: boolean;
}
) {
/*name, id*/
let { children, validate, ...otherProps } = props;
let { children, validate, sendEmpty = false, ...otherProps } = props;
const [field, meta, helpers] = useField({ ...otherProps, validate });
@ -88,10 +101,13 @@ export function MaskedInput(
<IMaskInput
//id={props.id ?? props.name ?? props.title}
{...otherProps as any}
value={field.value}
value={field.value ?? ""}
unmask="typed"
onAccept={
(value, mask) => field.onChange({ target: { value, name: field.name } })
(value, mask) => {
const val = (!sendEmpty && value === "") ? null : value;
field.onChange({ target: { value: val, name: field.name } });
}
}
onBlur={field.onBlur}
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 "
@ -108,11 +124,26 @@ export function TextArea({
title,
children = null,
label = null,
sendEmpty = false,
...props
}: {
title?: string;
children?: React.ReactNode;
label?: any;
sendEmpty?: boolean;
[key: string]: any;
}) {
const [field, meta, helpers] = useField(props);
const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
if (props.onChange) {
props.onChange(e);
return;
}
const val = (!sendEmpty && e.target.value === "") ? null : e.target.value;
field.onChange({ target: { value: val, name: field.name } });
};
return (
<div css={[title && tw`my-1`]} >
{title && (
@ -127,6 +158,8 @@ export function TextArea({
<textarea
{...props}
{...field}
value={field.value ?? ""}
onChange={handleChange}
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}