@maif/react-forms 1.0.10 → 1.0.14

package/lib/form.js

@@ -55,14 +55,14 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-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); }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+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); }
+
 var usePrevious = function usePrevious(value) {
   // The ref object is a generic container whose current property is mutable ...
   // ... and can hold any value, similar to an instance property on a class
@@ -86,6 +86,10 @@ var BasicWrapper = function BasicWrapper(_ref) {
   var classes = (0, _styleContext.useCustomStyle)();
   var id = (0, _uuid.v4)();
 
+  if (_typeof(entry) === 'object') {
+    return children;
+  }
+
   if (render) {
     return render({
       entry: entry,
@@ -324,66 +328,56 @@ var Form = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
     };
   });
   return /*#__PURE__*/_react["default"].createElement(_reactHookForm.FormProvider, methods, /*#__PURE__*/_react["default"].createElement("form", {
-    className: className || classes.pr_15,
+    className: className || "".concat(classes.pr_15, " ").concat(classes.full_width),
     onSubmit: _handleSubmit(function (data) {
       var clean = cleanOutputArray(data);
       onSubmit(clean);
     }, onError)
   }, formFlow.map(function (entry, idx) {
-    if (entry && _typeof(entry) === 'object') {
-      var errored = entry.flow.some(function (step) {
-        return !!errors[step];
-      });
-      return /*#__PURE__*/_react["default"].createElement(_index.Collapse, {
-        key: "collapse-".concat(idx),
-        label: entry.label,
-        collapsed: entry.collapsed,
-        errored: errored
-      }, entry.flow.map(function (entry, entryIdx) {
-        var step = schema[entry];
-        var error = entry.split('.').reduce(function (object, key) {
-          return object && object[key];
-        }, errors); //FIXME: better key ==> entry name + idx
-
-        return /*#__PURE__*/_react["default"].createElement(BasicWrapper, {
-          key: "collapse-".concat(idx, "-").concat(entry, "-").concat(entryIdx),
-          entry: entry,
-          error: error,
-          label: step.label || entry,
-          help: step.help,
-          render: inputWrapper
-        }, /*#__PURE__*/_react["default"].createElement(Step, {
-          entry: entry,
-          step: schema[entry],
-          error: error,
-          register: register,
-          schema: schema,
-          control: control,
-          trigger: trigger,
-          getValues: getValues,
-          setValue: setValue,
-          watch: watch,
-          inputWrapper: inputWrapper
-        }));
-      }));
-    }
-
     var step = schema[entry];
-    var error = entry.split('.').reduce(function (object, key) {
+    var error = _typeof(entry) === 'object' ? undefined : entry.split('.').reduce(function (object, key) {
       return object && object[key];
     }, errors);
+    var visibleStep = (0, _Option.option)(step).map(function (s) {
+      return s.visible;
+    }).map(function (visible) {
+      switch (_typeof(visible)) {
+        case 'object':
+          var _value = watch(step.visible.ref);
+
+          console.log({
+            value: _value,
+            step: step
+          });
+          return (0, _Option.option)(step.visible.test).map(function (test) {
+            return test(_value);
+          }).getOrElse(_value);
+
+        case 'boolean':
+          return visible;
+
+        default:
+          return true;
+      }
+    }).getOrElse(true);
+
+    if (!visibleStep) {
+      return null;
+    }
+
     return /*#__PURE__*/_react["default"].createElement(BasicWrapper, {
       key: "".concat(entry, "-").concat(idx),
       entry: entry,
       error: error,
-      label: step.label || entry,
-      help: step.help,
+      label: (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, {
       key: idx,
       entry: entry,
       step: step,
       error: error,
+      errors: errors,
       register: register,
       schema: schema,
       control: control,
@@ -437,6 +431,7 @@ var Step = function Step(_ref4) {
   var entry = _ref4.entry,
       step = _ref4.step,
       error = _ref4.error,
+      errors = _ref4.errors,
       register = _ref4.register,
       schema = _ref4.schema,
       control = _ref4.control,
@@ -449,24 +444,64 @@ var Step = function Step(_ref4) {
       defaultValue = _ref4.defaultValue,
       index = _ref4.index;
   var classes = (0, _styleContext.useCustomStyle)();
-  var visibleStep = step && (0, _Option.option)(step.visible).map(function (visible) {
-    switch (_typeof(visible)) {
-      case 'object':
-        var value = watch(step.visible.ref);
-        return (0, _Option.option)(step.visible.test).map(function (test) {
-          return test(value);
-        }).getOrElse(value);
-
-      case 'boolean':
-        return visible;
-
-      default:
-        return true;
-    }
-  }).getOrElse(true);
 
-  if (!visibleStep) {
-    return null;
+  if (entry && _typeof(entry) === 'object') {
+    var errored = entry.flow.some(function (step) {
+      return !!errors[step];
+    });
+    return /*#__PURE__*/_react["default"].createElement(_index.Collapse, {
+      label: entry.label,
+      collapsed: entry.collapsed,
+      errored: errored
+    }, 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];
+      }, errors);
+      var visibleStep = (0, _Option.option)(stp).map(function (s) {
+        return s.visible;
+      }).map(function (visible) {
+        switch (_typeof(visible)) {
+          case 'object':
+            var value = watch(visible.ref);
+            return (0, _Option.option)(visible.test).map(function (test) {
+              return test(value);
+            }).getOrElse(value);
+
+          case 'boolean':
+            return visible;
+
+          default:
+            return true;
+        }
+      }).getOrElse(true);
+
+      if (!visibleStep) {
+        return null;
+      }
+
+      return /*#__PURE__*/_react["default"].createElement(BasicWrapper, {
+        key: "collapse-".concat(en, "-").concat(entryIdx),
+        entry: en,
+        error: err,
+        label: (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, {
+        entry: en,
+        step: stp,
+        error: err,
+        errors: errors,
+        register: register,
+        schema: schema,
+        control: control,
+        trigger: trigger,
+        getValues: getValues,
+        setValue: _setValue,
+        watch: watch,
+        inputWrapper: inputWrapper
+      }));
+    }));
   }
 
   if (step.array) {
@@ -943,6 +978,7 @@ var ArrayStep = function ArrayStep(_ref15) {
       values = _ref15.values,
       defaultValue = _ref15.defaultValue,
       setValue = _ref15.setValue;
+  var classes = (0, _styleContext.useCustomStyle)();
 
   var _useFieldArray = (0, _reactHookForm.useFieldArray)({
     control: control,

package/lib/inputs/Collapse.js

@@ -59,7 +59,9 @@ var Collapse = function Collapse(props) {
     type: "button",
     className: (0, _classnames["default"])(classes.btn, _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 && props.children, props.lineEnd && /*#__PURE__*/_react["default"].createElement("hr", null));
+  }, !!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
+  }, props.children), props.lineEnd && /*#__PURE__*/_react["default"].createElement("hr", null));
 };
 
 exports.Collapse = Collapse;

package/lib/style.d.ts

@@ -123,6 +123,9 @@ export namespace style {
     namespace pr_15 {
         const paddingRight: number;
     }
+    namespace full_width {
+        const width: string;
+    }
     namespace d_none {
         const display: string;
     }
@@ -185,7 +188,8 @@ export namespace style {
         const borderColor: string;
     }
     namespace invalid_feedback {
-        export const width: string;
+        const width_1: string;
+        export { width_1 as width };
         const marginTop_4: string;
         export { marginTop_4 as marginTop };
         const fontSize_2: string;

package/lib/style.js

@@ -93,6 +93,9 @@ var style = (_style = {
   pr_15: {
     paddingRight: 15
   },
+  full_width: {
+    width: '100%'
+  },
   d_none: {
     display: "none"
   },

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" | "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" | "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">;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maif/react-forms",
   "description": "Build react safe forms as fast as possible",
-  "version": "1.0.10",
+  "version": "1.0.14",
   "main": "lib/index.js",
   "author": "MAIF team",
   "keywords": [
@@ -97,6 +97,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.15.3",
     "@hookform/resolvers": "2.4.0",
+    "@popperjs/core": "^2.11.2",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",