@maif/react-forms 1.0.23 → 1.0.27

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) {
@@ -356,7 +368,7 @@ var Form = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
   }, formFlow.map(function (entry, idx) {
     var step = schema[entry];
 
-    if (!step) {
+    if (!step && typeof entry === 'string') {
       console.error("no step found for the entry \"".concat(entry, "\" in the given schema. Your form might not work properly. Please fix it"));
       return null;
     }
@@ -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,22 +486,9 @@ 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)();
-  var registeredInput = register(entry);
-
-  var inputProps = _objectSpread(_objectSpread({}, registeredInput), {}, {
-    onChange: function onChange(e) {
-      registeredInput.onChange(e);
-      (0, _Option.option)(step.onChange).map(function (onChange) {
-        return onChange({
-          rawValues: getValues(),
-          value: e.target.value,
-          setValue: _setValue
-        });
-      });
-    }
-  });
 
   if (entry && _typeof(entry) === 'object') {
     var errored = entry.flow.some(function (step) {
@@ -501,6 +501,12 @@ var Step = function Step(_ref4) {
       var err = _typeof(en) === 'object' ? undefined : en.split('.').reduce(function (object, key) {
         return object && object[key];
       }, errors);
+
+      if (!stp && typeof en === 'string') {
+        console.error("no step found for the entry \"".concat(en, "\" in the given schema. Your form might not work properly. Please fix it"));
+        return null;
+      }
+
       var visibleStep = (0, _Option.option)(stp).map(function (s) {
         return s.visible;
       }).map(function (visible) {
@@ -527,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, {
@@ -544,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,
@@ -572,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
           }),
@@ -594,12 +604,28 @@ var Step = function Step(_ref4) {
           httpClient: httpClient,
           defaultValue: props.defaultValue,
           value: props.value,
-          index: idx
+          index: idx,
+          functionalProperty: functionalProperty
         });
       }
-    });
+    }));
   }
 
+  var registeredInput = register(entry);
+
+  var inputProps = _objectSpread(_objectSpread({}, registeredInput), {}, {
+    onChange: function onChange(e) {
+      registeredInput.onChange(e);
+      (0, _Option.option)(step.onChange).map(function (onChange) {
+        return onChange({
+          rawValues: getValues(),
+          value: e.target.value,
+          setValue: _setValue
+        });
+      });
+    }
+  });
+
   switch (step.type) {
     case _type.type.string:
       switch (step.format) {
@@ -621,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
@@ -644,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) {
@@ -678,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) {
@@ -713,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,
@@ -752,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)));
@@ -778,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) {
@@ -815,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
@@ -839,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) {
@@ -876,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) {
@@ -923,7 +949,8 @@ var Step = function Step(_ref4) {
             maybeCustomHttpClient: httpClient,
             value: getValues(entry) || defaultValue,
             error: error,
-            index: index
+            index: index,
+            functionalProperty: functionalProperty
           }));
 
         default:
@@ -944,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) {
@@ -981,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);
@@ -1043,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)
@@ -1095,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)));
@@ -1183,7 +1210,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,
@@ -1231,7 +1259,7 @@ var NestedForm = function NestedForm(_ref16) {
       });
     }
   }, [prevSchema, schemaAndFlow.schema]);
-  var test = schemaAndFlow.flow.reduce(function (acc, entry) {
+  var computedSandF = schemaAndFlow.flow.reduce(function (acc, entry) {
     var step = schemaAndFlow.schema[entry];
     var visibleStep = (0, _Option.option)(step).map(function (s) {
       return s.visible;
@@ -1257,9 +1285,9 @@ var NestedForm = function NestedForm(_ref16) {
       entry: entry
     }]);
   }, []);
-  var bordered = test.filter(function (x) {
+  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))
   }, !!step.collapsable && schemaAndFlow.flow.length > 1 && collapsed && /*#__PURE__*/_react["default"].createElement(_reactFeather.ArrowDown, {
@@ -1286,10 +1314,16 @@ var NestedForm = function NestedForm(_ref16) {
     onClick: function onClick() {
       return setCollapsed(!collapsed);
     }
-  }), test.map(function (_ref17, idx) {
+  }), computedSandF.map(function (_ref17, idx) {
     var step = _ref17.step,
         visibleStep = _ref17.visibleStep,
         entry = _ref17.entry;
+
+    if (!step && typeof entry === 'string') {
+      console.error("no step found for the entry \"".concat(entry, "\" in the given schema. Your form might not work properly. Please fix it"));
+      return null;
+    }
+
     var realError = error && error[entry];
     var oneVisibleSetup = Object.values(schemaAndFlow.schema).some(function (v) {
       return !!v.visibleOnCollapse;
@@ -1300,7 +1334,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, {
@@ -1318,7 +1352,8 @@ var NestedForm = function NestedForm(_ref16) {
       watch: watch,
       inputWrapper: inputWrapper,
       httpClient: maybeCustomHttpClient,
-      defaultValue: value && value[entry]
+      defaultValue: value && value[entry],
+      functionalProperty: functionalProperty
     }));
   }));
 };

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

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

package/package.json

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