formsy-semantic-ui-react/dist/index.js

Formsy-React wrappers for Semantic-Ui-React's form Components

import { jsx, jsxs } from "react/jsx-runtime";
import formsy_react, { withFormsy } from "formsy-react";
import hoist_non_react_statics from "hoist-non-react-statics";
import react, { Children, Component, cloneElement, createElement, isValidElement } from "react";
import { Checkbox, Dropdown, Form, Input, Radio, Select, TextArea } from "semantic-ui-react";
const removeProps = [
    'as',
    'attachToForm',
    'defaultChecked',
    'defaultSelected',
    'defaultValue',
    'detachFromForm',
    'error',
    'errorLabel',
    'errorMessage',
    'errorMessages',
    'formRadioGroup',
    'hasValue',
    'inline',
    'innerRef',
    'inputAs',
    'inputClassName',
    'instantValidation',
    'isFormDisabled',
    'isFormSubmitted',
    'isPristine',
    'isRequired',
    'isValid',
    'isValidValue',
    'label',
    'passRequiredToField',
    'resetValue',
    'rootClassName',
    'rootElement',
    'rootStyle',
    'runValidation',
    'setValidations',
    'setValue',
    'showError',
    'showRequired',
    'validate',
    'validationError',
    'validationErrors',
    'validations',
    'value',
    'width'
];
function filterSuirElementProps(props) {
    return Object.fromEntries(Object.keys(props).filter((prop)=>!removeProps.includes(prop)).map((prop)=>[
            prop,
            props[prop]
        ]));
}
class FormsyCheckbox extends Component {
    componentDidMount() {
        const { defaultChecked, setValue } = this.props;
        setValue(!!defaultChecked, false);
    }
    handleChange = (e, data)=>{
        const { checked } = data;
        this.props.setValue(checked);
        if (this.props.onChange) this.props.onChange(e, data);
    };
    render() {
        const { inputAs = Checkbox, required, isValid, isPristine, errorLabel, errorMessage, value, as, width, className, disabled, inline, passRequiredToField } = this.props;
        const error = !isPristine && !isValid;
        const checkboxProps = {
            ...filterSuirElementProps(this.props),
            label: this.props.label,
            checked: !!value,
            onChange: this.handleChange
        };
        if (inputAs === Checkbox || inputAs === Radio) checkboxProps.error = void 0;
        return /*#__PURE__*/ jsxs(Form.Field, {
            as: as,
            className: className,
            required: required && passRequiredToField,
            error: error,
            width: width,
            inline: inline,
            disabled: disabled,
            children: [
                /*#__PURE__*/ createElement(inputAs, {
                    ...checkboxProps
                }),
                error && errorLabel && /*#__PURE__*/ cloneElement(errorLabel, {}, errorMessage)
            ]
        });
    }
}
const src_FormsyCheckbox = withFormsy(FormsyCheckbox);
class FormsyDropdown extends Component {
    state = {
        allowError: false
    };
    componentDidMount() {
        const { defaultValue, setValue } = this.props;
        if (defaultValue) setValue(defaultValue);
    }
    componentDidUpdate(prevProps) {
        if (prevProps.isFormSubmitted !== this.props.isFormSubmitted && this.props.isFormSubmitted) this.showError();
    }
    handleChange = (e, data)=>{
        const { multiple, value, setValue, onChange, name } = this.props;
        if (multiple && Array.isArray(value) && Array.isArray(data.value) && value.length > data.value.length) this.showError();
        setValue(data.value);
        if (onChange) onChange(e, {
            ...data,
            name
        });
    };
    handleBlur = (e, data)=>{
        const { onBlur } = this.props;
        if (onBlur) onBlur(e, data);
    };
    handleClose = ()=>this.showError();
    showError = ()=>this.setState({
            allowError: true
        });
    render() {
        const { inputAs = Dropdown, id, required, label, value, defaultValue, multiple, errorLabel, errorMessage, isValid, isPristine, as, width, className, disabled, inline, passRequiredToField = true } = this.props;
        const shortHandMode = inputAs === Form.Dropdown || inputAs === Form.Select;
        const error = !isPristine && !isValid && this.state.allowError;
        const dropdownProps = {
            ...filterSuirElementProps(this.props),
            onChange: this.handleChange,
            onBlur: this.handleBlur,
            onClose: this.handleClose,
            value: value || defaultValue || multiple && [] || '',
            error: !disabled && error,
            id,
            name: void 0
        };
        const dropdownNode = shortHandMode ? /*#__PURE__*/ createElement(inputAs, dropdownProps).props.control : inputAs;
        return /*#__PURE__*/ jsxs(Form.Field, {
            as: as,
            className: className,
            required: required && passRequiredToField,
            error: !disabled && error,
            width: width,
            inline: inline,
            disabled: disabled,
            children: [
                shortHandMode && label && /*#__PURE__*/ jsx("label", {
                    htmlFor: id,
                    children: label
                }),
                /*#__PURE__*/ createElement(dropdownNode, {
                    ...dropdownProps
                }),
                error && errorLabel && /*#__PURE__*/ cloneElement(errorLabel, {}, errorMessage)
            ]
        });
    }
}
const src_FormsyDropdown = withFormsy(FormsyDropdown);
class FormsyInput extends Component {
    state = {
        allowError: false
    };
    componentDidMount() {
        const { defaultValue, setValue } = this.props;
        if (defaultValue) setValue(defaultValue);
    }
    componentDidUpdate(prevProps) {
        if (prevProps.isFormSubmitted !== this.props.isFormSubmitted && this.props.isFormSubmitted) this.showError();
    }
    handleChange = (e, data)=>{
        const { value } = data;
        this.props.setValue(value);
        if (this.props.onChange) this.props.onChange(e, data);
        if (this.props.instantValidation) this.showError();
    };
    handleBlur = (e, data)=>{
        this.showError();
        if (this.props.onBlur) this.props.onBlur(e, data);
    };
    showError = ()=>this.setState({
            allowError: true
        });
    render() {
        const { id, inputAs = Input, inputClassName, required, label, defaultValue, value, isValid, isPristine, errorMessage, errorLabel, as, width, className, disabled, inline, passRequiredToField = true } = this.props;
        const { allowError } = this.state;
        const error = !isPristine && !isValid && allowError;
        const inputProps = {
            ...filterSuirElementProps(this.props),
            value: value || isPristine && defaultValue || '',
            onChange: this.handleChange,
            onBlur: this.handleBlur,
            className: inputClassName,
            error: !disabled && error,
            label,
            id
        };
        const isFormField = inputAs === Form.Input || inputAs === Form.TextArea;
        const inputNode = isFormField ? /*#__PURE__*/ createElement(inputAs).props.control : inputAs;
        if (isFormField) {
            inputProps.label = void 0;
            if (inputAs === Form.TextArea) inputProps.error = void 0;
        }
        const inputElement = !isFormField && /*#__PURE__*/ isValidElement(inputAs) ? /*#__PURE__*/ cloneElement(inputAs, {
            ...inputProps,
            ...inputAs.props
        }) : /*#__PURE__*/ createElement(inputNode, {
            ...inputProps
        });
        const shouldShowFormLabel = isFormField || /*#__PURE__*/ isValidElement(inputAs);
        return /*#__PURE__*/ jsxs(Form.Field, {
            as: as,
            className: className,
            required: required && passRequiredToField,
            error: !disabled && error,
            width: width,
            inline: inline,
            disabled: disabled,
            children: [
                shouldShowFormLabel && label && /*#__PURE__*/ jsx("label", {
                    htmlFor: id,
                    children: label
                }),
                inputElement,
                !disabled && error && errorLabel && /*#__PURE__*/ cloneElement(errorLabel, {}, errorMessage)
            ]
        });
    }
}
const src_FormsyInput = withFormsy(FormsyInput);
class FormsyRadioGroup extends Component {
    componentDidMount() {
        const { defaultSelected, setValue } = this.props;
        if (defaultSelected) setValue(defaultSelected);
    }
    handleChange = (e, data)=>{
        const { value } = data;
        this.props.setValue(value);
        if (this.props.onChange) this.props.onChange(e, data);
    };
    render() {
        const { as, label, required, children, name, value, errorLabel, isValid, isPristine, errorMessage, passRequiredToField = true, disabled, className, unstackable, inline = true, width } = this.props;
        const error = !isPristine && !isValid;
        const formGroupProps = {
            as,
            className,
            unstackable,
            inline,
            grouped: !inline
        };
        const labelProps = {
            required: required && passRequiredToField,
            error: !disabled && error,
            label,
            disabled
        };
        const fieldProps = {
            width,
            error: !disabled && error
        };
        return /*#__PURE__*/ jsxs(Form.Group, {
            ...formGroupProps,
            children: [
                label && /*#__PURE__*/ jsx(Form.Field, {
                    ...labelProps
                }),
                Children.map(children, (radio)=>{
                    if (!radio) return null;
                    const props = {
                        name,
                        checked: value === radio.props.value,
                        onChange: this.handleChange,
                        disabled
                    };
                    return /*#__PURE__*/ jsx(Form.Field, {
                        ...fieldProps,
                        children: /*#__PURE__*/ cloneElement(radio, {
                            ...props
                        })
                    });
                }),
                error && errorLabel && /*#__PURE__*/ cloneElement(errorLabel, {}, errorMessage)
            ]
        });
    }
}
const src_FormsyRadioGroup = withFormsy(FormsyRadioGroup);
const FormsySelect = (props)=>/*#__PURE__*/ jsx(src_FormsyDropdown, {
        inputAs: Select,
        ...props
    });
const FormsyTextArea = (props)=>/*#__PURE__*/ jsx(src_FormsyInput, {
        inputAs: TextArea,
        ...props
    });
class Form_Form extends Component {
    static Button = Form.Button;
    static Radio = Form.Radio;
    static Field = Form.Field;
    static Group = Form.Group;
    static Checkbox = src_FormsyCheckbox;
    static Input = (props)=>/*#__PURE__*/ jsx(src_FormsyInput, {
            inputAs: Form.Input,
            ...props
        });
    static TextArea = (props)=>/*#__PURE__*/ jsx(FormsyTextArea, {
            inputAs: Form.TextArea,
            ...props
        });
    static Select = (props)=>/*#__PURE__*/ jsx(FormsySelect, {
            inputAs: Form.Select,
            ...props
        });
    static RadioGroup = (props)=>/*#__PURE__*/ jsx(src_FormsyRadioGroup, {
            ...props
        });
    static Dropdown = (props)=>/*#__PURE__*/ jsx(src_FormsyDropdown, {
            inputAs: Form.Dropdown,
            ...props
        });
    render() {
        const { children } = this.props;
        const { mapping, validationErrors, onValid, onValidSubmit, onInvalid, onInvalidSubmit, onChange, preventExternalInvalidation, onError, onSubmit, forwardedRef, ...nonFormsyReactFormProps } = this.props;
        const { as = 'div', error, inverted, loading, reply, size, success, warning, widths, forwardedRef: _forwardedRef, className, ...nonSemanticUIFormProps } = this.props;
        return /*#__PURE__*/ jsx(formsy_react, {
            noValidate: true,
            ref: forwardedRef,
            onSubmit: onSubmit,
            ...nonSemanticUIFormProps,
            children: /*#__PURE__*/ jsx(Form, {
                as: as,
                ...nonFormsyReactFormProps,
                children: children
            })
        });
    }
}
const src_Form = hoist_non_react_statics(/*#__PURE__*/ react.forwardRef((props, ref)=>/*#__PURE__*/ jsx(Form_Form, {
        ...props,
        forwardedRef: ref
    })), Form_Form);
const FormsyRadio = (props)=>/*#__PURE__*/ jsx(src_FormsyCheckbox, {
        inputAs: Radio,
        ...props
    });
export { FormsyRadio as Radio, FormsySelect as Select, FormsyTextArea as TextArea, src_Form as Form, src_FormsyCheckbox as Checkbox, src_FormsyDropdown as Dropdown, src_FormsyInput as Input, src_FormsyRadioGroup as RadioGroup };