@steroidsjs/core 2.3.0-beta.5 → 2.3.0-beta.6

package/hooks/useDataSelect.js

@@ -0,0 +1,229 @@
+"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;
+exports.getLinearItems = void 0;
+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'
+};
+var getLinearItems = function (items, groupAttribute) {
+    var result = [];
+    items.forEach(function (item) {
+        if (groupAttribute && Array.isArray(item[groupAttribute])) {
+            result = result.concat(exports.getLinearItems(item[groupAttribute], groupAttribute));
+        }
+        else {
+            result.push(item);
+        }
+    });
+    return result;
+};
+exports.getLinearItems = getLinearItems;
+var isIdExists = function (id) {
+    if (typeof id === 'boolean') {
+        return true;
+    }
+    return !!id;
+};
+function useDataSelect(config) {
+    // Get primary key
+    var primaryKey = config.primaryKey || defaultProps.primaryKey;
+    var linearItems = react_1.useMemo(function () { return exports.getLinearItems(config.items, config.groupAttribute); }, [config.groupAttribute, config.items]);
+    // 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 && linearItems.length > 0
+            ? [linearItems[0][primaryKey]]
+            : [];
+    }, [config.selectedIds, config.inputValue, config.selectFirst, linearItems, primaryKey]);
+    var initialSelectedItems = react_1.useMemo(function () { return linearItems.length > 0
+        && initialSelectedIds.length > 0
+        ? initialSelectedIds
+            .map(function (selectedId) { return linearItems.find(function (item) { return item.id === selectedId; }); })
+            .filter(isIdExists)
+        : []; }, [initialSelectedIds, linearItems]);
+    // 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 (!isIdExists(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 = linearItems.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);
+        }
+    }, [linearItems, config.sourceItems, primaryKey, selectedIds, selectedItems, prevSelectedIdsLength]);
+    // Select first after fetch data
+    var prevItemsLength = react_use_1.usePrevious(linearItems.length);
+    react_use_1.useUpdateEffect(function () {
+        if (config.selectFirst && prevItemsLength === 0 && linearItems.length > 0) {
+            setSelectedIdsInternal([linearItems[0][primaryKey]]);
+        }
+    }, [linearItems, 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)) {
+            setSelectedIdsInternal(newSelectedIds);
+        }
+    }, [config.selectedIds, prevConfigSelectedIds, selectedIds, selectedItems]);
+    // 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);
+            setIsFocused(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 (linearItems.length > 0) {
+                // Select first result
+                setSelectedIds(linearItems[0], true);
+            }
+            setIsOpened(false);
+        }
+        // Keys: space (toggle select)
+        if (e.which === 32 && isOpened) {
+            if (hoveredId) {
+                e.preventDefault();
+                // 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 = linearItems.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]);
+            }
+        }
+    }, [isFocused, isOpened, hoveredId, selectedIds, linearItems, setSelectedIds]);
+    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/hooks/useDispatch.d.ts

@@ -0,0 +1 @@
+export default function useDispatch(): any;

package/hooks/useDispatch.js

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

package/hooks/useFetch.d.ts

@@ -0,0 +1,41 @@
+import { AxiosError } from 'axios';
+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;
+    } | any;
+    isLoading: boolean;
+    fetch?: (newParams?: Record<string, unknown>) => void;
+    axiosError: AxiosError | null;
+}
+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;

package/hooks/useFetch.js

@@ -0,0 +1,168 @@
+"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 __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.fetchData = exports.defaultFetchHandler = exports.getConfigId = exports.normalizeConfig = void 0;
+var react_1 = require("react");
+var react_use_1 = require("react-use");
+var trim_1 = __importDefault(require("lodash-es/trim"));
+var axios_1 = __importDefault(require("axios"));
+var index_1 = require("./index");
+var normalizeConfig = function (config) { return (config
+    ? __assign({ id: null, url: '', method: 'get', params: {}, options: null, onFetch: null }, config) : null); };
+exports.normalizeConfig = normalizeConfig;
+var getConfigId = function (config) {
+    if (config === null) {
+        return null;
+    }
+    var result = trim_1["default"](config.id || config.url, '/');
+    if (!result) {
+        // eslint-disable-next-line no-console
+        console.warn('Please set id for fetch config, it`s necessary for SSR to work properly');
+    }
+    return result;
+};
+exports.getConfigId = getConfigId;
+var defaultFetchHandler = function (config, components, addCancelToken) {
+    var cancelToken = new axios_1["default"].CancelToken(function (cancel) {
+        addCancelToken(cancel);
+    });
+    if (typeof config.url === 'function') {
+        return config.url(components.api, config.params, config.options).then(function (result) { return result.data; });
+    }
+    return components.http
+        .send(config.method, config.url, config.params, __assign(__assign({}, config.options), { cancelToken: cancelToken }))
+        .then(function (result) { return result.data; });
+};
+exports.defaultFetchHandler = defaultFetchHandler;
+var fetchData = function (config, components, addCancelToken) { return ((config.onFetch || exports.defaultFetchHandler).call(null, config, components, addCancelToken)); };
+exports.fetchData = fetchData;
+/**
+ * Fetch
+ * Используется для подгрузки данных с бекенда перед рендером компонента, на котором он применяется.
+ * На вход ему передается один или несколько объектов конфигураций (id, key, url, method, params, ...),
+ * которые описывают откуда нужно подтянуть данные.
+ *
+ * В процесс загрузки HOC будет отображать "Загрузка...", а после уже отрендерит компонент, передав данные в указанный
+ * ключ `key`.
+ */
+function useFetch(rawConfig) {
+    var _this = this;
+    if (rawConfig === void 0) { rawConfig = null; }
+    var components = index_1.useComponents();
+    // Store config in state
+    var _a = react_1.useState(exports.normalizeConfig(rawConfig)), config = _a[0], setConfig = _a[1];
+    // Update config in state on raw config updated
+    react_use_1.useUpdateEffect(function () {
+        setConfig(rawConfig);
+    }, [rawConfig]);
+    // Get preloaded data
+    var configId = exports.getConfigId(config);
+    var ssrValueContext = index_1.useSsr();
+    var preloadedData = process.env.IS_SSR ? ssrValueContext.preloadedData : window.APP_PRELOADED_DATA;
+    var preloadedDataByConfigId = (preloadedData && configId) ? preloadedData[configId] : null;
+    // State for data and loading flag
+    var _b = react_1.useState(preloadedDataByConfigId || null), data = _b[0], setData = _b[1];
+    var _c = react_1.useState(null), axiosError = _c[0], setAxiosError = _c[1];
+    var _d = react_1.useState(!!config && !data), isLoading = _d[0], setIsLoading = _d[1];
+    // Cancel tokens
+    var cancelTokens = react_1.useRef([]);
+    var addCancelToken = function (token) { return cancelTokens.current.push(token); };
+    react_use_1.useUnmount(function () { return cancelTokens.current.forEach(function (cancel) { return cancel('Canceled on unmount component'); }); });
+    // Fetch handler
+    var fetch = react_1.useCallback(function (newConfig) {
+        if (newConfig === void 0) { newConfig = null; }
+        return __awaiter(_this, void 0, void 0, function () {
+            var _a, error_1;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        if (newConfig) {
+                            setConfig(__assign(__assign(__assign({}, config), newConfig), { params: __assign(__assign({}, config === null || config === void 0 ? void 0 : config.params), newConfig === null || newConfig === void 0 ? void 0 : newConfig.params) }));
+                        }
+                        setAxiosError(null);
+                        setData(null);
+                        if (!config) return [3 /*break*/, 5];
+                        setIsLoading(true);
+                        _b.label = 1;
+                    case 1:
+                        _b.trys.push([1, 3, , 4]);
+                        _a = setData;
+                        return [4 /*yield*/, exports.fetchData(config, components, addCancelToken)];
+                    case 2:
+                        _a.apply(void 0, [_b.sent()]);
+                        return [3 /*break*/, 4];
+                    case 3:
+                        error_1 = _b.sent();
+                        if (error_1.isAxiosError) {
+                            setAxiosError(error_1);
+                        }
+                        return [3 /*break*/, 4];
+                    case 4:
+                        setIsLoading(false);
+                        _b.label = 5;
+                    case 5: return [2 /*return*/];
+                }
+            });
+        });
+    }, [components, config]);
+    react_use_1.useEffectOnce(function () {
+        if (!data) {
+            fetch();
+        }
+    });
+    // Fetch data on config update
+    react_use_1.useUpdateEffect(function () {
+        fetch();
+    }, [fetch]);
+    return { data: data, isLoading: isLoading, fetch: fetch, axiosError: axiosError };
+}
+exports["default"] = useFetch;

package/hooks/useFile.d.ts

@@ -0,0 +1,2 @@
+import { IFileHocInput, IFileHocOutput } from '../hoc/file';
+export default function useFile(props: IFileHocInput): IFileHocOutput;