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

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

import Formsy, { withFormsy } from 'formsy-react';
import hoistNonReactStatics from 'hoist-non-react-statics';
import React, { createElement, cloneElement, Component, isValidElement, Children } from 'react';
import { Checkbox as Checkbox$1, Radio, Form as Form$2, Dropdown, Input, Select, TextArea } from 'semantic-ui-react';

function _extends() {
  _extends = Object.assign ? Object.assign.bind() : function (target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i];
      for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          target[key] = source[key];
        }
      }
    }
    return target;
  };
  return _extends.apply(this, arguments);
}
function _inheritsLoose(subClass, superClass) {
  subClass.prototype = Object.create(superClass.prototype);
  subClass.prototype.constructor = subClass;
  _setPrototypeOf(subClass, superClass);
}
function _setPrototypeOf(o, p) {
  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
    o.__proto__ = p;
    return o;
  };
  return _setPrototypeOf(o, p);
}
function _objectWithoutPropertiesLoose(source, excluded) {
  if (source == null) return {};
  var target = {};
  var sourceKeys = Object.keys(source);
  var key, i;
  for (i = 0; i < sourceKeys.length; i++) {
    key = sourceKeys[i];
    if (excluded.indexOf(key) >= 0) continue;
    target[key] = source[key];
  }
  return target;
}

var 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(function (prop) {
    return !removeProps.includes(prop);
  }).map(function (prop) {
    return [prop, props[prop]];
  }));
}

var FormsyCheckbox = /*#__PURE__*/function (_Component) {
  _inheritsLoose(FormsyCheckbox, _Component);
  function FormsyCheckbox() {
    var _this;
    _this = _Component.apply(this, arguments) || this;
    _this.handleChange = function (e, data) {
      var checked = data.checked;
      _this.props.setValue(checked);
      if (_this.props.onChange) {
        _this.props.onChange(e, data);
      }
    };
    return _this;
  }
  var _proto = FormsyCheckbox.prototype;
  _proto.componentDidMount = function componentDidMount() {
    var _this$props = this.props,
      defaultChecked = _this$props.defaultChecked,
      setValue = _this$props.setValue;
    setValue(!!defaultChecked, false);
  };
  _proto.render = function render() {
    var _this$props2 = this.props,
      _this$props2$inputAs = _this$props2.inputAs,
      inputAs = _this$props2$inputAs === void 0 ? Checkbox$1 : _this$props2$inputAs,
      required = _this$props2.required,
      isValid = _this$props2.isValid,
      isPristine = _this$props2.isPristine,
      errorLabel = _this$props2.errorLabel,
      errorMessage = _this$props2.errorMessage,
      value = _this$props2.value,
      as = _this$props2.as,
      width = _this$props2.width,
      className = _this$props2.className,
      disabled = _this$props2.disabled,
      inline = _this$props2.inline,
      passRequiredToField = _this$props2.passRequiredToField;
    var error = !isPristine && !isValid;
    var checkboxProps = _extends({}, filterSuirElementProps(this.props), {
      label: this.props.label,
      checked: !!value,
      onChange: this.handleChange
    });
    if (inputAs === Checkbox$1 || inputAs === Radio) {
      checkboxProps.error = undefined;
    }
    return React.createElement(Form$2.Field, {
      as: as,
      className: className,
      required: required && passRequiredToField,
      error: error,
      width: width,
      inline: inline,
      disabled: disabled
    }, createElement(inputAs, _extends({}, checkboxProps)), error && errorLabel && cloneElement(errorLabel, {}, errorMessage));
  };
  return FormsyCheckbox;
}(Component);
var Checkbox = /*#__PURE__*/withFormsy(FormsyCheckbox);

var FormsyDropdown = /*#__PURE__*/function (_Component) {
  _inheritsLoose(FormsyDropdown, _Component);
  function FormsyDropdown() {
    var _this;
    _this = _Component.apply(this, arguments) || this;
    _this.state = {
      allowError: false
    };
    _this.handleChange = function (e, data) {
      var _this$props = _this.props,
        multiple = _this$props.multiple,
        value = _this$props.value,
        setValue = _this$props.setValue,
        onChange = _this$props.onChange,
        name = _this$props.name;
      if (multiple && Array.isArray(value) && Array.isArray(data.value) && value.length > data.value.length) {
        _this.showError();
      }
      setValue(data.value);
      if (onChange) {
        onChange(e, _extends({}, data, {
          name: name
        }));
      }
    };
    _this.handleBlur = function (e, data) {
      var onBlur = _this.props.onBlur;
      if (onBlur) {
        onBlur(e, data);
      }
    };
    _this.handleClose = function () {
      return _this.showError();
    };
    _this.showError = function () {
      return _this.setState({
        allowError: true
      });
    };
    return _this;
  }
  var _proto = FormsyDropdown.prototype;
  _proto.componentDidMount = function componentDidMount() {
    var _this$props2 = this.props,
      defaultValue = _this$props2.defaultValue,
      setValue = _this$props2.setValue;
    if (defaultValue) setValue(defaultValue);
  };
  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
    if (prevProps.isFormSubmitted !== this.props.isFormSubmitted && this.props.isFormSubmitted) {
      this.showError();
    }
  };
  _proto.render = function render() {
    var _this$props3 = this.props,
      _this$props3$inputAs = _this$props3.inputAs,
      inputAs = _this$props3$inputAs === void 0 ? Dropdown : _this$props3$inputAs,
      id = _this$props3.id,
      required = _this$props3.required,
      label = _this$props3.label,
      value = _this$props3.value,
      defaultValue = _this$props3.defaultValue,
      multiple = _this$props3.multiple,
      errorLabel = _this$props3.errorLabel,
      errorMessage = _this$props3.errorMessage,
      isValid = _this$props3.isValid,
      isPristine = _this$props3.isPristine,
      as = _this$props3.as,
      width = _this$props3.width,
      className = _this$props3.className,
      disabled = _this$props3.disabled,
      inline = _this$props3.inline,
      _this$props3$passRequ = _this$props3.passRequiredToField,
      passRequiredToField = _this$props3$passRequ === void 0 ? true : _this$props3$passRequ;
    var shortHandMode = inputAs === Form$2.Dropdown || inputAs === Form$2.Select;
    var error = !isPristine && !isValid && this.state.allowError;
    var dropdownProps = _extends({}, filterSuirElementProps(this.props), {
      onChange: this.handleChange,
      onBlur: this.handleBlur,
      onClose: this.handleClose,
      value: value || defaultValue || multiple && [] || '',
      error: !disabled && error,
      id: id,
      name: undefined
    });
    var dropdownNode = shortHandMode ? createElement(inputAs, dropdownProps).props.control : inputAs;
    return React.createElement(Form$2.Field, {
      as: as,
      className: className,
      required: required && passRequiredToField,
      error: !disabled && error,
      width: width,
      inline: inline,
      disabled: disabled
    }, shortHandMode && label && React.createElement("label", {
      htmlFor: id
    }, label), createElement(dropdownNode, _extends({}, dropdownProps)), error && errorLabel && cloneElement(errorLabel, {}, errorMessage));
  };
  return FormsyDropdown;
}(Component);
var FormsyDropdown$1 = /*#__PURE__*/withFormsy(FormsyDropdown);

var FormsyInput = /*#__PURE__*/function (_Component) {
  _inheritsLoose(FormsyInput, _Component);
  function FormsyInput() {
    var _this;
    _this = _Component.apply(this, arguments) || this;
    _this.state = {
      allowError: false
    };
    _this.handleChange = function (e, data) {
      var value = data.value;
      _this.props.setValue(value);
      if (_this.props.onChange) _this.props.onChange(e, data);
      if (_this.props.instantValidation) _this.showError();
    };
    _this.handleBlur = function (e, data) {
      _this.showError();
      if (_this.props.onBlur) _this.props.onBlur(e, data);
    };
    _this.showError = function () {
      return _this.setState({
        allowError: true
      });
    };
    return _this;
  }
  var _proto = FormsyInput.prototype;
  _proto.componentDidMount = function componentDidMount() {
    var _this$props = this.props,
      defaultValue = _this$props.defaultValue,
      setValue = _this$props.setValue;
    if (defaultValue) setValue(defaultValue);
  };
  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
    if (prevProps.isFormSubmitted !== this.props.isFormSubmitted && this.props.isFormSubmitted) {
      this.showError();
    }
  };
  _proto.render = function render() {
    var _this$props2 = this.props,
      id = _this$props2.id,
      _this$props2$inputAs = _this$props2.inputAs,
      inputAs = _this$props2$inputAs === void 0 ? Input : _this$props2$inputAs,
      inputClassName = _this$props2.inputClassName,
      required = _this$props2.required,
      label = _this$props2.label,
      defaultValue = _this$props2.defaultValue,
      value = _this$props2.value,
      isValid = _this$props2.isValid,
      isPristine = _this$props2.isPristine,
      errorMessage = _this$props2.errorMessage,
      errorLabel = _this$props2.errorLabel,
      as = _this$props2.as,
      width = _this$props2.width,
      className = _this$props2.className,
      disabled = _this$props2.disabled,
      inline = _this$props2.inline,
      _this$props2$passRequ = _this$props2.passRequiredToField,
      passRequiredToField = _this$props2$passRequ === void 0 ? true : _this$props2$passRequ;
    var allowError = this.state.allowError;
    var error = !isPristine && !isValid && allowError;
    var inputProps = _extends({}, filterSuirElementProps(this.props), {
      value: value || isPristine && defaultValue || '',
      onChange: this.handleChange,
      onBlur: this.handleBlur,
      className: inputClassName,
      error: !disabled && error,
      label: label,
      id: id
    });
    var isFormField = inputAs === Form$2.Input || inputAs === Form$2.TextArea;
    var inputNode = isFormField ? createElement(inputAs).props.control : inputAs;
    if (isFormField) {
      inputProps.label = undefined;
      if (inputAs === Form$2.TextArea) {
        inputProps.error = undefined;
      }
    }
    var inputElement = !isFormField && isValidElement(inputAs) ? cloneElement(inputAs, _extends({}, inputProps, inputAs.props)) : createElement(inputNode, _extends({}, inputProps));
    var shouldShowFormLabel = isFormField || isValidElement(inputAs);
    return React.createElement(Form$2.Field, {
      as: as,
      className: className,
      required: required && passRequiredToField,
      error: !disabled && error,
      width: width,
      inline: inline,
      disabled: disabled
    }, shouldShowFormLabel && label && React.createElement("label", {
      htmlFor: id
    }, label), inputElement, !disabled && error && errorLabel && cloneElement(errorLabel, {}, errorMessage));
  };
  return FormsyInput;
}(Component);
var FormsyInput$1 = /*#__PURE__*/withFormsy(FormsyInput);

var FormsyRadioGroup = /*#__PURE__*/function (_Component) {
  _inheritsLoose(FormsyRadioGroup, _Component);
  function FormsyRadioGroup() {
    var _this;
    _this = _Component.apply(this, arguments) || this;
    _this.handleChange = function (e, data) {
      var value = data.value;
      _this.props.setValue(value);
      if (_this.props.onChange) {
        _this.props.onChange(e, data);
      }
    };
    return _this;
  }
  var _proto = FormsyRadioGroup.prototype;
  _proto.componentDidMount = function componentDidMount() {
    var _this$props = this.props,
      defaultSelected = _this$props.defaultSelected,
      setValue = _this$props.setValue;
    if (defaultSelected) setValue(defaultSelected);
  };
  _proto.render = function render() {
    var _this2 = this;
    var _this$props2 = this.props,
      as = _this$props2.as,
      label = _this$props2.label,
      required = _this$props2.required,
      children = _this$props2.children,
      name = _this$props2.name,
      value = _this$props2.value,
      errorLabel = _this$props2.errorLabel,
      isValid = _this$props2.isValid,
      isPristine = _this$props2.isPristine,
      errorMessage = _this$props2.errorMessage,
      _this$props2$passRequ = _this$props2.passRequiredToField,
      passRequiredToField = _this$props2$passRequ === void 0 ? true : _this$props2$passRequ,
      disabled = _this$props2.disabled,
      className = _this$props2.className,
      unstackable = _this$props2.unstackable,
      _this$props2$inline = _this$props2.inline,
      inline = _this$props2$inline === void 0 ? true : _this$props2$inline,
      width = _this$props2.width;
    var error = !isPristine && !isValid;
    var formGroupProps = {
      as: as,
      className: className,
      unstackable: unstackable,
      inline: inline,
      grouped: !inline
    };
    var labelProps = {
      required: required && passRequiredToField,
      error: !disabled && error,
      label: label,
      disabled: disabled
    };
    var fieldProps = {
      width: width,
      error: !disabled && error
    };
    return React.createElement(Form$2.Group, Object.assign({}, formGroupProps), label && React.createElement(Form$2.Field, Object.assign({}, labelProps)), Children.map(children, function (radio) {
      if (!radio) {
        return null;
      }
      var props = {
        name: name,
        checked: value === radio.props.value,
        onChange: _this2.handleChange,
        disabled: disabled
      };
      return React.createElement(Form$2.Field, Object.assign({}, fieldProps), cloneElement(radio, _extends({}, props)));
    }), error && errorLabel && cloneElement(errorLabel, {}, errorMessage));
  };
  return FormsyRadioGroup;
}(Component);
var FormsyRadioGroup$1 = /*#__PURE__*/withFormsy(FormsyRadioGroup);

var FormsySelect = (function (props) {
  return React.createElement(FormsyDropdown$1, Object.assign({
    inputAs: Select
  }, props));
});

var FormsyTextArea = (function (props) {
  return React.createElement(FormsyInput$1, Object.assign({
    inputAs: TextArea
  }, props));
});

var _excluded = ["mapping", "validationErrors", "onValid", "onValidSubmit", "onInvalid", "onInvalidSubmit", "onChange", "preventExternalInvalidation", "onError", "onSubmit", "forwardedRef"],
  _excluded2 = ["as", "error", "inverted", "loading", "reply", "size", "success", "warning", "widths", "forwardedRef", "className"];
var Form = /*#__PURE__*/function (_Component) {
  _inheritsLoose(Form, _Component);
  function Form() {
    return _Component.apply(this, arguments) || this;
  }
  var _proto = Form.prototype;
  _proto.render = function render() {
    var children = this.props.children;
    var _this$props = this.props,
      onSubmit = _this$props.onSubmit,
      forwardedRef = _this$props.forwardedRef,
      nonFormsyReactFormProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
    var _this$props2 = this.props,
      _this$props2$as = _this$props2.as,
      as = _this$props2$as === void 0 ? 'div' : _this$props2$as,
      nonSemanticUIFormProps = _objectWithoutPropertiesLoose(_this$props2, _excluded2);
    return React.createElement(Formsy, Object.assign({
      noValidate: true,
      ref: forwardedRef,
      onSubmit: onSubmit
    }, nonSemanticUIFormProps), React.createElement(Form$2, Object.assign({
      as: as
    }, nonFormsyReactFormProps), children));
  };
  return Form;
}(Component);
Form.Button = Form$2.Button;
Form.Radio = Form$2.Radio;
Form.Field = Form$2.Field;
Form.Group = Form$2.Group;
Form.Checkbox = Checkbox;
Form.Input = function (props) {
  return React.createElement(FormsyInput$1, Object.assign({
    inputAs: Form$2.Input
  }, props));
};
Form.TextArea = function (props) {
  return React.createElement(FormsyTextArea, Object.assign({
    inputAs: Form$2.TextArea
  }, props));
};
Form.Select = function (props) {
  return React.createElement(FormsySelect, Object.assign({
    inputAs: Form$2.Select
  }, props));
};
Form.RadioGroup = function (props) {
  return React.createElement(FormsyRadioGroup$1, Object.assign({}, props));
};
Form.Dropdown = function (props) {
  return React.createElement(FormsyDropdown$1, Object.assign({
    inputAs: Form$2.Dropdown
  }, props));
};
var Form$1 = /*#__PURE__*/hoistNonReactStatics( /*#__PURE__*/React.forwardRef(function (props, ref) {
  return React.createElement(Form, Object.assign({}, props, {
    forwardedRef: ref
  }));
}), Form);

var FormsyRadio = (function (props) {
  return React.createElement(Checkbox, Object.assign({
    inputAs: Radio
  }, props));
});

export { Checkbox, FormsyDropdown$1 as Dropdown, Form$1 as Form, FormsyInput$1 as Input, FormsyRadio as Radio, FormsyRadioGroup$1 as RadioGroup, FormsySelect as Select, FormsyTextArea as TextArea };
//# sourceMappingURL=formsy-semantic-ui-react.esm.js.map