@maif/react-forms 1.0.25 → 1.0.26

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)));
   }, {});
 };
@@ -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,22 +550,12 @@ 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, {
       entry: entry,
@@ -564,7 +568,7 @@ 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;
 
@@ -586,7 +590,8 @@ var Step = function Step(_ref4) {
           httpClient: httpClient,
           defaultValue: props.defaultValue,
           value: props.value,
-          index: idx
+          index: idx,
+          functionalProperty: functionalProperty
         });
       }
     });
@@ -628,7 +633,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 +656,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 +690,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 +725,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 +764,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 +790,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 +827,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 +851,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 +888,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 +935,8 @@ var Step = function Step(_ref4) {
             maybeCustomHttpClient: httpClient,
             value: getValues(entry) || defaultValue,
             error: error,
-            index: index
+            index: index,
+            functionalProperty: functionalProperty
           }));
 
         default:
@@ -951,7 +957,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 +994,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 +1056,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 +1108,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)));
@@ -1190,7 +1196,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,7 +1273,7 @@ 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))
   }, !!step.collapsable && schemaAndFlow.flow.length > 1 && collapsed && /*#__PURE__*/_react["default"].createElement(_reactFeather.ArrowDown, {
@@ -1313,7 +1320,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 +1338,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.25",
+  "version": "1.0.26",
   "main": "lib/index.js",
   "author": "MAIF team",
   "keywords": [