@steroidsjs/core 2.3.0-beta.1 → 2.3.0-beta.2

package/src/hooks/useDataProvider.test.tsx

@@ -1,109 +0,0 @@
-import * as React from 'react';
-import {act} from 'react-dom/test-utils';
-import configureMockStore from 'redux-mock-store';
-import useDataProvider, {IDataProviderConfig} from './useDataProvider';
-import prepareMiddleware from '../../tests/storeMiddlewareMock';
-import mountWithApp from '../../tests/mountWithApp';
-
-const mockStore = configureMockStore([prepareMiddleware]);
-
-const MockResultComponent = (props: any) => <div />;
-const MockComponent = (config: IDataProviderConfig) => <MockResultComponent {...useDataProvider(config)} />;
-
-jest.useFakeTimers();
-
-describe('hook useDataProvider', () => {
-    it('smart search query', async () => {
-        const items = [
-            {id: 1, label: 'Ivanov'},
-            {id: 2, label: 'Petrov'},
-            {id: 3, label: 'John'},
-        ];
-        const wrapper = mountWithApp(MockComponent, {
-            items,
-            autoComplete: true,
-        });
-
-        expect(wrapper.find('MockComponent').prop('query')).toEqual(undefined);
-        wrapper.setProps({items, query: 'Ivan'} as any);
-
-        expect(wrapper.find('MockComponent').prop('query')).toEqual('Ivan');
-        wrapper.update();
-
-        expect(wrapper.find('MockResultComponent').prop('items')).toEqual([
-            {...items[0], labelHighlighted: [['Ivan', true], ['ov', false]]},
-        ]);
-        expect(wrapper.find('MockResultComponent').prop('sourceItems')).toEqual(items);
-    });
-
-    xit('items as enum', () => {
-        const labels = [
-            {
-                id: 1,
-                label: 'First',
-            },
-        ];
-        const store = mockStore({
-            fields: {
-                meta: {
-                    'app.test.enums.Foo': {
-                        labels,
-                    },
-                },
-            },
-        });
-        const wrapper = mountWithApp(MockComponent, {
-            items: 'app.test.enums.Foo',
-            config: {
-                useGlobal: false,
-                components: {
-                    store: {
-                        store,
-                    },
-                },
-            },
-        });
-
-        // @todo assertions are failing, fix them
-        expect(wrapper.find('MockResultComponent').prop('items')).toEqual(labels);
-        expect(wrapper.find('MockResultComponent').prop('sourceItems')).toEqual(labels);
-        expect(wrapper.find('MockResultComponent').prop('isLoading')).toEqual(false);
-    });
-
-    it('items as strings', () => {
-        const wrapper = mountWithApp(MockComponent, {
-            items: ['a', 'b'],
-        });
-        expect(wrapper.find('MockResultComponent').prop('items')).toEqual([
-            {id: 'a', label: 'a'},
-            {id: 'b', label: 'b'},
-        ]);
-    });
-
-    it('async data provider', async () => {
-        const onSearch = jest.fn(() => new Promise<any>(resolve => {
-            setTimeout(() => resolve(['q1', 'q2']), 500);
-        }));
-
-        const wrapper = mountWithApp(MockComponent, {
-            dataProvider: {onSearch},
-            autoFetch: true,
-        });
-
-        expect(onSearch).toBeCalled();
-        expect(onSearch).toHaveBeenCalledTimes(1);
-        expect(wrapper.find('MockResultComponent').prop('isLoading')).toEqual(true);
-
-        await act(async () => {
-            jest.runAllTimers();
-            await (() => new Promise(setImmediate))();
-            wrapper.update();
-
-            expect(wrapper.find('MockResultComponent').prop('isLoading')).toEqual(false);
-            expect(wrapper.find('MockResultComponent').prop('items')).toEqual([
-                {id: 'q1', label: 'q1'},
-                {id: 'q2', label: 'q2'},
-            ]);
-        });
-    });
-});

package/src/hooks/useDataProvider.ts

@@ -1,261 +0,0 @@
-import {useSelector} from 'react-redux';
-import _isString from 'lodash-es/isString';
-import _isFunction from 'lodash-es/isFunction';
-import _isEqual from 'lodash-es/isEqual';
-import _uniqBy from 'lodash-es/uniqBy';
-
-import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
-import {usePrevious} from 'react-use';
-import {fieldsDataProviderSetItems} from '../actions/fields';
-import {IApiMethod} from '../components/ApiComponent';
-import {normalizeItems} from '../utils/data';
-import {useComponents, useDispatch} from './index';
-import Enum from '../base/Enum';
-import {getDataProviderItems, 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, [key: string]: any })[];
-
-export interface IDataProviderConfig {
-    /**
-     * Коллекция элементов
-     * @example [{id: 1, label: 'Krasnoyarsk'}, {id: 2, label: 'Moscow'}]
-     */
-    items?: DataProviderItems,
-
-    /**
-     * Конфигурация для подгрузки данных извне.
-     * Если dataProvider не передан, то поиск данных по запросу происходит локально.
-     */
-    dataProvider?: {
-        /**
-         * Уникальный (глобально) идентификатор, под которых будут храниться
-         * подгруженные данные в redux (при включенном флаге useRedux). Если
-         * не задан - данные будут храниться в локальном стейте
-         */
-        reduxId?: string,
-
-        /**
-         * URL для подгрузки новой коллекции данных
-         * @example '/api/v1/search'
-         */
-        action?: string | IApiMethod,
-
-        /**
-         * Параметры запроса
-         * @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?: boolean,
-
-    /**
-     * Идентификаторы выбранных значений, которые необходимо подгрузить при `autoFetch` режиме.
-     * На бекенд будут переданы идентификаторы в параметре `ids`, которые необходимо вернуть.
-     * Используется только при `autoFetch = true`
-     * @example [1, 22]
-     */
-    initialSelectedIds?: number[],
-}
-
-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();
-    const dispatch = useDispatch();
-    const reduxDataProviderId = config.dataProvider?.reduxId;
-
-    // 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 [items, setItems] = useState(initialItems);
-    const [isLoading, setIsLoading] = useState(false);
-
-    // Source items state (redux or local)
-    const [sourceInternalItems, setSourceInternalItems] = useState(initialItems);
-    const sourceReduxItems = useSelector(state => getDataProviderItems(state, reduxDataProviderId));
-    const sourceItems = reduxDataProviderId ? sourceReduxItems : sourceInternalItems;
-    const setSourceItems = useCallback((value) => {
-        if (reduxDataProviderId) {
-            dispatch(fieldsDataProviderSetItems(reduxDataProviderId, value));
-        } else {
-            setSourceInternalItems(value);
-        }
-    }, [reduxDataProviderId, dispatch]);
-
-    // Check change items from props
-    const prevInitialItems = usePrevious(initialItems);
-    useEffect(() => {
-        if (prevInitialItems && !_isEqual(prevInitialItems, initialItems)) {
-            setSourceInternalItems(initialItems);
-        }
-    }, [prevInitialItems, initialItems]);
-
-    // Normalize autoComplete
-    const autoComplete: AutoCompleteConfig = useMemo(() => ({
-        ...defaultProps.autoComplete,
-        ...(typeof config.autoComplete === 'boolean') ? {enable: config.autoComplete} : config.autoComplete,
-    }), [config.autoComplete]);
-
-    const dataProvider = useMemo(() => ({
-        action: '',
-        actionMethod: 'get',
-        params: null,
-        onSearch: null,
-        ...config.dataProvider,
-    }), [config.dataProvider]);
-
-    // Fetch data
-    const delayTimerRef = useRef(null);
-    const isAutoFetchedRef = useRef(false);
-    const prevQuery = usePrevious(config.query);
-    const prevParams = usePrevious(dataProvider.params);
-    const prevValues = usePrevious(config.initialSelectedIds);
-
-    useEffect(() => {
-        const fetchRemote = async (isAuto) => {
-            const searchHandler = dataProvider.onSearch || (
-                typeof dataProvider.action === 'function'
-                    ? (method: any, params) => method(components.api, params).then(response => response.data)
-                    : (method: any, params) => components.http.send(dataProvider.actionMethod, method, params)
-                        .then(response => response.data)
-            );
-            const result = searchHandler(dataProvider.action, {
-                query: config.query,
-                ...(isAuto ? {ids: config.initialSelectedIds} : null), // deprecated logic
-                ...(config.initialSelectedIds?.length > 0 ? {withIds: config.initialSelectedIds} : null),
-                ...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);
-            } else {
-                setSourceItems(_uniqBy([
-                    ...sourceItems,
-                    ...newItems,
-                ], 'id'));
-            }
-            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(true);
-        } else if (!_isEqual(prevValues, config.initialSelectedIds)) {
-            fetchRemote(false);
-        } else if (autoComplete.enable || (config.autoFetch && isAutoFetchedRef.current === true)) {
-            if (delayTimerRef.current) {
-                clearTimeout(delayTimerRef.current);
-            }
-
-            // Changed query logic
-            if (prevQuery !== config.query || !_isEqual(prevParams, dataProvider.params)) {
-                // Search with delay
-                delayTimerRef.current = setTimeout(fetchRemote, autoComplete.delay);
-            }
-        }
-    }, [autoComplete, components.api, components.http, config.autoFetch,
-        config.dataProvider, config.initialSelectedIds, config.query, dataProvider,
-        dataProvider.action, dataProvider.onSearch, prevParams, prevQuery, prevValues, setSourceItems, sourceItems]);
-
-    return {
-        sourceItems,
-        items,
-        isLoading,
-        isAutoComplete: autoComplete.enable,
-    };
-}

package/src/hooks/useDataSelect.test.tsx

@@ -1,192 +0,0 @@
-import * as React from 'react';
-import {act} from 'react-dom/test-utils';
-import mountWithApp from '../../tests/mountWithApp';
-import useDataSelect, {IDataSelectConfig} from './useDataSelect';
-
-const MockResultComponent = (props: any) => (
-    <div className='list'>
-        {props.items.map(item => (
-            <div
-                key={'id-' + item.id}
-                className={[
-                    'item-' + item.id,
-                    props.hoveredId === item.id && 'hovered',
-                    props.selectedIds.includes(item.id) && 'selected',
-                ]
-                    .filter(Boolean)
-                    .join(' ')}
-            />
-        ))}
-    </div>
-);
-const MockComponent = (props: IDataSelectConfig) => <MockResultComponent {...props} {...useDataSelect(props)} />;
-
-jest.useFakeTimers();
-
-const items = [
-    {id: 52, name: 'Ivanov'},
-    {id: 28, name: 'Petrov'},
-    {id: 33, name: 'John'},
-];
-
-describe('hook useDataSelect', () => {
-    // TODO keyboard test
-
-    it('select multiple', async () => {
-        const wrapper = mountWithApp(MockComponent, {
-            items,
-            multiple: true,
-        });
-
-        const {setSelectedIds} = wrapper.find('MockResultComponent').props() as any;
-
-        await act(async () => {
-            expect(wrapper.find('MockResultComponent').prop('selectedIds')).toEqual([]);
-            expect(wrapper.find('.item-52').hasClass('selected')).toEqual(false);
-            expect(wrapper.find('.item-28').hasClass('selected')).toEqual(false);
-            expect(wrapper.find('.item-33').hasClass('selected')).toEqual(false);
-
-            setSelectedIds([52, 28]);
-            await (() => new Promise(setImmediate))();
-            wrapper.update();
-            expect(wrapper.find('MockResultComponent').prop('selectedIds')).toEqual([28, 52]);
-            expect(wrapper.find('.item-52').hasClass('selected')).toEqual(true);
-            expect(wrapper.find('.item-28').hasClass('selected')).toEqual(true);
-            expect(wrapper.find('.item-33').hasClass('selected')).toEqual(false);
-
-            setSelectedIds(null);
-            await (() => new Promise(setImmediate))();
-            wrapper.update();
-            expect(wrapper.find('MockResultComponent').prop('selectedIds')).toEqual([]);
-            expect(wrapper.find('.item-52').hasClass('selected')).toEqual(false);
-            expect(wrapper.find('.item-28').hasClass('selected')).toEqual(false);
-            expect(wrapper.find('.item-33').hasClass('selected')).toEqual(false);
-        });
-    });
-
-    it('single select, open, hover', async () => {
-        const wrapper = mountWithApp(MockComponent, {items});
-
-        const {
-            setIsOpened,
-            setIsFocused,
-            setHoveredId,
-            setSelectedIds,
-        } = wrapper.find('MockResultComponent').props() as any;
-
-        // Open
-        await act(async () => {
-            setIsOpened(true);
-            await (() => new Promise(setImmediate))();
-            wrapper.update();
-            expect(wrapper.find('MockResultComponent').prop('isOpened')).toEqual(true);
-
-            setIsOpened(false);
-            await (() => new Promise(setImmediate))();
-            wrapper.update();
-            expect(wrapper.find('MockResultComponent').prop('isOpened')).toEqual(false);
-        });
-
-        // Focus
-        await act(async () => {
-            setIsFocused(true);
-            await (() => new Promise(setImmediate))();
-            wrapper.update();
-            expect(wrapper.find('MockResultComponent').prop('isFocused')).toEqual(true);
-
-            setIsFocused(false);
-            await (() => new Promise(setImmediate))();
-            wrapper.update();
-            expect(wrapper.find('MockResultComponent').prop('isFocused')).toEqual(false);
-        });
-
-        // Hover
-        await act(async () => {
-            expect(wrapper.find('MockResultComponent').prop('hoveredId')).toEqual(null);
-            expect(wrapper.find('.item-28').hasClass('hovered')).toEqual(false);
-
-            setHoveredId(28);
-            await (() => new Promise(setImmediate))();
-            wrapper.update();
-            expect(wrapper.find('MockResultComponent').prop('hoveredId')).toEqual(28);
-            expect(wrapper.find('.item-28').hasClass('hovered')).toEqual(true);
-
-            setHoveredId(33);
-            await (() => new Promise(setImmediate))();
-            wrapper.update();
-            expect(wrapper.find('MockResultComponent').prop('hoveredId')).toEqual(33);
-            expect(wrapper.find('.item-28').hasClass('hovered')).toEqual(false);
-            expect(wrapper.find('.item-33').hasClass('hovered')).toEqual(true);
-
-            setHoveredId(null);
-            await (() => new Promise(setImmediate))();
-            wrapper.update();
-            expect(wrapper.find('MockResultComponent').prop('hoveredId')).toEqual(null);
-            expect(wrapper.find('.item-28').hasClass('hovered')).toEqual(false);
-            expect(wrapper.find('.item-33').hasClass('hovered')).toEqual(false);
-        });
-
-        // Select signle
-        await act(async () => {
-            expect(wrapper.find('MockResultComponent').prop('selectedIds')).toEqual([]);
-            expect(wrapper.find('.item-28').hasClass('selected')).toEqual(false);
-
-            setSelectedIds(28); // not-array format
-            await (() => new Promise(setImmediate))();
-            wrapper.update();
-            expect(wrapper.find('MockResultComponent').prop('selectedIds')).toEqual([28]);
-            expect(wrapper.find('.item-28').hasClass('selected')).toEqual(true);
-
-            setSelectedIds([52, 28]); // try select multiple
-            await (() => new Promise(setImmediate))();
-            wrapper.update();
-            expect(wrapper.find('MockResultComponent').prop('selectedIds')).toEqual([52]);
-            expect(wrapper.find('.item-28').hasClass('selected')).toEqual(false);
-            expect(wrapper.find('.item-52').hasClass('selected')).toEqual(true);
-
-            setSelectedIds(null);
-            await (() => new Promise(setImmediate))();
-            wrapper.update();
-            expect(wrapper.find('MockResultComponent').prop('selectedIds')).toEqual([]);
-            expect(wrapper.find('.item-28').hasClass('selected')).toEqual(false);
-            expect(wrapper.find('.item-52').hasClass('selected')).toEqual(false);
-        });
-    });
-
-    it('select first', async () => {
-        const wrapper = mountWithApp(MockComponent, {
-            items,
-            selectFirst: true,
-        });
-
-        expect(wrapper.find('MockResultComponent').prop('selectedIds')).toEqual([items[0].id]);
-
-        wrapper.setProps({selectedIds: [33]} as any);
-        await (() => new Promise(setImmediate))();
-        wrapper.update();
-        expect(wrapper.find('MockResultComponent').prop('selectedIds')).toEqual([33]);
-    });
-
-    it('custom primary key', () => {
-        const wrapper = mountWithApp(MockComponent, {
-            items: [{foo: 'Bar'}],
-            primaryKey: 'foo',
-            selectFirst: true,
-        });
-
-        expect(wrapper.find('MockResultComponent').prop('selectedIds')).toEqual(['Bar']);
-    });
-
-    it('initial selected ids', async () => {
-        const wrapper = mountWithApp(MockComponent, {
-            items,
-            selectedIds: [28],
-        });
-        expect(wrapper.find('MockResultComponent').prop('selectedIds')).toEqual([28]);
-
-        wrapper.setProps({selectFirst: true} as any);
-        await (() => new Promise(setImmediate))();
-        wrapper.update();
-        expect(wrapper.find('MockResultComponent').prop('selectedIds')).toEqual([28]);
-    });
-});