src/components/form-field/form-field.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React from 'react';
   6 import { WrappedFieldProps, WrappedFieldInputProps } from 'redux-form';
   7 import { FormGroup, FormLabel, FormHelperText } from '@material-ui/core';
   8
   9 interface FormFieldCustomProps {
  10     children: <P>(props: WrappedFieldInputProps) => React.ReactElement<P>;
  11     label?: string;
  12     helperText?: string;
  13     required?: boolean;
  14 }
  15
  16 export type FormFieldProps = FormFieldCustomProps & WrappedFieldProps;
  17
  18 export const FormField = ({ children, ...props }: FormFieldProps & WrappedFieldProps) => {
  19     return (
  20         <FormGroup>
  21
  22             <FormLabel
  23                 focused={props.meta.active}
  24                 required={props.required}
  25                 error={props.meta.touched && !!props.meta.error}>
  26                 {props.label}
  27             </FormLabel>
  28
  29             { children(props.input) }
  30
  31             <FormHelperText error={props.meta.touched && !!props.meta.error}>
  32                 {
  33                     props.meta.touched && props.meta.error
  34                         ? props.meta.error
  35                         : props.helperText
  36                 }
  37             </FormHelperText>
  38
  39         </FormGroup>
  40     );
  41 };