@steroidsjs/core 2.2.30 → 2.2.33

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]);
@@ -131,7 +146,7 @@ function useDataProvider(config) {
             fetchRemote(true);
         }
         else if (!isEqual_1["default"](prevValues, config.initialSelectedIds)) {
-            fetchRemote(true);
+            fetchRemote(false);
         }
         else if (autoComplete.enable) {
             if (delayTimerRef.current) {
@@ -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/hooks/useDataSelect.js

@@ -136,8 +136,7 @@ function useDataSelect(config) {
             && !isEqual_1["default"](selectedIds, newSelectedIds) && newSelectedIds.length !== 0) {
             setSelectedIdsInternal(newSelectedIds);
         }
-    }, [linearItems, config.selectedIds, primaryKey, prevConfigSelectedIds,
-        selectedItems, config.sourceItems, selectedIds]);
+    }, [config.selectedIds, prevConfigSelectedIds, selectedIds, selectedItems]);
     // Global key down handler for navigate on items
     // Support keys:
     // - tab

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@steroidsjs/core",
-  "version": "2.2.30",
+  "version": "2.2.33",
   "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/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
             } })); }),