formik#FieldAttributes TypeScript Examples

function FormikDialog<RowData extends IData>({
  children,
  onEditingCanceled,
  validate,
  onEditingApproved,
  validationSchema,
  mode,
  editField: EditCell,
  displayField: DisplayCell,
  dialogLocalization,
  dateTimePickerLocalization,
  ...props
}: IFormikDialogProps<RowData>) {
  const { localization, data, columns } = props;

  const mounted = useRef(false);

  useEffect(() => {
    mounted.current = true;
    return () => {
      mounted.current = false;
    };
  }, []);

  const initialValues = React.useMemo(
    () => (data ? { ...data } : ({} as RowData)),
    [data]
  );

  const closeDialog = () => {
    onEditingCanceled(mode, data);
  };

  let title;
  switch (mode) {
    case 'add':
      title = dialogLocalization.addTooltip;
      break;
    case 'update':
      title = dialogLocalization.editTooltip;
      break;
    case 'delete':
      title = dialogLocalization.deleteHeader;
      break;
  }
  const getEditCell = (
    column: IColumn<RowData>,
    field: FieldInputProps<RowData>,
    meta: FieldMetaProps<RowData>,
    setValues: (rowData: RowData) => void
  ) => {
    if (!canEdit(column, mode, data)) {
      if (column.render && data) {
        return column.render(data, 'row');
      } else {
        return <div>{field.value}</div>;
      }
    }
    const onChange = (newValue: string | number | boolean) =>
      field.onChange({
        target: {
          value: newValue,
          checked: newValue,
          name: field.name,
        },
      });
    const onRowDataChange = (newRowData: Partial<RowData>) => {
      if (data) {
        setValues({
          ...data,
          ...newRowData,
        });
      }
    };
    const errorProps: {
      helperText?: string;
      error: boolean;
    } = {
      helperText: meta.touched ? meta.error : '',
      error: Boolean(meta.touched && meta.error !== undefined),
    };
    if (column.editComponent) {
      return column.editComponent({
        rowData: data || ({} as RowData),
        value: field.value,
        onChange,
        onRowDataChange,
        columnDef: (column as any) as EditCellColumnDef,
        ...errorProps,
      });
    } else {
      return (
        <EditCell
          variant="standard"
          {...field}
          {...errorProps}
          locale={dateTimePickerLocalization}
          fullWidth={true}
          id={column.field}
          columnDef={column}
          onChange={onChange}
          rowData={data}
        />
      );
    }
  };
  return (
    <>
      <Dialog onClose={closeDialog} open={true} fullWidth={true}>
        <DialogTitle id="simple-dialog-title">{title}</DialogTitle>
        <Formik
          validationSchema={validationSchema}
          initialValues={initialValues}
          validate={validate}
          onSubmit={async (values, { setSubmitting }) => {
            setSubmitting(true);
            delete values.tableData;
            await onEditingApproved(mode, values, data);
            if (mounted && mounted.current) {
              setSubmitting(false);
            }
          }}
        >
          {({ isSubmitting, handleSubmit, setValues }) => (
            <form onSubmit={handleSubmit}>
              <DialogContent>
                <Grid container={true}>
                  {mode !== 'delete' &&
                    columns
                      .filter(column => isColumnVisible(column, mode))
                      .map(column => (
                        <Field key={column.field} name={column.field}>
                          {({ field, meta }: FieldAttributes<any>) => {
                            return (
                              <Grid
                                item={true}
                                xs={12}
                                {...column.gridProps}
                                sx={{ p: 1, ...(column.gridProps?.sx ?? {}) }}
                              >
                                <label htmlFor={column.field as string}>
                                  {column.title}
                                </label>
                                <br />
                                {getEditCell(column, field, meta, setValues)}
                              </Grid>
                            );
                          }}
                        </Field>
                      ))}
                </Grid>
                {mode === 'delete' && (
                  <DialogContentText>
                    {localization.deleteText}
                  </DialogContentText>
                )}
                <DialogActions>
                  {isSubmitting ? (
                    <CircularProgress size={25} />
                  ) : (
                    <>
                      <Button onClick={closeDialog} color="primary">
                        {localization.cancelTooltip}
                      </Button>
                      <Button
                        color="primary"
                        autoFocus={true}
                        type="submit"
                        disabled={isSubmitting}
                      >
                        {mode !== 'delete'
                          ? localization.saveTooltip
                          : dialogLocalization.deleteAction}
                      </Button>
                    </>
                  )}
                </DialogActions>
              </DialogContent>
            </form>
          )}
        </Formik>
      </Dialog>
      {data && (
        <MTableBodyRow {...props} onToggleDetailPanel={() => {}}>
          {children}
        </MTableBodyRow>
      )}
    </>
  );
}