@maif/react-forms 1.0.22 → 1.0.26

package/lib/form.js

@@ -41,6 +41,14 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
 function _extends() { _extends = Object.assign || 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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -163,12 +171,16 @@ var defaultVal = function defaultVal(t, array, defaultValue) {
 
 var getDefaultValues = function getDefaultValues(flow, schema) {
   return flow.reduce(function (acc, key) {
-    var entry = schema[key];
-
     if (_typeof(key) === 'object') {
       return _objectSpread(_objectSpread({}, acc), getDefaultValues(key.flow, schema));
     }
 
+    var entry = schema[key];
+
+    if (!entry) {
+      return acc;
+    }
+
     return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, defaultVal(entry.type, entry.array || entry.isMulti, entry.defaultValue)));
   }, {});
 };
@@ -238,7 +250,7 @@ var Form = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
         }
 
         return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, v));
-      } else if (!!v && _typeof(v) === 'object') {
+      } else if (!!v && _typeof(v) === 'object' && !(v instanceof Date)) {
         var _subSchema$key;
 
         return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, cleanInputArray(v, ((_subSchema$key = subSchema[key]) === null || _subSchema$key === void 0 ? void 0 : _subSchema$key.schema) || {})));
@@ -269,7 +281,7 @@ var Form = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
         }
 
         return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, v));
-      } else if (!!v && _typeof(v) === 'object') {
+      } else if (!!v && _typeof(v) === 'object' && !(v instanceof Date)) {
         var _subSchema$key2;
 
         return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, cleanOutputArray(v, ((_subSchema$key2 = subSchema[key]) === null || _subSchema$key2 === void 0 ? void 0 : _subSchema$key2.schema) || {})));
@@ -335,6 +347,18 @@ var Form = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
       }
     };
   });
+
+  var functionalProperty = function functionalProperty(entry, prop) {
+    if (typeof prop === 'function') {
+      return prop({
+        rawValues: getValues(),
+        value: getValues(entry)
+      });
+    } else {
+      return prop;
+    }
+  };
+
   return /*#__PURE__*/_react["default"].createElement(_reactHookForm.FormProvider, methods, /*#__PURE__*/_react["default"].createElement("form", {
     className: className || "".concat(classes.pr_15, " ").concat(classes.full_width),
     onSubmit: _handleSubmit(function (data) {
@@ -343,6 +367,12 @@ var Form = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
     }, onError)
   }, formFlow.map(function (entry, idx) {
     var step = schema[entry];
+
+    if (!step && typeof entry === 'string') {
+      console.error("no step found for the entry \"".concat(entry, "\" in the given schema. Your form might not work properly. Please fix it"));
+      return null;
+    }
+
     var error = _typeof(entry) === 'object' ? undefined : entry.split('.').reduce(function (object, key) {
       return object && object[key];
     }, errors);
@@ -373,7 +403,7 @@ var Form = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
       key: "".concat(entry, "-").concat(idx),
       entry: entry,
       error: error,
-      label: (step === null || step === void 0 ? void 0 : step.label) === null ? null : (step === null || step === void 0 ? void 0 : step.label) || entry,
+      label: functionalProperty(entry, (step === null || step === void 0 ? void 0 : step.label) === null ? null : (step === null || step === void 0 ? void 0 : step.label) || entry),
       help: step === null || step === void 0 ? void 0 : step.help,
       render: inputWrapper
     }, /*#__PURE__*/_react["default"].createElement(Step, {
@@ -390,7 +420,8 @@ var Form = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
       setValue: setValue,
       watch: watch,
       inputWrapper: inputWrapper,
-      httpClient: maybeCustomHttpClient
+      httpClient: maybeCustomHttpClient,
+      functionalProperty: functionalProperty
     }));
   }), /*#__PURE__*/_react["default"].createElement(Footer, {
     render: footer,
@@ -455,7 +486,8 @@ var Step = function Step(_ref4) {
       inputWrapper = _ref4.inputWrapper,
       httpClient = _ref4.httpClient,
       defaultValue = _ref4.defaultValue,
-      index = _ref4.index;
+      index = _ref4.index,
+      functionalProperty = _ref4.functionalProperty;
   var classes = (0, _styleContext.useCustomStyle)();
 
   if (entry && _typeof(entry) === 'object') {
@@ -469,6 +501,12 @@ var Step = function Step(_ref4) {
       var err = _typeof(en) === 'object' ? undefined : en.split('.').reduce(function (object, key) {
         return object && object[key];
       }, errors);
+
+      if (!stp && typeof en === 'string') {
+        console.error("no step found for the entry \"".concat(en, "\" in the given schema. Your form might not work properly. Please fix it"));
+        return null;
+      }
+
       var visibleStep = (0, _Option.option)(stp).map(function (s) {
         return s.visible;
       }).map(function (visible) {
@@ -495,7 +533,7 @@ var Step = function Step(_ref4) {
         key: "collapse-".concat(en, "-").concat(entryIdx),
         entry: en,
         error: err,
-        label: (stp === null || stp === void 0 ? void 0 : stp.label) === null ? null : (stp === null || stp === void 0 ? void 0 : stp.label) || en,
+        label: functionalProperty(en, (stp === null || stp === void 0 ? void 0 : stp.label) === null ? null : (stp === null || stp === void 0 ? void 0 : stp.label) || en),
         help: stp === null || stp === void 0 ? void 0 : stp.help,
         render: inputWrapper
       }, /*#__PURE__*/_react["default"].createElement(Step, {
@@ -512,7 +550,8 @@ var Step = function Step(_ref4) {
         watch: watch,
         inputWrapper: inputWrapper,
         httpClient: httpClient,
-        defaultValue: stp === null || stp === void 0 ? void 0 : stp.defaultValue
+        defaultValue: stp === null || stp === void 0 ? void 0 : stp.defaultValue,
+        functionalProperty: functionalProperty
       }));
     }));
   }
@@ -528,12 +567,15 @@ var Step = function Step(_ref4) {
       setValue: _setValue,
       values: getValues(entry),
       defaultValue: step.defaultValue || defaultVal(step.type),
+      getValues: getValues,
+      disabled: functionalProperty(entry, step.disabled),
       component: function component(props, idx) {
         var _error$idx;
 
         return /*#__PURE__*/_react["default"].createElement(Step, {
           entry: "".concat(entry, "[").concat(idx, "].value"),
           step: _objectSpread(_objectSpread({}, schema[realEntry || entry]), {}, {
+            onChange: undefined,
             array: false
           }),
           error: error && ((_error$idx = error[idx]) === null || _error$idx === void 0 ? void 0 : _error$idx.value),
@@ -548,12 +590,28 @@ var Step = function Step(_ref4) {
           httpClient: httpClient,
           defaultValue: props.defaultValue,
           value: props.value,
-          index: idx
+          index: idx,
+          functionalProperty: functionalProperty
         });
       }
     });
   }
 
+  var registeredInput = register(entry);
+
+  var inputProps = _objectSpread(_objectSpread({}, registeredInput), {}, {
+    onChange: function onChange(e) {
+      registeredInput.onChange(e);
+      (0, _Option.option)(step.onChange).map(function (onChange) {
+        return onChange({
+          rawValues: getValues(),
+          value: e.target.value,
+          setValue: _setValue
+        });
+      });
+    }
+  });
+
   switch (step.type) {
     case _type.type.string:
       switch (step.format) {
@@ -575,12 +633,11 @@ var Step = function Step(_ref4) {
             type: "text",
             id: entry,
             className: (0, _classnames["default"])(classes.input, _defineProperty({}, classes.input__invalid, error)),
-            readOnly: step.disabled ? 'readOnly' : null
+            readOnly: functionalProperty(entry, step.disabled) ? 'readOnly' : null
           }, step.props, {
-            name: entry,
             defaultValue: defaultValue,
             placeholder: step.placeholder
-          }, register(entry))));
+          }, inputProps)));
 
         case _format.format.code:
           return /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
@@ -599,8 +656,17 @@ var Step = function Step(_ref4) {
                 error: error
               }, /*#__PURE__*/_react["default"].createElement(_index.CodeInput, _extends({
                 className: (0, _classnames["default"])(_defineProperty({}, classes.input__invalid, error)),
-                readOnly: step.disabled ? true : false,
-                onChange: field.onChange,
+                readOnly: functionalProperty(entry, step.disabled) ? true : false,
+                onChange: function onChange(e) {
+                  field.onChange(e);
+                  (0, _Option.option)(step.onChange).map(function (onChange) {
+                    return onChange({
+                      rawValues: getValues(),
+                      value: e,
+                      setValue: _setValue
+                    });
+                  });
+                },
                 value: field.value,
                 defaultValue: defaultValue
               }, step.props)));
@@ -624,8 +690,17 @@ var Step = function Step(_ref4) {
                 error: error
               }, /*#__PURE__*/_react["default"].createElement(_index.MarkdownInput, _extends({}, step.props, {
                 className: (0, _classnames["default"])(_defineProperty({}, classes.input__invalid, error)),
-                readOnly: step.disabled ? 'readOnly' : null,
-                onChange: field.onChange,
+                readOnly: functionalProperty(entry, step.disabled) ? 'readOnly' : null,
+                onChange: function onChange(e) {
+                  field.onChange(e);
+                  (0, _Option.option)(step.onChange).map(function (onChange) {
+                    return onChange({
+                      rawValues: getValues(),
+                      value: e,
+                      setValue: _setValue
+                    });
+                  });
+                },
                 value: field.value,
                 defaultValue: defaultValue
               }, step)));
@@ -648,15 +723,24 @@ var Step = function Step(_ref4) {
                   rawValues: getValues()
                 }, field),
                 error: error
-              }, /*#__PURE__*/_react["default"].createElement(_index.SelectInput, _extends({}, step.props, {
+              }, /*#__PURE__*/_react["default"].createElement(_index.SelectInput, _extends({}, step.props, step, {
                 className: (0, _classnames["default"])(_defineProperty({}, classes.input__invalid, error)),
-                readOnly: step.disabled ? 'readOnly' : null,
-                onChange: field.onChange,
+                disabled: functionalProperty(entry, step.disabled),
                 value: field.value,
                 possibleValues: step.options,
                 defaultValue: defaultValue,
-                httpClient: httpClient
-              }, step)));
+                httpClient: httpClient,
+                onChange: function onChange(value) {
+                  field.onChange(value);
+                  (0, _Option.option)(step.onChange).map(function (onChange) {
+                    return onChange({
+                      rawValues: getValues(),
+                      value: value,
+                      setValue: _setValue
+                    });
+                  });
+                }
+              })));
             }
           });
 
@@ -677,14 +761,13 @@ var Step = function Step(_ref4) {
             },
             error: error
           }, /*#__PURE__*/_react["default"].createElement("input", _extends({
-            // {...step.props}
             type: step.format || 'text',
             id: entry,
             className: (0, _classnames["default"])(classes.input, _defineProperty({}, classes.input__invalid, error)),
-            readOnly: step.disabled ? 'readOnly' : null // defaultValue={defaultValue}
-            ,
+            readOnly: functionalProperty(entry, step.disabled) ? 'readOnly' : null,
+            defaultValue: defaultValue,
             placeholder: step.placeholder
-          }, register(entry))));
+          }, inputProps)));
       }
 
     case _type.type.number:
@@ -705,15 +788,24 @@ var Step = function Step(_ref4) {
                   rawValues: getValues()
                 }, field),
                 error: error
-              }, /*#__PURE__*/_react["default"].createElement(_index.SelectInput, _extends({}, step.props, {
+              }, /*#__PURE__*/_react["default"].createElement(_index.SelectInput, _extends({}, step.props, step, {
                 className: (0, _classnames["default"])(classes.content, _defineProperty({}, classes.input__invalid, error)),
-                readOnly: step.disabled ? 'readOnly' : null,
-                onChange: field.onChange,
+                readOnly: functionalProperty(entry, step.disabled) ? 'readOnly' : null,
+                onChange: function onChange(e) {
+                  field.onChange(e);
+                  (0, _Option.option)(step.onChange).map(function (onChange) {
+                    return onChange({
+                      rawValues: getValues(),
+                      value: e,
+                      setValue: _setValue
+                    });
+                  });
+                },
                 value: field.value,
                 possibleValues: step.options,
                 defaultValue: defaultValue,
                 httpClient: httpClient
-              }, step)));
+              })));
             }
           });
 
@@ -735,11 +827,11 @@ var Step = function Step(_ref4) {
             type: step.format || 'number',
             id: entry,
             className: (0, _classnames["default"])(classes.input, _defineProperty({}, classes.input__invalid, error)),
-            readOnly: step.disabled ? 'readOnly' : null,
+            readOnly: functionalProperty(entry, step.disabled) ? 'readOnly' : null,
             name: entry,
             placeholder: step.placeholder,
             defaultValue: defaultValue
-          }, register(entry))));
+          }, inputProps)));
       }
 
     case _type.type.bool:
@@ -759,8 +851,17 @@ var Step = function Step(_ref4) {
             error: error
           }, /*#__PURE__*/_react["default"].createElement(_index.BooleanInput, _extends({}, step.props, {
             className: (0, _classnames["default"])(_defineProperty({}, classes.input__invalid, error)),
-            readOnly: step.disabled ? 'readOnly' : null,
-            onChange: field.onChange,
+            readOnly: functionalProperty(entry, step.disabled) ? 'readOnly' : null,
+            onChange: function onChange(e) {
+              field.onChange(e);
+              (0, _Option.option)(step.onChange).map(function (onChange) {
+                return onChange({
+                  rawValues: getValues(),
+                  value: e,
+                  setValue: _setValue
+                });
+              });
+            },
             value: field.value
           })));
         }
@@ -785,18 +886,28 @@ var Step = function Step(_ref4) {
                   rawValues: getValues()
                 }, field),
                 error: error
-              }, /*#__PURE__*/_react["default"].createElement(_index.SelectInput, _extends({}, step.props, {
+              }, /*#__PURE__*/_react["default"].createElement(_index.SelectInput, _extends({}, step.props, step, {
                 className: (0, _classnames["default"])(_defineProperty({}, classes.input__invalid, error)),
-                readOnly: step.disabled ? 'readOnly' : null,
-                onChange: field.onChange,
+                readOnly: functionalProperty(entry, step.disabled) ? 'readOnly' : null,
+                onChange: function onChange(e) {
+                  field.onChange(e);
+                  (0, _Option.option)(step.onChange).map(function (onChange) {
+                    return onChange({
+                      rawValues: getValues(),
+                      value: e,
+                      setValue: _setValue
+                    });
+                  });
+                },
                 value: field.value,
                 possibleValues: step.options,
                 httpClient: httpClient
-              }, step)));
+              })));
             }
           });
 
         case _format.format.form:
+          //todo: disabled ?
           var flow = (0, _Option.option)(step.flow).getOrElse((0, _Option.option)(step.schema).map(function (s) {
             return Object.keys(s);
           }).getOrNull());
@@ -824,7 +935,8 @@ var Step = function Step(_ref4) {
             maybeCustomHttpClient: httpClient,
             value: getValues(entry) || defaultValue,
             error: error,
-            index: index
+            index: index,
+            functionalProperty: functionalProperty
           }));
 
         default:
@@ -843,13 +955,22 @@ var Step = function Step(_ref4) {
                   rawValues: getValues()
                 }, field),
                 error: error
-              }, /*#__PURE__*/_react["default"].createElement(_index.ObjectInput, _extends({}, step.props, {
+              }, /*#__PURE__*/_react["default"].createElement(_index.ObjectInput, _extends({}, step.props, step, {
                 className: (0, _classnames["default"])(_defineProperty({}, classes.input__invalid, error)),
-                readOnly: step.disabled ? 'readOnly' : null,
-                onChange: field.onChange,
+                readOnly: functionalProperty(entry, step.disabled) ? 'readOnly' : null,
+                onChange: function onChange(e) {
+                  field.onChange(e);
+                  (0, _Option.option)(step.onChange).map(function (onChange) {
+                    return onChange({
+                      rawValues: getValues(),
+                      value: e,
+                      setValue: _setValue
+                    });
+                  });
+                },
                 value: field.value,
                 possibleValues: step.options
-              }, step)));
+              })));
             }
           });
       }
@@ -873,11 +994,19 @@ var Step = function Step(_ref4) {
           }, /*#__PURE__*/_react["default"].createElement(_reactRainbowComponents.DatePicker, _extends({}, step.props, {
             id: "datePicker-1",
             className: (0, _classnames["default"])(_defineProperty({}, classes.input__invalid, error)),
-            readOnly: step.disabled ? 'readOnly' : null,
+            readOnly: functionalProperty(entry, step.disabled) ? 'readOnly' : null,
             value: field.value,
-            onChange: field.onChange,
-            formatStyle: "large" // locale={state.locale.name}
-
+            onChange: function onChange(e) {
+              field.onChange(e);
+              (0, _Option.option)(step.onChange).map(function (onChange) {
+                return onChange({
+                  rawValues: getValues(),
+                  value: e,
+                  setValue: _setValue
+                });
+              });
+            },
+            formatStyle: "large"
           })));
         }
       });
@@ -927,7 +1056,7 @@ var Step = function Step(_ref4) {
               }), /*#__PURE__*/_react["default"].createElement("button", {
                 type: "button",
                 className: "".concat(classes.btn, " ").concat(classes.flex, " ").concat(classes.ai_center),
-                disabled: uploading,
+                disabled: uploading || functionalProperty(entry, step.disabled),
                 onClick: trigger
               }, uploading && /*#__PURE__*/_react["default"].createElement(_reactFeather.Loader, null), !uploading && /*#__PURE__*/_react["default"].createElement(_reactFeather.Upload, null), /*#__PURE__*/_react["default"].createElement("span", {
                 className: "".concat(classes.ml_5)
@@ -944,7 +1073,16 @@ var Step = function Step(_ref4) {
               }, field),
               error: error
             }, /*#__PURE__*/_react["default"].createElement(FileInput, {
-              onChange: field.onChange,
+              onChange: function onChange(e) {
+                field.onChange(e);
+                (0, _Option.option)(step.onChange).map(function (onChange) {
+                  return onChange({
+                    rawValues: getValues(),
+                    value: e,
+                    setValue: _setValue
+                  });
+                });
+              },
               error: error
             }));
           }
@@ -970,10 +1108,10 @@ var Step = function Step(_ref4) {
         type: "file",
         id: entry,
         className: (0, _classnames["default"])(classes.input, _defineProperty({}, classes.input__invalid, error)),
-        readOnly: step.disabled ? 'readOnly' : null,
+        readOnly: functionalProperty(entry, step.disabled) ? 'readOnly' : null,
         name: entry,
         placeholder: step.placeholder
-      }, register(entry))));
+      }, inputProps)));
 
     default:
       return null;
@@ -990,7 +1128,9 @@ var ArrayStep = function ArrayStep(_ref15) {
       component = _ref15.component,
       values = _ref15.values,
       defaultValue = _ref15.defaultValue,
-      setValue = _ref15.setValue;
+      setValue = _ref15.setValue,
+      getValues = _ref15.getValues,
+      disabled = _ref15.disabled;
   var classes = (0, _styleContext.useCustomStyle)();
 
   var _useFieldArray = (0, _reactHookForm.useFieldArray)({
@@ -1018,6 +1158,7 @@ var ArrayStep = function ArrayStep(_ref15) {
       className: "input-group-append"
     }, /*#__PURE__*/_react["default"].createElement("button", {
       className: "btn btn-danger btn-sm",
+      disabled: disabled,
       onClick: function onClick() {
         remove(idx);
         trigger(entry);
@@ -1028,10 +1169,18 @@ var ArrayStep = function ArrayStep(_ref15) {
     className: (0, _classnames["default"])("btn btn-info mt-2", _defineProperty({}, classes.input__invalid, error)),
     onClick: function onClick() {
       append({
-        value: step.addableDefaultValue
+        value: step.addableDefaultValue || defaultVal(step.type)
       });
       trigger(entry);
+      (0, _Option.option)(step.onChange).map(function (onChange) {
+        return onChange({
+          rawValues: getValues(),
+          value: getValues(entry),
+          setValue: setValue
+        });
+      });
     },
+    disabled: disabled,
     value: "Add"
   }), error && /*#__PURE__*/_react["default"].createElement("div", {
     className: "invalid-feedback"
@@ -1047,7 +1196,8 @@ var NestedForm = function NestedForm(_ref16) {
       index = _ref16.index,
       error = _ref16.error,
       value = _ref16.value,
-      step = _ref16.step;
+      step = _ref16.step,
+      functionalProperty = _ref16.functionalProperty;
 
   var _useFormContext = (0, _reactHookForm.useFormContext)(),
       register = _useFormContext.register,
@@ -1095,14 +1245,38 @@ var NestedForm = function NestedForm(_ref16) {
       });
     }
   }, [prevSchema, schemaAndFlow.schema]);
+  var computedSandF = schemaAndFlow.flow.reduce(function (acc, entry) {
+    var step = schemaAndFlow.schema[entry];
+    var visibleStep = (0, _Option.option)(step).map(function (s) {
+      return s.visible;
+    }).map(function (visible) {
+      switch (_typeof(visible)) {
+        case 'object':
+          var _value2 = watch(visible.ref);
+
+          return (0, _Option.option)(visible.test).map(function (test) {
+            return test(_value2);
+          }).getOrElse(_value2);
+
+        case 'boolean':
+          return visible;
+
+        default:
+          return true;
+      }
+    }).getOrElse(true);
+    return [].concat(_toConsumableArray(acc), [{
+      step: step,
+      visibleStep: visibleStep,
+      entry: entry
+    }]);
+  }, []);
+  var bordered = computedSandF.filter(function (x) {
+    return x.visibleStep;
+  }).length > 1 && step.label !== null;
   return /*#__PURE__*/_react["default"].createElement("div", {
-    style: {
-      borderLeft: '2px solid lightGray',
-      paddingLeft: '1rem',
-      marginBottom: '.5rem',
-      position: 'relative'
-    }
-  }, schemaAndFlow.flow.length > 1 && collapsed && /*#__PURE__*/_react["default"].createElement(_reactFeather.ArrowDown, {
+    className: (0, _classnames["default"])(_defineProperty({}, classes.nestedform__border, bordered))
+  }, !!step.collapsable && schemaAndFlow.flow.length > 1 && collapsed && /*#__PURE__*/_react["default"].createElement(_reactFeather.ArrowDown, {
     size: 30,
     className: classes.cursor_pointer,
     style: {
@@ -1114,7 +1288,7 @@ var NestedForm = function NestedForm(_ref16) {
     onClick: function onClick() {
       return setCollapsed(!collapsed);
     }
-  }), schemaAndFlow.flow.length > 1 && !collapsed && /*#__PURE__*/_react["default"].createElement(_reactFeather.ArrowUp, {
+  }), !!step.collapsable && schemaAndFlow.flow.length > 1 && !collapsed && /*#__PURE__*/_react["default"].createElement(_reactFeather.ArrowUp, {
     size: 30,
     className: classes.cursor_pointer,
     style: {
@@ -1122,41 +1296,31 @@ var NestedForm = function NestedForm(_ref16) {
       top: '5px',
       left: '-16px'
     },
-    "stroke-width": "3",
+    "strok-width": "3",
     onClick: function onClick() {
       return setCollapsed(!collapsed);
     }
-  }), schemaAndFlow.flow.map(function (entry, idx) {
-    var step = schemaAndFlow.schema[entry];
+  }), computedSandF.map(function (_ref17, idx) {
+    var step = _ref17.step,
+        visibleStep = _ref17.visibleStep,
+        entry = _ref17.entry;
+
+    if (!step && typeof entry === 'string') {
+      console.error("no step found for the entry \"".concat(entry, "\" in the given schema. Your form might not work properly. Please fix it"));
+      return null;
+    }
+
     var realError = error && error[entry];
-    var oneVisibleSetup = Object.values(schema).some(function (v) {
+    var oneVisibleSetup = Object.values(schemaAndFlow.schema).some(function (v) {
       return !!v.visibleOnCollapse;
     });
     var isCollapsed = collapsed && (oneVisibleSetup ? !step.visibleOnCollapse : idx > 0);
-    var visibleStep = (0, _Option.option)(step).map(function (s) {
-      return s.visible;
-    }).map(function (visible) {
-      switch (_typeof(visible)) {
-        case 'object':
-          var _value2 = watch(visible.ref);
-
-          return (0, _Option.option)(visible.test).map(function (test) {
-            return test(_value2);
-          }).getOrElse(_value2);
-
-        case 'boolean':
-          return visible;
-
-        default:
-          return true;
-      }
-    }).getOrElse(true);
     return /*#__PURE__*/_react["default"].createElement(BasicWrapper, {
       key: "".concat(entry, ".").concat(idx),
       className: (0, _classnames["default"])(_defineProperty({}, classes.display__none, isCollapsed || !visibleStep)),
       entry: "".concat(parent, ".").concat(entry),
       error: realError,
-      label: (step === null || step === void 0 ? void 0 : step.label) === null ? null : (step === null || step === void 0 ? void 0 : step.label) || entry,
+      label: functionalProperty(entry, (step === null || step === void 0 ? void 0 : step.label) === null ? null : (step === null || step === void 0 ? void 0 : step.label) || entry),
       help: step.help,
       render: inputWrapper
     }, /*#__PURE__*/_react["default"].createElement(Step, {
@@ -1174,7 +1338,8 @@ var NestedForm = function NestedForm(_ref16) {
       watch: watch,
       inputWrapper: inputWrapper,
       httpClient: maybeCustomHttpClient,
-      defaultValue: value && value[entry]
+      defaultValue: value && value[entry],
+      functionalProperty: functionalProperty
     }));
   }));
 };

package/lib/inputs/SelectInput.js

@@ -189,6 +189,7 @@ var SelectInput = function SelectInput(props) {
       return /*#__PURE__*/_react["default"].createElement("button", {
         key: idx,
         type: "button",
+        disabled: props.disabled,
         className: (0, _classnames["default"])(props.className, classes.btn, classes.btn_grey, classes.ml_5, {
           active: active
         }),
@@ -213,7 +214,8 @@ var SelectInput = function SelectInput(props) {
         return handleCreate(option, props.onCreateOption);
       },
       classNamePrefix: "react-form-select",
-      className: props.className
+      className: props.className,
+      readOnly: props.disabled ? 'readOnly' : null
     }));
   } else {
     return /*#__PURE__*/_react["default"].createElement(_reactSelect["default"], _extends({}, props, {
@@ -225,7 +227,8 @@ var SelectInput = function SelectInput(props) {
       options: values,
       onChange: onChange,
       classNamePrefix: "react-form-select",
-      className: props.className
+      className: props.className,
+      readOnly: props.disabled ? 'readOnly' : null
     }));
   }
 };