iglooform 2.5.45 → 2.5.46

package/es/free-form/index.js

@@ -29,11 +29,14 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState, useRef } from 'react';
+import { useState, useRef, useContext } from 'react';
 import FormContext from '../form-context';
 import messages from './messages';
 import './style/index.less';
+import invariant from 'invariant';
 import classNames from 'classnames';
+import { LocaleContext } from '../locale';
+import { getRuleValidation } from './../utils/form-utils';
 
 var FreeForm = function FreeForm(props) {
   var children = props.children,
@@ -56,7 +59,9 @@ var FreeForm = function FreeForm(props) {
       _props$onFirstModifie = props.onFirstModified,
       onFirstModified = _props$onFirstModifie === void 0 ? function () {} : _props$onFirstModifie,
       uploadApi = props.uploadApi,
-      selectDatasourceApi = props.selectDatasourceApi;
+      selectDatasourceApi = props.selectDatasourceApi,
+      validationRule = props.validationRule,
+      getRuleValidationApi = props.getRuleValidationApi;
 
   var _Form$useForm = _Form.useForm(),
       _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
@@ -78,27 +83,67 @@ var FreeForm = function FreeForm(props) {
       firstModifiedCalled = _useState6[0],
       callFirstModified = _useState6[1];
 
+  var _useContext = useContext(LocaleContext),
+      currentLang = _useContext.currentLang;
+
+  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 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 (!(validationRule && getRuleValidationApi)) {
+                _context.next = 18;
+                break;
+              }
+
+              _context.prev = 3;
+              _context.next = 6;
+              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 = 10;
+                _context.next = 27;
                 break;
               }
 
-              setSubmitting(true);
-              _context.prev = 2;
-              _context.next = 5;
+              _context.prev = 19;
+              _context.next = 22;
               return onSubmit(values);
 
-            case 5:
+            case 22:
               errors = _context.sent;
 
               if (Array.isArray(errors)) {
@@ -106,17 +151,20 @@ var FreeForm = function FreeForm(props) {
                 form.scrollToField(errors[0].name);
               }
 
-            case 7:
-              _context.prev = 7;
+            case 24:
+              _context.prev = 24;
+              setSubmitting(false);
+              return _context.finish(24);
+
+            case 27:
               setSubmitting(false);
-              return _context.finish(7);
 
-            case 10:
+            case 28:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[2,, 7, 10]]);
+      }, _callee, null, [[3, 14], [19,, 24, 27]]);
     }));
 
     return function handleSubmit(_x) {
@@ -185,6 +233,7 @@ var FreeForm = function FreeForm(props) {
         registerDependencies: registerDependencies,
         uploadApi: uploadApi,
         selectDatasourceApi: selectDatasourceApi,
+        getRuleValidationApi: getRuleValidationApi,
         handleValuesChange: handleValuesChange
       }, locales),
       children: _jsx(_Form, {

package/es/free-form/step/index.d.ts

@@ -16,6 +16,7 @@ export interface StepProps extends FormItemConfig {
     editButtonLabel?: string;
     disableEditButton?: boolean;
     buttonText?: string;
+    validationRule?: string;
 }
 declare const Step: FC<StepProps>;
 export default Step;

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

@@ -33,8 +33,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext, useState, useRef, useEffect, useMemo, useReducer, cloneElement, isValidElement } from 'react';
 import { LocaleContext } from '../../locale';
 import Button from '../../button';
-import { calcNamePath } from '../../utils/form-utils';
+import { calcNamePath, getRuleValidation } from '../../utils/form-utils';
 import FormContext from '../../form-context';
+import invariant from 'invariant';
 import './style/index.less';
 var useBreakpoint = _Grid.useBreakpoint;
 
@@ -61,10 +62,12 @@ var Step = function Step(_ref) {
       children = _ref.children,
       shouldRender = _ref.shouldRender,
       subscribedFields = _ref.subscribedFields,
-      buttonText = _ref.buttonText;
+      buttonText = _ref.buttonText,
+      validationRule = _ref.validationRule;
 
   var _useContext = useContext(LocaleContext),
-      formatMessage = _useContext.formatMessage;
+      formatMessage = _useContext.formatMessage,
+      currentLang = _useContext.currentLang;
 
   var _useContext2 = useContext(FormContext),
       continueText = _useContext2.continueText,
@@ -72,6 +75,7 @@ var Step = function Step(_ref) {
       submitting = _useContext2.submitting,
       form = _useContext2.form,
       showSubmitButton = _useContext2.showSubmitButton,
+      getRuleValidationApi = _useContext2.getRuleValidationApi,
       getScrollContainer = _useContext2.getScrollContainer,
       registerDependencies = _useContext2.registerDependencies;
 
@@ -89,6 +93,7 @@ var Step = function Step(_ref) {
       _ = _useReducer2[0],
       dispatch = _useReducer2[1];
 
+  invariant(!validationRule || getRuleValidationApi, 'Please provide getRuleValidationApi in Form props');
   useEffect(function () {
     if (shouldRender || getButtonDisabledState) {
       registerDependencies(Array.isArray(subscribedFields) ? subscribedFields : 'SUBSCRIBE_ALL', dispatch);
@@ -148,12 +153,13 @@ var Step = function Step(_ref) {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
       var _allFields$filter;
 
-      var allFields, fields, errors;
+      var allFields, allValues, 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()) || [];
+              allValues = form === null || form === void 0 ? void 0 : form.getFieldsValue(true);
               fields = allFields === null || allFields === void 0 ? void 0 : (_allFields$filter = allFields.filter(function (_ref3) {
                 var name = _ref3.name;
                 return name.join().startsWith(pName === null || pName === void 0 ? void 0 : pName.join());
@@ -161,54 +167,85 @@ var Step = function Step(_ref) {
                 var name = _ref4.name;
                 return name;
               });
-              _context.prev = 2;
-              _context.next = 5;
+              _context.prev = 3;
+              _context.next = 6;
               return form === null || form === void 0 ? void 0 : form.validateFields(fields);
 
-            case 5:
-              _context.next = 11;
+            case 6:
+              _context.next = 12;
               break;
 
-            case 7:
-              _context.prev = 7;
-              _context.t0 = _context["catch"](2);
+            case 8:
+              _context.prev = 8;
+              _context.t0 = _context["catch"](3);
               form === null || form === void 0 ? void 0 : form.scrollToField(_context.t0.errorFields[0].name);
               return _context.abrupt("return");
 
-            case 11:
+            case 12:
+              if (!(validationRule && getRuleValidationApi)) {
+                _context.next = 26;
+                break;
+              }
+
+              _context.prev = 13;
+              _context.next = 16;
+              return getRuleValidation(getRuleValidationApi, validationRule, allValues, currentLang);
+
+            case 16:
+              res = _context.sent;
+
+              if (!(Array.isArray(res) && res.length)) {
+                _context.next = 21;
+                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 21:
+              _context.next = 26;
+              break;
+
+            case 23:
+              _context.prev = 23;
+              _context.t1 = _context["catch"](13);
+              return _context.abrupt("return");
+
+            case 26:
               if (!(typeof handleNextProp === 'function')) {
-                _context.next = 22;
+                _context.next = 37;
                 break;
               }
 
-              _context.prev = 12;
-              _context.next = 15;
+              _context.prev = 27;
+              _context.next = 30;
               return handleNextProp(form === null || form === void 0 ? void 0 : form.getFieldsValue(fields));
 
-            case 15:
+            case 30:
               errors = _context.sent;
 
               if (Array.isArray(errors)) {
                 form === null || form === void 0 ? void 0 : form.setFields(errors);
               }
 
-              _context.next = 22;
+              _context.next = 37;
               break;
 
-            case 19:
-              _context.prev = 19;
-              _context.t1 = _context["catch"](12);
+            case 34:
+              _context.prev = 34;
+              _context.t2 = _context["catch"](27);
               return _context.abrupt("return");
 
-            case 22:
+            case 37:
               handleNextStep && handleNextStep(fields);
 
-            case 23:
+            case 38:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[2, 7], [12, 19]]);
+      }, _callee, null, [[3, 8], [13, 23], [27, 34]]);
     }));
 
     return function handleNext() {

package/es/types.d.ts

@@ -28,6 +28,8 @@ export interface FormBasicConfig {
     onFirstModified?: () => any;
     uploadApi?: string;
     selectDatasourceApi?: string;
+    validationRule?: string;
+    getRuleValidationApi?: string;
     stepDirection?: 'vertical' | 'horizontal';
 }
 export declare type FormItemAssert = {
@@ -120,6 +122,7 @@ export interface FormItemExtraConfig extends FormItemProps {
     minLength?: number;
     maxLength?: number;
     idType?: 'KTP' | 'NIK';
+    validationRule?: string;
     [key: string]: any;
 }
 export interface FormItemConfig extends FormItemExtraConfig {

package/es/utils/form-utils.d.ts

@@ -73,3 +73,4 @@ export declare const calcSelectValue: (selectValue?: FormItemSelectValue[] | und
     disabled: boolean | undefined;
 };
 export declare const calcShouldRender: (dependencies?: NamePath[], asserts?: FormItemAssert[], shouldRender?: ((form?: FormInstance<any> | undefined) => boolean) | undefined, form?: FormInstance<any> | undefined) => boolean;
+export declare const getRuleValidation: (url: string, rule: string | string[], values?: any, lang?: string | undefined) => Promise<any>;

package/es/utils/form-utils.js

@@ -1,6 +1,10 @@
 var _excluded = ["type", "name", "required", "requiredAsserts", "showOptional", "rules", "initialValue", "normalize", "mergeRules", "getValueFromEvent", "getValueProps", "extra", "help", "label", "previewLabel", "extraLabel", "copyValue", "selectValue", "span", "halfRow", "fullRow", "valuePropName", "dependencies", "asserts", "messageVariables", "requiredMessage", "previewFormater", "disabled", "ignore", "shouldRender", "valueFormater", "antdDependencies", "dateLimitationType", "absoluteRangeEnd", "absoluteRangeStart", "relativeRangeStart", "relativeRangeEnd", "validationCode"],
     _excluded2 = ["initialValue", "normalize", "rules", "extra", "help", "getValueFromEvent", "span", "valuePropName", "fullRow", "halfRow", "messageVariables", "requiredMessage", "previewFormater", "valueFormater", "required", "requiredMark", "className"];
 
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -510,4 +514,73 @@ export var calcShouldRender = function calcShouldRender() {
   }
 
   return true;
-};
+};
+export var getRuleValidation = /*#__PURE__*/function () {
+  var _ref3 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(url, rule, values, lang) {
+    var _lang, _lang$split;
+
+    var res, json, _ref4, conclusion, details;
+
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            lang = ((_lang = lang) === null || _lang === void 0 ? void 0 : (_lang$split = _lang.split('-')) === null || _lang$split === void 0 ? void 0 : _lang$split[0]) || 'en';
+            _context.next = 3;
+            return fetch("".concat(url, "?lang=").concat(lang), {
+              method: 'post',
+              headers: {
+                'Content-Type': 'application/json; charset=utf-8'
+              },
+              body: JSON.stringify({
+                form: values || {},
+                rules: Array.isArray(rule) ? rule : [rule]
+              })
+            });
+
+          case 3:
+            res = _context.sent;
+            _context.next = 6;
+            return res.json();
+
+          case 6:
+            json = _context.sent;
+            _ref4 = json || {}, conclusion = _ref4.conclusion, details = _ref4.details;
+
+            if (!conclusion) {
+              _context.next = 10;
+              break;
+            }
+
+            return _context.abrupt("return");
+
+          case 10:
+            if (!(conclusion === false)) {
+              _context.next = 12;
+              break;
+            }
+
+            return _context.abrupt("return", details === null || details === void 0 ? void 0 : details.map(function (_ref5) {
+              var err_message = _ref5.err_message,
+                  path = _ref5.path;
+              return {
+                name: path.split('.'),
+                errors: [err_message]
+              };
+            }));
+
+          case 12:
+            return _context.abrupt("return", Promise.reject(json.message));
+
+          case 13:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+
+  return function getRuleValidation(_x, _x2, _x3, _x4) {
+    return _ref3.apply(this, arguments);
+  };
+}();

package/lib/form/element/index.js

@@ -33,6 +33,8 @@ var _section = _interopRequireDefault(require("../section"));
 
 var _addableSection = _interopRequireDefault(require("../addable-section"));
 
+var _typography = _interopRequireDefault(require("../../typography"));
+
 var _elements = _interopRequireDefault(require("../elements"));
 
 var _formContext = _interopRequireDefault(require("../../form-context"));
@@ -371,8 +373,21 @@ var Element = function Element(_ref) {
             sm: 24,
             xs: 24,
             className: "igloo-element-preview-value",
-            children: [error && !!error.length && (0, _jsxRuntime.jsx)(_iglooicon.AlertFilled, {
-              className: "igloo-element-preview-value-icon"
+            children: [error && !!error.length && (0, _jsxRuntime.jsxs)(_row.default, {
+              style: {
+                alignItems: 'center'
+              },
+              children: [(0, _jsxRuntime.jsx)(_col.default, {
+                children: (0, _jsxRuntime.jsx)(_iglooicon.AlertFilled, {
+                  className: "igloo-element-preview-value-icon"
+                })
+              }), (0, _jsxRuntime.jsx)(_col.default, {
+                children: (0, _jsxRuntime.jsx)(_typography.default, {
+                  level: "caption2",
+                  className: "igloo-element-preview-value-errors",
+                  children: error.join('\n')
+                })
+              })]
             }), (0, _jsxRuntime.jsx)("div", {
               children: renderPreviewValue()
             })]

package/lib/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/lib/form/hsteps/index.js

@@ -124,10 +124,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 = (0, _react.useContext)(_locale.LocaleContext),
-      formatMessage = _useContext2.formatMessage;
+      formatMessage = _useContext2.formatMessage,
+      currentLang = _useContext2.currentLang;
 
   (0, _react.useEffect)(function () {
     var subscribe = elements.some(function (_ref2) {
@@ -146,6 +148,7 @@ var HSteps = function HSteps(_ref) {
   }, [currentStep]);
   var renderElements = elements.filter(function (step) {
     (0, _invariant.default)(step.type === 'Step', 'Child of steps should be Step');
+    (0, _invariant.default)(!step.validationRule || getRuleValidationApi, 'Please provide getRuleValidationApi in Form props');
     return typeof step.shouldRender !== 'function' || step.shouldRender(form);
   });
 
@@ -153,14 +156,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 = (0, _formUtils.calcNamePath)(name, currentName);
               fields = allFields === null || allFields === void 0 ? void 0 : (_allFields$filter = allFields.filter(function (_ref4) {
                 var name = _ref4.name;
@@ -169,17 +173,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());
 
@@ -196,46 +200,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 (0, _formUtils.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() {