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

package/src/hooks/useDataProvider.ts

@@ -1,199 +0,0 @@
-import {useSelector} from 'react-redux';
-import _isString from 'lodash-es/isString';
-import _isFunction from 'lodash-es/isFunction';
-
-import {useEffect, useMemo, useRef, useState} from 'react';
-import {normalizeItems} from '../utils/data';
-import {useComponents} from './index';
-import Enum from '../base/Enum';
-import {getEnumLabels} from '../reducers/fields';
-import {smartSearch} from '../utils/text';
-
-export interface AutoCompleteConfig {
-    /**
-     * Подключить autocomplete?
-     * @example true
-     */
-    enable?: boolean,
-
-    /**
-     * Минимальная длина запроса
-     * @example 2
-     */
-    minLength?: number,
-
-    /**
-     * Задержка в миллисекундах перед осуществлением запроса
-     * @example 100
-     */
-    delay?: number,
-}
-
-export type DataProviderItems = string
-    | ({ new(): Enum })
-    | (string | number | { id: string | number | boolean, label: string | any })[];
-
-export interface IDataProviderConfig {
-    /**
-     * Коллекция элементов
-     * @example [{id: 1, label: 'Krasnoyarsk'}, {id: 2, label: 'Moscow'}]
-     */
-    items?: DataProviderItems,
-
-    /**
-     * Конфигурация для подгрузки данных извне.
-     * Если dataProvider не передан, то поиск данных по запросу происходит локально.
-     */
-    dataProvider?: {
-        /**
-         * URL для подгрузки новой коллекции данных
-         * @example '/api/v1/search'
-         */
-        action?: string,
-
-        /**
-         * Параметры запроса
-         * @example {pageSize: 3}
-         */
-        params?: Record<string, unknown>,
-
-        /**
-         * Обработчик, который вызывается для подгрузки данных.
-         * Если обработчик не передан, то по умолчанию отправится post-запрос.
-         * @param {string} action
-         * @param {Object} params
-         * @return {Promise<Array> | Array}
-         */
-        onSearch?: (action: string, params: Record<string, unknown>) => Array<unknown> | Promise<Array<unknown>>,
-    },
-
-    /**
-     * Текст запроса
-     * @example 'some text'
-     */
-    query?: string,
-
-    /**
-     * Настройки поиска
-     * @example {enable: true, minLength: 2, delay: 100}
-     */
-    autoComplete?: boolean | AutoCompleteConfig,
-
-    /**
-     * Загрузка данных после любого изменения запроса.
-     * Если включен autoFetch, то настройки autoComplete не применятся.
-     * @example true
-     */
-    autoFetch?: any,
-}
-
-export interface IDataProviderResult {
-    items?: {
-        id: number | string | boolean,
-        label?: string,
-        [key: string]: unknown,
-    }[];
-    sourceItems?: {
-        id: number | string | boolean,
-        label?: string,
-        [key: string]: unknown,
-    }[];
-    isLoading?: boolean,
-    isAutoComplete?: boolean,
-}
-
-const defaultProps = {
-    autoComplete: {
-        enable: false,
-        minLength: 2,
-        delay: 100,
-    },
-};
-
-/**
- * Data Provider
- * Подготавливает коллекции данных для полей форм. Используется в выпадающих списках, чекбоксах, автокомплитах и т.п.
- * Позволяет передать данные несколькими видами (enum, list, object, data provider), а на выход предоставит единый вид
- * данных. Поддерживает загрузку данных извне (при autocomplete), поиск по данным.
- */
-export default function useDataProvider(config: IDataProviderConfig): IDataProviderResult {
-    const components = useComponents();
-
-    // Check enum
-    const enumItems = useSelector(state => _isString(config.items) ? getEnumLabels(state, config.items) : null);
-
-    // Initial items
-    const initialItems = normalizeItems(enumItems || config.items);
-
-    // Items state
-    const [sourceItems, setSourceItems] = useState(initialItems);
-    const [items, setItems] = useState(initialItems);
-    const [isLoading, setIsLoading] = useState(false);
-
-    // Normalize autoComplete
-    const autoComplete: AutoCompleteConfig = useMemo(() => ({
-        ...defaultProps.autoComplete,
-        ...(typeof config.autoComplete === 'boolean') ? {enable: config.autoComplete} : config.autoComplete,
-    }), [config.autoComplete]);
-
-    const dataProvider = useMemo(() => ({
-        action: '',
-        params: null,
-        onSearch: null,
-        ...config.dataProvider,
-    }), [config.dataProvider]);
-
-    // Fetch data
-    const delayTimerRef = useRef(null);
-    const isAutoFetchedRef = useRef(false);
-    useEffect(() => {
-        const fetchRemote = async () => {
-            const searchHandler = dataProvider.onSearch || components.http.post.bind(components.http);
-            const result = searchHandler(dataProvider.action, {
-                query: config.query,
-                ...config.dataProvider.params,
-            });
-
-            // Check is promise
-            let newItems;
-            if (result && _isFunction(result.then)) {
-                setIsLoading(true);
-                newItems = await result;
-                setIsLoading(false);
-            }
-
-            // Update items
-            newItems = normalizeItems(newItems);
-            if (!config.query) {
-                setSourceItems(newItems);
-            }
-            setItems(newItems);
-        };
-
-        if (!config.dataProvider) {
-            // Client-side search on static items
-            setItems(config.query ? smartSearch(config.query, sourceItems) : sourceItems);
-        } else if (config.autoFetch && isAutoFetchedRef.current === false) {
-            isAutoFetchedRef.current = true;
-            fetchRemote();
-        } else if (autoComplete.enable) {
-            if (delayTimerRef.current) {
-                clearTimeout(delayTimerRef.current);
-            }
-
-            // Min length query logic
-            if (config.query && config.query.length >= autoComplete.minLength) {
-                // Search with delay
-                delayTimerRef.current = setTimeout(fetchRemote, autoComplete.delay);
-            }
-        }
-    }, [autoComplete, components.http, config.autoFetch, config.dataProvider, config.query, dataProvider,
-        dataProvider.action, dataProvider.onSearch, sourceItems]);
-
-    return {
-        sourceItems,
-        items,
-        isLoading,
-        isAutoComplete: autoComplete.enable,
-    };
-}

package/src/hooks/useDataSelect.ts

@@ -1,208 +0,0 @@
-import _isEqual from 'lodash-es/isEqual';
-import _isArray from 'lodash-es/isArray';
-import _remove from 'lodash-es/remove';
-import _includes from 'lodash-es/includes';
-
-import {useCallback, useEffect, useMemo, useState} from 'react';
-import {useEvent, usePrevious, useUpdateEffect} from 'react-use';
-
-export interface IDataSelectConfig {
-    /**
-     * Возможность множественного выбора
-     * @example true
-     */
-    multiple?: boolean;
-
-    /**
-     * Список с элементами
-     * @example [{id: 1, label: 'Krasnoyarsk'}, {id: 2, label: 'Moscow'}]
-     */
-    items: {
-        id: number | string | boolean,
-        label?: string,
-        [key: string]: unknown,
-    }[],
-
-    /**
-     * Сделать активным первый элемент в списке
-     * @example true
-     */
-    selectFirst?: any;
-
-    /**
-     * Список с идентификаторами выбранных элементов
-     * @example [1, 4]
-     */
-    selectedIds: any,
-
-    /**
-     * Первичный ключ для item
-     * @example id
-     */
-    primaryKey?: string,
-}
-
-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,
-}
-
-const defaultProps = {
-    primaryKey: 'id',
-};
-
-export default function useDataSelect(config: IDataSelectConfig): IDataSelectResult {
-    // Get primary key
-    const primaryKey = config.primaryKey || defaultProps.primaryKey;
-
-    // Initial select
-    const initialSelectedIds = useMemo(() => {
-        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
-    const [isOpened, setIsOpened] = useState(false);
-    const [isFocused, setIsFocused] = useState(false);
-    const [hoveredId, setHoveredId] = useState(null);
-    const [selectedIds, setSelectedIdsInternal] = useState(initialSelectedIds);
-
-    // 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);
-        } else {
-            const id = ids;
-            if (!id) {
-                setSelectedIdsInternal([]);
-            } else if (config.multiple) {
-                if (selectedIds.indexOf(id) !== -1) {
-                    if (!skipToggle) {
-                        _remove(selectedIds, itemValue => itemValue === id);
-                    }
-                } else {
-                    selectedIds.push(id);
-                }
-                setSelectedIdsInternal(selectedIds);
-            } else {
-                if (selectedIds.length !== 1 || selectedIds[0] !== id) {
-                    setSelectedIdsInternal([id]);
-                }
-                setIsOpened(false);
-            }
-        }
-    }, [config.multiple, selectedIds]);
-
-    // Select first after fetch data
-    const prevItemsLength = usePrevious(config.items.length);
-    useUpdateEffect(() => {
-        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
-    const prevConfigSelectedIds = usePrevious(config.selectedIds || []);
-    useUpdateEffect(() => {
-        // console.log(config.selectedIds, prevConfigSelectedIds);
-        const newSelectedIds = config.selectedIds && config.selectedIds.length > 0
-            ? config.items.map(item => item[primaryKey]).filter(id => config.selectedIds.includes(id))
-            : [];
-        if (!_isEqual(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
-    const onKeyDown = useCallback((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();
-
-            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 = config.items.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]);
-            }
-        }
-    }, [config.items, hoveredId, isFocused, isOpened, setSelectedIds, selectedIds]);
-    useEvent('keydown', onKeyDown);
-
-    return {
-        isOpened,
-        setIsOpened,
-        isFocused,
-        setIsFocused,
-        hoveredId,
-        setHoveredId,
-        selectedIds,
-        setSelectedIds,
-    };
-}

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,118 +0,0 @@
-import {useCallback, useEffect, useRef, useState} from 'react';
-import {useUnmount, useUpdateEffect} from 'react-use';
-import _trim from 'lodash/trim';
-import _uniqueId from 'lodash/uniqueId';
-import axios from 'axios';
-import {useComponents} from './index';
-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,
-}
-
-const normalizeConfig = config => (
-    config
-        ? {
-            id: null,
-            url: '',
-            method: 'get',
-            params: {},
-            onFetch: null,
-            ...config,
-        }
-        : null
-);
-const defaultFetchHandler = (config, components, addCancelToken) => {
-    const cancelToken = new axios.CancelToken(cancel => {
-        addCancelToken(cancel);
-    });
-    return components.http
-        .send(config.method, config.url, config.params, {cancelToken})
-        .then(result => result.data);
-};
-
-/**
- * Fetch
- * Используется для подгрузки данных с бекенда перед рендером компонента, на котором он применяется.
- * На вход ему передается один или несколько объектов конфигураций (id, key, url, method, params, ...),
- * которые описывают откуда нужно подтянуть данные.
- *
- * В процесс загрузки HOC будет отображать "Загрузка...", а после уже отрендерит компонент, передав данные в указанный
- * ключ `key`. Все данные сохраняются в Redux Store, что позволяет избежать дополнительных запросов при использовании
- * SSR.
- */
-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]);
-
-    // Resolve config id
-    // TODO Get initial state from HttpComponent (for SSR) by configId
-    const idRef = useRef(_uniqueId('fetch'));
-    const configId = config ? _trim(config.id || config.url || idRef.current, '/') : null;
-
-    // State for data and loading flag
-    const [data, setData] = useState(null);
-    const [isLoading, setIsLoading] = useState(false);
-
-    // 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,
-                },
-            });
-        }
-        if (config) {
-            setIsLoading(true);
-            setData(await (config.onFetch || defaultFetchHandler).call(null, config, components, addCancelToken));
-            setIsLoading(false);
-        }
-    }, [components, config]);
-
-    // Fetch data on config update
-    useEffect(() => {
-        const fetchData = async () => {
-            if (config) {
-                setIsLoading(true);
-                setData(await (config.onFetch || defaultFetchHandler).call(null, config, components, addCancelToken));
-                setIsLoading(false);
-            }
-        };
-
-        fetchData();
-    }, [components, config]);
-
-    return {data, isLoading, fetch};
-}