@steroidsjs/core 2.0.0-rc.6 → 2.0.1-beta.112

package/dist/hooks/useDataSelect.js

@@ -1,155 +1,209 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-exports.__esModule = true;
-var isEqual_1 = __importDefault(require("lodash-es/isEqual"));
-var isArray_1 = __importDefault(require("lodash-es/isArray"));
-var remove_1 = __importDefault(require("lodash-es/remove"));
-var react_1 = require("react");
-var react_use_1 = require("react-use");
-var defaultProps = {
-    primaryKey: 'id'
-};
-function useDataSelect(config) {
-    // Get primary key
-    var primaryKey = config.primaryKey || defaultProps.primaryKey;
-    // Initial select
-    var initialSelectedIds = react_1.useMemo(function () {
-        if (config.selectedIds) {
-            return [].concat(config.selectedIds || []);
-        }
-        return config.selectFirst && config.items.length > 0
-            ? [config.items[0][primaryKey]]
-            : [];
-    }, [config.items, config.selectFirst, config.selectedIds, primaryKey]);
-    // State
-    var _a = react_1.useState(false), isOpened = _a[0], setIsOpened = _a[1];
-    var _b = react_1.useState(false), isFocused = _b[0], setIsFocused = _b[1];
-    var _c = react_1.useState(null), hoveredId = _c[0], setHoveredId = _c[1];
-    var _d = react_1.useState(initialSelectedIds), selectedIds = _d[0], setSelectedIdsInternal = _d[1];
-    // Handler for select/toggle item by id
-    var setSelectedIds = react_1.useCallback(function (ids, skipToggle) {
-        if (skipToggle === void 0) { skipToggle = false; }
-        if (isArray_1["default"](ids)) {
-            if (!config.multiple && ids.length > 1) {
-                ids = [ids[0]];
-            }
-            setSelectedIdsInternal(ids);
-        }
-        else {
-            var id_1 = ids;
-            if (!id_1) {
-                setSelectedIdsInternal([]);
-            }
-            else if (config.multiple) {
-                if (selectedIds.indexOf(id_1) !== -1) {
-                    if (!skipToggle) {
-                        remove_1["default"](selectedIds, function (itemValue) { return itemValue === id_1; });
-                    }
-                }
-                else {
-                    selectedIds.push(id_1);
-                }
-                setSelectedIdsInternal(selectedIds);
-            }
-            else {
-                if (selectedIds.length !== 1 || selectedIds[0] !== id_1) {
-                    setSelectedIdsInternal([id_1]);
-                }
-                setIsOpened(false);
-            }
-        }
-    }, [config.multiple, selectedIds]);
-    // Select first after fetch data
-    var prevItemsLength = react_use_1.usePrevious(config.items.length);
-    react_use_1.useUpdateEffect(function () {
-        if (config.selectFirst && prevItemsLength === 0 && config.items.length > 0) {
-            setSelectedIdsInternal([config.items[0][primaryKey]]);
-        }
-    }, [config.items, config.selectFirst, prevItemsLength, primaryKey]);
-    // Update selected items on change value
-    var prevConfigSelectedIds = react_use_1.usePrevious(config.selectedIds || []);
-    react_use_1.useUpdateEffect(function () {
-        // console.log(config.selectedIds, prevConfigSelectedIds);
-        var newSelectedIds = config.selectedIds && config.selectedIds.length > 0
-            ? config.items.map(function (item) { return item[primaryKey]; }).filter(function (id) { return config.selectedIds.includes(id); })
-            : [];
-        if (!isEqual_1["default"](prevConfigSelectedIds, newSelectedIds)) {
-            setSelectedIdsInternal(newSelectedIds);
-        }
-    }, [config.items, config.selectedIds, primaryKey, prevConfigSelectedIds]);
-    // Global key down handler for navigate on items
-    // Support keys:
-    // - tab
-    // - esc
-    // - enter
-    // - up/down arrows
-    var onKeyDown = react_1.useCallback(function (e) {
-        // Skip no active
-        if (!isFocused && !isOpened) {
-            return;
-        }
-        // Keys: tab, esc
-        if ([9, 27].includes(e.which)) {
-            e.preventDefault();
-            setIsOpened(false);
-            return;
-        }
-        // Keys: enter
-        if (e.which === 13 && isOpened) {
-            e.preventDefault();
-            if (hoveredId) {
-                // Select hovered
-                setSelectedIds(hoveredId, true);
-            }
-            else if (selectedIds.length > 0) {
-                // Select first selected
-                setSelectedIds(selectedIds[0], true);
-            }
-            else if (config.items.length > 0) {
-                // Select first result
-                setSelectedIds(config.items[0], true);
-            }
-        }
-        // Keys: arrow up, arrow down
-        if ([38, 40].includes(e.which)) {
-            e.preventDefault();
-            var isDown = e.which === 40;
-            if (!isOpened) {
-                // Open on down key
-                if (isDown) {
-                    setIsOpened(true);
-                }
-            }
-            else {
-                // Navigate on items by keys
-                var direction = isDown ? 1 : -1;
-                var keys = config.items.map(function (item) { return item.id; });
-                // Get current index
-                var index = hoveredId ? keys.indexOf(hoveredId) : -1;
-                if (index === -1 && selectedIds.length === 1) {
-                    index = keys.indexOf(selectedIds[0]);
-                }
-                // Get next index
-                var newIndex = index !== -1
-                    ? Math.min(keys.length - 1, Math.max(0, index + direction))
-                    : 0;
-                // Set hovered
-                setHoveredId(keys[newIndex]);
-            }
-        }
-    }, [config.items, hoveredId, isFocused, isOpened, setSelectedIds, selectedIds]);
-    react_use_1.useEvent('keydown', onKeyDown);
-    return {
-        isOpened: isOpened,
-        setIsOpened: setIsOpened,
-        isFocused: isFocused,
-        setIsFocused: setIsFocused,
-        hoveredId: hoveredId,
-        setHoveredId: setHoveredId,
-        selectedIds: selectedIds,
-        setSelectedIds: setSelectedIds
-    };
-}
-exports["default"] = useDataSelect;
+"use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from) {
+    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+        to[j] = from[i];
+    return to;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var isEqual_1 = __importDefault(require("lodash-es/isEqual"));
+var isArray_1 = __importDefault(require("lodash-es/isArray"));
+var isNil_1 = __importDefault(require("lodash-es/isNil"));
+var react_1 = require("react");
+var react_use_1 = require("react-use");
+var defaultProps = {
+    primaryKey: 'id'
+};
+function useDataSelect(config) {
+    // Get primary key
+    var primaryKey = config.primaryKey || defaultProps.primaryKey;
+    // Initial select
+    var initialSelectedIds = react_1.useMemo(function () {
+        var _a;
+        if (((_a = config.selectedIds) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            return [].concat(config.selectedIds || []);
+        }
+        if (!isNil_1["default"](config.inputValue)) {
+            return [].concat(isArray_1["default"](config.inputValue) ? config.inputValue : [config.inputValue]);
+        }
+        return config.selectFirst && config.items.length > 0
+            ? [config.items[0][primaryKey]]
+            : [];
+    }, [config.items, config.selectFirst, config.selectedIds, primaryKey, config.inputValue]);
+    var initialSelectedItems = react_1.useMemo(function () { return config.items.length > 0
+        && initialSelectedIds.length > 0
+        ? initialSelectedIds
+            .map(function (selectedId) { return config.items.find(function (item) { return item.id === selectedId; }); })
+            .filter(Boolean)
+        : []; }, [initialSelectedIds, config.items]);
+    // State
+    var _a = react_1.useState(false), isOpened = _a[0], setIsOpened = _a[1];
+    var _b = react_1.useState(false), isFocused = _b[0], setIsFocused = _b[1];
+    var _c = react_1.useState(null), hoveredId = _c[0], setHoveredId = _c[1];
+    var _d = react_1.useState(initialSelectedIds), selectedIds = _d[0], setSelectedIdsInternal = _d[1];
+    var _e = react_1.useState(initialSelectedItems), selectedItems = _e[0], setSelectedItemsInternal = _e[1];
+    // Handler for select/toggle item by id
+    var setSelectedIds = react_1.useCallback(function (ids, skipToggle) {
+        if (skipToggle === void 0) { skipToggle = false; }
+        if (isArray_1["default"](ids)) {
+            if (!config.multiple && ids.length > 1) {
+                ids = [ids[0]];
+            }
+            setSelectedIdsInternal(ids.sort());
+        }
+        else {
+            var id_1 = ids;
+            if (!id_1) {
+                setSelectedIdsInternal([]);
+            }
+            else if (config.multiple) {
+                if (selectedIds.indexOf(id_1) !== -1) {
+                    if (!skipToggle) {
+                        setSelectedIdsInternal(selectedIds.filter(function (itemValue) { return itemValue !== id_1; }).sort());
+                    }
+                }
+                else {
+                    setSelectedIdsInternal(__spreadArray(__spreadArray([], selectedIds), [id_1]).sort());
+                }
+            }
+            else {
+                if (selectedIds.length !== 1 || selectedIds[0] !== id_1) {
+                    setSelectedIdsInternal([id_1]);
+                }
+                setIsOpened(false);
+            }
+        }
+    }, [config.multiple, selectedIds]);
+    // Update selected items on change selectedIds or items or source items
+    var prevSelectedIdsLength = react_use_1.usePrevious(selectedIds.length);
+    react_use_1.useUpdateEffect(function () {
+        var newSelectedItems = [];
+        var hasChanges = false;
+        selectedIds.forEach(function (selectedId) {
+            var finedItem = config.items.find(function (item) { return item[primaryKey] === selectedId; });
+            if (!finedItem && config.sourceItems) {
+                finedItem = config.sourceItems.find(function (item) { return item[primaryKey] === selectedId; });
+            }
+            var selectedItem = selectedItems.find(function (item) { return item[primaryKey] === selectedId; });
+            if (finedItem || selectedItem) {
+                newSelectedItems.push(finedItem || selectedItem);
+            }
+            if (finedItem
+                && (!selectedItem || selectedItem !== finedItem)) {
+                hasChanges = true;
+            }
+        });
+        if (hasChanges || prevSelectedIdsLength !== selectedIds.length) {
+            setSelectedItemsInternal(newSelectedItems);
+        }
+    }, [config.items, config.sourceItems, primaryKey, selectedIds, selectedItems, prevSelectedIdsLength]);
+    // Select first after fetch data
+    var prevItemsLength = react_use_1.usePrevious(config.items.length);
+    react_use_1.useUpdateEffect(function () {
+        if (config.selectFirst && prevItemsLength === 0 && config.items.length > 0) {
+            setSelectedIdsInternal([config.items[0][primaryKey]]);
+        }
+    }, [config.items, config.selectFirst, prevItemsLength, primaryKey]);
+    // Update selected items on change value
+    var prevConfigSelectedIds = react_use_1.usePrevious(config.selectedIds || []);
+    react_use_1.useUpdateEffect(function () {
+        var newSelectedIds = config.selectedIds;
+        selectedItems.forEach(function (selectedItem) {
+            if (!newSelectedIds.includes(selectedItem.id) && config.selectedIds
+                && config.selectedIds.includes(selectedItem.id)) {
+                newSelectedIds.push(selectedItem.id);
+            }
+        });
+        newSelectedIds.sort();
+        if (!isEqual_1["default"](prevConfigSelectedIds, newSelectedIds)
+            && !isEqual_1["default"](selectedIds, newSelectedIds) && newSelectedIds.length !== 0) {
+            setSelectedIdsInternal(newSelectedIds);
+        }
+    }, [config.items, config.selectedIds, primaryKey, prevConfigSelectedIds,
+        selectedItems, config.sourceItems, selectedIds]);
+    // Global key down handler for navigate on items
+    // Support keys:
+    // - tab
+    // - esc
+    // - enter
+    // - up/down arrows
+    // - space
+    var onKeyDown = react_1.useCallback(function (e) {
+        // Skip no active
+        if (!isFocused && !isOpened) {
+            return;
+        }
+        // Keys: tab, esc
+        if ([9, 27].includes(e.which)) {
+            e.preventDefault();
+            setIsOpened(false);
+        }
+        // Keys: enter (select and close)
+        if (e.which === 13 && isOpened) {
+            e.preventDefault();
+            if (hoveredId) {
+                // Select hovered
+                setSelectedIds(hoveredId, true);
+            }
+            else if (selectedIds.length > 0) {
+                // Select first selected
+                setSelectedIds(selectedIds[0], true);
+            }
+            else if (config.items.length > 0) {
+                // Select first result
+                setSelectedIds(config.items[0], true);
+            }
+            setIsOpened(false);
+        }
+        // Keys: space (toggle select)
+        if (e.which === 32 && isOpened) {
+            e.preventDefault();
+            if (hoveredId) {
+                // Select hovered
+                setSelectedIds(hoveredId);
+            }
+        }
+        // Keys: arrow up, arrow down
+        if ([38, 40].includes(e.which)) {
+            e.preventDefault();
+            var isDown = e.which === 40;
+            if (!isOpened) {
+                // Open on down key
+                if (isDown) {
+                    setIsOpened(true);
+                }
+            }
+            else {
+                // Navigate on items by keys
+                var direction = isDown ? 1 : -1;
+                var keys = config.items.map(function (item) { return item.id; });
+                // Get current index
+                var index = hoveredId ? keys.indexOf(hoveredId) : -1;
+                if (index === -1 && selectedIds.length === 1) {
+                    index = keys.indexOf(selectedIds[0]);
+                }
+                // Get next index
+                var newIndex = index !== -1
+                    ? Math.min(keys.length - 1, Math.max(0, index + direction))
+                    : 0;
+                // Set hovered
+                setHoveredId(keys[newIndex]);
+            }
+        }
+    }, [config.items, hoveredId, isFocused, isOpened, setSelectedIds, selectedIds]);
+    react_use_1.useEvent('keydown', onKeyDown);
+    return {
+        isOpened: isOpened,
+        setIsOpened: setIsOpened,
+        isFocused: isFocused,
+        setIsFocused: setIsFocused,
+        hoveredId: hoveredId,
+        setHoveredId: setHoveredId,
+        selectedIds: selectedIds,
+        setSelectedIds: setSelectedIds,
+        selectedItems: selectedItems
+    };
+}
+exports["default"] = useDataSelect;

package/dist/hooks/useDispatch.d.ts

@@ -1 +1 @@
-export default function useDispatch(): import("redux").Dispatch<any>;
+export default function useDispatch(): any;

package/dist/hooks/useDispatch.js

@@ -1,7 +1,7 @@
-"use strict";
-exports.__esModule = true;
-var react_redux_1 = require("react-redux");
-function useDispatch() {
-    return react_redux_1.useDispatch();
-}
-exports["default"] = useDispatch;
+"use strict";
+exports.__esModule = true;
+var react_redux_1 = require("react-redux");
+function useDispatch() {
+    return react_redux_1.useDispatch();
+}
+exports["default"] = useDispatch;

package/dist/hooks/useFetch.d.ts

@@ -1,30 +1,39 @@
-import { IComponents } from './useComponents';
-export interface IFetchConfig {
-    id?: string | number;
-    url?: string;
-    method?: 'get' | 'post' | string;
-    params?: Record<string, unknown>;
-    onFetch?: (config: IFetchConfig, components: IComponents, addCancelToken: (token: any) => any) => any;
-}
-export interface IFetchResult {
-    data?: {
-        providerData?: {
-            type: string;
-            value: string;
-        };
-        [key: string]: unknown;
-    };
-    isLoading: boolean;
-    fetch?: (newParams?: Record<string, unknown>) => void;
-}
-/**
- * Fetch
- * Используется для подгрузки данных с бекенда перед рендером компонента, на котором он применяется.
- * На вход ему передается один или несколько объектов конфигураций (id, key, url, method, params, ...),
- * которые описывают откуда нужно подтянуть данные.
- *
- * В процесс загрузки HOC будет отображать "Загрузка...", а после уже отрендерит компонент, передав данные в указанный
- * ключ `key`. Все данные сохраняются в Redux Store, что позволяет избежать дополнительных запросов при использовании
- * SSR.
- */
-export default function useFetch(rawConfig?: IFetchConfig): IFetchResult;
+import { IComponents } from '../providers/ComponentsProvider';
+import { IApiMethod } from '../components/ApiComponent';
+declare global {
+    interface Window {
+        APP_PRELOADED_DATA: any;
+    }
+}
+export interface IFetchConfig {
+    id?: string | number;
+    url?: string | IApiMethod;
+    method?: 'get' | 'post' | string;
+    params?: Record<string, unknown>;
+    onFetch?: (config: IFetchConfig, components: IComponents, addCancelToken: (token: any) => any) => any;
+}
+export interface IFetchResult {
+    data?: {
+        providerData?: {
+            type: string;
+            value: string;
+        };
+        [key: string]: unknown;
+    };
+    isLoading: boolean;
+    fetch?: (newParams?: Record<string, unknown>) => void;
+}
+export declare const normalizeConfig: (config: any) => any;
+export declare const getConfigId: (config: any) => any;
+export declare const defaultFetchHandler: (config: any, components: any, addCancelToken: any) => any;
+export declare const fetchData: (config: any, components: any, addCancelToken: any) => any;
+/**
+ * Fetch
+ * Используется для подгрузки данных с бекенда перед рендером компонента, на котором он применяется.
+ * На вход ему передается один или несколько объектов конфигураций (id, key, url, method, params, ...),
+ * которые описывают откуда нужно подтянуть данные.
+ *
+ * В процесс загрузки HOC будет отображать "Загрузка...", а после уже отрендерит компонент, передав данные в указанный
+ * ключ `key`.
+ */
+export default function useFetch(rawConfig?: IFetchConfig): IFetchResult;