@maif/react-forms 1.0.9 → 1.0.13

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,
@@ -330,60 +334,50 @@ var Form = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
       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,10 +444,54 @@ 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) {
+
+  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);
+      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
+      }));
+    }));
+  }
+
+  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);
@@ -943,6 +982,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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maif/react-forms",
   "description": "Build react safe forms as fast as possible",
-  "version": "1.0.9",
+  "version": "1.0.13",
   "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",