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

package/src/hooks/useDataProvider.test.tsx

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

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

@@ -0,0 +1,192 @@
+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]);
+    });
+});