@steroidsjs/core 2.2.37 → 2.2.40

package/actions/form.d.ts

@@ -1,6 +1,7 @@
 export declare const FORM_INITIALIZE = "@form/initialize";
 export declare const FORM_CHANGE = "@form/change";
 export declare const FORM_RESET = "@form/reset";
+export declare const FORM_DESTROY = "@form/destroy";
 export declare const FORM_SET_ERRORS = "@form/set_errors";
 export declare const FORM_SUBMIT = "@form/submit";
 export declare const FORM_SET_SUBMITTING = "@form/set_submitting";
@@ -64,6 +65,14 @@ export declare const formReset: (formId: any) => {
     type: string;
     formId: any;
 };
+/**
+ * Удаление данных формы из redux хранилища
+ * @param formId
+ */
+export declare const formDestroy: (formId: any) => {
+    type: string;
+    formId: any;
+};
 export declare const formArrayAdd: (formId: any, name: any, rowsCount: any, initialValues: any) => {
     type: string;
     formId: any;

package/actions/form.js

@@ -1,9 +1,10 @@
 "use strict";
 exports.__esModule = true;
-exports.formArrayRemove = exports.formArrayAdd = exports.formReset = exports.formSetSubmitting = exports.formSubmit = exports.formSetErrors = exports.formChange = exports.formInitialize = exports.FORM_ARRAY_REMOVE = exports.FORM_ARRAY_ADD = exports.FORM_SET_SUBMITTING = exports.FORM_SUBMIT = exports.FORM_SET_ERRORS = exports.FORM_RESET = exports.FORM_CHANGE = exports.FORM_INITIALIZE = void 0;
+exports.formArrayRemove = exports.formArrayAdd = exports.formDestroy = exports.formReset = exports.formSetSubmitting = exports.formSubmit = exports.formSetErrors = exports.formChange = exports.formInitialize = exports.FORM_ARRAY_REMOVE = exports.FORM_ARRAY_ADD = exports.FORM_SET_SUBMITTING = exports.FORM_SUBMIT = exports.FORM_SET_ERRORS = exports.FORM_DESTROY = exports.FORM_RESET = exports.FORM_CHANGE = exports.FORM_INITIALIZE = void 0;
 exports.FORM_INITIALIZE = '@form/initialize';
 exports.FORM_CHANGE = '@form/change';
 exports.FORM_RESET = '@form/reset';
+exports.FORM_DESTROY = '@form/destroy';
 exports.FORM_SET_ERRORS = '@form/set_errors';
 exports.FORM_SUBMIT = '@form/submit';
 exports.FORM_SET_SUBMITTING = '@form/set_submitting';
@@ -76,6 +77,15 @@ var formReset = function (formId) { return ({
     formId: formId
 }); };
 exports.formReset = formReset;
+/**
+ * Удаление данных формы из redux хранилища
+ * @param formId
+ */
+var formDestroy = function (formId) { return ({
+    type: exports.FORM_DESTROY,
+    formId: formId
+}); };
+exports.formDestroy = formDestroy;
 var formArrayAdd = function (formId, name, rowsCount, initialValues) { return ({
     type: exports.FORM_ARRAY_ADD,
     formId: formId,

package/hooks/useForm.d.ts

@@ -2,6 +2,7 @@ export default function useForm(): {
     formId: string;
     model: any;
     prefix: string | boolean;
+    size: string;
     layout: FormLayout;
     formDispatch: any;
     formSelector: (selector: (state: any, setValue: any) => any) => any;

package/hooks/useForm.js

@@ -9,6 +9,7 @@ function useForm() {
             formId: context.formId,
             model: context.model,
             prefix: context.prefix,
+            size: context.size,
             layout: context.layout,
             formDispatch: context === null || context === void 0 ? void 0 : context.dispatch,
             formSelector: function (selector) { var _a; return (_a = context === null || context === void 0 ? void 0 : context.provider) === null || _a === void 0 ? void 0 : _a.select(context.formId, selector); }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@steroidsjs/core",
-  "version": "2.2.37",
+  "version": "2.2.40",
   "description": "",
   "author": "Vladimir Kozhin <hello@kozhindev.com>",
   "repository": {

package/reducers/form.js

@@ -53,6 +53,8 @@ function reducerItem(state, action) {
             return dot_prop_immutable_1.set(state, 'isSubmitting', action.isSubmitting);
         case form_1.FORM_RESET:
             return __assign(__assign({}, state), { values: cloneDeep_1["default"](state.initialValues || {}) });
+        case form_1.FORM_DESTROY:
+            return null;
         case form_1.FORM_ARRAY_ADD:
             // eslint-disable-next-line no-case-declarations
             var newValue = [].concat(get_1["default"](state, 'values.' + action.name) || []);

package/ui/form/DateField/DateField.js

@@ -40,7 +40,7 @@ function DateField(props) {
         onClose: onClose,
         isOpened: isOpened,
         inputProps: inputProps,
-        calendarProps: calendarProps, size: props.size, icon: props.icon, errors: props.errors, disabled: props.disabled, className: props.className, showRemove: props.showRemove }));
+        calendarProps: calendarProps, size: props.size, icon: props.icon, errors: props.errors, label: props.label, disabled: props.disabled, className: props.className, showRemove: props.showRemove }));
 }
 DateField.defaultProps = {
     disabled: false,

package/ui/form/DateTimeField/DateTimeField.js

@@ -62,7 +62,7 @@ function DateTimeField(props) {
         onClose: onClose,
         inputProps: inputProps,
         calendarProps: calendarProps,
-        timePanelViewProps: timePanelViewProps, size: props.size, icon: props.icon, errors: props.errors, className: props.className, showRemove: props.showRemove, isInvalid: props.isInvalid, disabled: props.disabled }));
+        timePanelViewProps: timePanelViewProps, size: props.size, icon: props.icon, label: props.label, errors: props.errors, className: props.className, showRemove: props.showRemove, isInvalid: props.isInvalid, disabled: props.disabled }));
 }
 DateTimeField.defaultProps = {
     disabled: false,

package/ui/form/Field/fieldWrapper.js

@@ -128,7 +128,7 @@ function fieldWrapper(componentId, Component, optionsConfig) {
         // Resolve layout
         var layout = react_1.useMemo(function () { return form_1.mergeLayoutProp(context.layout, props.layout); }, [context.layout, props.layout]);
         if (layout !== null) {
-            return components.ui.renderView(FieldLayout_1["default"], __assign(__assign({}, attributesProps), { layout: layout, required: has_1["default"](props, 'required') ? props.required : metaProps.required, label: options.label === false ? null : (has_1["default"](props, 'label') ? props.label : metaProps.label), hint: has_1["default"](props, 'hint') ? props.hint : metaProps.hint, errors: props.errors, children: (React.createElement(Component.DynamicField, __assign({}, props))) }));
+            return components.ui.renderView(FieldLayout_1["default"], __assign(__assign({}, attributesProps), { layout: layout, size: props.size || context.size || null, required: has_1["default"](props, 'required') ? props.required : metaProps.required, label: options.label === false ? null : (has_1["default"](props, 'label') ? props.label : metaProps.label), hint: has_1["default"](props, 'hint') ? props.hint : metaProps.hint, errors: props.errors, children: (React.createElement(Component.DynamicField, __assign({}, props))) }));
         }
         return components.ui.renderView(Component.DynamicField, props);
     };

package/ui/form/FieldList/FieldList.js

@@ -85,10 +85,11 @@ function FieldList(props) {
         formId: props.formId,
         model: props.model,
         prefix: props.prefix,
+        size: props.size,
         layout: props.layout,
         provider: context.provider,
         reducer: context.reducer
-    }); }, [context.provider, context.reducer, props.formId, props.layout, props.model, props.prefix]);
+    }); }, [context.provider, context.reducer, props.formId, props.layout, props.model, props.prefix, props.size]);
     var commonProps = {
         showAdd: props.showAdd,
         showRemove: props.showRemove,

package/ui/form/FieldSet/FieldSet.js

@@ -48,10 +48,12 @@ function FieldSet(props) {
         prefix: [context.prefix, props.prefix]
             .filter(Boolean)
             .join('.'),
+        size: props.size || context.size,
         layout: form_1.mergeLayoutProp(context.layout, props.layout),
         provider: context.provider,
         reducer: context.reducer
-    }); }, [context.provider, context.reducer, props.formId, props.layout, props.model, props.prefix]);
+    }); }, [context.formId, context.layout, context.model, context.prefix, context.provider, context.reducer,
+        context.size, props.formId, props.layout, props.model, props.prefix, props.size]);
     var FieldSetView = props.view || components.ui.getView('form.FieldSetView');
     return (react_1["default"].createElement(Form_1.FormContext.Provider, { value: contextValue },
         react_1["default"].createElement(FieldSetView, __assign({ className: props.className, label: props.label }, props),

package/ui/form/Form/Form.d.ts

@@ -28,6 +28,11 @@ export interface IFormProps {
      * @example POST
      */
     actionMethod?: string;
+    /**
+     * Текст ошибки при неудачной отправке данных. По-умолчанию: "Ошибка сервера"
+     * @example Упс, что-то пошло не так
+     */
+    submitErrorMessage?: string;
     /**
      * Шаблон для полей в форме
      * @example horizontal
@@ -135,6 +140,11 @@ export interface IFormProps {
      * @example true
      */
     isBordered?: boolean;
+    /**
+     * Очищать ли данные формы с redux хранилища при размонтировании компонента. По-умолчанию - false
+     * @example false
+     */
+    autoDestroy?: boolean;
     [key: string]: any;
 }
 export interface IFormViewProps {
@@ -165,6 +175,7 @@ export interface IFormContext {
     model?: any;
     prefix?: string | boolean;
     layout?: FormLayout;
+    size?: Size;
     provider?: any;
     reducer?: {
         dispatch: React.Dispatch<any>;

package/ui/form/Form/Form.js

@@ -76,6 +76,7 @@ var isUndefined_1 = __importDefault(require("lodash-es/isUndefined"));
 var set_1 = __importDefault(require("lodash-es/set"));
 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");
@@ -103,6 +104,7 @@ function Form(props) {
     }
     // 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
@@ -148,6 +150,12 @@ function Form(props) {
             //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) {
@@ -158,7 +166,7 @@ function Form(props) {
     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, data;
+            var cleanedValues, submitResult, captchaAttribute, googleCaptcha, captchaToken, options, response, _a, requestError_1, data;
             var _b;
             var _this = this;
             return __generator(this, function (_c) {
@@ -239,31 +247,46 @@ function Form(props) {
                                 }); }
                                 : undefined
                         };
-                        if (!(typeof props.action === 'function')) return [3 /*break*/, 7];
-                        return [4 /*yield*/, props.action.call(null, components.api, cleanedValues, options)];
+                        _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*/, 9];
-                    case 7: return [4 /*yield*/, components.http.send(props.actionMethod, props.action || window.location.pathname, cleanedValues, options)];
-                    case 8:
-                        _a = _c.sent();
-                        _c.label = 9;
+                        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);
                         }
@@ -272,11 +295,13 @@ function Form(props) {
                             //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];
                 }
             });
         });
-    }, [components.api, components.http, components.resource, components.ui, props, setErrors, values, dispatch]);
+    }, [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 () {
@@ -288,11 +313,12 @@ function Form(props) {
         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, provider, reducer]);
+    }); }, [dispatch, props.formId, props.layout, props.model, props.prefix, props.size, provider, reducer]);
     // Wait initialization (only for redux)
     if (values === undefined) {
         return null;