@maif/react-forms 1.0.52 → 1.0.55

package/lib/esm/index.js

@@ -3,7 +3,7 @@ import React, { useState, useEffect, useRef, useImperativeHandle } from 'react';
 import { yupResolver } from '@hookform/resolvers/yup';
 import classNames from 'classnames';
 import { Eye, EyeOff, PlusCircle, MinusCircle, Trash2, ChevronDown, ChevronUp, HelpCircle, Loader, Upload } from 'react-feather';
-import { useController, useFormContext, useForm, FormProvider, Controller, useFieldArray, useWatch } from 'react-hook-form';
+import { useFormContext, useController, useForm, FormProvider, Controller, useFieldArray, useWatch } from 'react-hook-form';
 import { DatePicker } from 'react-rainbow-components';
 import ReactToolTip from 'react-tooltip';
 import { v4 } from 'uuid';
@@ -970,6 +970,9 @@ var valueToSelectOption = function valueToSelectOption(value) {
 };
 
 var SelectInput = /*#__PURE__*/React.forwardRef(function (props, _) {
+  var _useFormContext = useFormContext(),
+      getValues = _useFormContext.getValues;
+
   var classes = useCustomStyle();
   var possibleValues = (props.possibleValues || []).map(function (v) {
     return props.transformer ? typeof props.transformer === 'function' ? props.transformer(v) : {
@@ -1009,9 +1012,24 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function (props, _) {
 
       if (cond) {
         setLoading(true);
-        var promise = isPromise(props.optionsFrom) ? props.optionsFrom : props.httpClient(props.optionsFrom, 'GET').then(function (r) {
-          return r.json();
-        });
+        var promise;
+
+        if (isPromise(props.optionsFrom)) {
+          promise = props.optionsFrom;
+        } else if (typeof props.optionsFrom === 'function') {
+          var result = props.optionsFrom({
+            rawValues: getValues(),
+            value: getValues(props.id)
+          });
+          promise = isPromise(result) ? result : props.httpClient(result, 'GET').then(function (r) {
+            return r.json();
+          });
+        } else {
+          promise = props.httpClient(props.optionsFrom, 'GET').then(function (r) {
+            return r.json();
+          });
+        }
+
         promise.then(function (values) {
           return values.map(function (x) {
             return props.transformer ? props.transformer(x) : valueToSelectOption(x, values, props.isMulti, props.transformer);
@@ -28863,18 +28881,28 @@ var buildSubResolver = function buildSubResolver(props, key, dependencies, rawDa
           return s.condition === ref;
         }
       });
-      return option(filterSwitch).getOrElse(condiSchema["switch"].find(function (s) {
+      return option(filterSwitch).orElse(condiSchema["switch"].find(function (s) {
         return s["default"];
-      }));
-    }).getOrElse({}),
+      })).getOrElse({
+        schema: {},
+        flow: []
+      });
+    }).getOrElse({
+      schema: {},
+      flow: []
+    }),
         schema = _option$map$getOrElse.schema,
         flow = _option$map$getOrElse.flow;
 
-    var _subResolver2 = getShapeAndDependencies(flow || Object.keys(schema), schema, dependencies, rawData);
+    var realFlow = flow || Object.keys(schema);
 
-    return constraints.reduce(function (resolver, constraint) {
-      return jsonOrFunctionConstraint(constraint, resolver, key, dependencies);
-    }, yup.object().shape(_subResolver2.shape, dependencies));
+    if (realFlow.length) {
+      var _subResolver2 = getShapeAndDependencies(flow || Object.keys(schema), schema, dependencies, rawData);
+
+      return constraints.reduce(function (resolver, constraint) {
+        return jsonOrFunctionConstraint(constraint, resolver, key, dependencies);
+      }, yup.object().shape(_subResolver2.shape, dependencies));
+    }
   } else {
     return constraints.reduce(function (resolver, constraint) {
       return jsonOrFunctionConstraint(constraint, resolver, key, dependencies);
@@ -28928,12 +28956,7 @@ var CustomizableInput$1 = /*#__PURE__*/React.memo(function (props) {
 
   return props.children;
 }, function (prev, next) {
-  console.debug({
-    prev: prev,
-    next: next
-  });
-
-  if (next.render) {
+  if (next.render || next.conditionalSchema) {
     return false;
   }
 
@@ -29322,9 +29345,9 @@ var Form = /*#__PURE__*/React.forwardRef(function (_ref7, ref) {
     initialReseted && trigger();
   }, [trigger, initialReseted]);
   var _handleSubmit = methods.handleSubmit,
-      _methods$formState = methods.formState,
-      errors = _methods$formState.errors,
-      dirtyFields = _methods$formState.dirtyFields,
+      _methods$formState = methods.formState;
+      _methods$formState.errors;
+      var dirtyFields = _methods$formState.dirtyFields,
       _reset = methods.reset,
       trigger = methods.trigger,
       getValues = methods.getValues,
@@ -29385,9 +29408,6 @@ var Form = /*#__PURE__*/React.forwardRef(function (_ref7, ref) {
       return null;
     }
 
-    _typeof$1(entry) === 'object' ? undefined : entry.split('.').reduce(function (object, key) {
-      return object && object[key];
-    }, errors);
     var visibleStep = option(step).map(function (s) {
       return s.visible;
     }).map(function (visible) {
@@ -30037,7 +30057,7 @@ var ArrayStep = function ArrayStep(_ref11) {
 };
 
 var NestedForm = function NestedForm(_ref12) {
-  var _classNames17;
+  var _step$conditionalSche, _classNames17;
 
   var schema = _ref12.schema,
       flow = _ref12.flow,
@@ -30054,8 +30074,6 @@ var NestedForm = function NestedForm(_ref12) {
       getValues = _useFormContext4.getValues,
       setValue = _useFormContext4.setValue,
       watch = _useFormContext4.watch;
-      _useFormContext4.trigger;
-      _useFormContext4.formState;
 
   var _useState7 = useState(!!step.collapsed),
       _useState8 = _slicedToArray(_useState7, 2),
@@ -30063,6 +30081,7 @@ var NestedForm = function NestedForm(_ref12) {
       setCollapsed = _useState8[1];
 
   var classes = useCustomStyle();
+  useWatch(step === null || step === void 0 ? void 0 : (_step$conditionalSche = step.conditionalSchema) === null || _step$conditionalSche === void 0 ? void 0 : _step$conditionalSche.ref);
   var schemaAndFlow = option(step.conditionalSchema).map(function (condiSchema) {
     var ref = option(condiSchema.ref).map(function (ref) {
       return getValues(ref);
@@ -30078,9 +30097,16 @@ var NestedForm = function NestedForm(_ref12) {
         return s.condition === ref;
       }
     });
-    return option(filterSwitch).getOrElse(condiSchema["switch"].find(function (s) {
+    var schemaAndFlow = option(filterSwitch).orElse(condiSchema["switch"].find(function (s) {
       return s["default"];
-    }));
+    })).getOrElse({
+      schema: {},
+      flow: []
+    });
+    return {
+      schema: schemaAndFlow.schema,
+      flow: schemaAndFlow.flow || Object.keys(schemaAndFlow.schema)
+    };
   }).getOrElse({
     schema: schema,
     flow: flow
@@ -30122,7 +30148,7 @@ var NestedForm = function NestedForm(_ref12) {
   }, []);
   var bordered = computedSandF.filter(function (x) {
     return x.visibleStep;
-  }).length > 1 && step.label !== null;
+  }).length >= 1 && step.label !== null;
   return /*#__PURE__*/React.createElement("div", {
     className: classNames((_classNames17 = {}, _defineProperty$1(_classNames17, classes.nestedform__border, bordered), _defineProperty$1(_classNames17, classes.border__error, !!errorDisplayed), _classNames17)),
     style: {

package/lib/index.js

@@ -1004,6 +1004,9 @@ var valueToSelectOption = function valueToSelectOption(value) {
 };
 
 var SelectInput = /*#__PURE__*/React__default["default"].forwardRef(function (props, _) {
+  var _useFormContext = reactHookForm.useFormContext(),
+      getValues = _useFormContext.getValues;
+
   var classes = useCustomStyle();
   var possibleValues = (props.possibleValues || []).map(function (v) {
     return props.transformer ? typeof props.transformer === 'function' ? props.transformer(v) : {
@@ -1043,9 +1046,24 @@ var SelectInput = /*#__PURE__*/React__default["default"].forwardRef(function (pr
 
       if (cond) {
         setLoading(true);
-        var promise = isPromise(props.optionsFrom) ? props.optionsFrom : props.httpClient(props.optionsFrom, 'GET').then(function (r) {
-          return r.json();
-        });
+        var promise;
+
+        if (isPromise(props.optionsFrom)) {
+          promise = props.optionsFrom;
+        } else if (typeof props.optionsFrom === 'function') {
+          var result = props.optionsFrom({
+            rawValues: getValues(),
+            value: getValues(props.id)
+          });
+          promise = isPromise(result) ? result : props.httpClient(result, 'GET').then(function (r) {
+            return r.json();
+          });
+        } else {
+          promise = props.httpClient(props.optionsFrom, 'GET').then(function (r) {
+            return r.json();
+          });
+        }
+
         promise.then(function (values) {
           return values.map(function (x) {
             return props.transformer ? props.transformer(x) : valueToSelectOption(x, values, props.isMulti, props.transformer);
@@ -28897,18 +28915,28 @@ var buildSubResolver = function buildSubResolver(props, key, dependencies, rawDa
           return s.condition === ref;
         }
       });
-      return option(filterSwitch).getOrElse(condiSchema["switch"].find(function (s) {
+      return option(filterSwitch).orElse(condiSchema["switch"].find(function (s) {
         return s["default"];
-      }));
-    }).getOrElse({}),
+      })).getOrElse({
+        schema: {},
+        flow: []
+      });
+    }).getOrElse({
+      schema: {},
+      flow: []
+    }),
         schema = _option$map$getOrElse.schema,
         flow = _option$map$getOrElse.flow;
 
-    var _subResolver2 = getShapeAndDependencies(flow || Object.keys(schema), schema, dependencies, rawData);
+    var realFlow = flow || Object.keys(schema);
 
-    return constraints.reduce(function (resolver, constraint) {
-      return jsonOrFunctionConstraint(constraint, resolver, key, dependencies);
-    }, yup__namespace.object().shape(_subResolver2.shape, dependencies));
+    if (realFlow.length) {
+      var _subResolver2 = getShapeAndDependencies(flow || Object.keys(schema), schema, dependencies, rawData);
+
+      return constraints.reduce(function (resolver, constraint) {
+        return jsonOrFunctionConstraint(constraint, resolver, key, dependencies);
+      }, yup__namespace.object().shape(_subResolver2.shape, dependencies));
+    }
   } else {
     return constraints.reduce(function (resolver, constraint) {
       return jsonOrFunctionConstraint(constraint, resolver, key, dependencies);
@@ -28962,12 +28990,7 @@ var CustomizableInput$1 = /*#__PURE__*/React__default["default"].memo(function (
 
   return props.children;
 }, function (prev, next) {
-  console.debug({
-    prev: prev,
-    next: next
-  });
-
-  if (next.render) {
+  if (next.render || next.conditionalSchema) {
     return false;
   }
 
@@ -29356,9 +29379,9 @@ var Form = /*#__PURE__*/React__default["default"].forwardRef(function (_ref7, re
     initialReseted && trigger();
   }, [trigger, initialReseted]);
   var _handleSubmit = methods.handleSubmit,
-      _methods$formState = methods.formState,
-      errors = _methods$formState.errors,
-      dirtyFields = _methods$formState.dirtyFields,
+      _methods$formState = methods.formState;
+      _methods$formState.errors;
+      var dirtyFields = _methods$formState.dirtyFields,
       _reset = methods.reset,
       trigger = methods.trigger,
       getValues = methods.getValues,
@@ -29419,9 +29442,6 @@ var Form = /*#__PURE__*/React__default["default"].forwardRef(function (_ref7, re
       return null;
     }
 
-    _typeof$1(entry) === 'object' ? undefined : entry.split('.').reduce(function (object, key) {
-      return object && object[key];
-    }, errors);
     var visibleStep = option(step).map(function (s) {
       return s.visible;
     }).map(function (visible) {
@@ -30071,7 +30091,7 @@ var ArrayStep = function ArrayStep(_ref11) {
 };
 
 var NestedForm = function NestedForm(_ref12) {
-  var _classNames17;
+  var _step$conditionalSche, _classNames17;
 
   var schema = _ref12.schema,
       flow = _ref12.flow,
@@ -30088,8 +30108,6 @@ var NestedForm = function NestedForm(_ref12) {
       getValues = _useFormContext4.getValues,
       setValue = _useFormContext4.setValue,
       watch = _useFormContext4.watch;
-      _useFormContext4.trigger;
-      _useFormContext4.formState;
 
   var _useState7 = React.useState(!!step.collapsed),
       _useState8 = _slicedToArray(_useState7, 2),
@@ -30097,6 +30115,7 @@ var NestedForm = function NestedForm(_ref12) {
       setCollapsed = _useState8[1];
 
   var classes = useCustomStyle();
+  reactHookForm.useWatch(step === null || step === void 0 ? void 0 : (_step$conditionalSche = step.conditionalSchema) === null || _step$conditionalSche === void 0 ? void 0 : _step$conditionalSche.ref);
   var schemaAndFlow = option(step.conditionalSchema).map(function (condiSchema) {
     var ref = option(condiSchema.ref).map(function (ref) {
       return getValues(ref);
@@ -30112,9 +30131,16 @@ var NestedForm = function NestedForm(_ref12) {
         return s.condition === ref;
       }
     });
-    return option(filterSwitch).getOrElse(condiSchema["switch"].find(function (s) {
+    var schemaAndFlow = option(filterSwitch).orElse(condiSchema["switch"].find(function (s) {
       return s["default"];
-    }));
+    })).getOrElse({
+      schema: {},
+      flow: []
+    });
+    return {
+      schema: schemaAndFlow.schema,
+      flow: schemaAndFlow.flow || Object.keys(schemaAndFlow.schema)
+    };
   }).getOrElse({
     schema: schema,
     flow: flow
@@ -30156,7 +30182,7 @@ var NestedForm = function NestedForm(_ref12) {
   }, []);
   var bordered = computedSandF.filter(function (x) {
     return x.visibleStep;
-  }).length > 1 && step.label !== null;
+  }).length >= 1 && step.label !== null;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]((_classNames17 = {}, _defineProperty$1(_classNames17, classes.nestedform__border, bordered), _defineProperty$1(_classNames17, classes.border__error, !!errorDisplayed), _classNames17)),
     style: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maif/react-forms",
   "description": "Build react safe forms as fast as possible",
-  "version": "1.0.52",
+  "version": "1.0.55",
   "main": "lib/index.js",
   "module": "lib/esm/index.js",
   "types": "lib/index.js",
@@ -56,7 +56,7 @@
     ]
   },
   "peerDependencies": {
-    "react": "^17.0.2"
+    "react": "^17.0.2 || 18"
   },
   "devDependencies": {
     "@babel/cli": "^7.17.6",
@@ -98,7 +98,6 @@
     "@codemirror/theme-one-dark": "^0.19.1",
     "@fortawesome/fontawesome-free": "^5.15.3",
     "@hookform/resolvers": "2.4.0",
-    "@maif/react-forms": "^1.0.37-rc.1",
     "@popperjs/core": "^2.11.2",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",