mui-dynamic-field/dist/esm/components/DynamicField.js

A dynamic and customizable input field component for React, built with Material UI & TypeScript.

import { FormGroup, FormControlLabel, Checkbox, TextField, FormControl, InputLabel, Select, MenuItem, FormHelperText } from '@mui/material';
import PasswordInput from './PasswordInput.js';
import AutocompleteSelect from './AutocompleteSelect.js';
import { MuiFileUploader as FileUploader } from '../node_modules/mui-file-uploader/dist/mui-file-uploader.js';
import MultiSelect from './MultiSelect/index.js';
import PhoneNumberInput from './PhoneNumberInput.js';
import { formatDateToISOString } from '../utils/helper.js';
import { REGEX } from '../constants.js';
import { jsx, jsxs } from 'react/jsx-runtime';

const DynamicField = ({
  item,
  itemData,
  error,
  errorText,
  color = "primary",
  disabled,
  value,
  onChange,
  size = "medium",
  sx,
  onError,
  getLocalizedText
}) => {
  const {
    placeholder: _placeholder,
    isOptional,
    _key,
    fieldType,
    overRideValues = {},
    maxLength,
    multiple,
    countryCodeField,
    extraProps = {},
    extraData = []
  } = item;
  const {
    slotProps = {},
    ...restProps
  } = {
    ...(extraProps ?? {})
  };
  const onChangeValue = ({
    target
  }) => {
    handleChange({
      value: target.value,
      _key
    });
  };
  const handleChange = data => {
    if (maxLength && data?.value?.length > maxLength) {
      return;
    }
    if (onChange) onChange({
      overRideValues,
      maxLength,
      value: data.value,
      _key: data._key,
      textValue: data.textValue
    });
  };
  const placeholder = _placeholder ? (getLocalizedText?.(_placeholder) || _placeholder) + (isOptional ? "" : "*") : "";
  switch (fieldType) {
    case "text":
      return /*#__PURE__*/jsx(TextField, {
        fullWidth: true,
        color: color,
        error: error,
        helperText: errorText,
        label: placeholder,
        name: _key,
        disabled: disabled,
        variant: "outlined",
        value: value ?? "",
        onChange: onChangeValue,
        size: size,
        sx: sx,
        ...extraProps
      });
    case "password":
      return /*#__PURE__*/jsx(PasswordInput, {
        fullWidth: true,
        color: color,
        error: error,
        helperText: errorText,
        label: placeholder,
        name: _key,
        disabled: disabled,
        variant: "outlined",
        value: value ?? "",
        onChange: onChangeValue,
        size: size,
        sx: sx,
        ...extraProps
      });
    case "dropdown":
      return /*#__PURE__*/jsxs(FormControl, {
        size: size,
        disabled: disabled,
        error: error,
        color: color,
        fullWidth: true,
        children: [/*#__PURE__*/jsx(InputLabel, {
          id: _key,
          ...(slotProps?.inputLabel || {}),
          children: placeholder
        }), /*#__PURE__*/jsx(Select, {
          labelId: _key,
          name: _key,
          label: placeholder,
          value: value ?? "",
          MenuProps: {
            PaperProps: {
              sx: {
                maxHeight: 300
              }
            }
          },
          onChange: onChangeValue,
          sx: sx,
          slotProps: slotProps,
          children: extraData?.map((_item, index) => /*#__PURE__*/jsx(MenuItem, {
            sx: {
              textTransform: "capitalize"
            },
            value: _item?.value ?? _item?.id ?? _item,
            children: _item?.label || _item?.name || _item
          }, index))
        }), !!errorText && /*#__PURE__*/jsx(FormHelperText, {
          error: error,
          children: errorText
        })]
      });
    case "number":
      return /*#__PURE__*/jsx(TextField, {
        fullWidth: true,
        color: color,
        error: error,
        helperText: errorText,
        label: placeholder,
        name: _key,
        disabled: disabled,
        variant: "outlined",
        type: "tel",
        value: value ?? "",
        onChange: e => {
          if (e.target.value.match(REGEX.NUMBERS.pattern)) {
            return e.preventDefault();
          }
          handleChange({
            _key,
            value: e.target.value
          });
        },
        size: size,
        onWheel: event => event.currentTarget.blur(),
        ...extraProps
      });
    case "textarea":
      return /*#__PURE__*/jsx(TextField, {
        fullWidth: true,
        multiline: !disabled,
        minRows: 1,
        maxRows: 10,
        error: error,
        color: color,
        helperText: errorText,
        label: placeholder,
        name: _key,
        variant: "outlined",
        value: value ?? "",
        disabled: disabled,
        onChange: onChangeValue,
        sx: sx,
        ...extraProps
      });
    case "date":
      return /*#__PURE__*/jsx(TextField, {
        fullWidth: true,
        color: color,
        error: error,
        helperText: errorText,
        label: placeholder,
        name: _key,
        disabled: disabled,
        variant: "outlined",
        type: "date",
        value: value ? formatDateToISOString(value.toString()) : "",
        onChange: onChangeValue,
        size: size,
        sx: sx,
        slotProps: {
          inputLabel: {
            shrink: true
          },
          ...slotProps
        },
        ...restProps
      });
    case "time":
      return /*#__PURE__*/jsx(TextField, {
        fullWidth: true,
        color: color,
        error: error,
        helperText: errorText,
        label: placeholder,
        name: _key,
        disabled: disabled,
        variant: "outlined",
        type: "time",
        value: value ?? "",
        onChange: onChangeValue,
        size: size,
        sx: sx,
        slotProps: {
          inputLabel: {
            shrink: true
          },
          ...slotProps
        },
        ...restProps
      });
    case "datetime":
      return /*#__PURE__*/jsx(TextField, {
        fullWidth: true,
        color: color,
        error: error,
        helperText: errorText,
        label: placeholder,
        name: _key,
        disabled: disabled,
        variant: "outlined",
        type: "datetime-local",
        value: value ? formatDateToISOString(value.toString(), true) : "",
        onChange: onChangeValue,
        size: size,
        sx: sx,
        slotProps: {
          inputLabel: {
            shrink: true
          },
          ...slotProps
        },
        ...restProps
      });
    case "autocomplete":
      return /*#__PURE__*/jsx(AutocompleteSelect, {
        ...item,
        fullWidth: true,
        color: color,
        error: error,
        errorText: errorText,
        placeholder: placeholder,
        name: _key,
        disabled: disabled,
        variant: "outlined",
        value: value ?? "",
        onChange: handleChange,
        size: size,
        sx: sx,
        _key: _key,
        fieldType: fieldType
      });
    case "checkbox":
      {
        const {
          labelProps,
          checkboxProps
        } = extraProps;
        return /*#__PURE__*/jsx(FormGroup, {
          children: /*#__PURE__*/jsx(FormControlLabel, {
            control: /*#__PURE__*/jsx(Checkbox, {
              checked: !!value,
              onChange: () => handleChange({
                _key,
                value: !value
              }),
              ...checkboxProps
            }),
            label: getLocalizedText?.(_placeholder || "") || _placeholder,
            name: _key,
            disabled: disabled,
            sx: sx,
            ...labelProps
          })
        });
      }
    case "file":
      return /*#__PURE__*/jsx(FileUploader, {
        ...item,
        size: size,
        name: _key,
        label: placeholder,
        files: value ? Array.isArray(value) ? value : [value] : [],
        onChange: value => handleChange({
          _key,
          value
        }),
        onError: onError,
        disabled: disabled,
        multiple: multiple,
        getLocalizedText: getLocalizedText,
        error: errorText,
        isOptional: isOptional,
        extraProps: extraProps
      });
    case "multiselect":
      return /*#__PURE__*/jsx(MultiSelect, {
        ...item,
        sx: sx,
        fullWidth: true,
        multiline: !disabled,
        error: error,
        errorText: errorText,
        color: color,
        placeholder: placeholder,
        variant: "outlined",
        value: value ?? [],
        disabled: disabled,
        onChange: onChange,
        extraData: extraData,
        size: size
      });
    case "phone":
      return /*#__PURE__*/jsx(PhoneNumberInput, {
        fullWidth: true,
        color: color,
        error: error,
        helperText: errorText,
        label: placeholder,
        name: _key,
        disabled: disabled,
        variant: "outlined",
        value: value ?? "",
        handleChange: handleChange,
        size: size,
        sx: sx,
        countryCode: itemData && item.countryCodeField ? itemData[item.countryCodeField] : "",
        countryCodeField: countryCodeField,
        ...extraProps
      });
    default:
      return null;
  }
};

export { DynamicField as default };
//# sourceMappingURL=DynamicField.js.map