@maif/react-forms 1.0.25 → 1.0.29

package/lib/form.js

@@ -171,16 +171,16 @@ var defaultVal = function defaultVal(t, array, defaultValue) {
 
 var getDefaultValues = function getDefaultValues(flow, schema) {
   return flow.reduce(function (acc, key) {
+    if (_typeof(key) === 'object') {
+      return _objectSpread(_objectSpread({}, acc), getDefaultValues(key.flow, schema));
+    }
+
     var entry = schema[key];
 
     if (!entry) {
       return acc;
     }
 
-    if (_typeof(key) === 'object') {
-      return _objectSpread(_objectSpread({}, acc), getDefaultValues(key.flow, schema));
-    }
-
     return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, defaultVal(entry.type, entry.array || entry.isMulti, entry.defaultValue)));
   }, {});
 };
@@ -238,7 +238,7 @@ var Form = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
         var isArray = (0, _Option.option)(subSchema).orElse(schema).map(function (s) {
           return s[key];
         }).map(function (entry) {
-          return !!entry.array;
+          return !!entry.array && !entry.render;
         }).getOrElse(false);
 
         if (isArray) {
@@ -270,7 +270,7 @@ var Form = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
         var isArray = (0, _Option.option)(subSchema).orElse(schema).map(function (s) {
           return s[key];
         }).map(function (entry) {
-          return !!entry.array;
+          return !!entry.array && !entry.render;
         }).getOrElse(false);
 
         if (isArray) {
@@ -347,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) {
@@ -391,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, {
@@ -408,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,
@@ -473,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') {
@@ -519,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, {
@@ -536,24 +550,27 @@ 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
       }));
     }));
   }
 
-  var disabled = function disabled() {
-    if (typeof step.disabled === 'function') {
-      return step.disabled({
-        rawValues: getValues(),
-        value: getValues(entry)
-      });
-    } else {
-      return step.disabled;
-    }
-  };
-
   if (step.array) {
-    return /*#__PURE__*/_react["default"].createElement(ArrayStep, {
+    return /*#__PURE__*/_react["default"].createElement(CustomizableInput, {
+      render: step.render,
+      field: {
+        setValue: function setValue(key, value) {
+          return _setValue(key, value);
+        },
+        rawValues: getValues(),
+        value: getValues(entry),
+        onChange: function onChange(v) {
+          return _setValue(entry, v);
+        }
+      },
+      error: error
+    }, /*#__PURE__*/_react["default"].createElement(ArrayStep, {
       entry: entry,
       step: step,
       trigger: trigger,
@@ -564,13 +581,14 @@ var Step = function Step(_ref4) {
       values: getValues(entry),
       defaultValue: step.defaultValue || defaultVal(step.type),
       getValues: getValues,
-      disabled: disabled(),
+      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]), {}, {
+            render: step.itemRender,
             onChange: undefined,
             array: false
           }),
@@ -586,10 +604,11 @@ var Step = function Step(_ref4) {
           httpClient: httpClient,
           defaultValue: props.defaultValue,
           value: props.value,
-          index: idx
+          index: idx,
+          functionalProperty: functionalProperty
         });
       }
-    });
+    }));
   }
 
   var registeredInput = register(entry);
@@ -628,7 +647,7 @@ var Step = function Step(_ref4) {
             type: "text",
             id: entry,
             className: (0, _classnames["default"])(classes.input, _defineProperty({}, classes.input__invalid, error)),
-            readOnly: disabled() ? 'readOnly' : null
+            readOnly: functionalProperty(entry, step.disabled) ? 'readOnly' : null
           }, step.props, {
             defaultValue: defaultValue,
             placeholder: step.placeholder
@@ -651,7 +670,7 @@ var Step = function Step(_ref4) {
                 error: error
               }, /*#__PURE__*/_react["default"].createElement(_index.CodeInput, _extends({
                 className: (0, _classnames["default"])(_defineProperty({}, classes.input__invalid, error)),
-                readOnly: disabled() ? true : false,
+                readOnly: functionalProperty(entry, step.disabled) ? true : false,
                 onChange: function onChange(e) {
                   field.onChange(e);
                   (0, _Option.option)(step.onChange).map(function (onChange) {
@@ -685,7 +704,7 @@ 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: disabled() ? 'readOnly' : null,
+                readOnly: functionalProperty(entry, step.disabled) ? 'readOnly' : null,
                 onChange: function onChange(e) {
                   field.onChange(e);
                   (0, _Option.option)(step.onChange).map(function (onChange) {
@@ -720,7 +739,7 @@ var Step = function Step(_ref4) {
                 error: error
               }, /*#__PURE__*/_react["default"].createElement(_index.SelectInput, _extends({}, step.props, step, {
                 className: (0, _classnames["default"])(_defineProperty({}, classes.input__invalid, error)),
-                disabled: disabled(),
+                disabled: functionalProperty(entry, step.disabled),
                 value: field.value,
                 possibleValues: step.options,
                 defaultValue: defaultValue,
@@ -759,7 +778,7 @@ var Step = function Step(_ref4) {
             type: step.format || 'text',
             id: entry,
             className: (0, _classnames["default"])(classes.input, _defineProperty({}, classes.input__invalid, error)),
-            readOnly: disabled() ? 'readOnly' : null,
+            readOnly: functionalProperty(entry, step.disabled) ? 'readOnly' : null,
             defaultValue: defaultValue,
             placeholder: step.placeholder
           }, inputProps)));
@@ -785,7 +804,7 @@ var Step = function Step(_ref4) {
                 error: error
               }, /*#__PURE__*/_react["default"].createElement(_index.SelectInput, _extends({}, step.props, step, {
                 className: (0, _classnames["default"])(classes.content, _defineProperty({}, classes.input__invalid, error)),
-                readOnly: disabled() ? 'readOnly' : null,
+                readOnly: functionalProperty(entry, step.disabled) ? 'readOnly' : null,
                 onChange: function onChange(e) {
                   field.onChange(e);
                   (0, _Option.option)(step.onChange).map(function (onChange) {
@@ -822,7 +841,7 @@ var Step = function Step(_ref4) {
             type: step.format || 'number',
             id: entry,
             className: (0, _classnames["default"])(classes.input, _defineProperty({}, classes.input__invalid, error)),
-            readOnly: disabled() ? 'readOnly' : null,
+            readOnly: functionalProperty(entry, step.disabled) ? 'readOnly' : null,
             name: entry,
             placeholder: step.placeholder,
             defaultValue: defaultValue
@@ -846,7 +865,7 @@ 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: disabled() ? 'readOnly' : null,
+            readOnly: functionalProperty(entry, step.disabled) ? 'readOnly' : null,
             onChange: function onChange(e) {
               field.onChange(e);
               (0, _Option.option)(step.onChange).map(function (onChange) {
@@ -883,7 +902,7 @@ var Step = function Step(_ref4) {
                 error: error
               }, /*#__PURE__*/_react["default"].createElement(_index.SelectInput, _extends({}, step.props, step, {
                 className: (0, _classnames["default"])(_defineProperty({}, classes.input__invalid, error)),
-                readOnly: disabled() ? 'readOnly' : null,
+                readOnly: functionalProperty(entry, step.disabled) ? 'readOnly' : null,
                 onChange: function onChange(e) {
                   field.onChange(e);
                   (0, _Option.option)(step.onChange).map(function (onChange) {
@@ -930,7 +949,8 @@ var Step = function Step(_ref4) {
             maybeCustomHttpClient: httpClient,
             value: getValues(entry) || defaultValue,
             error: error,
-            index: index
+            index: index,
+            functionalProperty: functionalProperty
           }));
 
         default:
@@ -951,7 +971,7 @@ var Step = function Step(_ref4) {
                 error: error
               }, /*#__PURE__*/_react["default"].createElement(_index.ObjectInput, _extends({}, step.props, step, {
                 className: (0, _classnames["default"])(_defineProperty({}, classes.input__invalid, error)),
-                readOnly: disabled() ? 'readOnly' : null,
+                readOnly: functionalProperty(entry, step.disabled) ? 'readOnly' : null,
                 onChange: function onChange(e) {
                   field.onChange(e);
                   (0, _Option.option)(step.onChange).map(function (onChange) {
@@ -988,7 +1008,7 @@ 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: disabled() ? 'readOnly' : null,
+            readOnly: functionalProperty(entry, step.disabled) ? 'readOnly' : null,
             value: field.value,
             onChange: function onChange(e) {
               field.onChange(e);
@@ -1050,7 +1070,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(),
+                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)
@@ -1102,7 +1122,7 @@ var Step = function Step(_ref4) {
         type: "file",
         id: entry,
         className: (0, _classnames["default"])(classes.input, _defineProperty({}, classes.input__invalid, error)),
-        readOnly: disabled() ? 'readOnly' : null,
+        readOnly: functionalProperty(entry, step.disabled) ? 'readOnly' : null,
         name: entry,
         placeholder: step.placeholder
       }, inputProps)));
@@ -1182,6 +1202,8 @@ var ArrayStep = function ArrayStep(_ref15) {
 };
 
 var NestedForm = function NestedForm(_ref16) {
+  var _classNames15;
+
   var schema = _ref16.schema,
       flow = _ref16.flow,
       parent = _ref16.parent,
@@ -1190,7 +1212,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,
@@ -1266,9 +1289,9 @@ var NestedForm = function NestedForm(_ref16) {
   }, []);
   var bordered = computedSandF.filter(function (x) {
     return x.visibleStep;
-  }).length > 1 && step.label === null;
+  }).length > 1 && step.label !== null;
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])(_defineProperty({}, classes.nestedform__border, bordered))
+    className: (0, _classnames["default"])((_classNames15 = {}, _defineProperty(_classNames15, classes.nestedform__border, bordered), _defineProperty(_classNames15, classes.border__error, !!error), _classNames15))
   }, !!step.collapsable && schemaAndFlow.flow.length > 1 && collapsed && /*#__PURE__*/_react["default"].createElement(_reactFeather.ArrowDown, {
     size: 30,
     className: classes.cursor_pointer,
@@ -1313,7 +1336,7 @@ var NestedForm = function NestedForm(_ref16) {
       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, {
@@ -1331,7 +1354,8 @@ var NestedForm = function NestedForm(_ref16) {
       watch: watch,
       inputWrapper: inputWrapper,
       httpClient: maybeCustomHttpClient,
-      defaultValue: value && value[entry]
+      defaultValue: value && value[entry],
+      functionalProperty: functionalProperty
     }));
   }));
 };

package/lib/resolvers/utils.js

@@ -42,8 +42,7 @@ var resolvers = (_resolvers = {}, _defineProperty(_resolvers, _type.type.string,
 }), _resolvers);
 
 var buildSubResolver = function buildSubResolver(props, key, dependencies, rawData) {
-  var type = props.type,
-      _props$constraints = props.constraints,
+  var _props$constraints = props.constraints,
       constraints = _props$constraints === void 0 ? [] : _props$constraints;
 
   if (props.array || props.isMulti) {
@@ -64,13 +63,13 @@ var buildSubResolver = function buildSubResolver(props, key, dependencies, rawDa
     return constraints.reduce(function (resolver, constraint) {
       return jsonOrFunctionConstraint(constraint, resolver, key, dependencies);
     }, arrayResolver);
-  } else if (props.type === type.object && props.schema) {
+  } else if (props.type === _type.type.object && props.schema) {
     var _subResolver = getShapeAndDependencies(props.flow || Object.keys(props.schema), props.schema, dependencies, rawData);
 
     return constraints.reduce(function (resolver, constraint) {
       return jsonOrFunctionConstraint(constraint, resolver, key, dependencies);
     }, yup.object().shape(_subResolver.shape, dependencies));
-  } else if (props.type === type.object && props.conditionalSchema) {
+  } else if (props.type === _type.type.object && props.conditionalSchema) {
     var _option$map$getOrElse = (0, _Option.option)(props.conditionalSchema).map(function (condiSchema) {
       var ref = (0, _Option.option)(condiSchema.ref).map(function (ref) {
         return rawData[ref];
@@ -100,7 +99,7 @@ var buildSubResolver = function buildSubResolver(props, key, dependencies, rawDa
   } else {
     return constraints.reduce(function (resolver, constraint) {
       return jsonOrFunctionConstraint(constraint, resolver, key, dependencies);
-    }, resolvers[type]());
+    }, resolvers[props.type]());
   }
 };
 

package/lib/style.d.ts

@@ -12,22 +12,23 @@ export namespace style {
             opacity: number;
         };
     };
-    namespace btn {
-        const borderRadius: number;
-        const padding: number;
-        const fontSize: string;
-        const cursor: string;
-        const borderWidth: string;
-        const backgroundColor: string;
-    }
+    const btn: {
+        borderRadius: number;
+        padding: number;
+        fontSize: string;
+        cursor: string;
+        borderWidth: string;
+        backgroundColor: string;
+        '&:disabled': {
+            opacity: number;
+            cursor: string;
+        };
+    };
     namespace btn_sm {
-        const fontSize_1: string;
-        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 fontSize: string;
+        const padding: string;
+        const lineHeight: string;
+        const borderRadius: string;
     }
     const btn_group: {
         "& > button:not(:last-child)": {
@@ -127,8 +128,8 @@ export namespace style {
         const marginBottom: number;
     }
     namespace p_15 {
-        const padding_2: number;
-        export { padding_2 as padding };
+        const padding_1: number;
+        export { padding_1 as padding };
     }
     namespace pr_15 {
         const paddingRight: number;
@@ -160,16 +161,15 @@ export namespace style {
         const alignItems: string;
     }
     namespace cursor_pointer {
-        const cursor_1: string;
-        export { cursor_1 as cursor };
+        const cursor: string;
     }
     namespace collapse {
         const display_2: string;
         export { display_2 as display };
         const justifyContent_2: string;
         export { justifyContent_2 as justifyContent };
-        const cursor_2: string;
-        export { cursor_2 as cursor };
+        const cursor_1: string;
+        export { cursor_1 as cursor };
     }
     namespace collapse_label {
         export const fontWeight: string;
@@ -202,8 +202,8 @@ export namespace style {
         export { width_1 as width };
         const marginTop_4: string;
         export { marginTop_4 as marginTop };
-        const fontSize_2: string;
-        export { fontSize_2 as fontSize };
+        const fontSize_1: string;
+        export { fontSize_1 as fontSize };
         const color_4: string;
         export { color_4 as color };
     }
@@ -223,4 +223,8 @@ export namespace style {
         export { marginBottom_1 as marginBottom };
         export const position: string;
     }
+    namespace border__error {
+        const borderColor_1: string;
+        export { borderColor_1 as borderColor };
+    }
 }

package/lib/style.js

@@ -46,7 +46,11 @@ var style = (_style = {
     fontSize: "1rem",
     cursor: "pointer",
     borderWidth: '1px',
-    backgroundColor: '#fff'
+    backgroundColor: '#fff',
+    '&:disabled': {
+      opacity: .6,
+      cursor: 'not-allowed'
+    }
   },
   btn_sm: {
     fontSize: "0.875rem",
@@ -168,5 +172,7 @@ var style = (_style = {
   paddingLeft: '1rem',
   marginBottom: '.5rem',
   position: 'relative'
+}), _defineProperty(_style, "border__error", {
+  borderColor: "#dc3545"
 }), _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" | "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" | "nestedform__border">;
+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" | "nestedform__border" | "border__error">;

package/package.json

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