diff --git a/src/components/form/TextField.tsx b/src/components/form/TextField.tsx index b916267c..64ed2920 100644 --- a/src/components/form/TextField.tsx +++ b/src/components/form/TextField.tsx @@ -37,8 +37,11 @@ type BaseTextFieldProps = Omit & { type RepeatTextFieldProps = BaseTextFieldProps & { repeat?: Array>; + 'split' | + 'type' + )> & { + inheritProps?: boolean; + }>; }; export type TextFieldProps< @@ -52,6 +55,94 @@ export type TextFieldProps< } ); +// Internal TextField. +const _TextField: React.FC = ({ + validate, + split, + name, + type = 'text', + InputProps = {}, + onKeyUp, + onBlur, + ...otherTextFieldProps +}) => { + const fieldConfig: FieldConfig = { + name, + type, + validate: async (value) => { + if (validate instanceof Schema) { + try { + validate.validateSync(value); + } catch (error) { + if (error instanceof ValidationError) { + return error.errors[0]; + } + throw error; + } + } else if (validate !== undefined) { + return await validate(value); + } + } + }; + + return ( + + {({ meta, form }: FieldProps) => { + const [showError, setShowError] = React.useState(false); + + let { + endAdornment, + ...otherInputProps + } = InputProps; + + if (showError && + meta.error !== undefined && + meta.error !== '' + ) { + endAdornment = <> + {endAdornment} + + + + + + ; + } + + onKeyUp = wrap({ + after: (event: React.KeyboardEvent) => { + let value: string | string[] = (event.target as HTMLTextAreaElement).value; + if (split !== undefined) value = value.split(split); + form.setFieldValue(name, value, true); + } + }, onKeyUp); + + onBlur = wrap({ + after: () => { setShowError(true); } + }, onBlur); + + return ( + + ); + }} + + ); + }; + interface ITextField { // eslint-disable-next-line @typescript-eslint/prefer-function-type ( @@ -84,93 +175,6 @@ const TextField: ITextField & ITextField = ({ validate = validate.required(); } - // Internal TextField. - const TextField: React.FC = ({ - validate, - split, - name, - type = 'text', - InputProps = {}, - onKeyUp, - onBlur - }) => { - const fieldConfig: FieldConfig = { - name, - type, - validate: async (value) => { - if (validate instanceof Schema) { - try { - validate.validateSync(value); - } catch (error) { - if (error instanceof ValidationError) { - return error.errors[0]; - } - throw error; - } - } else if (validate !== undefined) { - return await validate(value); - } - } - }; - - return ( - - {({ meta, form }: FieldProps) => { - const [showError, setShowError] = React.useState(false); - - let { - endAdornment, - ...otherInputProps - } = InputProps; - - if (showError && - meta.error !== undefined && - meta.error !== '' - ) { - endAdornment = <> - {endAdornment} - - - - - - ; - } - - onKeyUp = wrap({ - after: (event: React.KeyboardEvent) => { - let value: string | string[] = (event.target as HTMLTextAreaElement).value; - if (split !== undefined) value = value.split(split); - form.setFieldValue(name, value, true); - } - }, onKeyUp); - - onBlur = wrap({ - after: () => { setShowError(true); } - }, onBlur); - - return ( - - ); - }} - - ); - }; - if (repeat.length > 0) { onKeyUp = wrap({ after: (event: React.KeyboardEvent) => { @@ -187,19 +191,25 @@ const TextField: ITextField & ITextField = ({ } return <> - - {repeat.map(textFieldProps => - + <_TextField + key={name} + name={name} validate={validateRepeat} - {...otherTextFieldProps} - {...textFieldProps} + type={otherTextFieldProps.type} + {...(inheritProps && otherTextFieldProps)} + {...repeatTextFieldProps} /> )} ;