iglooform 2.5.44 → 2.5.46

package/es/form/element/index.js

@@ -47,6 +47,7 @@ import { AlertFilled } from 'iglooicon';
 import { calcFormItemProps } from '../../utils/form-utils';
 import Section from '../section';
 import AddableSection from '../addable-section';
+import Typography from '../../typography';
 import useComponent from '../elements';
 import FormContext from '../../form-context';
 import invariant from 'invariant';
@@ -342,8 +343,21 @@ var Element = function Element(_ref) {
             sm: 24,
             xs: 24,
             className: "igloo-element-preview-value",
-            children: [error && !!error.length && _jsx(AlertFilled, {
-              className: "igloo-element-preview-value-icon"
+            children: [error && !!error.length && _jsxs(_Row, {
+              style: {
+                alignItems: 'center'
+              },
+              children: [_jsx(_Col, {
+                children: _jsx(AlertFilled, {
+                  className: "igloo-element-preview-value-icon"
+                })
+              }), _jsx(_Col, {
+                children: _jsx(Typography, {
+                  level: "caption2",
+                  className: "igloo-element-preview-value-errors",
+                  children: error.join('\n')
+                })
+              })]
             }), _jsx("div", {
               children: renderPreviewValue()
             })]

package/es/form/element/style/index.less

@@ -25,6 +25,10 @@
         color: @error-color;
         margin-right: 8px;
       }
+
+      .igloo-element-preview-value-errors {
+        color: @error-color;
+      }
     }
   }
 
@@ -113,6 +117,10 @@
         color: @error-color;
         margin-right: 8px;
       }
+
+      .igloo-element-preview-value-errors {
+        color: @error-color;
+      }
     }
 
     .ant-form-item-explain-error {

package/es/form/hsteps/index.js

@@ -32,7 +32,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useContext, useEffect, useReducer, useRef } from 'react';
 import HStep from '../hstep';
-import { calcNamePath } from '../../utils/form-utils';
+import { calcNamePath, getRuleValidation } from '../../utils/form-utils';
 import FormContext from '../../form-context';
 import StepContext from '../../form-step-context';
 import './style/index.less';
@@ -95,10 +95,12 @@ var HSteps = function HSteps(_ref) {
       registerDependencies = _useContext.registerDependencies,
       submitText = _useContext.submitText,
       submitting = _useContext.submitting,
-      showSubmitButton = _useContext.showSubmitButton;
+      showSubmitButton = _useContext.showSubmitButton,
+      getRuleValidationApi = _useContext.getRuleValidationApi;
 
   var _useContext2 = useContext(LocaleContext),
-      formatMessage = _useContext2.formatMessage;
+      formatMessage = _useContext2.formatMessage,
+      currentLang = _useContext2.currentLang;
 
   useEffect(function () {
     var subscribe = elements.some(function (_ref2) {
@@ -117,6 +119,7 @@ var HSteps = function HSteps(_ref) {
   }, [currentStep]);
   var renderElements = elements.filter(function (step) {
     invariant(step.type === 'Step', 'Child of steps should be Step');
+    invariant(!step.validationRule || getRuleValidationApi, 'Please provide getRuleValidationApi in Form props');
     return typeof step.shouldRender !== 'function' || step.shouldRender(form);
   });
 
@@ -124,14 +127,15 @@ var HSteps = function HSteps(_ref) {
     var _ref3 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
       var _allFields$filter;
 
-      var allFields, _renderElements$curre, currentName, handleNext, namePath, fields, _iterator, _step, collapseSection, errors;
+      var allFields, allValues, _renderElements$curre, currentName, handleNext, validationRule, namePath, fields, _iterator, _step, collapseSection, res, errors;
 
       return regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
               allFields = (form === null || form === void 0 ? void 0 : form.getFieldsError()) || [];
-              _renderElements$curre = renderElements[current], currentName = _renderElements$curre.name, handleNext = _renderElements$curre.handleNext;
+              allValues = form === null || form === void 0 ? void 0 : form.getFieldsValue(true);
+              _renderElements$curre = renderElements[current], currentName = _renderElements$curre.name, handleNext = _renderElements$curre.handleNext, validationRule = _renderElements$curre.validationRule;
               namePath = calcNamePath(name, currentName);
               fields = allFields === null || allFields === void 0 ? void 0 : (_allFields$filter = allFields.filter(function (_ref4) {
                 var name = _ref4.name;
@@ -140,17 +144,17 @@ var HSteps = function HSteps(_ref) {
                 var name = _ref5.name;
                 return name;
               });
-              _context.prev = 4;
-              _context.next = 7;
+              _context.prev = 5;
+              _context.next = 8;
               return form === null || form === void 0 ? void 0 : form.validateFields(fields);
 
-            case 7:
-              _context.next = 15;
+            case 8:
+              _context.next = 16;
               break;
 
-            case 9:
-              _context.prev = 9;
-              _context.t0 = _context["catch"](4);
+            case 10:
+              _context.prev = 10;
+              _context.t0 = _context["catch"](5);
               form === null || form === void 0 ? void 0 : form.scrollToField(_context.t0.errorFields[0].name);
               _iterator = _createForOfIteratorHelper(sections.current.values());
 
@@ -167,46 +171,77 @@ var HSteps = function HSteps(_ref) {
 
               return _context.abrupt("return");
 
-            case 15:
+            case 16:
+              if (!(validationRule && getRuleValidationApi)) {
+                _context.next = 30;
+                break;
+              }
+
+              _context.prev = 17;
+              _context.next = 20;
+              return getRuleValidation(getRuleValidationApi, validationRule, allValues, currentLang);
+
+            case 20:
+              res = _context.sent;
+
+              if (!(Array.isArray(res) && res.length)) {
+                _context.next = 25;
+                break;
+              }
+
+              form === null || form === void 0 ? void 0 : form.setFields(res);
+              form === null || form === void 0 ? void 0 : form.scrollToField(res[0].name);
+              return _context.abrupt("return");
+
+            case 25:
+              _context.next = 30;
+              break;
+
+            case 27:
+              _context.prev = 27;
+              _context.t1 = _context["catch"](17);
+              return _context.abrupt("return");
+
+            case 30:
               if (!(typeof handleNext === 'function')) {
-                _context.next = 27;
+                _context.next = 42;
                 break;
               }
 
-              _context.prev = 16;
-              _context.next = 19;
+              _context.prev = 31;
+              _context.next = 34;
               return handleNext(form === null || form === void 0 ? void 0 : form.getFieldsValue(fields));
 
-            case 19:
+            case 34:
               errors = _context.sent;
 
               if (!Array.isArray(errors)) {
-                _context.next = 22;
+                _context.next = 37;
                 break;
               }
 
               return _context.abrupt("return", form === null || form === void 0 ? void 0 : form.setFields(errors));
 
-            case 22:
-              _context.next = 27;
+            case 37:
+              _context.next = 42;
               break;
 
-            case 24:
-              _context.prev = 24;
-              _context.t1 = _context["catch"](16);
+            case 39:
+              _context.prev = 39;
+              _context.t2 = _context["catch"](31);
               return _context.abrupt("return");
 
-            case 27:
+            case 42:
               setCurrent(last || current + 1);
               setLast(0);
               setShouldScroll(true);
 
-            case 30:
+            case 45:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[4, 9], [16, 24]]);
+      }, _callee, null, [[5, 10], [17, 27], [31, 39]]);
     }));
 
     return function handleNext() {

package/es/form/index.js

@@ -29,7 +29,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useImperativeHandle, forwardRef, useRef } from 'react';
+import { useState, useImperativeHandle, forwardRef, useRef, useContext } from 'react';
 import Pages from './pages';
 import Page from './page';
 import Steps from './steps';
@@ -40,6 +40,8 @@ import messages from './messages';
 import './style/index.less';
 import classNames from 'classnames';
 import invariant from 'invariant';
+import { LocaleContext } from '../locale';
+import { getRuleValidation } from './../utils/form-utils';
 
 var IglooForm = function IglooForm(props, ref) {
   var config = props.config,
@@ -63,6 +65,7 @@ var IglooForm = function IglooForm(props, ref) {
       onFirstModified = _props$onFirstModifie === void 0 ? function () {} : _props$onFirstModifie,
       uploadApi = props.uploadApi,
       selectDatasourceApi = props.selectDatasourceApi,
+      getRuleValidationApi = props.getRuleValidationApi,
       _props$stepDirection = props.stepDirection,
       stepDirection = _props$stepDirection === void 0 ? 'vertical' : _props$stepDirection;
 
@@ -88,31 +91,69 @@ var IglooForm = function IglooForm(props, ref) {
       firstModifiedCalled = _useState6[0],
       callFirstModified = _useState6[1];
 
+  var _useContext = useContext(LocaleContext),
+      currentLang = _useContext.currentLang;
+
+  var validationRule = props.validationRule || config.validationRule;
   invariant(type, "Contianer type should be one of ['Pages', 'Page', 'Steps', 'Login']");
+  invariant(!validationRule || getRuleValidationApi, 'Please provide getRuleValidationApi in Form props');
 
   var validateMessages = localesProp.validateMessages,
       locales = _objectWithoutProperties(localesProp, _excluded);
 
   var handleSubmit = /*#__PURE__*/function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(values) {
-      var allValues, errors;
+      var allValues, res, errors;
       return regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
               allValues = form.getFieldsValue(true);
+              setSubmitting(true);
 
-              if (!(typeof onSubmit === 'function')) {
-                _context.next = 11;
+              if (!(validationRule && getRuleValidationApi)) {
+                _context.next = 18;
                 break;
               }
 
-              setSubmitting(true);
               _context.prev = 3;
               _context.next = 6;
-              return onSubmit(values, allValues);
+              return getRuleValidation(getRuleValidationApi, validationRule, allValues, currentLang);
 
             case 6:
+              res = _context.sent;
+
+              if (!(Array.isArray(res) && res.length)) {
+                _context.next = 12;
+                break;
+              }
+
+              form.setFields(res);
+              form.scrollToField(res[0].name);
+              setSubmitting(false);
+              return _context.abrupt("return");
+
+            case 12:
+              _context.next = 18;
+              break;
+
+            case 14:
+              _context.prev = 14;
+              _context.t0 = _context["catch"](3);
+              setSubmitting(false);
+              return _context.abrupt("return");
+
+            case 18:
+              if (!(typeof onSubmit === 'function')) {
+                _context.next = 27;
+                break;
+              }
+
+              _context.prev = 19;
+              _context.next = 22;
+              return onSubmit(values, allValues);
+
+            case 22:
               errors = _context.sent;
 
               if (Array.isArray(errors)) {
@@ -120,17 +161,20 @@ var IglooForm = function IglooForm(props, ref) {
                 form.scrollToField(errors[0].name);
               }
 
-            case 8:
-              _context.prev = 8;
+            case 24:
+              _context.prev = 24;
+              setSubmitting(false);
+              return _context.finish(24);
+
+            case 27:
               setSubmitting(false);
-              return _context.finish(8);
 
-            case 11:
+            case 28:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[3,, 8, 11]]);
+      }, _callee, null, [[3, 14], [19,, 24, 27]]);
     }));
 
     return function handleSubmit(_x) {
@@ -233,6 +277,7 @@ var IglooForm = function IglooForm(props, ref) {
         registerDependencies: registerDependencies,
         uploadApi: uploadApi,
         selectDatasourceApi: selectDatasourceApi,
+        getRuleValidationApi: getRuleValidationApi,
         handleValuesChange: handleValuesChange
       }, locales),
       children: _jsxs(_Form, {

package/es/form/steps/index.js

@@ -19,9 +19,10 @@ import { useState, useContext, useEffect, useReducer, useRef } from 'react';
 import invariant from 'invariant';
 import classnames from 'classnames';
 import Step from '../step';
-import { calcNamePath } from '../../utils/form-utils';
+import { calcNamePath, getRuleValidation } from '../../utils/form-utils';
 import FormContext from '../../form-context';
 import StepContext from '../../form-step-context';
+import { LocaleContext } from '../../locale';
 import './style/index.less';
 
 var Steps = function Steps(_ref) {
@@ -64,8 +65,12 @@ var Steps = function Steps(_ref) {
 
   var _useContext = useContext(FormContext),
       form = _useContext.form,
+      getRuleValidationApi = _useContext.getRuleValidationApi,
       registerDependencies = _useContext.registerDependencies;
 
+  var _useContext2 = useContext(LocaleContext),
+      currentLang = _useContext2.currentLang;
+
   useEffect(function () {
     var subscribe = elements.some(function (_ref2) {
       var shouldRender = _ref2.shouldRender,
@@ -89,14 +94,15 @@ var Steps = function Steps(_ref) {
     var _ref3 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
       var _allFields$filter;
 
-      var allFields, _renderElements$curre, currentName, handleNext, namePath, fields, errors;
+      var allFields, allValues, _renderElements$curre, currentName, handleNext, validationRule, namePath, fields, res, errors;
 
       return regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
               allFields = (form === null || form === void 0 ? void 0 : form.getFieldsError()) || [];
-              _renderElements$curre = renderElements[current], currentName = _renderElements$curre.name, handleNext = _renderElements$curre.handleNext;
+              allValues = form === null || form === void 0 ? void 0 : form.getFieldsValue(true);
+              _renderElements$curre = renderElements[current], currentName = _renderElements$curre.name, handleNext = _renderElements$curre.handleNext, validationRule = _renderElements$curre.validationRule;
               namePath = calcNamePath(name, currentName);
               fields = allFields === null || allFields === void 0 ? void 0 : (_allFields$filter = allFields.filter(function (_ref4) {
                 var name = _ref4.name;
@@ -105,60 +111,91 @@ var Steps = function Steps(_ref) {
                 var name = _ref5.name;
                 return name;
               });
-              _context.prev = 4;
-              _context.next = 7;
+              _context.prev = 5;
+              _context.next = 8;
               return form === null || form === void 0 ? void 0 : form.validateFields(fields);
 
-            case 7:
-              _context.next = 13;
+            case 8:
+              _context.next = 14;
               break;
 
-            case 9:
-              _context.prev = 9;
-              _context.t0 = _context["catch"](4);
+            case 10:
+              _context.prev = 10;
+              _context.t0 = _context["catch"](5);
               form === null || form === void 0 ? void 0 : form.scrollToField(_context.t0.errorFields[0].name);
               return _context.abrupt("return");
 
-            case 13:
+            case 14:
+              if (!(validationRule && getRuleValidationApi)) {
+                _context.next = 28;
+                break;
+              }
+
+              _context.prev = 15;
+              _context.next = 18;
+              return getRuleValidation(getRuleValidationApi, validationRule, allValues, currentLang);
+
+            case 18:
+              res = _context.sent;
+
+              if (!(Array.isArray(res) && res.length)) {
+                _context.next = 23;
+                break;
+              }
+
+              form === null || form === void 0 ? void 0 : form.setFields(res);
+              form === null || form === void 0 ? void 0 : form.scrollToField(res[0].name);
+              return _context.abrupt("return");
+
+            case 23:
+              _context.next = 28;
+              break;
+
+            case 25:
+              _context.prev = 25;
+              _context.t1 = _context["catch"](15);
+              return _context.abrupt("return");
+
+            case 28:
               if (!(typeof handleNext === 'function')) {
-                _context.next = 25;
+                _context.next = 40;
                 break;
               }
 
-              _context.prev = 14;
-              _context.next = 17;
+              _context.prev = 29;
+              _context.next = 32;
               return handleNext(form === null || form === void 0 ? void 0 : form.getFieldsValue(fields));
 
-            case 17:
+            case 32:
               errors = _context.sent;
 
               if (!Array.isArray(errors)) {
-                _context.next = 20;
+                _context.next = 35;
                 break;
               }
 
               return _context.abrupt("return", form === null || form === void 0 ? void 0 : form.setFields(errors));
 
-            case 20:
-              _context.next = 25;
+            case 35:
+              _context.next = 40;
               break;
 
-            case 22:
-              _context.prev = 22;
-              _context.t1 = _context["catch"](14);
+            case 37:
+              _context.prev = 37;
+              _context.t2 = _context["catch"](29);
               return _context.abrupt("return");
 
-            case 25:
+            case 40:
               setCurrent(last || current + 1);
               setLast(0);
               setShouldScroll(true);
 
-            case 28:
+            case 43:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[4, 9], [14, 22]]);
+      }, _callee, null, [[5, 10], [15, 25], [29, 37]]);
     }));
 
     return function handleNext() {
@@ -183,6 +220,7 @@ var Steps = function Steps(_ref) {
       className: 'igloo-steps-content',
       children: renderElements.map(function (child, index) {
         invariant(child.type === 'Step', 'Child of steps should be Step');
+        invariant(!child.validationRule || getRuleValidationApi, 'Please provide getRuleValidationApi in Form props');
         return _jsx(StepContext.Provider, {
           value: {
             registerSection: registerSection

package/es/form-context.d.ts

@@ -17,6 +17,7 @@ declare const _default: React.Context<{
     registerDependencies: (name: FormItemName | FormItemName[], updater: Function) => void;
     uploadApi?: string | undefined;
     selectDatasourceApi?: string | undefined;
+    getRuleValidationApi?: string | undefined;
     handleValuesChange(changedFields: any): any;
 }>;
 export default _default;

package/es/free-form/element/index.js

@@ -46,6 +46,7 @@ import { useContext, useEffect, useRef, useReducer, isValidElement, cloneElement
 import { AlertFilled } from 'iglooicon';
 import { calcFormItemProps } from '../../utils/form-utils';
 import FormContext from '../../form-context';
+import Typography from '../../typography';
 import omit from 'omit.js';
 import classNames from 'classnames';
 import './style/index.less';
@@ -271,8 +272,21 @@ var Element = function Element(props) {
             sm: 24,
             xs: 24,
             className: "igloo-freeform-element-preview-value",
-            children: [error && !!error.length && _jsx(AlertFilled, {
-              className: "igloo-freeform-element-preview-value-icon"
+            children: [error && !!error.length && _jsxs(_Row, {
+              style: {
+                alignItems: 'center'
+              },
+              children: [_jsx(_Col, {
+                children: _jsx(AlertFilled, {
+                  className: "igloo-freeform-element-preview-value-icon"
+                })
+              }), _jsx(_Col, {
+                children: _jsx(Typography, {
+                  level: "caption2",
+                  className: "igloo-freeform-element-preview-value-errors",
+                  children: error.join('\n')
+                })
+              })]
             }), _jsx("div", {
               children: previewFormater ? previewFormater(value, form) : _typeof(value) === 'object' ? JSON.stringify(value) : value
             })]

package/es/free-form/element/style/index.less

@@ -25,6 +25,10 @@
         color: @error-color;
         margin-right: 8px;
       }
+
+      .igloo-freeform-element-preview-value-errors {
+        color: @error-color;
+      }
     }
   }
 
@@ -116,6 +120,10 @@
         color: @error-color;
         margin-right: 8px;
       }
+
+      .igloo-freeform-element-preview-value-errors {
+        color: @error-color;
+      }
     }
 
     .ant-form-item-explain-error {