@steroidsjs/core 2.2.29 → 2.2.32

package/actions/fields.d.ts

@@ -1,5 +1,11 @@
 export declare const FIELDS_SET_META = "FIELDS_SET_META";
+export declare const FIELDS_DATA_PROVIDER_SET_ITEMS = "@fields/data_provider_set_items";
 export declare const setMeta: (meta: any) => {
     type: string;
     meta: any;
 };
+export declare const fieldsDataProviderSetItems: (dataProviderId: any, items: any) => {
+    type: string;
+    dataProviderId: any;
+    items: any;
+};

package/actions/fields.js

@@ -1,9 +1,16 @@
 "use strict";
 exports.__esModule = true;
-exports.setMeta = exports.FIELDS_SET_META = void 0;
+exports.fieldsDataProviderSetItems = exports.setMeta = exports.FIELDS_DATA_PROVIDER_SET_ITEMS = exports.FIELDS_SET_META = void 0;
 exports.FIELDS_SET_META = 'FIELDS_SET_META';
+exports.FIELDS_DATA_PROVIDER_SET_ITEMS = '@fields/data_provider_set_items';
 var setMeta = function (meta) { return ({
     type: exports.FIELDS_SET_META,
     meta: meta
 }); };
 exports.setMeta = setMeta;
+var fieldsDataProviderSetItems = function (dataProviderId, items) { return ({
+    type: exports.FIELDS_DATA_PROVIDER_SET_ITEMS,
+    dataProviderId: dataProviderId,
+    items: items
+}); };
+exports.fieldsDataProviderSetItems = fieldsDataProviderSetItems;

package/hooks/useDataProvider.d.ts

@@ -35,6 +35,12 @@ export interface IDataProviderConfig {
      * Если dataProvider не передан, то поиск данных по запросу происходит локально.
      */
     dataProvider?: {
+        /**
+         * Уникальный (глобально) идентификатор, под которых будут храниться
+         * подгруженные данные в redux (при включенном флаге useRedux). Если
+         * не задан - данные будут храниться в локальном стейте
+         */
+        reduxId?: string;
         /**
          * URL для подгрузки новой коллекции данных
          * @example '/api/v1/search'

package/hooks/useDataProvider.js

@@ -56,9 +56,10 @@ var isFunction_1 = __importDefault(require("lodash-es/isFunction"));
 var isEqual_1 = __importDefault(require("lodash-es/isEqual"));
 var react_1 = require("react");
 var react_use_1 = require("react-use");
+var fields_1 = require("../actions/fields");
 var data_1 = require("../utils/data");
 var index_1 = require("./index");
-var fields_1 = require("../reducers/fields");
+var fields_2 = require("../reducers/fields");
 var text_1 = require("../utils/text");
 var defaultProps = {
     autoComplete: {
@@ -75,15 +76,29 @@ var defaultProps = {
  */
 function useDataProvider(config) {
     var _this = this;
+    var _a;
     var components = index_1.useComponents();
+    var dispatch = index_1.useDispatch();
+    var reduxDataProviderId = (_a = config.dataProvider) === null || _a === void 0 ? void 0 : _a.reduxId;
     // Check enum
-    var enumItems = react_redux_1.useSelector(function (state) { return isString_1["default"](config.items) ? fields_1.getEnumLabels(state, config.items) : null; });
+    var enumItems = react_redux_1.useSelector(function (state) { return isString_1["default"](config.items) ? fields_2.getEnumLabels(state, config.items) : null; });
     // Initial items
     var initialItems = data_1.normalizeItems(enumItems || config.items);
     // Items state
-    var _a = react_1.useState(initialItems), sourceItems = _a[0], setSourceItems = _a[1];
     var _b = react_1.useState(initialItems), items = _b[0], setItems = _b[1];
     var _c = react_1.useState(false), isLoading = _c[0], setIsLoading = _c[1];
+    // Source items state (redux or local)
+    var _d = react_1.useState(initialItems), sourceInternalItems = _d[0], setSourceInternalItems = _d[1];
+    var sourceReduxItems = react_redux_1.useSelector(function (state) { return fields_2.getDataProviderItems(state, reduxDataProviderId); });
+    var sourceItems = reduxDataProviderId ? sourceReduxItems : sourceInternalItems;
+    var setSourceItems = react_1.useCallback(function (value) {
+        if (reduxDataProviderId) {
+            dispatch(fields_1.fieldsDataProviderSetItems(reduxDataProviderId, value));
+        }
+        else {
+            setSourceInternalItems(value);
+        }
+    }, [reduxDataProviderId, dispatch]);
     // Normalize autoComplete
     var autoComplete = react_1.useMemo(function () { return (__assign(__assign({}, defaultProps.autoComplete), (typeof config.autoComplete === 'boolean') ? { enable: config.autoComplete } : config.autoComplete)); }, [config.autoComplete]);
     var dataProvider = react_1.useMemo(function () { return (__assign({ action: '', actionMethod: 'get', params: null, onSearch: null }, config.dataProvider)); }, [config.dataProvider]);
@@ -143,7 +158,7 @@ function useDataProvider(config) {
                 delayTimerRef.current = setTimeout(fetchRemote, autoComplete.delay);
             }
         }
-    }, [autoComplete, components.api, components.http, config.autoFetch, config.dataProvider, config.initialSelectedIds, config.query, dataProvider, dataProvider.action, dataProvider.onSearch, prevQuery, sourceItems]);
+    }, [autoComplete, components.api, components.http, config.autoFetch, config.dataProvider, config.initialSelectedIds, config.query, dataProvider, dataProvider.action, dataProvider.onSearch, prevParams, prevQuery, prevValues, setSourceItems, sourceItems]);
     return {
         sourceItems: sourceItems,
         items: items,

package/package.json

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

package/reducers/fields.d.ts

@@ -1,11 +1,14 @@
 declare const _default: (state: {
     props: {};
+    dataProvider: {};
     meta: any;
 }, action: any) => {
     props: {};
+    dataProvider: {};
     meta: any;
 };
 export default _default;
 export declare const isMetaFetched: (state: any) => boolean;
 export declare const getEnumLabels: (state: any, name: any) => any;
 export declare const getModel: (state: any, name: any) => any;
+export declare const getDataProviderItems: (state: any, dataProviderId: any) => any;

package/reducers/fields.js

@@ -14,16 +14,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
-exports.getModel = exports.getEnumLabels = exports.isMetaFetched = void 0;
+exports.getDataProviderItems = exports.getModel = exports.getEnumLabels = exports.isMetaFetched = void 0;
 var isString_1 = __importDefault(require("lodash-es/isString"));
 var get_1 = __importDefault(require("lodash-es/get"));
 var fields_1 = require("../actions/fields");
 var initialState = {
     props: {},
+    dataProvider: {},
     meta: null
 };
 var normalizeName = function (name) { return name.replace(/\\/g, '.').replace(/^\./, ''); };
 exports["default"] = (function (state, action) {
+    var _a;
     if (state === void 0) { state = initialState; }
     switch (action.type) {
         case fields_1.FIELDS_SET_META:
@@ -31,6 +33,8 @@ exports["default"] = (function (state, action) {
                 action.meta[name].className = name;
             });
             return __assign(__assign({}, state), { meta: __assign(__assign({}, state.meta), action.meta) });
+        case fields_1.FIELDS_DATA_PROVIDER_SET_ITEMS:
+            return __assign(__assign({}, state), { dataProvider: __assign(__assign({}, state.dataProvider), (_a = {}, _a[action.dataProviderId] = action.items, _a)) });
         default:
             return state;
     }
@@ -53,3 +57,5 @@ var getModel = function (state, name) {
     return name || null;
 };
 exports.getModel = getModel;
+var getDataProviderItems = function (state, dataProviderId) { var _a, _b; return ((_b = (_a = state === null || state === void 0 ? void 0 : state.fields) === null || _a === void 0 ? void 0 : _a.dataProvider) === null || _b === void 0 ? void 0 : _b[dataProviderId]) || null; };
+exports.getDataProviderItems = getDataProviderItems;

package/ui/form/Field/fieldWrapper.d.ts

@@ -46,6 +46,7 @@ export interface IFieldWrapperInputProps {
      * @example 'horizontal'
      */
     layout?: FormLayout;
+    value?: any;
     onChange?: (...args: any[]) => any;
     /**
      * Ошибки в поле

package/ui/form/Field/fieldWrapper.js

@@ -46,8 +46,9 @@ var createDynamicField = function (componentId, Component, options) {
     var DynamicField = function (props) {
         var components = hooks_1.useComponents();
         // Get context, formId
-        var context = react_1.useContext(Form_1.FormContext);
-        var formId = props.formId || (context === null || context === void 0 ? void 0 : context.formId) || null;
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        var context = props.formId !== false ? react_1.useContext(Form_1.FormContext) : null;
+        var formId = props.formId || props.formId === false ? props.formId : ((context === null || context === void 0 ? void 0 : context.formId) || null);
         var model = props.model || (context === null || context === void 0 ? void 0 : context.model) || null;
         // Result wrapper props
         var wrapperProps = {
@@ -61,11 +62,32 @@ var createDynamicField = function (componentId, Component, options) {
             // Get full name (attribute with prefix)
             var name = [props.prefix, props[attributeKey]].filter(Boolean).join('.');
             // Register field
-            components.ui.registerField(formId, name, componentId);
-            // Resolve data provider
-            var _a = (context === null || context === void 0 ? void 0 : context.provider)
-                ? context === null || context === void 0 ? void 0 : context.provider.useField(formId, name, options.list)
-                : form_1.providers.state.useField(props.value), errors = _a.errors, value = _a.value, setValue = _a.setValue;
+            if (formId) {
+                components.ui.registerField(formId, name, componentId);
+            }
+            var errors;
+            var value;
+            var setValue;
+            if (context === null || context === void 0 ? void 0 : context.provider) {
+                // Resolve data provider
+                var providerResult = context === null || context === void 0 ? void 0 : context.provider.useField(formId, name, options.list);
+                errors = providerResult.errors;
+                value = providerResult.value;
+                setValue = providerResult.setValue;
+            }
+            else if (has_1["default"](props, 'value') && has_1["default"](props, 'onChange')) {
+                // Controlled component via props
+                errors = null;
+                value = props.value;
+                setValue = props.onChange;
+            }
+            else {
+                // Uncontrolled component
+                var stateResult = form_1.providers.state.useField(props.value);
+                errors = stateResult.errors;
+                value = stateResult.value;
+                setValue = stateResult.setValue;
+            }
             // Set errors
             wrapperProps[errorsKey] = errors;
             // Input object

package/ui/form/Form/Form.js

@@ -158,7 +158,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, captchaAttribute, googleCaptcha, captchaToken, options, response, _a, data;
+            var cleanedValues, submitResult, captchaAttribute, googleCaptcha, captchaToken, options, response, _a, data;
             var _b;
             var _this = this;
             return __generator(this, function (_c) {
@@ -181,14 +181,19 @@ function Form(props) {
                         cleanedValues = form_1.cleanEmptyObject(values);
                         // 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 [2 /*return*/, props.onSubmit.call(null, cleanedValues)];
-                        }
+                        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];
@@ -196,20 +201,20 @@ function Form(props) {
                                 captchaAttribute = attribute;
                             }
                         });
-                        if (!(captchaAttribute && components.resource.googleCaptchaSiteKey)) return [3 /*break*/, 3];
+                        if (!(captchaAttribute && components.resource.googleCaptchaSiteKey)) return [3 /*break*/, 5];
                         return [4 /*yield*/, components.resource.loadGoogleCaptcha()];
-                    case 1:
+                    case 3:
                         googleCaptcha = _c.sent();
                         return [4 /*yield*/, getCaptchaToken({
                                 googleCaptcha: googleCaptcha,
                                 siteKey: components.resource.googleCaptchaSiteKey,
                                 actionName: props.captchaActionName
                             })];
-                    case 2:
+                    case 4:
                         captchaToken = _c.sent();
                         cleanedValues = __assign(__assign({}, cleanedValues), (_b = {}, _b[captchaAttribute] = captchaToken, _b));
-                        _c.label = 3;
-                    case 3:
+                        _c.label = 5;
+                    case 5:
                         options = {
                             onTwoFactor: props.onTwoFactor
                                 ? function (providerName) { return __awaiter(_this, void 0, void 0, function () {
@@ -234,16 +239,16 @@ function Form(props) {
                                 }); }
                                 : undefined
                         };
-                        if (!(typeof props.action === 'function')) return [3 /*break*/, 5];
+                        if (!(typeof props.action === 'function')) return [3 /*break*/, 7];
                         return [4 /*yield*/, props.action.call(null, components.api, cleanedValues, options)];
-                    case 4:
-                        _a = _c.sent();
-                        return [3 /*break*/, 7];
-                    case 5: return [4 /*yield*/, components.http.send(props.actionMethod, props.action || window.location.pathname, cleanedValues, options)];
                     case 6:
                         _a = _c.sent();
-                        _c.label = 7;
-                    case 7:
+                        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;
+                    case 9:
                         response = _a;
                         dispatch(form_2.formSetSubmitting(props.formId, false));
                         // Skip on 2fa

package/ui/layout/Meta/Meta.js

@@ -27,9 +27,7 @@ function Meta(props) {
         _c.map(function (attrs, index) { return (react_1["default"].createElement("style", __assign({ key: index }, attrs, { dangerouslySetInnerHTML: {
                 __html: attrs.innerHtml
             } }))); }), (_d = props.scripts) === null || _d === void 0 ? void 0 :
-        _d.map(function (attrs, index) { return (react_1["default"].createElement("script", __assign({ key: index }, attrs, { dangerouslySetInnerHTML: {
-                __html: attrs.innerHtml
-            } }))); }), (_e = props.noScripts) === null || _e === void 0 ? void 0 :
+        _d.map(function (attrs, index) { return (react_1["default"].createElement("script", __assign({ key: index }, attrs), attrs.innerHtml || '')); }), (_e = props.noScripts) === null || _e === void 0 ? void 0 :
         _e.map(function (attrs, index) { return (react_1["default"].createElement("noscript", { key: index, dangerouslySetInnerHTML: {
                 __html: attrs.innerHtml
             } })); }),