@totalsoft/rocket-ui/dist/components/inputs/DynamicField/DynamicField.js

A set of reusable and composable React components built on top of Material UI core for developing fast and friendly web applications interfaces.

import React, { useCallback, useMemo } from 'react';
import PropTypes from 'prop-types';
import { Autocomplete, DateTime, TextField } from '../../index';
import { ControlType } from './types';
import { Checkbox } from '@mui/material';
import { FormControlLabel } from '@mui/material';
import { emptyString } from '../../utils/constants';
/**
 * The DynamicField component is used for rendering controls dynamically
 * when the type (TextField, DateTime) isn't known beforehand
 *
 * It requires a controlType property that can be passed explicitly or dynamically
 * Possible values: Text, Integer, Numeric, Date, Checkbox, Autocomplete, Custom
 *
 * DynamicField also takes as parameters the most common properties for all of the
 * controls, such as value, onChange, disabled, options, etc, and passes them accordingly
 * For Custom rendering, CustomComponent must be defined, and only the properties in
 * customComponentProps will be forwarded
 */
function DynamicField(props) {
    const { controlType, id, value, label, onChange, options, loadOptions, isPaginated, error, helperText, CustomComponent, customComponentProps, ...rest } = props;
    const onCheckboxChange = useCallback((_, checked) => onChange(checked), [onChange]);
    const defaultControl = useMemo(() => React.createElement(TextField, { id: id, value: String(value), label: label, error: error, helperText: helperText, disabled: true }), [id, value, label, error, helperText]);
    const castLoadOptions = loadOptions;
    switch (controlType) {
        case ControlType.Text:
            return (React.createElement(TextField, { id: id, value: value || emptyString, label: label, onChange: onChange, fullWidth: true, error: error, helperText: helperText, ...rest }));
        case ControlType.Integer:
            return (React.createElement(TextField, { id: id, value: value || emptyString, label: label, onChange: onChange, fullWidth: true, error: error, helperText: helperText, ...rest, isNumeric: true, inputProps: { ...props.inputProps, decimalScale: 0, thousandSeparator: false } }));
        case ControlType.Numeric:
            return (React.createElement(TextField, { id: id, value: value || emptyString, label: label, onChange: onChange, fullWidth: true, error: error, helperText: helperText, ...rest, isNumeric: true }));
        case ControlType.Date:
            return (React.createElement(DateTime, { value: value, label: label, onChange: onChange, error: error, helperText: helperText, ...rest }));
        case ControlType.Checkbox:
            return (React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { id: id, onChange: onCheckboxChange, ...rest, checked: Boolean(props.value) }), label: label }));
        case ControlType.Autocomplete:
            return (React.createElement(Autocomplete, { id: id, value: value, label: label, onChange: onChange, options: options, loadOptions: castLoadOptions, fullWidth: true, error: error, helperText: helperText, isPaginated: isPaginated, ...rest }));
        case ControlType.Custom:
            if (CustomComponent)
                return React.createElement(CustomComponent, { ...customComponentProps });
            return defaultControl;
        default:
            return defaultControl;
    }
}
DynamicField.propTypes = {
    /**
     * The type of the control. Can either be one of the predefined below, or 'Custom', in which case CustomComponent needs to be defined
     */
    controlType: PropTypes.oneOf(['Text', 'Integer', 'Numeric', 'Date', 'Checkbox', 'Autocomplete', 'Custom']).isRequired,
    /**
     * The id of the element, passed to the corresponding id property of underlying controls
     */
    id: PropTypes.string,
    /**
     * The value of the element, passed to the corresponding value property (ex. value for TextField, checked for Checkbox) of underlying controls
     */
    value: PropTypes.any,
    /**
     * The label of the element, passed to the corresponding label property of the underlying control
     */
    label: PropTypes.string,
    /**
     * The change handler of the element, passed to the corresponding onChange property of underlying controls
     */
    onChange: PropTypes.func,
    /**
     * Indicates whether the field has an error
     */
    error: PropTypes.bool,
    /**
     * A text or other element indicating the error message
     */
    helperText: PropTypes.string,
    /**
     * Indicates whether the field is required
     */
    required: PropTypes.bool,
    /**
     * Indicates whether the field is read-only
     */
    readOnly: PropTypes.bool,
    /**
     * Indicates whether the field is disabled
     */
    disabled: PropTypes.bool,
    /**
     * Custom component for the input. Requires controlType to be set 'Custom'
     */
    CustomComponent: PropTypes.elementType,
    /**
     * Props that will be passed to the custom component. The CustomComponent property needs to be defined
     */
    customComponentProps: PropTypes.object
};
export default DynamicField;
//# sourceMappingURL=DynamicField.js.map