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

package/src/hooks/useDataSelect.ts

@@ -0,0 +1,310 @@
+import _isEqual from 'lodash-es/isEqual';
+import _isArray from 'lodash-es/isArray';
+import _isNil from 'lodash-es/isNil';
+
+import {useCallback, useMemo, useState} from 'react';
+import {useEvent, usePrevious, useUpdateEffect} from 'react-use';
+
+interface IDataSelectItem {
+    id: number | string | boolean,
+    label?: string,
+
+    [key: string]: unknown,
+}
+
+export interface IDataSelectConfig {
+    /**
+     * Возможность множественного выбора
+     * @example true
+     */
+    multiple?: boolean;
+
+    /**
+     * Список с видимыми элементами
+     * @example [{id: 1, label: 'Krasnoyarsk'}, {id: 2, label: 'Moscow'}]
+     */
+    items?: IDataSelectItem[],
+
+    /**
+     * Сделать активным первый элемент в списке
+     * @example true
+     */
+    selectFirst?: any;
+
+    /**
+     * Список с идентификаторами выбранных элементов
+     * @example [1, 4]
+     */
+    selectedIds?: any,
+
+    /**
+     * Первичный ключ для item
+     * @example id
+     */
+    primaryKey?: string,
+
+    /**
+     * Атрибут, в котором должны лежать дочерние элементы списка (для группировки)
+     * Если аттрибут не задан - группировка не производится
+     * @example items
+     */
+    groupAttribute?: string,
+
+    /**
+     * Значение поля в форме
+     */
+    inputValue?: any
+
+    /**
+     *  Список со всеми элементами
+     */
+    sourceItems?: IDataSelectItem[],
+}
+
+export interface IDataSelectResult {
+    isOpened: boolean,
+    setIsOpened: (value: boolean) => void,
+    isFocused: boolean,
+    setIsFocused: (value: boolean) => void,
+    hoveredId: PrimaryKey,
+    setHoveredId: (id: PrimaryKey) => void,
+    selectedIds: PrimaryKey[],
+    setSelectedIds: (ids: PrimaryKey | PrimaryKey[], skipToggle?: boolean) => void,
+    selectedItems: IDataSelectItem[],
+}
+
+const defaultProps = {
+    primaryKey: 'id',
+};
+
+export const getLinearItems = (items, groupAttribute) => {
+    let result = [];
+    items.forEach(item => {
+        if (groupAttribute && Array.isArray(item[groupAttribute])) {
+            result = result.concat(getLinearItems(item[groupAttribute], groupAttribute));
+        } else {
+            result.push(item);
+        }
+    });
+    return result;
+};
+
+const isIdExists = id => {
+    if (typeof id === 'boolean') {
+        return true;
+    }
+    return !!id;
+};
+
+export default function useDataSelect(config: IDataSelectConfig): IDataSelectResult {
+    // Get primary key
+    const primaryKey = config.primaryKey || defaultProps.primaryKey;
+
+    const linearItems = useMemo(
+        () => getLinearItems(config.items, config.groupAttribute),
+        [config.groupAttribute, config.items],
+    );
+
+    // Initial select
+    const initialSelectedIds = useMemo(() => {
+        if (config.selectedIds?.length > 0) {
+            return [].concat(config.selectedIds || []);
+        }
+
+        if (!_isNil(config.inputValue)) {
+            return [].concat(_isArray(config.inputValue) ? config.inputValue : [config.inputValue]);
+        }
+
+        return config.selectFirst && linearItems.length > 0
+            ? [linearItems[0][primaryKey]]
+            : [];
+    }, [config.selectedIds, config.inputValue, config.selectFirst, linearItems, primaryKey]);
+
+    const initialSelectedItems = useMemo(
+        () => linearItems.length > 0
+        && initialSelectedIds.length > 0
+            ? initialSelectedIds
+                .map(selectedId => linearItems.find(item => item.id === selectedId))
+                .filter(isIdExists)
+            : [],
+        [initialSelectedIds, linearItems],
+    );
+
+    // State
+    const [isOpened, setIsOpened] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
+    const [hoveredId, setHoveredId] = useState(null);
+    const [selectedIds, setSelectedIdsInternal] = useState(initialSelectedIds);
+    const [selectedItems, setSelectedItemsInternal] = useState(initialSelectedItems);
+
+    // Handler for select/toggle item by id
+    const setSelectedIds = useCallback((ids, skipToggle = false) => {
+        if (_isArray(ids)) {
+            if (!config.multiple && ids.length > 1) {
+                ids = [ids[0]];
+            }
+
+            setSelectedIdsInternal(ids.sort());
+        } else {
+            const id = ids;
+            if (!isIdExists(id)) {
+                setSelectedIdsInternal([]);
+            } else if (config.multiple) {
+                if (selectedIds.indexOf(id) !== -1) {
+                    if (!skipToggle) {
+                        setSelectedIdsInternal(selectedIds.filter(itemValue => itemValue !== id).sort());
+                    }
+                } else {
+                    setSelectedIdsInternal([...selectedIds, id].sort());
+                }
+            } else {
+                if (selectedIds.length !== 1 || selectedIds[0] !== id) {
+                    setSelectedIdsInternal([id]);
+                }
+                setIsOpened(false);
+            }
+        }
+    }, [config.multiple, selectedIds]);
+
+    // Update selected items on change selectedIds or items or source items
+    const prevSelectedIdsLength = usePrevious(selectedIds.length);
+    useUpdateEffect(() => {
+        const newSelectedItems = [];
+        let hasChanges = false;
+        selectedIds.forEach(selectedId => {
+            let finedItem = linearItems.find(item => item[primaryKey] === selectedId);
+            if (!finedItem && config.sourceItems) {
+                finedItem = config.sourceItems.find(item => item[primaryKey] === selectedId);
+            }
+            const selectedItem = selectedItems.find(item => 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
+    const prevItemsLength = usePrevious(linearItems.length);
+    useUpdateEffect(() => {
+        if (config.selectFirst && prevItemsLength === 0 && linearItems.length > 0) {
+            setSelectedIdsInternal([linearItems[0][primaryKey]]);
+        }
+    }, [linearItems, config.selectFirst, prevItemsLength, primaryKey]);
+
+    // Update selected items on change value
+    const prevConfigSelectedIds = usePrevious(config.selectedIds || []);
+    useUpdateEffect(() => {
+        const newSelectedIds = config.selectedIds || [];
+        selectedItems.forEach(selectedItem => {
+            if (!newSelectedIds.includes(selectedItem.id) && config.selectedIds
+                && config.selectedIds.includes(selectedItem.id)) {
+                newSelectedIds.push(selectedItem.id);
+            }
+        });
+        newSelectedIds.sort();
+        if (!_isEqual(prevConfigSelectedIds, newSelectedIds) && !_isEqual(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
+    const onKeyDown = useCallback((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();
+
+            const isDown = e.which === 40;
+            if (!isOpened) {
+                // Open on down key
+                if (isDown) {
+                    setIsOpened(true);
+                }
+            } else {
+                // Navigate on items by keys
+                const direction = isDown ? 1 : -1;
+                const keys: any[] = linearItems.map(item => item.id);
+
+                // Get current index
+                let index = hoveredId ? keys.indexOf(hoveredId) : -1;
+                if (index === -1 && selectedIds.length === 1) {
+                    index = keys.indexOf(selectedIds[0]);
+                }
+
+                // Get next index
+                const 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]);
+    useEvent('keydown', onKeyDown);
+
+    return {
+        isOpened,
+        setIsOpened,
+        isFocused,
+        setIsFocused,
+        hoveredId,
+        setHoveredId,
+        selectedIds,
+        setSelectedIds,
+        selectedItems,
+    };
+}

package/src/hooks/useDispatch.ts

@@ -0,0 +1,5 @@
+import {useDispatch as useReduxDispatch} from 'react-redux';
+
+export default function useDispatch() {
+    return useReduxDispatch();
+}

package/src/hooks/useFetch.ts

@@ -0,0 +1,159 @@
+import {useCallback, useRef, useState} from 'react';
+import {useUnmount, useUpdateEffect, useEffectOnce} from 'react-use';
+import _trim from 'lodash-es/trim';
+import axios, {AxiosError} from 'axios';
+import {useComponents, useSsr} from './index';
+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 const normalizeConfig = config => (
+    config
+        ? {
+            id: null,
+            url: '',
+            method: 'get',
+            params: {},
+            options: null,
+            onFetch: null,
+            ...config,
+        }
+        : null
+);
+
+export const getConfigId = config => {
+    if (config === null) {
+        return null;
+    }
+
+    const result = _trim(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;
+};
+
+export const defaultFetchHandler = (config, components, addCancelToken) => {
+    const cancelToken = new axios.CancelToken(cancel => {
+        addCancelToken(cancel);
+    });
+
+    if (typeof config.url === 'function') {
+        return config.url(components.api, config.params, config.options).then(result => result.data);
+    }
+    return components.http
+        .send(config.method, config.url, config.params, {...config.options, cancelToken})
+        .then(result => result.data);
+};
+
+export const fetchData = (config, components, addCancelToken) => (
+    (config.onFetch || defaultFetchHandler).call(null, config, components, addCancelToken)
+);
+
+/**
+ * Fetch
+ * Используется для подгрузки данных с бекенда перед рендером компонента, на котором он применяется.
+ * На вход ему передается один или несколько объектов конфигураций (id, key, url, method, params, ...),
+ * которые описывают откуда нужно подтянуть данные.
+ *
+ * В процесс загрузки HOC будет отображать "Загрузка...", а после уже отрендерит компонент, передав данные в указанный
+ * ключ `key`.
+ */
+export default function useFetch(rawConfig: IFetchConfig = null): IFetchResult {
+    const components = useComponents();
+
+    // Store config in state
+    const [config, setConfig] = useState(normalizeConfig(rawConfig));
+
+    // Update config in state on raw config updated
+    useUpdateEffect(() => {
+        setConfig(rawConfig);
+    }, [rawConfig]);
+
+    // Get preloaded data
+    const configId = getConfigId(config);
+    const ssrValueContext = useSsr();
+    const preloadedData = process.env.IS_SSR ? ssrValueContext.preloadedData : window.APP_PRELOADED_DATA;
+    const preloadedDataByConfigId = (preloadedData && configId) ? preloadedData[configId] : null;
+
+    // State for data and loading flag
+    const [data, setData] = useState(preloadedDataByConfigId || null);
+    const [axiosError, setAxiosError] = useState(null);
+    const [isLoading, setIsLoading] = useState(!!config && !data);
+
+    // Cancel tokens
+    const cancelTokens = useRef([]);
+    const addCancelToken = token => cancelTokens.current.push(token);
+    useUnmount(() => cancelTokens.current.forEach(cancel => cancel('Canceled on unmount component')));
+
+    // Fetch handler
+    const fetch = useCallback(async (newConfig = null) => {
+        if (newConfig) {
+            setConfig({
+                ...config,
+                ...newConfig,
+                params: {
+                    ...config?.params,
+                    ...newConfig?.params,
+                },
+            });
+        }
+
+        setAxiosError(null);
+        setData(null);
+
+        if (config) {
+            setIsLoading(true);
+
+            try {
+                setData(await fetchData(config, components, addCancelToken));
+            } catch (error) {
+                if (error.isAxiosError) {
+                    setAxiosError(error);
+                }  
+            }
+            
+            setIsLoading(false);
+        }
+    }, [components, config]);
+
+    useEffectOnce(() => {
+        if (!data) {
+            fetch();
+        }
+    });
+
+    // Fetch data on config update
+    useUpdateEffect(() => {
+        fetch();
+    }, [fetch]);
+
+    return {data, isLoading, fetch, axiosError};
+}