formsy-semantic-ui-react
Version:
Formsy-React wrappers for Semantic-Ui-React's form Components
411 lines (410 loc) • 17.7 kB
JavaScript
;
var __webpack_require__ = {};
(()=>{
__webpack_require__.n = (module)=>{
var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
__webpack_require__.d(getter, {
a: getter
});
return getter;
};
})();
(()=>{
__webpack_require__.d = (exports1, definition)=>{
for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
enumerable: true,
get: definition[key]
});
};
})();
(()=>{
__webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
})();
(()=>{
__webpack_require__.r = (exports1)=>{
if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
value: 'Module'
});
Object.defineProperty(exports1, '__esModule', {
value: true
});
};
})();
var __webpack_exports__ = {};
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, {
Dropdown: ()=>src_FormsyDropdown,
Radio: ()=>FormsyRadio,
Checkbox: ()=>src_FormsyCheckbox,
Select: ()=>FormsySelect,
TextArea: ()=>FormsyTextArea,
Input: ()=>src_FormsyInput,
Form: ()=>src_Form,
RadioGroup: ()=>src_FormsyRadioGroup
});
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
const external_formsy_react_namespaceObject = require("formsy-react");
var external_formsy_react_default = /*#__PURE__*/ __webpack_require__.n(external_formsy_react_namespaceObject);
const external_hoist_non_react_statics_namespaceObject = require("hoist-non-react-statics");
var external_hoist_non_react_statics_default = /*#__PURE__*/ __webpack_require__.n(external_hoist_non_react_statics_namespaceObject);
const external_react_namespaceObject = require("react");
var external_react_default = /*#__PURE__*/ __webpack_require__.n(external_react_namespaceObject);
const external_semantic_ui_react_namespaceObject = require("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 external_react_namespaceObject.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 = external_semantic_ui_react_namespaceObject.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 === external_semantic_ui_react_namespaceObject.Checkbox || inputAs === external_semantic_ui_react_namespaceObject.Radio) checkboxProps.error = void 0;
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_semantic_ui_react_namespaceObject.Form.Field, {
as: as,
className: className,
required: required && passRequiredToField,
error: error,
width: width,
inline: inline,
disabled: disabled,
children: [
/*#__PURE__*/ (0, external_react_namespaceObject.createElement)(inputAs, {
...checkboxProps
}),
error && errorLabel && /*#__PURE__*/ (0, external_react_namespaceObject.cloneElement)(errorLabel, {}, errorMessage)
]
});
}
}
const src_FormsyCheckbox = (0, external_formsy_react_namespaceObject.withFormsy)(FormsyCheckbox);
class FormsyDropdown extends external_react_namespaceObject.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 = external_semantic_ui_react_namespaceObject.Dropdown, id, required, label, value, defaultValue, multiple, errorLabel, errorMessage, isValid, isPristine, as, width, className, disabled, inline, passRequiredToField = true } = this.props;
const shortHandMode = inputAs === external_semantic_ui_react_namespaceObject.Form.Dropdown || inputAs === external_semantic_ui_react_namespaceObject.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__*/ (0, external_react_namespaceObject.createElement)(inputAs, dropdownProps).props.control : inputAs;
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_semantic_ui_react_namespaceObject.Form.Field, {
as: as,
className: className,
required: required && passRequiredToField,
error: !disabled && error,
width: width,
inline: inline,
disabled: disabled,
children: [
shortHandMode && label && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("label", {
htmlFor: id,
children: label
}),
/*#__PURE__*/ (0, external_react_namespaceObject.createElement)(dropdownNode, {
...dropdownProps
}),
error && errorLabel && /*#__PURE__*/ (0, external_react_namespaceObject.cloneElement)(errorLabel, {}, errorMessage)
]
});
}
}
const src_FormsyDropdown = (0, external_formsy_react_namespaceObject.withFormsy)(FormsyDropdown);
class FormsyInput extends external_react_namespaceObject.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 = external_semantic_ui_react_namespaceObject.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 === external_semantic_ui_react_namespaceObject.Form.Input || inputAs === external_semantic_ui_react_namespaceObject.Form.TextArea;
const inputNode = isFormField ? /*#__PURE__*/ (0, external_react_namespaceObject.createElement)(inputAs).props.control : inputAs;
if (isFormField) {
inputProps.label = void 0;
if (inputAs === external_semantic_ui_react_namespaceObject.Form.TextArea) inputProps.error = void 0;
}
const inputElement = !isFormField && /*#__PURE__*/ (0, external_react_namespaceObject.isValidElement)(inputAs) ? /*#__PURE__*/ (0, external_react_namespaceObject.cloneElement)(inputAs, {
...inputProps,
...inputAs.props
}) : /*#__PURE__*/ (0, external_react_namespaceObject.createElement)(inputNode, {
...inputProps
});
const shouldShowFormLabel = isFormField || /*#__PURE__*/ (0, external_react_namespaceObject.isValidElement)(inputAs);
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_semantic_ui_react_namespaceObject.Form.Field, {
as: as,
className: className,
required: required && passRequiredToField,
error: !disabled && error,
width: width,
inline: inline,
disabled: disabled,
children: [
shouldShowFormLabel && label && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("label", {
htmlFor: id,
children: label
}),
inputElement,
!disabled && error && errorLabel && /*#__PURE__*/ (0, external_react_namespaceObject.cloneElement)(errorLabel, {}, errorMessage)
]
});
}
}
const src_FormsyInput = (0, external_formsy_react_namespaceObject.withFormsy)(FormsyInput);
class FormsyRadioGroup extends external_react_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_semantic_ui_react_namespaceObject.Form.Group, {
...formGroupProps,
children: [
label && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_semantic_ui_react_namespaceObject.Form.Field, {
...labelProps
}),
external_react_namespaceObject.Children.map(children, (radio)=>{
if (!radio) return null;
const props = {
name,
checked: value === radio.props.value,
onChange: this.handleChange,
disabled
};
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_semantic_ui_react_namespaceObject.Form.Field, {
...fieldProps,
children: /*#__PURE__*/ (0, external_react_namespaceObject.cloneElement)(radio, {
...props
})
});
}),
error && errorLabel && /*#__PURE__*/ (0, external_react_namespaceObject.cloneElement)(errorLabel, {}, errorMessage)
]
});
}
}
const src_FormsyRadioGroup = (0, external_formsy_react_namespaceObject.withFormsy)(FormsyRadioGroup);
const FormsySelect = (props)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(src_FormsyDropdown, {
inputAs: external_semantic_ui_react_namespaceObject.Select,
...props
});
const FormsyTextArea = (props)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(src_FormsyInput, {
inputAs: external_semantic_ui_react_namespaceObject.TextArea,
...props
});
class Form extends external_react_namespaceObject.Component {
static Button = external_semantic_ui_react_namespaceObject.Form.Button;
static Radio = external_semantic_ui_react_namespaceObject.Form.Radio;
static Field = external_semantic_ui_react_namespaceObject.Form.Field;
static Group = external_semantic_ui_react_namespaceObject.Form.Group;
static Checkbox = src_FormsyCheckbox;
static Input = (props)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(src_FormsyInput, {
inputAs: external_semantic_ui_react_namespaceObject.Form.Input,
...props
});
static TextArea = (props)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(FormsyTextArea, {
inputAs: external_semantic_ui_react_namespaceObject.Form.TextArea,
...props
});
static Select = (props)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(FormsySelect, {
inputAs: external_semantic_ui_react_namespaceObject.Form.Select,
...props
});
static RadioGroup = (props)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(src_FormsyRadioGroup, {
...props
});
static Dropdown = (props)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(src_FormsyDropdown, {
inputAs: external_semantic_ui_react_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsx)(external_formsy_react_default(), {
noValidate: true,
ref: forwardedRef,
onSubmit: onSubmit,
...nonSemanticUIFormProps,
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_semantic_ui_react_namespaceObject.Form, {
as: as,
...nonFormsyReactFormProps,
children: children
})
});
}
}
const src_Form = external_hoist_non_react_statics_default()(/*#__PURE__*/ external_react_default().forwardRef((props, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Form, {
...props,
forwardedRef: ref
})), Form);
const FormsyRadio = (props)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(src_FormsyCheckbox, {
inputAs: external_semantic_ui_react_namespaceObject.Radio,
...props
});
exports.Checkbox = __webpack_exports__.Checkbox;
exports.Dropdown = __webpack_exports__.Dropdown;
exports.Form = __webpack_exports__.Form;
exports.Input = __webpack_exports__.Input;
exports.Radio = __webpack_exports__.Radio;
exports.RadioGroup = __webpack_exports__.RadioGroup;
exports.Select = __webpack_exports__.Select;
exports.TextArea = __webpack_exports__.TextArea;
for(var __rspack_i in __webpack_exports__)if (-1 === [
"Checkbox",
"Dropdown",
"Form",
"Input",
"Radio",
"RadioGroup",
"Select",
"TextArea"
].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
Object.defineProperty(exports, '__esModule', {
value: true
});