@steroidsjs/core 2.3.0-beta.6 → 3.0.0-beta.1

package/ui/form/Form/Form.js

@@ -1,345 +1,346 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-exports.__esModule = true;
-exports.FormContext = void 0;
-var React = __importStar(require("react"));
-var get_1 = __importDefault(require("lodash-es/get"));
-var isUndefined_1 = __importDefault(require("lodash-es/isUndefined"));
-var set_1 = __importDefault(require("lodash-es/set"));
-var cloneDeep_1 = __importDefault(require("lodash-es/cloneDeep"));
-var react_1 = require("react");
-var react_use_1 = require("react-use");
-var notifications_1 = require("../../../actions/notifications");
-var useAddressBar_1 = __importDefault(require("../../../hooks/useAddressBar"));
-var AutoSaveHelper_1 = __importDefault(require("./AutoSaveHelper"));
-var hooks_1 = require("../../../hooks");
-var form_1 = require("../../../utils/form");
-var validate_1 = __importDefault(require("../validate"));
-var form_2 = require("../../../actions/form");
-exports.FormContext = React.createContext({});
-var getCaptchaToken = function (params) {
-    var googleCaptcha = params.googleCaptcha, siteKey = params.siteKey, _a = params.actionName, actionName = _a === void 0 ? 'submit' : _a;
-    return new Promise(function (resolve) {
-        googleCaptcha.ready(function () {
-            googleCaptcha.execute(siteKey, { action: actionName }).then(function (token) { return resolve(token); });
-        });
-    });
-};
-function Form(props) {
-    var _this = this;
-    // Dev validation. You cannot change data provider (formId, useRedux)
-    if (process.env.NODE_ENV !== 'production') {
-        var prevFormId = react_use_1.usePrevious(props.formId); // eslint-disable-line react-hooks/rules-of-hooks
-        var prevUseRedux = react_use_1.usePrevious(props.useRedux); // eslint-disable-line react-hooks/rules-of-hooks
-        if ((prevFormId && props.formId !== prevFormId) || (prevUseRedux && props.useRedux !== prevUseRedux)) {
-            throw new Error('Props formId and useRedux cannot be changed dynamically! Its related to data provider');
-        }
-    }
-    // Get components and dispatch method
-    var components = hooks_1.useComponents();
-    var reduxDispatch = hooks_1.useDispatch();
-    // Normalize layout
-    var layout = react_1.useMemo(function () { return form_1.normalizeLayout(props.layout); }, [props.layout]);
-    // Address bar synchronization
-    var _a = useAddressBar_1["default"](__assign({ enable: !!props.addressBar, model: props.model }, (typeof props.addressBar === 'boolean' ? { enable: props.addressBar } : props.addressBar))), initialQuery = _a.initialQuery, updateQuery = _a.updateQuery;
-    // Resolve initial values
-    var initialValues = props.initialValues;
-    // Restore initial values from address bar and local storage
-    var isFirstMount = react_use_1.useFirstMountState();
-    if (isFirstMount) {
-        // Query
-        if (initialQuery) {
-            initialValues = __assign(__assign({}, props.initialValues), initialQuery);
-        }
-        // Local storage
-        if (props.autoSave) {
-            initialValues = AutoSaveHelper_1["default"].restore(props.clientStorage, props.formId, initialValues);
-        }
-    }
-    // Init data provider
-    var provider = props.useRedux ? form_1.providers.redux : form_1.providers.reducer;
-    var _b = provider.useForm(props.formId, initialValues), values = _b.values, submitCounter = _b.submitCounter, isInvalid = _b.isInvalid, isSubmitting = _b.isSubmitting, setErrors = _b.setErrors, reducer = _b.reducer, dispatch = _b.dispatch;
-    // Sync with address bar
-    react_use_1.useUpdateEffect(function () {
-        updateQuery(values);
-    }, [updateQuery, values]);
-    // Auto save
-    react_use_1.useUpdateEffect(function () {
-        if (props.autoSave && values) {
-            // TODO
-            //AutoSaveHelper.save(components.clientStorage, props.formId, values);
-        }
-    }, [props.autoSave, values]);
-    // Auto destroy
-    react_use_1.useUnmount(function () {
-        if (props.autoDestroy) {
-            dispatch(form_2.formDestroy(props.formId));
-        }
-    });
-    // OnChange handler
-    react_use_1.useUpdateEffect(function () {
-        if (props.onChange) {
-            props.onChange.call(null, values);
-        }
-    }, [props.onChange, values]);
-    // OnSubmit handler
-    var onSubmit = react_1.useCallback(function (e) {
-        if (e === void 0) { e = null; }
-        return __awaiter(_this, void 0, void 0, function () {
-            var cleanedValues, submitResult, captchaAttribute, googleCaptcha, captchaToken, options, response, _a, requestError_1, data;
-            var _b;
-            var _this = this;
-            return __generator(this, function (_c) {
-                switch (_c.label) {
-                    case 0:
-                        dispatch(form_2.formSetSubmitting(props.formId, true));
-                        // TODO
-                        if (e) {
-                            e.preventDefault();
-                        }
-                        cleanedValues = cloneDeep_1["default"](values);
-                        // Append non touched fields to values object
-                        if (props.formId) {
-                            Object.keys(components.ui.getRegisteredFields(props.formId) || {})
-                                .forEach(function (key) {
-                                // Don't set null values for keys in empty array items
-                                var keyParts = [];
-                                var arrayKey;
-                                key.split('.').find(function (keyPart) {
-                                    if (keyParts.length > 0 && Array.isArray(get_1["default"](cleanedValues, keyParts))) {
-                                        keyParts.push(keyPart);
-                                        arrayKey = keyParts.join('.');
-                                        return true;
-                                    }
-                                    keyParts.push(keyPart);
-                                    return false;
-                                });
-                                if (arrayKey && !get_1["default"](cleanedValues, arrayKey)) {
-                                    return;
-                                }
-                                if (isUndefined_1["default"](get_1["default"](cleanedValues, key))) {
-                                    set_1["default"](cleanedValues, key, null);
-                                }
-                            });
-                        }
-                        // Clean
-                        cleanedValues = form_1.cleanEmptyObject(cleanedValues);
-                        // Event onBeforeSubmit
-                        if (props.onBeforeSubmit && props.onBeforeSubmit.call(null, cleanedValues) === false) {
-                            dispatch(form_2.formSetSubmitting(props.formId, false));
-                            return [2 /*return*/, null];
-                        }
-                        if (props.validators) {
-                            validate_1["default"](cleanedValues, props.validators);
-                        }
-                        if (!props.onSubmit) return [3 /*break*/, 2];
-                        return [4 /*yield*/, props.onSubmit.call(null, cleanedValues)];
-                    case 1:
-                        submitResult = _c.sent();
-                        dispatch(form_2.formSetSubmitting(props.formId, false));
-                        return [2 /*return*/, submitResult];
-                    case 2:
-                        captchaAttribute = null;
-                        Object.entries(components.ui.getRegisteredFields(props.formId) || {}).forEach(function (_a) {
-                            var attribute = _a[0], fieldType = _a[1];
-                            if (fieldType === 'ReCaptchaField') {
-                                captchaAttribute = attribute;
-                            }
-                        });
-                        if (!(captchaAttribute && components.resource.googleCaptchaSiteKey)) return [3 /*break*/, 5];
-                        return [4 /*yield*/, components.resource.loadGoogleCaptcha()];
-                    case 3:
-                        googleCaptcha = _c.sent();
-                        return [4 /*yield*/, getCaptchaToken({
-                                googleCaptcha: googleCaptcha,
-                                siteKey: components.resource.googleCaptchaSiteKey,
-                                actionName: props.captchaActionName
-                            })];
-                    case 4:
-                        captchaToken = _c.sent();
-                        cleanedValues = __assign(__assign({}, cleanedValues), (_b = {}, _b[captchaAttribute] = captchaToken, _b));
-                        _c.label = 5;
-                    case 5:
-                        options = {
-                            onTwoFactor: props.onTwoFactor
-                                ? function (providerName) { return __awaiter(_this, void 0, void 0, function () {
-                                    var info, _a;
-                                    return __generator(this, function (_b) {
-                                        switch (_b.label) {
-                                            case 0:
-                                                if (!props.autoStartTwoFactor) return [3 /*break*/, 2];
-                                                return [4 /*yield*/, components.http.post("/api/v1/auth/2fa/" + providerName + "/send")];
-                                            case 1:
-                                                _a = _b.sent();
-                                                return [3 /*break*/, 3];
-                                            case 2:
-                                                _a = null;
-                                                _b.label = 3;
-                                            case 3:
-                                                info = _a;
-                                                props.onTwoFactor(providerName, info);
-                                                return [2 /*return*/];
-                                        }
-                                    });
-                                }); }
-                                : undefined
-                        };
-                        _c.label = 6;
-                    case 6:
-                        _c.trys.push([6, 11, , 12]);
-                        if (!(typeof props.action === 'function')) return [3 /*break*/, 8];
-                        return [4 /*yield*/, props.action.call(null, components.api, cleanedValues, options)];
-                    case 7:
-                        _a = _c.sent();
-                        return [3 /*break*/, 10];
-                    case 8: return [4 /*yield*/, components.http.send(props.actionMethod, props.action || window.location.pathname, cleanedValues, options)];
-                    case 9:
-                        _a = _c.sent();
-                        _c.label = 10;
-                    case 10:
-                        response = _a;
-                        return [3 /*break*/, 12];
-                    case 11:
-                        requestError_1 = _c.sent();
-                        console.error(requestError_1); // eslint-disable-line no-console
-                        dispatch(form_2.formSetSubmitting(props.formId, false));
-                        reduxDispatch(notifications_1.showNotification(props.submitErrorMessage || __('Ошибка сервера'), 'danger'));
-                        return [2 /*return*/, null];
-                    case 12:
-                        // Skip on 2fa
-                        if (response.twoFactor) {
-                            dispatch(form_2.formSetSubmitting(props.formId, false));
-                            return [2 /*return*/, null];
-                        }
-                        data = response.data || {};
-                        // Event onAfterSubmit
-                        if (props.onAfterSubmit && props.onAfterSubmit.call(null, cleanedValues, data, response) === false) {
-                            dispatch(form_2.formSetSubmitting(props.formId, false));
-                            return [2 /*return*/, null];
-                        }
-                        if (data.errors) {
-                            dispatch(form_2.formSetSubmitting(props.formId, false));
-                            setErrors(data.errors);
-                            return [2 /*return*/, null];
-                        }
-                        // Clean errors
-                        setErrors(null);
-                        if (props.onComplete) {
-                            props.onComplete.call(null, cleanedValues, data, response);
-                        }
-                        if (props.autoSave) {
-                            // TODO
-                            //const AutoSaveHelper = require('../ui/form/Form/AutoSaveHelper').default;
-                            //AutoSaveHelper.remove(props.clientStorage, props.formId);
-                        }
-                        dispatch(form_2.formSetSubmitting(props.formId, false));
-                        return [2 /*return*/, null];
-                }
-            });
-        });
-    }, [dispatch, props, values, components.ui, components.resource,
-        components.http, components.api, reduxDispatch, setErrors]);
-    // Manual submit form by reducer action
-    var prevSubmitCounter = react_use_1.usePrevious(submitCounter);
-    react_use_1.useUpdateEffect(function () {
-        if (submitCounter !== prevSubmitCounter) {
-            onSubmit.call(null);
-        }
-    }, [prevSubmitCounter, submitCounter, onSubmit]);
-    var formContextValue = react_1.useMemo(function () { return ({
-        formId: props.formId,
-        model: props.model,
-        prefix: props.prefix,
-        size: props.size,
-        layout: props.layout,
-        provider: provider,
-        reducer: reducer,
-        dispatch: dispatch
-    }); }, [dispatch, props.formId, props.layout, props.model, props.prefix, props.size, provider, reducer]);
-    // Wait initialization (only for redux)
-    if (values === undefined) {
-        return null;
-    }
-    // Render context and form
-    return (React.createElement(exports.FormContext.Provider, { value: formContextValue }, props.view !== false
-        ? components.ui.renderView(props.view || 'form.FormView', __assign(__assign({}, props.viewProps), { isInvalid: isInvalid,
-            isSubmitting: isSubmitting,
-            layout: layout,
-            onSubmit: onSubmit, submitLabel: props.submitLabel, fields: props.fields, children: props.children, isBordered: props.isBordered, className: props.className, style: props.style, autoFocus: props.autoFocus }))
-        : props.children));
-}
-Form.defaultProps = {
-    actionMethod: 'POST',
-    autoStartTwoFactor: true,
-    layout: 'default',
-    captchaActionName: 'submit'
-};
-exports["default"] = Form;
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.FormContext = void 0;
+var React = __importStar(require("react"));
+var get_1 = __importDefault(require("lodash-es/get"));
+var isUndefined_1 = __importDefault(require("lodash-es/isUndefined"));
+var set_1 = __importDefault(require("lodash-es/set"));
+var cloneDeep_1 = __importDefault(require("lodash-es/cloneDeep"));
+var react_1 = require("react");
+var react_use_1 = require("react-use");
+var notifications_1 = require("../../../actions/notifications");
+var useAddressBar_1 = __importDefault(require("../../../hooks/useAddressBar"));
+var AutoSaveHelper_1 = __importDefault(require("./AutoSaveHelper"));
+var hooks_1 = require("../../../hooks");
+var form_1 = require("../../../utils/form");
+var validate_1 = __importDefault(require("../validate"));
+var form_2 = require("../../../actions/form");
+exports.FormContext = React.createContext({});
+var getCaptchaToken = function (params) {
+    var googleCaptcha = params.googleCaptcha, siteKey = params.siteKey, _a = params.actionName, actionName = _a === void 0 ? 'submit' : _a;
+    return new Promise(function (resolve) {
+        googleCaptcha.ready(function () {
+            googleCaptcha.execute(siteKey, { action: actionName }).then(function (token) { return resolve(token); });
+        });
+    });
+};
+function Form(props) {
+    var _this = this;
+    // Dev validation. You cannot change data provider (formId, useRedux)
+    if (process.env.NODE_ENV !== 'production') {
+        var prevFormId = react_use_1.usePrevious(props.formId); // eslint-disable-line react-hooks/rules-of-hooks
+        var prevUseRedux = react_use_1.usePrevious(props.useRedux); // eslint-disable-line react-hooks/rules-of-hooks
+        if ((prevFormId && props.formId !== prevFormId) || (prevUseRedux && props.useRedux !== prevUseRedux)) {
+            throw new Error('Props formId and useRedux cannot be changed dynamically! Its related to data provider');
+        }
+    }
+    // Get components and dispatch method
+    var components = hooks_1.useComponents();
+    var reduxDispatch = hooks_1.useDispatch();
+    // Normalize layout
+    var layout = react_1.useMemo(function () { return form_1.normalizeLayout(props.layout); }, [props.layout]);
+    // Address bar synchronization
+    var _a = useAddressBar_1["default"](__assign({ enable: !!props.addressBar, model: props.model }, (typeof props.addressBar === 'boolean' ? { enable: props.addressBar } : props.addressBar))), initialQuery = _a.initialQuery, updateQuery = _a.updateQuery;
+    // Resolve initial values
+    var initialValues = props.initialValues;
+    // Restore initial values from address bar and local storage
+    var isFirstMount = react_use_1.useFirstMountState();
+    if (isFirstMount) {
+        // Query
+        if (initialQuery) {
+            initialValues = __assign(__assign({}, props.initialValues), initialQuery);
+        }
+        // Local storage
+        if (props.autoSave) {
+            initialValues = AutoSaveHelper_1["default"].restore(props.clientStorage, props.formId, initialValues);
+        }
+    }
+    // Init data provider
+    var provider = props.useRedux ? form_1.providers.redux : form_1.providers.reducer;
+    var _b = provider.useForm(props.formId, initialValues), values = _b.values, submitCounter = _b.submitCounter, isInvalid = _b.isInvalid, isSubmitting = _b.isSubmitting, setErrors = _b.setErrors, reducer = _b.reducer, dispatch = _b.dispatch;
+    // Sync with address bar
+    react_use_1.useUpdateEffect(function () {
+        updateQuery(values);
+    }, [updateQuery, values]);
+    // Auto save
+    react_use_1.useUpdateEffect(function () {
+        if (props.autoSave && values) {
+            // TODO
+            //AutoSaveHelper.save(components.clientStorage, props.formId, values);
+        }
+    }, [props.autoSave, values]);
+    // Auto destroy
+    react_use_1.useUnmount(function () {
+        if (props.autoDestroy) {
+            dispatch(form_2.formDestroy(props.formId));
+        }
+    });
+    // OnChange handler
+    react_use_1.useUpdateEffect(function () {
+        if (props.onChange) {
+            props.onChange.call(null, values);
+        }
+    }, [props.onChange, values]);
+    // OnSubmit handler
+    var onSubmit = react_1.useCallback(function (e) {
+        if (e === void 0) { e = null; }
+        return __awaiter(_this, void 0, void 0, function () {
+            var cleanedValues, submitResult, captchaAttribute, googleCaptcha, captchaToken, options, response, _a, requestError_1, data;
+            var _b;
+            var _this = this;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        dispatch(form_2.formSetSubmitting(props.formId, true));
+                        // TODO
+                        if (e) {
+                            e.preventDefault();
+                        }
+                        cleanedValues = cloneDeep_1["default"](values);
+                        // Append non touched fields to values object
+                        if (props.formId) {
+                            Object.keys(components.ui.getRegisteredFields(props.formId) || {})
+                                .forEach(function (key) {
+                                // Don't set null values for keys in empty array items
+                                var keyParts = [];
+                                var arrayKey;
+                                key.split('.').find(function (keyPart) {
+                                    if (keyParts.length > 0 && Array.isArray(get_1["default"](cleanedValues, keyParts))) {
+                                        keyParts.push(keyPart);
+                                        arrayKey = keyParts.join('.');
+                                        return true;
+                                    }
+                                    keyParts.push(keyPart);
+                                    return false;
+                                });
+                                if (arrayKey && !get_1["default"](cleanedValues, arrayKey)) {
+                                    return;
+                                }
+                                if (isUndefined_1["default"](get_1["default"](cleanedValues, key))) {
+                                    set_1["default"](cleanedValues, key, null);
+                                }
+                            });
+                        }
+                        // Clean
+                        cleanedValues = form_1.cleanEmptyObject(cleanedValues);
+                        // Event onBeforeSubmit
+                        if (props.onBeforeSubmit && props.onBeforeSubmit.call(null, cleanedValues) === false) {
+                            dispatch(form_2.formSetSubmitting(props.formId, false));
+                            return [2 /*return*/, null];
+                        }
+                        if (props.validators) {
+                            validate_1["default"](cleanedValues, props.validators);
+                        }
+                        if (!props.onSubmit) return [3 /*break*/, 2];
+                        return [4 /*yield*/, props.onSubmit.call(null, cleanedValues)];
+                    case 1:
+                        submitResult = _c.sent();
+                        dispatch(form_2.formSetSubmitting(props.formId, false));
+                        return [2 /*return*/, submitResult];
+                    case 2:
+                        captchaAttribute = null;
+                        Object.entries(components.ui.getRegisteredFields(props.formId) || {}).forEach(function (_a) {
+                            var attribute = _a[0], fieldType = _a[1];
+                            if (fieldType === 'ReCaptchaField') {
+                                captchaAttribute = attribute;
+                            }
+                        });
+                        if (!(captchaAttribute && components.resource.googleCaptchaSiteKey)) return [3 /*break*/, 5];
+                        return [4 /*yield*/, components.resource.loadGoogleCaptcha()];
+                    case 3:
+                        googleCaptcha = _c.sent();
+                        return [4 /*yield*/, getCaptchaToken({
+                                googleCaptcha: googleCaptcha,
+                                siteKey: components.resource.googleCaptchaSiteKey,
+                                actionName: props.captchaActionName
+                            })];
+                    case 4:
+                        captchaToken = _c.sent();
+                        cleanedValues = __assign(__assign({}, cleanedValues), (_b = {}, _b[captchaAttribute] = captchaToken, _b));
+                        _c.label = 5;
+                    case 5:
+                        options = {
+                            onTwoFactor: props.onTwoFactor
+                                ? function (providerName) { return __awaiter(_this, void 0, void 0, function () {
+                                    var info, _a;
+                                    return __generator(this, function (_b) {
+                                        switch (_b.label) {
+                                            case 0:
+                                                if (!props.autoStartTwoFactor) return [3 /*break*/, 2];
+                                                return [4 /*yield*/, components.http.post("/api/v1/auth/2fa/" + providerName + "/send")];
+                                            case 1:
+                                                _a = _b.sent();
+                                                return [3 /*break*/, 3];
+                                            case 2:
+                                                _a = null;
+                                                _b.label = 3;
+                                            case 3:
+                                                info = _a;
+                                                props.onTwoFactor(providerName, info);
+                                                return [2 /*return*/];
+                                        }
+                                    });
+                                }); }
+                                : undefined
+                        };
+                        _c.label = 6;
+                    case 6:
+                        _c.trys.push([6, 11, , 12]);
+                        if (!(typeof props.action === 'function')) return [3 /*break*/, 8];
+                        return [4 /*yield*/, props.action.call(null, components.api, cleanedValues, options)];
+                    case 7:
+                        _a = _c.sent();
+                        return [3 /*break*/, 10];
+                    case 8: return [4 /*yield*/, components.http.send(props.actionMethod, props.action || window.location.pathname, cleanedValues, options)];
+                    case 9:
+                        _a = _c.sent();
+                        _c.label = 10;
+                    case 10:
+                        response = _a;
+                        return [3 /*break*/, 12];
+                    case 11:
+                        requestError_1 = _c.sent();
+                        console.error(requestError_1); // eslint-disable-line no-console
+                        dispatch(form_2.formSetSubmitting(props.formId, false));
+                        props.onError(requestError_1);
+                        reduxDispatch(notifications_1.showNotification(props.submitErrorMessage || __('Ошибка сервера'), 'danger'));
+                        return [2 /*return*/, null];
+                    case 12:
+                        // Skip on 2fa
+                        if (response.twoFactor) {
+                            dispatch(form_2.formSetSubmitting(props.formId, false));
+                            return [2 /*return*/, null];
+                        }
+                        data = response.data || {};
+                        // Event onAfterSubmit
+                        if (props.onAfterSubmit && props.onAfterSubmit.call(null, cleanedValues, data, response) === false) {
+                            dispatch(form_2.formSetSubmitting(props.formId, false));
+                            return [2 /*return*/, null];
+                        }
+                        if (data.errors) {
+                            dispatch(form_2.formSetSubmitting(props.formId, false));
+                            setErrors(data.errors);
+                            return [2 /*return*/, null];
+                        }
+                        // Clean errors
+                        setErrors(null);
+                        if (props.onComplete) {
+                            props.onComplete.call(null, cleanedValues, data, response);
+                        }
+                        if (props.autoSave) {
+                            // TODO
+                            //const AutoSaveHelper = require('../ui/form/Form/AutoSaveHelper').default;
+                            //AutoSaveHelper.remove(props.clientStorage, props.formId);
+                        }
+                        dispatch(form_2.formSetSubmitting(props.formId, false));
+                        return [2 /*return*/, null];
+                }
+            });
+        });
+    }, [dispatch, props, values, components.ui, components.resource,
+        components.http, components.api, reduxDispatch, setErrors]);
+    // Manual submit form by reducer action
+    var prevSubmitCounter = react_use_1.usePrevious(submitCounter);
+    react_use_1.useUpdateEffect(function () {
+        if (submitCounter !== prevSubmitCounter) {
+            onSubmit.call(null);
+        }
+    }, [prevSubmitCounter, submitCounter, onSubmit]);
+    var formContextValue = react_1.useMemo(function () { return ({
+        formId: props.formId,
+        model: props.model,
+        prefix: props.prefix,
+        size: props.size,
+        layout: props.layout,
+        provider: provider,
+        reducer: reducer,
+        dispatch: dispatch
+    }); }, [dispatch, props.formId, props.layout, props.model, props.prefix, props.size, provider, reducer]);
+    // Wait initialization (only for redux)
+    if (values === undefined) {
+        return null;
+    }
+    // Render context and form
+    return (React.createElement(exports.FormContext.Provider, { value: formContextValue }, props.view !== false
+        ? components.ui.renderView(props.view || 'form.FormView', __assign(__assign({}, props.viewProps), { isInvalid: isInvalid,
+            isSubmitting: isSubmitting,
+            layout: layout,
+            onSubmit: onSubmit, submitLabel: props.submitLabel, fields: props.fields, children: props.children, isBordered: props.isBordered, className: props.className, style: props.style, autoFocus: props.autoFocus }))
+        : props.children));
+}
+Form.defaultProps = {
+    actionMethod: 'POST',
+    autoStartTwoFactor: true,
+    layout: 'default',
+    captchaActionName: 'submit'
+};
+exports["default"] = Form;