@maif/react-forms 1.0.18 → 1.0.22

package/lib/form.js

@@ -78,6 +78,7 @@ var usePrevious = function usePrevious(value) {
 
 var BasicWrapper = function BasicWrapper(_ref) {
   var entry = _ref.entry,
+      className = _ref.className,
       label = _ref.label,
       error = _ref.error,
       help = _ref.help,
@@ -101,7 +102,7 @@ var BasicWrapper = function BasicWrapper(_ref) {
   }
 
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "form-group mt-3"
+    className: "form-group mt-3 ".concat(className)
   }, label && /*#__PURE__*/_react["default"].createElement("label", {
     className: "form-label d-flex align-content-center",
     htmlFor: entry
@@ -238,9 +239,9 @@ var Form = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
 
         return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, v));
       } else if (!!v && _typeof(v) === 'object') {
-        var _schema$key;
+        var _subSchema$key;
 
-        return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, cleanInputArray(v, ((_schema$key = schema[key]) === null || _schema$key === void 0 ? void 0 : _schema$key.schema) || {})));
+        return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, cleanInputArray(v, ((_subSchema$key = subSchema[key]) === null || _subSchema$key === void 0 ? void 0 : _subSchema$key.schema) || {})));
       } else {
         return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, v));
       }
@@ -269,9 +270,9 @@ var Form = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
 
         return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, v));
       } else if (!!v && _typeof(v) === 'object') {
-        var _schema$key2;
+        var _subSchema$key2;
 
-        return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, cleanOutputArray(v, ((_schema$key2 = schema[key]) === null || _schema$key2 === void 0 ? void 0 : _schema$key2.schema) || {})));
+        return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, cleanOutputArray(v, ((_subSchema$key2 = subSchema[key]) === null || _subSchema$key2 === void 0 ? void 0 : _subSchema$key2.schema) || {})));
       } else {
         return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, v));
       }
@@ -282,7 +283,7 @@ var Form = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
     resolver: function resolver(data, context, options) {
       return (0, _yup.yupResolver)(_resolver(data))(data, context, options);
     },
-    defaultValues: cleanInputArray(value || defaultValues),
+    defaultValues: cleanInputArray(value || defaultValues, schema),
     shouldFocusError: !options.autosubmit
   });
   var register = methods.register,
@@ -296,11 +297,11 @@ var Form = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
       setValue = methods.setValue;
   (0, _react.useEffect)(function () {
     if (value) {
-      _reset(cleanInputArray(value));
+      _reset(cleanInputArray(value, schema));
     }
   }, [value, _reset]);
   (0, _react.useEffect)(function () {
-    _reset(cleanInputArray(value || defaultValues));
+    _reset(cleanInputArray(value || defaultValues, schema));
   }, [schema]);
   var data = watch();
   var prevData = usePrevious(data);
@@ -308,23 +309,27 @@ var Form = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
     //todo: with debounce
     if (!!options.autosubmit && JSON.stringify(data) !== JSON.stringify(prevData)) {
       _handleSubmit(function (data) {
-        var clean = cleanOutputArray(data);
+        var clean = cleanOutputArray(data, schema);
         onSubmit(clean);
       }, onError)();
     }
   }, [data]);
 
   if (options.watch) {
-    console.group('react-form watch');
-    console.log(watch());
-    console.groupEnd();
+    if (typeof options.watch === 'function') {
+      options.watch(watch());
+    } else {
+      console.group('react-form watch');
+      console.log(watch());
+      console.groupEnd();
+    }
   }
 
   (0, _react.useImperativeHandle)(ref, function () {
     return {
       handleSubmit: function handleSubmit() {
         return _handleSubmit(function (data) {
-          var clean = cleanOutputArray(data);
+          var clean = cleanOutputArray(data, schema);
           onSubmit(clean);
         }, onError)();
       }
@@ -333,7 +338,7 @@ var Form = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
   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) {
-      var clean = cleanOutputArray(data);
+      var clean = cleanOutputArray(data, schema);
       onSubmit(clean);
     }, onError)
   }, formFlow.map(function (entry, idx) {
@@ -393,7 +398,7 @@ var Form = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
       return _reset(defaultValues);
     },
     valid: _handleSubmit(function (data) {
-      return onSubmit(cleanOutputArray(data));
+      return onSubmit(cleanOutputArray(data, schema));
     }, onError),
     actions: options.actions
   })));
@@ -402,7 +407,7 @@ var Form = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
 exports.Form = Form;
 
 var Footer = function Footer(props) {
-  var _props$actions, _props$actions$submit, _props$actions2, _props$actions2$submi, _props$actions3, _props$actions3$reset, _props$actions4, _props$actions4$reset, _props$actions5, _props$actions5$submi;
+  var _props$actions, _props$actions$submit, _props$actions2, _props$actions2$submi, _props$actions3, _props$actions3$cance, _props$actions5, _props$actions5$cance, _props$actions6, _props$actions6$reset, _props$actions7, _props$actions7$reset, _props$actions8, _props$actions8$submi;
 
   var classes = (0, _styleContext.useCustomStyle)();
 
@@ -416,18 +421,27 @@ var Footer = function Footer(props) {
   var isSubmitDisplayed = ((_props$actions = props.actions) === null || _props$actions === void 0 ? void 0 : (_props$actions$submit = _props$actions.submit) === null || _props$actions$submit === void 0 ? void 0 : _props$actions$submit.display) === undefined ? true : !!((_props$actions2 = props.actions) !== null && _props$actions2 !== void 0 && (_props$actions2$submi = _props$actions2.submit) !== null && _props$actions2$submi !== void 0 && _props$actions2$submi.display);
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "".concat(classes.flex, " ").concat(classes.jc_end, " ").concat(classes.mt_5)
-  }, ((_props$actions3 = props.actions) === null || _props$actions3 === void 0 ? void 0 : (_props$actions3$reset = _props$actions3.reset) === null || _props$actions3$reset === void 0 ? void 0 : _props$actions3$reset.display) && /*#__PURE__*/_react["default"].createElement("button", {
+  }, ((_props$actions3 = props.actions) === null || _props$actions3 === void 0 ? void 0 : (_props$actions3$cance = _props$actions3.cancel) === null || _props$actions3$cance === void 0 ? void 0 : _props$actions3$cance.display) && /*#__PURE__*/_react["default"].createElement("button", {
+    className: "".concat(classes.btn, " ").concat(classes.btn_red),
+    type: "button",
+    onClick: function onClick() {
+      var _props$actions4;
+
+      return (_props$actions4 = props.actions) === null || _props$actions4 === void 0 ? void 0 : _props$actions4.cancel.action();
+    }
+  }, ((_props$actions5 = props.actions) === null || _props$actions5 === void 0 ? void 0 : (_props$actions5$cance = _props$actions5.cancel) === null || _props$actions5$cance === void 0 ? void 0 : _props$actions5$cance.label) || 'Cancel'), ((_props$actions6 = props.actions) === null || _props$actions6 === void 0 ? void 0 : (_props$actions6$reset = _props$actions6.reset) === null || _props$actions6$reset === void 0 ? void 0 : _props$actions6$reset.display) && /*#__PURE__*/_react["default"].createElement("button", {
     className: "".concat(classes.btn, " ").concat(classes.btn_red),
     type: "button",
     onClick: props.reset
-  }, ((_props$actions4 = props.actions) === null || _props$actions4 === void 0 ? void 0 : (_props$actions4$reset = _props$actions4.reset) === null || _props$actions4$reset === void 0 ? void 0 : _props$actions4$reset.label) || 'Reset'), isSubmitDisplayed && /*#__PURE__*/_react["default"].createElement("button", {
+  }, ((_props$actions7 = props.actions) === null || _props$actions7 === void 0 ? void 0 : (_props$actions7$reset = _props$actions7.reset) === null || _props$actions7$reset === void 0 ? void 0 : _props$actions7$reset.label) || 'Reset'), isSubmitDisplayed && /*#__PURE__*/_react["default"].createElement("button", {
     className: "".concat(classes.btn, " ").concat(classes.btn_green, " ").concat(classes.ml_10),
     type: "submit"
-  }, ((_props$actions5 = props.actions) === null || _props$actions5 === void 0 ? void 0 : (_props$actions5$submi = _props$actions5.submit) === null || _props$actions5$submi === void 0 ? void 0 : _props$actions5$submi.label) || 'Save'));
+  }, ((_props$actions8 = props.actions) === null || _props$actions8 === void 0 ? void 0 : (_props$actions8$submi = _props$actions8.submit) === null || _props$actions8$submi === void 0 ? void 0 : _props$actions8$submi.label) || 'Save'));
 };
 
 var Step = function Step(_ref4) {
   var entry = _ref4.entry,
+      realEntry = _ref4.realEntry,
       step = _ref4.step,
       error = _ref4.error,
       errors = _ref4.errors,
@@ -448,11 +462,9 @@ var Step = function Step(_ref4) {
     var errored = entry.flow.some(function (step) {
       return !!errors[step];
     });
-    return /*#__PURE__*/_react["default"].createElement(_index.Collapse, {
-      label: entry.label,
-      collapsed: entry.collapsed,
+    return /*#__PURE__*/_react["default"].createElement(_index.Collapse, _extends({}, entry, {
       errored: errored
-    }, entry.flow.map(function (en, entryIdx) {
+    }), entry.flow.map(function (en, entryIdx) {
       var stp = schema[en];
       var err = _typeof(en) === 'object' ? undefined : en.split('.').reduce(function (object, key) {
         return object && object[key];
@@ -500,7 +512,7 @@ var Step = function Step(_ref4) {
         watch: watch,
         inputWrapper: inputWrapper,
         httpClient: httpClient,
-        defaultValue: stp.defaultValue
+        defaultValue: stp === null || stp === void 0 ? void 0 : stp.defaultValue
       }));
     }));
   }
@@ -521,7 +533,7 @@ var Step = function Step(_ref4) {
 
         return /*#__PURE__*/_react["default"].createElement(Step, {
           entry: "".concat(entry, "[").concat(idx, "].value"),
-          step: _objectSpread(_objectSpread({}, schema[entry]), {}, {
+          step: _objectSpread(_objectSpread({}, schema[realEntry || entry]), {}, {
             array: false
           }),
           error: error && ((_error$idx = error[idx]) === null || _error$idx === void 0 ? void 0 : _error$idx.value),
@@ -535,7 +547,7 @@ var Step = function Step(_ref4) {
           inputWrapper: inputWrapper,
           httpClient: httpClient,
           defaultValue: props.defaultValue,
-          value: props.defaultValue,
+          value: props.value,
           index: idx
         });
       }
@@ -810,7 +822,7 @@ var Step = function Step(_ref4) {
             parent: entry,
             inputWrapper: inputWrapper,
             maybeCustomHttpClient: httpClient,
-            value: defaultValue,
+            value: getValues(entry) || defaultValue,
             error: error,
             index: index
           }));
@@ -1046,6 +1058,12 @@ var NestedForm = function NestedForm(_ref16) {
       watch = _useFormContext.watch; // retrieve all hook methods
 
 
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      collapsed = _useState6[0],
+      setCollapsed = _useState6[1];
+
+  var classes = (0, _styleContext.useCustomStyle)();
   var schemaAndFlow = (0, _Option.option)(step.conditionalSchema).map(function (condiSchema) {
     var ref = (0, _Option.option)(condiSchema.ref).map(function (ref) {
       return getValues(ref);
@@ -1070,7 +1088,7 @@ var NestedForm = function NestedForm(_ref16) {
   });
   var prevSchema = usePrevious(schemaAndFlow.schema);
   (0, _react.useEffect)(function () {
-    if (JSON.stringify(prevSchema) !== JSON.stringify(schemaAndFlow.schema)) {
+    if (!!prevSchema && JSON.stringify(prevSchema) !== JSON.stringify(schemaAndFlow.schema)) {
       var def = getDefaultValues(schemaAndFlow.flow, schemaAndFlow.schema);
       setValue(parent, def, {
         shouldValidate: false
@@ -1080,14 +1098,62 @@ var NestedForm = function NestedForm(_ref16) {
   return /*#__PURE__*/_react["default"].createElement("div", {
     style: {
       borderLeft: '2px solid lightGray',
-      paddingLeft: '.5rem',
-      marginBottom: '.5rem'
+      paddingLeft: '1rem',
+      marginBottom: '.5rem',
+      position: 'relative'
+    }
+  }, schemaAndFlow.flow.length > 1 && collapsed && /*#__PURE__*/_react["default"].createElement(_reactFeather.ArrowDown, {
+    size: 30,
+    className: classes.cursor_pointer,
+    style: {
+      position: 'absolute',
+      top: '5px',
+      left: '-16px'
+    },
+    "stroke-width": "3",
+    onClick: function onClick() {
+      return setCollapsed(!collapsed);
+    }
+  }), schemaAndFlow.flow.length > 1 && !collapsed && /*#__PURE__*/_react["default"].createElement(_reactFeather.ArrowUp, {
+    size: 30,
+    className: classes.cursor_pointer,
+    style: {
+      position: 'absolute',
+      top: '5px',
+      left: '-16px'
+    },
+    "stroke-width": "3",
+    onClick: function onClick() {
+      return setCollapsed(!collapsed);
     }
-  }, schemaAndFlow.flow.map(function (entry, idx) {
+  }), schemaAndFlow.flow.map(function (entry, idx) {
     var step = schemaAndFlow.schema[entry];
     var realError = error && error[entry];
+    var oneVisibleSetup = Object.values(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,
@@ -1096,6 +1162,7 @@ var NestedForm = function NestedForm(_ref16) {
     }, /*#__PURE__*/_react["default"].createElement(Step, {
       key: "step.".concat(entry, ".").concat(idx),
       entry: "".concat(parent, ".").concat(entry),
+      realEntry: entry,
       step: schemaAndFlow.schema[entry],
       error: realError,
       register: register,

package/lib/inputs/Collapse.js

@@ -36,6 +36,8 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var Collapse = function Collapse(props) {
+  var _classNames4;
+
   var _useState = (0, _react.useState)(props.initCollapsed || props.collapsed),
       _useState2 = _slicedToArray(_useState, 2),
       collapsed = _useState2[0],
@@ -57,10 +59,14 @@ var Collapse = function Collapse(props) {
     className: (0, _classnames["default"])(classes.collapse_label, _defineProperty({}, classes.collapse_error, props.errored))
   }, props.label), /*#__PURE__*/_react["default"].createElement("button", {
     type: "button",
-    className: (0, _classnames["default"])(classes.btn, _defineProperty({}, classes.collapse_error, props.errored)),
+    className: (0, _classnames["default"])(classes.btn, classes.btn_sm, _defineProperty({}, classes.collapse_error, props.errored)),
     onClick: toggle
-  }, !!collapsed && /*#__PURE__*/_react["default"].createElement(_reactFeather.Eye, null), !collapsed && /*#__PURE__*/_react["default"].createElement(_reactFeather.EyeOff, null))), !collapsed && /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.ml_10
+  }, !!collapsed && /*#__PURE__*/_react["default"].createElement(_reactFeather.Eye, {
+    size: 16
+  }), !collapsed && /*#__PURE__*/_react["default"].createElement(_reactFeather.EyeOff, {
+    size: 16
+  }))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])("".concat(classes.ml_10), (_classNames4 = {}, _defineProperty(_classNames4, classes.display__none, !!collapsed), _defineProperty(_classNames4, classes.flex, !!props.inline), _defineProperty(_classNames4, classes.collapse__inline, !!props.inline), _classNames4))
   }, props.children), props.lineEnd && /*#__PURE__*/_react["default"].createElement("hr", null));
 };
 

package/lib/inputs/SelectInput.js

@@ -118,9 +118,10 @@ var SelectInput = function SelectInput(props) {
 
       if (cond) {
         setLoading(true);
-        return props.httpClient(props.optionsFrom, 'GET').then(function (r) {
+        var promise = (0, _utils.isPromise)(props.optionsFrom) ? props.optionsFrom : props.httpClient(props.optionsFrom, 'GET').then(function (r) {
           return r.json();
-        }).then(function (values) {
+        });
+        promise.then(function (values) {
           return values.map(function (x) {
             return props.transformer ? props.transformer(x) : valueToSelectOption(x, values, props.isMulti, props.transformer);
           });

package/lib/style.d.ts

@@ -25,6 +25,9 @@ export namespace style {
         export { fontSize_1 as fontSize };
         const padding_1: string;
         export { padding_1 as padding };
+        export const lineHeight: string;
+        const borderRadius_1: string;
+        export { borderRadius_1 as borderRadius };
     }
     const btn_group: {
         "& > button:not(:last-child)": {
@@ -102,6 +105,13 @@ export namespace style {
         const marginLeft_1: number;
         export { marginLeft_1 as marginLeft };
     }
+    namespace mr_5 {
+        const marginRight: number;
+    }
+    namespace mr_10 {
+        const marginRight_1: number;
+        export { marginRight_1 as marginRight };
+    }
     namespace mt_5 {
         const marginTop: number;
     }
@@ -197,4 +207,13 @@ export namespace style {
         const color_4: string;
         export { color_4 as color };
     }
+    namespace display__none {
+        const display_3: string;
+        export { display_3 as display };
+    }
+    const collapse__inline: {
+        "& .form-group+.form-group": {
+            marginLeft: string;
+        };
+    };
 }

package/lib/style.js

@@ -50,7 +50,9 @@ var style = (_style = {
   },
   btn_sm: {
     fontSize: "0.875rem",
-    padding: ".25rem .5rem"
+    padding: ".25rem .5rem",
+    lineHeight: "1.5",
+    borderRadius: ".2rem"
   },
   btn_group: {
     "& > button:not(:last-child)": {
@@ -75,6 +77,12 @@ var style = (_style = {
   ml_10: {
     marginLeft: 10
   },
+  mr_5: {
+    marginRight: 5
+  },
+  mr_10: {
+    marginRight: 10
+  },
   mt_5: {
     marginTop: 5
   },
@@ -149,5 +157,11 @@ var style = (_style = {
   marginTop: ".25rem",
   fontSize: "80%",
   color: "#dc3545"
+}), _defineProperty(_style, "display__none", {
+  display: "none"
+}), _defineProperty(_style, "collapse__inline", {
+  "& .form-group+.form-group": {
+    marginLeft: '20px'
+  }
 }), _style);
 exports.style = style;

package/lib/styleContext.d.ts

@@ -1 +1 @@
-export function useCustomStyle(overrideStyle?: {}): import("jss").Classes<"code" | "flex" | "input" | "btn" | "btn_sm" | "btn_group" | "btn_red" | "btn_green" | "btn_blue" | "btn_grey" | "txt_red" | "ml_5" | "ml_10" | "mt_5" | "mt_10" | "mt_20" | "mb_5" | "p_15" | "pr_15" | "full_width" | "d_none" | "flexColumn" | "justifyContentBetween" | "jc_end" | "ac_center" | "ai_center" | "cursor_pointer" | "collapse" | "collapse_label" | "collapse_error" | "datepicker" | "input__boolean__on" | "input__boolean__off" | "input__invalid" | "invalid_feedback">;
+export function useCustomStyle(overrideStyle?: {}): import("jss").Classes<"code" | "flex" | "input" | "btn" | "btn_sm" | "btn_group" | "btn_red" | "btn_green" | "btn_blue" | "btn_grey" | "txt_red" | "ml_5" | "ml_10" | "mr_5" | "mr_10" | "mt_5" | "mt_10" | "mt_20" | "mb_5" | "p_15" | "pr_15" | "full_width" | "d_none" | "flexColumn" | "justifyContentBetween" | "jc_end" | "ac_center" | "ai_center" | "cursor_pointer" | "collapse" | "collapse_label" | "collapse_error" | "datepicker" | "input__boolean__on" | "input__boolean__off" | "input__invalid" | "invalid_feedback" | "display__none" | "collapse__inline">;

package/lib/utils.d.ts

@@ -1 +1,2 @@
 export function deepEqual(a: any, b: any): boolean;
+export function isPromise(value: any): boolean;

package/lib/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.deepEqual = void 0;
+exports.isPromise = exports.deepEqual = void 0;
 
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
@@ -28,4 +28,10 @@ var deepEqual = function deepEqual(a, b) {
   return true;
 };
 
-exports.deepEqual = deepEqual;
+exports.deepEqual = deepEqual;
+
+var isPromise = function isPromise(value) {
+  return Boolean(value && typeof value.then === 'function');
+};
+
+exports.isPromise = isPromise;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maif/react-forms",
   "description": "Build react safe forms as fast as possible",
-  "version": "1.0.18",
+  "version": "1.0.22",
   "main": "lib/index.js",
   "author": "MAIF team",
   "keywords": [