Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | 110x 110x 110x 110x 110x 110x 1379x 1379x 1379x 1379x 1379x 1379x 1379x 2266x 1379x 110x | import { FieldProps } from 'formik';
import { kebabCase } from 'lodash';
import React, { memo, useCallback, Fragment, FunctionComponent, ReactNode } from 'react';
import BasicFormField from './BasicFormField';
import FormFieldError from './FormFieldError';
import Label from './Label';
export interface FormFieldProps {
additionalClassName?: string;
name: string;
label?: ReactNode | ((fieldName: string) => ReactNode);
labelContent?: ReactNode;
footer?: ReactNode;
input(field: FieldProps<string>): ReactNode;
onChange?(value: string): void;
}
const FormField: FunctionComponent<FormFieldProps> = ({
additionalClassName,
labelContent,
label,
onChange,
footer,
input,
name,
}) => {
const renderField = useCallback(props => (
<Fragment>
{ label && (typeof label === 'function' ? label(name) : label) }
{ labelContent && !label && <Label htmlFor={ name }>
{ labelContent }
</Label> }
{ input(props) }
<FormFieldError
name={ name }
testId={ `${kebabCase(name)}-field-error-message` }
/>
{ footer }
</Fragment>
), [
label,
labelContent,
input,
name,
footer,
]);
return <BasicFormField
additionalClassName={ additionalClassName }
name={ name }
onChange={ onChange }
render={ renderField }
/>;
};
export default memo(FormField);
|