@steroidsjs/core 2.2.1 → 2.2.2

package/src/hooks/useDataSelect.ts

@@ -0,0 +1,281 @@
+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,
+
+    /**
+     * Значение поля в форме
+     */
+    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 default function useDataSelect(config: IDataSelectConfig): IDataSelectResult {
+    // Get primary key
+    const primaryKey = config.primaryKey || defaultProps.primaryKey;
+
+    // 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 && config.items.length > 0
+            ? [config.items[0][primaryKey]]
+            : [];
+    }, [config.items, config.selectFirst, config.selectedIds, primaryKey, config.inputValue]);
+
+    const initialSelectedItems = useMemo(
+        () => config.items.length > 0
+        && initialSelectedIds.length > 0
+            ? initialSelectedIds
+                .map(selectedId => config.items.find(item => item.id === selectedId))
+                .filter(Boolean)
+            : [],
+        [initialSelectedIds, config.items],
+    );
+
+    // 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 (!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 = config.items.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);
+        }
+    }, [config.items, config.sourceItems, primaryKey, selectedIds, selectedItems, prevSelectedIdsLength]);
+
+    // 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(() => {
+        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) && newSelectedIds.length !== 0) {
+            setSelectedIdsInternal(newSelectedIds);
+        }
+    }, [config.items, config.selectedIds, primaryKey, prevConfigSelectedIds,
+        selectedItems, config.sourceItems, selectedIds]);
+
+    // 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);
+        }
+
+        // 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 (config.items.length > 0) {
+                // Select first result
+                setSelectedIds(config.items[0], true);
+            }
+
+            setIsOpened(false);
+        }
+
+        // Keys: space (toggle select)
+        if (e.which === 32 && isOpened) {
+            e.preventDefault();
+            if (hoveredId) {
+                // 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 = 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,
+        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,148 @@
+import {useCallback, useRef, useState} from 'react';
+import {useUnmount, useUpdateEffect, useEffectOnce} from 'react-use';
+import _trim from 'lodash-es/trim';
+import axios 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
+    },
+    isLoading: boolean,
+    fetch?: (newParams?: Record<string, unknown>) => void,
+}
+
+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 [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,
+                },
+            });
+        }
+
+        setData(null);
+
+        if (config) {
+            setIsLoading(true);
+            setData(await fetchData(config, components, addCancelToken));
+            setIsLoading(false);
+        }
+    }, [components, config]);
+
+    useEffectOnce(() => {
+        if (!data) {
+            fetch();
+        }
+    });
+
+    // Fetch data on config update
+    useUpdateEffect(() => {
+        fetch();
+    }, [fetch]);
+
+    return {data, isLoading, fetch};
+}

package/src/hooks/useFile.tsx

@@ -0,0 +1,255 @@
+import {useEffect} from 'react';
+import {useMount, useUnmount, useUpdate, usePrevious} from 'react-use';
+import FileUp from 'fileup-core';
+import File from 'fileup-core/lib/models/File';
+import QueueCollection from 'fileup-core/lib/models/QueueCollection';
+import _get from 'lodash-es/get';
+import _isEqual from 'lodash-es/isEqual';
+import _difference from 'lodash-es/difference';
+import buildURL from 'axios/lib/helpers/buildURL';
+import {IFileHocInput, IFileHocOutput} from '../hoc/file';
+import useInitial from '../hooks/useInitial';
+import {useForm} from '../hooks/index';
+
+const imagesMimeTypes = [
+    'image/gif',
+    'image/jpeg',
+    'image/pjpeg',
+    'image/png',
+];
+
+function generateBackendUrl(props) {
+    return buildURL(props.backendUrl, {
+        mimeTypes: props.imagesOnly ? imagesMimeTypes : props.mimeTypes,
+        imagesProcessor: props.imagesProcessor,
+        imagesExactSize: props.imagesExactSize,
+    });
+}
+
+export default function useFile(props: IFileHocInput): IFileHocOutput {
+    const uploader = useInitial(() => new FileUp({
+        dropArea: {},
+        backendUrl: generateBackendUrl(props),
+        ...props.uploader,
+        form: {
+            ...(props.uploader && props.uploader.form),
+            multiple: props.multiple,
+        },
+    }));
+
+    /**
+     * Force component update when file status or progress changes
+     * @private
+     */
+    const forceUpdate = useUpdate();
+
+    // Check for initial files
+    const form = useForm();
+    let initialFiles = props.initialFiles;
+    if (!initialFiles) {
+        // Find in form values
+        initialFiles = form.formSelector(state => _get(state, ['values', props.input.name.replace(/Ids?$/, '')]));
+    }
+    useEffect(() => {
+        if (initialFiles) {
+            uploader.queue.add(
+                [].concat(initialFiles || [])
+                    .filter(item => !!item.uid)
+                    .map(
+                        item => new File({
+                            path: item.title || item.label || item.uid || item.id,
+                            status: File.STATUS_END,
+                            result: File.RESULT_SUCCESS,
+                            resultHttpStatus: 200,
+                            resultHttpMessage: {
+                                id: item.id || item.uid,
+                                images: item.thumbnailUrl
+                                    ? [{url: item.thumbnailUrl}]
+                                    : null,
+                            },
+                            uid: item.uid,
+                        }),
+                    ),
+            );
+            forceUpdate();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [initialFiles]);
+
+    /**
+     * Trigger by queue when file is uploaded or error
+     * @param {File} file
+     * @private
+     */
+    const onQueueItemEnd = (file) => {
+        forceUpdate();
+        // Check successfully
+        if (file.getResult() !== File.RESULT_SUCCESS) {
+            return;
+        }
+        // Check file id exists
+        const id = _get(file.getResultHttpMessage(), 'id');
+        if (!id) {
+            return;
+        }
+        // Update value
+        if (props.multiple) {
+            props.input.onChange(
+                [].concat(props.input.value || []).concat([id]),
+            );
+        } else {
+            props.input.onChange(id);
+        }
+    };
+
+    /**
+     * Triggered by queue when file is removed from it
+     * @param {File[]} removedFiles
+     * @private
+     */
+    const onQueueRemove = (removedFiles) => {
+        const toRemove = removedFiles
+            .map(file => _get(file.getResultHttpMessage(), 'id'))
+            .filter(Boolean);
+        if (toRemove.length === 0) {
+            return;
+        }
+        // Update value
+        if (props.multiple) {
+            props.input.onChange(
+                []
+                    .concat(props.input.value || [])
+                    .filter(id => toRemove.indexOf(Number(id)) === -1),
+            );
+        } else if (toRemove.indexOf(props.input.value) !== -1) {
+            props.input.onChange(null);
+        }
+        forceUpdate();
+    };
+
+    useMount(() => {
+        uploader.queue.on(
+            QueueCollection.EVENT_ITEM_STATUS,
+            forceUpdate,
+        );
+        uploader.queue.on(
+            QueueCollection.EVENT_ITEM_PROGRESS,
+            forceUpdate,
+        );
+        uploader.queue.on(
+            QueueCollection.EVENT_ITEM_END,
+            onQueueItemEnd,
+        );
+        uploader.queue.on(
+            QueueCollection.EVENT_REMOVE,
+            onQueueRemove,
+        );
+    });
+
+    useUnmount(() => {
+        uploader.queue.off(
+            QueueCollection.EVENT_ITEM_STATUS,
+            forceUpdate,
+        );
+        uploader.queue.off(
+            QueueCollection.EVENT_ITEM_PROGRESS,
+            forceUpdate,
+        );
+        uploader.queue.off(
+            QueueCollection.EVENT_ITEM_END,
+            onQueueItemEnd,
+        );
+        uploader.queue.off(
+            QueueCollection.EVENT_REMOVE,
+            onQueueRemove,
+        );
+    });
+
+    // Check backend url changes
+    useEffect(() => {
+        uploader.backendUrl = generateBackendUrl({
+            backendUrl: props.backendUrl,
+            imagesOnly: props.imagesOnly,
+            mimeTypes: props.mimeTypes,
+            imagesProcessor: props.imagesProcessor,
+            imagesExactSize: props.imagesExactSize,
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.backendUrl, props.imagesExactSize, props.imagesOnly, props.imagesProcessor, props.mimeTypes]);
+
+    // Check multiple flag update
+    useEffect(() => {
+        uploader.form.multiple = props.multiple;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.multiple]);
+
+    // TODO Check uploader config update
+    //useEffect(() => {
+    //    _merge(uploader, props.uploader);
+    //}, [props.uploader, uploader]);
+
+    // Check remove keys from value
+    const prevInputValue = usePrevious(props.input.value);
+
+    //todo refactoring
+    useEffect(() => {
+        if (!_isEqual(prevInputValue !== props.input.value)) {
+            const toRemove = _difference(
+                [].concat(props.input.value || []),
+                [].concat(prevInputValue || []),
+            );
+            if (toRemove.length > 0) {
+                uploader.queue.remove(
+                    uploader.queue.getFiles().filter(file => (
+                        toRemove.indexOf(_get(file.getResultHttpMessage(), 'id')) !== -1
+                    )),
+                );
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [prevInputValue]);
+
+    /**
+     * Show browse dialog in user browser
+     * @param {object} event
+     * @private
+     */
+    const onBrowse = (event) => {
+        if (event) {
+            event.preventDefault();
+        }
+        uploader.browse();
+    };
+
+    /**
+     * Remove selected file from uploader
+     * @param {File} fileToRemove
+     */
+    const onRemove = fileToRemove => {
+        uploader.queue.remove([fileToRemove]);
+        forceUpdate();
+    };
+
+    const files = [].concat(uploader.queue.getFiles());
+
+    /**
+     * Add file to uploader
+     * @param {File} newFile
+     */
+    const onAdd = (newFile: File) => {
+        if (!props.multiple) {
+            uploader.queue.remove(files);
+        }
+
+        uploader.queue.add([newFile]);
+        forceUpdate();
+    };
+
+    return {
+        uploader,
+        files,
+        onBrowse,
+        onRemove,
+        onAdd,
+    };
+}

package/src/hooks/useForm.ts

@@ -0,0 +1,18 @@
+import {useContext, useMemo} from 'react';
+import {FormContext} from '../ui/form/Form/Form';
+
+export default function useForm() {
+    const context = useContext(FormContext);
+
+    return useMemo(() => (context
+        ? {
+            formId: context.formId,
+            model: context.model,
+            prefix: context.prefix,
+            layout: context.layout,
+            formDispatch: context?.dispatch,
+            formSelector: (selector: (state, setValue) => any) => context?.provider?.select(context.formId, selector),
+        }
+        : null
+    ), [context]);
+}