iglooform 2.5.45 → 2.5.46

package/lib/form/index.js

@@ -33,6 +33,10 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _invariant = _interopRequireDefault(require("invariant"));
 
+var _locale = require("../locale");
+
+var _formUtils = require("./../utils/form-utils");
+
 var _excluded = ["validateMessages"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -85,6 +89,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;
 
@@ -110,31 +115,69 @@ var IglooForm = function IglooForm(props, ref) {
       firstModifiedCalled = _useState6[0],
       callFirstModified = _useState6[1];
 
+  var _useContext = (0, _react.useContext)(_locale.LocaleContext),
+      currentLang = _useContext.currentLang;
+
+  var validationRule = props.validationRule || config.validationRule;
   (0, _invariant.default)(type, "Contianer type should be one of ['Pages', 'Page', 'Steps', 'Login']");
+  (0, _invariant.default)(!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 (0, _formUtils.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)) {
@@ -142,17 +185,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) {
@@ -255,6 +301,7 @@ var IglooForm = function IglooForm(props, ref) {
         registerDependencies: registerDependencies,
         uploadApi: uploadApi,
         selectDatasourceApi: selectDatasourceApi,
+        getRuleValidationApi: getRuleValidationApi,
         handleValuesChange: handleValuesChange
       }, locales),
       children: (0, _jsxRuntime.jsxs)(_form.default, {

package/lib/form/steps/index.js

@@ -21,6 +21,8 @@ var _formContext = _interopRequireDefault(require("../../form-context"));
 
 var _formStepContext = _interopRequireDefault(require("../../form-step-context"));
 
+var _locale = require("../../locale");
+
 require("./style/index.less");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -81,8 +83,12 @@ var Steps = function Steps(_ref) {
 
   var _useContext = (0, _react.useContext)(_formContext.default),
       form = _useContext.form,
+      getRuleValidationApi = _useContext.getRuleValidationApi,
       registerDependencies = _useContext.registerDependencies;
 
+  var _useContext2 = (0, _react.useContext)(_locale.LocaleContext),
+      currentLang = _useContext2.currentLang;
+
   (0, _react.useEffect)(function () {
     var subscribe = elements.some(function (_ref2) {
       var shouldRender = _ref2.shouldRender,
@@ -106,14 +112,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 = (0, _formUtils.calcNamePath)(name, currentName);
               fields = allFields === null || allFields === void 0 ? void 0 : (_allFields$filter = allFields.filter(function (_ref4) {
                 var name = _ref4.name;
@@ -122,60 +129,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 (0, _formUtils.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() {
@@ -200,6 +238,7 @@ var Steps = function Steps(_ref) {
       className: 'igloo-steps-content',
       children: renderElements.map(function (child, index) {
         (0, _invariant.default)(child.type === 'Step', 'Child of steps should be Step');
+        (0, _invariant.default)(!child.validationRule || getRuleValidationApi, 'Please provide getRuleValidationApi in Form props');
         return (0, _jsxRuntime.jsx)(_formStepContext.default.Provider, {
           value: {
             registerSection: registerSection

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

@@ -31,6 +31,8 @@ var _formUtils = require("../../utils/form-utils");
 
 var _formContext = _interopRequireDefault(require("../../form-context"));
 
+var _typography = _interopRequireDefault(require("../../typography"));
+
 var _omit = _interopRequireDefault(require("omit.js"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -297,8 +299,21 @@ var Element = function Element(props) {
             sm: 24,
             xs: 24,
             className: "igloo-freeform-element-preview-value",
-            children: [error && !!error.length && (0, _jsxRuntime.jsx)(_iglooicon.AlertFilled, {
-              className: "igloo-freeform-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-freeform-element-preview-value-icon"
+                })
+              }), (0, _jsxRuntime.jsx)(_col.default, {
+                children: (0, _jsxRuntime.jsx)(_typography.default, {
+                  level: "caption2",
+                  className: "igloo-freeform-element-preview-value-errors",
+                  children: error.join('\n')
+                })
+              })]
             }), (0, _jsxRuntime.jsx)("div", {
               children: previewFormater ? previewFormater(value, form) : _typeof(value) === 'object' ? JSON.stringify(value) : value
             })]

package/lib/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 {

package/lib/free-form/index.js

@@ -19,8 +19,14 @@ var _messages = _interopRequireDefault(require("./messages"));
 
 require("./style/index.less");
 
+var _invariant = _interopRequireDefault(require("invariant"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _locale = require("../locale");
+
+var _formUtils = require("./../utils/form-utils");
+
 var _excluded = ["validateMessages"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -72,7 +78,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.default.useForm(),
       _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
@@ -94,27 +102,67 @@ var FreeForm = function FreeForm(props) {
       firstModifiedCalled = _useState6[0],
       callFirstModified = _useState6[1];
 
+  var _useContext = (0, _react.useContext)(_locale.LocaleContext),
+      currentLang = _useContext.currentLang;
+
+  (0, _invariant.default)(!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 (0, _formUtils.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)) {
@@ -122,17 +170,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) {
@@ -201,6 +252,7 @@ var FreeForm = function FreeForm(props) {
         registerDependencies: registerDependencies,
         uploadApi: uploadApi,
         selectDatasourceApi: selectDatasourceApi,
+        getRuleValidationApi: getRuleValidationApi,
         handleValuesChange: handleValuesChange
       }, locales),
       children: (0, _jsxRuntime.jsx)(_form.default, {

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

@@ -33,6 +33,8 @@ var _formUtils = require("../../utils/form-utils");
 
 var _formContext = _interopRequireDefault(require("../../form-context"));
 
+var _invariant = _interopRequireDefault(require("invariant"));
+
 require("./style/index.less");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -84,10 +86,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 = (0, _react.useContext)(_locale.LocaleContext),
-      formatMessage = _useContext.formatMessage;
+      formatMessage = _useContext.formatMessage,
+      currentLang = _useContext.currentLang;
 
   var _useContext2 = (0, _react.useContext)(_formContext.default),
       continueText = _useContext2.continueText,
@@ -95,6 +99,7 @@ var Step = function Step(_ref) {
       submitting = _useContext2.submitting,
       form = _useContext2.form,
       showSubmitButton = _useContext2.showSubmitButton,
+      getRuleValidationApi = _useContext2.getRuleValidationApi,
       getScrollContainer = _useContext2.getScrollContainer,
       registerDependencies = _useContext2.registerDependencies;
 
@@ -112,6 +117,7 @@ var Step = function Step(_ref) {
       _ = _useReducer2[0],
       dispatch = _useReducer2[1];
 
+  (0, _invariant.default)(!validationRule || getRuleValidationApi, 'Please provide getRuleValidationApi in Form props');
   (0, _react.useEffect)(function () {
     if (shouldRender || getButtonDisabledState) {
       registerDependencies(Array.isArray(subscribedFields) ? subscribedFields : 'SUBSCRIBE_ALL', dispatch);
@@ -171,12 +177,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());
@@ -184,54 +191,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 (0, _formUtils.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/lib/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/lib/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>;