@itcase/forms 1.0.11 → 1.0.12

package/dist/css/form/FormField/FormField.css

@@ -30,3 +30,12 @@
     }
   }
 }
+.form-field {
+  &_state {
+    &_hidden {
+      visibility: hidden;
+      position: absolute;
+      z-index: -1;
+    }
+  }
+}

package/dist/itcase-forms.cjs.js

@@ -548,6 +548,7 @@ function FieldWrapperBase(props) {
     metaValid = props.metaValid,
     set = props.set,
     type = props.type,
+    isHidden = props.isHidden,
     Tag = props.tag,
     dataTour = props.dataTour,
     showErrorsOnSubmit = props.showErrorsOnSubmit;
@@ -601,7 +602,7 @@ function FieldWrapperBase(props) {
   var _useStyles = useStyles.useStyles(props),
     formFieldStyles = _useStyles.styles;
   return /*#__PURE__*/React__default.default.createElement(Tag, {
-    className: clsx__default.default(formFieldClass, 'form__item', 'form-field', type && "form-field_type_" + type, set && "form-field_set_" + set, sizeClass, fillClass, shapeClass, directionClass, widthClass),
+    className: clsx__default.default(formFieldClass, 'form__item', 'form-field', type && "form-field_type_" + type, set && "form-field_set_" + set, sizeClass, fillClass, shapeClass, isHidden && "form-field_state_hidden", directionClass, widthClass),
     "data-tour": dataTour,
     style: formFieldStyles
   }, before, label && /*#__PURE__*/React__default.default.createElement("div", {
@@ -1876,7 +1877,8 @@ RadioGroup.propTypes = {
   onChange: PropTypes__default.default.func
 };
 
-var SegmentedField = /*#__PURE__*/React__default.default.memo(function SegmentedField(props) {
+// const SegmentedField = React.memo(
+function SegmentedField(props) {
   var options = props.options,
     isRequired = props.isRequired,
     name = props.name,
@@ -1884,21 +1886,27 @@ var SegmentedField = /*#__PURE__*/React__default.default.memo(function Segmented
     inputProps = props.inputProps;
   var _useForm = reactFinalForm.useForm(),
     change = _useForm.change;
-  var _useState = React.useState({
-      value: null,
-      label: null
-    }),
-    activeOption = _useState[0],
-    setActiveOption = _useState[1];
-  var setActiveSegment = React.useCallback(function (option) {
-    setActiveOption(option);
-    change(name, option.value);
-  }, [change]);
   return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
     name: name
   }, function (_ref) {
     var input = _ref.input,
       meta = _ref.meta;
+    var activeOption = React.useMemo(function () {
+      var emptyOption = {
+        value: null,
+        label: null
+      };
+      if (input.value) {
+        var currentOption = options.find(function (option) {
+          return option.value === input.value;
+        });
+        return currentOption || emptyOption;
+      }
+      return emptyOption;
+    }, [input.value]);
+    var setActiveSegment = React.useCallback(function (option) {
+      change(name, option.value);
+    }, [change]);
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('form-field_type_segmented', 'form__item_type_segmented'),
       fieldClassName: "form-segmented",
@@ -1918,7 +1926,9 @@ var SegmentedField = /*#__PURE__*/React__default.default.memo(function Segmented
       activeSegment: activeOption
     }, inputProps)));
   });
-});
+}
+// )
+
 SegmentedField.propTypes = {
   options: PropTypes__default.default.array.isRequired,
   name: PropTypes__default.default.string.isRequired,

package/dist/itcase-forms.esm.js

@@ -538,6 +538,7 @@ function FieldWrapperBase(props) {
     metaValid = props.metaValid,
     set = props.set,
     type = props.type,
+    isHidden = props.isHidden,
     Tag = props.tag,
     dataTour = props.dataTour,
     showErrorsOnSubmit = props.showErrorsOnSubmit;
@@ -591,7 +592,7 @@ function FieldWrapperBase(props) {
   var _useStyles = useStyles(props),
     formFieldStyles = _useStyles.styles;
   return /*#__PURE__*/React.createElement(Tag, {
-    className: clsx(formFieldClass, 'form__item', 'form-field', type && "form-field_type_" + type, set && "form-field_set_" + set, sizeClass, fillClass, shapeClass, directionClass, widthClass),
+    className: clsx(formFieldClass, 'form__item', 'form-field', type && "form-field_type_" + type, set && "form-field_set_" + set, sizeClass, fillClass, shapeClass, isHidden && "form-field_state_hidden", directionClass, widthClass),
     "data-tour": dataTour,
     style: formFieldStyles
   }, before, label && /*#__PURE__*/React.createElement("div", {
@@ -1866,7 +1867,8 @@ RadioGroup.propTypes = {
   onChange: PropTypes.func
 };
 
-var SegmentedField = /*#__PURE__*/React.memo(function SegmentedField(props) {
+// const SegmentedField = React.memo(
+function SegmentedField(props) {
   var options = props.options,
     isRequired = props.isRequired,
     name = props.name,
@@ -1874,21 +1876,27 @@ var SegmentedField = /*#__PURE__*/React.memo(function SegmentedField(props) {
     inputProps = props.inputProps;
   var _useForm = useForm(),
     change = _useForm.change;
-  var _useState = useState({
-      value: null,
-      label: null
-    }),
-    activeOption = _useState[0],
-    setActiveOption = _useState[1];
-  var setActiveSegment = useCallback(function (option) {
-    setActiveOption(option);
-    change(name, option.value);
-  }, [change]);
   return /*#__PURE__*/React.createElement(Field, {
     name: name
   }, function (_ref) {
     var input = _ref.input,
       meta = _ref.meta;
+    var activeOption = useMemo(function () {
+      var emptyOption = {
+        value: null,
+        label: null
+      };
+      if (input.value) {
+        var currentOption = options.find(function (option) {
+          return option.value === input.value;
+        });
+        return currentOption || emptyOption;
+      }
+      return emptyOption;
+    }, [input.value]);
+    var setActiveSegment = useCallback(function (option) {
+      change(name, option.value);
+    }, [change]);
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field_type_segmented', 'form__item_type_segmented'),
       fieldClassName: "form-segmented",
@@ -1908,7 +1916,9 @@ var SegmentedField = /*#__PURE__*/React.memo(function SegmentedField(props) {
       activeSegment: activeOption
     }, inputProps)));
   });
-});
+}
+// )
+
 SegmentedField.propTypes = {
   options: PropTypes.array.isRequired,
   name: PropTypes.string.isRequired,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/forms",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "description": "Forms fields, inputs, etc.",
   "keywords": [
     "forms",