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

package/src/hooks/useDataSelect.ts

@@ -1,310 +0,0 @@
-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

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

package/src/hooks/useFetch.ts

@@ -1,159 +0,0 @@
-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};
-}