@alfalab/core-components-select 14.3.5 → 15.0.1

package/src/presets/useLazyLoading/hook.tsx

@@ -0,0 +1,309 @@
+import React, { Reducer, useCallback, useEffect, useMemo, useReducer, useRef } from 'react';
+
+import { InputProps } from '@alfalab/core-components-input';
+import { Skeleton } from '@alfalab/core-components-skeleton';
+
+import { Option as DefaultOption } from '../../components/option';
+import { OptionProps, OptionShape } from '../../typings';
+
+import 'intersection-observer';
+
+const DEBOUNCE_TIMEOUT = 300;
+
+type OptionsFetcherResponse = {
+    options: OptionShape[];
+    hasMore: boolean;
+};
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+type useLazyLoadingProps = {
+    /** Количество элементов на "странице" */
+    limit?: number;
+
+    /** Начальный номер "страницы" */
+    initialOffset?: number;
+
+    /** Скелетон загружаемых элементов */
+    skeleton?: React.ReactNode;
+
+    /** Компонент пункта меню */
+    Option?: React.FC<OptionProps>;
+
+    /**
+     * Функция-загрузчик опций.
+     * @param offset - текущая страница
+     * @param limit - количество элементов на странице
+     * @param queryString - строчные данные, пробрасываемые для поиска из кастомного инпута, расположенного в заголовке OptionsList
+     * @returns Promise<{
+     *  options - список опций следующей "страницы". Они аппендятся к предыдущим
+     *  hasMore - указывает, есть ли еще незагруженные элементы (в случае false перестает загружать "следующую страницу")
+     * }>
+     */
+    optionsFetcher(
+        offset: number,
+        limit: number,
+        queryString?: string,
+    ): Promise<OptionsFetcherResponse>;
+};
+
+const actions = {
+    fetchOptionsStart() {
+        return { type: 'FETCH_OPTIONS_START' } as const;
+    },
+    fetchOptionsBreak() {
+        return { type: 'FETCH_OPTIONS_BREAK' } as const;
+    },
+    fetchOptionsSuccess(payload: { options: OptionShape[]; hasMore: boolean }) {
+        return { type: 'FETCH_OPTIONS_SUCCESS', payload } as const;
+    },
+    setIsOpened(opened: boolean) {
+        return { type: 'SET_IS_OPENED', payload: opened } as const;
+    },
+    setQueryString(qs: string) {
+        return { type: 'SET_QUERY_STRING', payload: qs } as const;
+    },
+    reset() {
+        return { type: 'RESET' } as const;
+    },
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type Actions = typeof actions extends { [key: string]: (...args: any) => infer U } ? U : never;
+
+const skeletonStyle: React.CSSProperties = {
+    position: 'absolute',
+    top: '50%',
+    transform: 'translateY(-50%)',
+    height: '16px',
+    width: '50%',
+};
+
+export function useLazyLoading({
+    limit = 10,
+    initialOffset = 0,
+    optionsFetcher,
+    skeleton = <Skeleton style={skeletonStyle} visible={true} />,
+    Option = DefaultOption,
+}: useLazyLoadingProps) {
+    const initialOptions: OptionShape[] = [];
+    const initialLoading = false;
+
+    const lazyLoadingInitialState = {
+        opened: false,
+        offset: initialOffset,
+        options: initialOptions,
+        loading: initialLoading,
+        allOptionsLoaded: false,
+        queryString: '',
+    };
+
+    const lazyLoadingReducer: Reducer<typeof lazyLoadingInitialState, Actions> = (
+        state,
+        action,
+    ) => {
+        switch (action.type) {
+            case 'FETCH_OPTIONS_START': {
+                return {
+                    ...state,
+                    loading: true,
+                };
+            }
+            case 'FETCH_OPTIONS_BREAK': {
+                return {
+                    ...state,
+                    loading: false,
+                };
+            }
+            case 'FETCH_OPTIONS_SUCCESS': {
+                return {
+                    ...state,
+                    options: [...state.options, ...action.payload.options],
+                    offset: state.offset + (action.payload.options.length ? 1 : 0),
+                    allOptionsLoaded: !action.payload.hasMore,
+                    loading: false,
+                };
+            }
+            case 'SET_IS_OPENED': {
+                return {
+                    ...state,
+                    opened: action.payload,
+                };
+            }
+            case 'SET_QUERY_STRING': {
+                return {
+                    // Изменение queryString подразумевает сброс текущих опций.
+                    ...lazyLoadingInitialState,
+                    opened: state.opened,
+                    loading: true,
+                    queryString: action.payload,
+                };
+            }
+            case 'RESET': {
+                return {
+                    ...lazyLoadingInitialState,
+                };
+            }
+            default: {
+                return state;
+            }
+        }
+    };
+
+    const [{ opened, offset, options, loading, allOptionsLoaded, queryString }, dispatch] =
+        useReducer(lazyLoadingReducer, lazyLoadingInitialState);
+
+    const abortFetchingOptionsRef = useRef<() => void>();
+
+    const fetchNextOffsetOptions = useCallback(() => {
+        dispatch(actions.fetchOptionsStart());
+
+        new Promise<OptionsFetcherResponse>((resolve, reject) => {
+            // eslint-disable-next-line no-unused-expressions
+            abortFetchingOptionsRef.current?.();
+            abortFetchingOptionsRef.current = reject;
+            optionsFetcher(offset, limit, queryString).then((res) => {
+                resolve(res);
+            });
+        })
+            .then((res) => {
+                dispatch(actions.fetchOptionsSuccess(res));
+                abortFetchingOptionsRef.current = undefined;
+            })
+            .catch(
+                // eslint-disable-next-line @typescript-eslint/no-empty-function
+                () => {},
+            );
+    }, [optionsFetcher, offset, limit, queryString]);
+
+    const listRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        let observer: IntersectionObserver;
+
+        if (opened && !loading && !allOptionsLoaded) {
+            observer = new IntersectionObserver(
+                ([entry]) => {
+                    if (entry.isIntersecting) {
+                        if (observer) {
+                            observer.disconnect();
+                        }
+                        fetchNextOffsetOptions();
+                    }
+                },
+                {
+                    root: listRef.current,
+                },
+            );
+
+            /*
+             * Обсервим пересечение последней опции с контейнером.
+             * Таким образом, загрузка следующей "страницы" начнется когда юзер доскроллит список
+             * до верхнего края последней опции, что обеспечивает плавность
+             */
+            const optionList = listRef.current?.querySelectorAll('[role="option"]');
+            const lastOption = optionList?.[optionList.length - 1];
+
+            if (lastOption) {
+                observer.observe(lastOption);
+            }
+        }
+
+        return () => {
+            if (observer) {
+                observer.disconnect();
+            }
+        };
+    }, [offset, fetchNextOffsetOptions, opened, allOptionsLoaded, initialOffset, loading]);
+
+    const onOpen = useCallback(
+        (payload: { open?: boolean }) => {
+            if (payload.open) {
+                if (options.length === initialOptions.length) {
+                    fetchNextOffsetOptions();
+                }
+            } else {
+                // eslint-disable-next-line no-unused-expressions
+                abortFetchingOptionsRef.current?.();
+                dispatch(actions.fetchOptionsBreak());
+            }
+
+            dispatch(actions.setIsOpened(payload.open ?? false));
+        },
+        [initialOptions.length, fetchNextOffsetOptions, options.length],
+    );
+
+    const fetchNextOptionsRef = useRef<() => void>();
+    const fetchNextOptionsTimerRef = useRef<ReturnType<typeof setTimeout>>();
+
+    useEffect(() => {
+        fetchNextOptionsRef.current = fetchNextOffsetOptions;
+    }, [fetchNextOffsetOptions]);
+
+    const onQueryStringChange = useCallback<Exclude<InputProps['onChange'], undefined>>(
+        (_, payload) => {
+            dispatch(actions.setQueryString(payload.value));
+            /* eslint-disable no-unused-expressions */
+
+            /*
+             * Если во время загрузки опций юзер ввел новый текст в инпут,
+             * нужно прервать текущую загрузку, чтобы неактуальные опции не попали в выдачу
+             */
+            abortFetchingOptionsRef.current?.();
+
+            listRef.current?.scrollTo({ top: 0 });
+
+            /* Дебаунсим ввод текста, чтобы не отправлять запрос к новым опциям на каждый чих */
+            if (fetchNextOptionsTimerRef.current) {
+                clearTimeout(fetchNextOptionsTimerRef.current);
+            }
+            fetchNextOptionsTimerRef.current = setTimeout(() => {
+                /*
+                 * После дебаунса необходимо вызвать функцию-загрузчик,
+                 * содержащую актуальные на данный момент данные оффсета и queryString.
+                 * Поэтому мы не можем обратиться напрямую к функции fetchNextOptions,
+                 * так как она будет замкнута на старые значения, актуальные на момент вызова хэндлера,
+                 * так что берем ее из обновляемого рефа
+                 */
+                fetchNextOptionsRef.current?.();
+            }, DEBOUNCE_TIMEOUT);
+            /* eslint-enable */
+        },
+        [],
+    );
+
+    const renderOption = (props: OptionProps) => (
+        <Option {...props} highlighted={loading ? false : props.highlighted} />
+    );
+
+    const skeletonOptions: OptionShape[] = useMemo(
+        () =>
+            Array(loading ? limit : 0)
+                .fill(0)
+                .map((_, key) => ({
+                    key: `loading-${key}`,
+                    disabled: true,
+                    content: skeleton,
+                })),
+        [loading, limit, skeleton],
+    );
+
+    const reset = useCallback(() => {
+        dispatch(actions.reset());
+    }, []);
+
+    return {
+        optionsProps: {
+            Option: renderOption,
+            options: [...options, ...skeletonOptions],
+            optionsListProps: {
+                ref: listRef,
+                inputProps: {
+                    onChange: onQueryStringChange,
+                    value: queryString,
+                },
+            },
+            onOpen,
+        },
+        reset,
+    };
+}

package/src/presets/useSelectWithApply/hook.tsx

@@ -0,0 +1,154 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+import type { AnyObject, BaseSelectProps, OptionShape } from '../../typings';
+import { processOptions } from '../../utils';
+
+import { OptionsListWithApply } from './options-list-with-apply';
+
+export type UseSelectWithApplyProps = {
+    /**
+     * Список выбранных пунктов
+     */
+    selected: BaseSelectProps['selected'];
+
+    /**
+     * Список вариантов выбора
+     */
+    options: BaseSelectProps['options'];
+
+    /**
+     * Обработчик выбора
+     */
+    onChange: BaseSelectProps['onChange'];
+
+    /**
+     * Компонент выпадающего меню
+     */
+    OptionsList?: BaseSelectProps['OptionsList'];
+
+    /**
+     * Пропсы, которые будут прокинуты в компонент списка
+     */
+    optionsListProps?: BaseSelectProps['optionsListProps'];
+
+    /**
+     * Показывать кнопку очистки
+     */
+    showClear?: boolean;
+
+    /**
+     * Показывать пункт "Выбрать все"
+     */
+    showSelectAll?: boolean;
+
+    /**
+     * Показывать пункт "Выбрать все" в заголовке списка
+     */
+    showHeaderWithSelectAll?: boolean;
+};
+
+export const SELECT_ALL_KEY = 'select_all';
+
+const selectAllOption = { key: SELECT_ALL_KEY, content: 'Выбрать все' };
+
+export function useSelectWithApply({
+    options,
+    selected,
+    onChange = () => null,
+    OptionsList,
+    optionsListProps = {},
+    showClear = true,
+    showSelectAll = false,
+    showHeaderWithSelectAll = false,
+}: UseSelectWithApplyProps) {
+    const { flatOptions, selectedOptions } = useMemo(
+        () => processOptions(options, selected),
+        [options, selected],
+    );
+
+    const [selectedDraft, setSelectedDraft] = useState<OptionShape[]>(selectedOptions);
+
+    const selectedOptionsRef = useRef<OptionShape[]>(selectedOptions);
+
+    const handleApply = () => {
+        onChange({
+            selected: selectedDraft[0],
+            selectedMultiple: selectedDraft,
+            initiator: null,
+        });
+    };
+
+    const handleClear = () => {
+        setSelectedDraft([]);
+        onChange({
+            selected: null,
+            selectedMultiple: [],
+            initiator: null,
+        });
+    };
+
+    const handleToggleAll = () => {
+        setSelectedDraft(flatOptions.length === selectedDraft.length ? [] : flatOptions);
+    };
+
+    const handleChange: Required<BaseSelectProps>['onChange'] = ({ initiator, ...restArgs }) => {
+        if (!initiator) {
+            onChange({
+                initiator: null,
+                ...restArgs,
+            });
+
+            return;
+        }
+
+        const initiatorSelected =
+            selectedDraft.includes(initiator) ||
+            (initiator.key === SELECT_ALL_KEY && selectedDraft.length === flatOptions.length);
+
+        if (initiator.key === SELECT_ALL_KEY) {
+            setSelectedDraft(initiatorSelected ? [] : flatOptions);
+        } else {
+            setSelectedDraft(
+                initiatorSelected
+                    ? selectedDraft.filter((o) => o !== initiator)
+                    : selectedDraft.concat(initiator),
+            );
+        }
+    };
+
+    const handleClose = () => setSelectedDraft(selectedOptionsRef.current);
+
+    useEffect(() => {
+        setSelectedDraft(selectedOptions);
+        selectedOptionsRef.current = selectedOptions;
+    }, [selectedOptions]);
+
+    const memoizedOptions = useMemo(
+        () => (showSelectAll ? [selectAllOption, ...options] : options),
+        [options, showSelectAll],
+    );
+
+    return {
+        OptionsList: OptionsListWithApply,
+        optionsListProps: {
+            ...(optionsListProps as AnyObject),
+            OptionsList,
+            showClear,
+            onClear: handleClear,
+            onApply: handleApply,
+            onClose: handleClose,
+            selectedDraft,
+            showHeaderWithSelectAll,
+            headerProps: {
+                indeterminate: !!selectedDraft.length && selectedDraft.length < flatOptions.length,
+                checked: selectedDraft.length === flatOptions.length,
+                onChange: handleToggleAll,
+            },
+        },
+        allowUnselect: true,
+        multiple: true,
+        options: memoizedOptions,
+        onChange: handleChange,
+        selected,
+    };
+}

package/src/presets/useSelectWithApply/options-list-with-apply/Component.tsx

@@ -0,0 +1,106 @@
+import React, { FC, forwardRef, RefAttributes, useCallback, useEffect } from 'react';
+
+import { OptionsList as DefaultOptionsList } from '../../../components/options-list';
+import { DEFAULT_VISIBLE_OPTIONS } from '../../../consts';
+import { OptionShape, OptionsListProps } from '../../../typings';
+import { SELECT_ALL_KEY } from '../hook';
+
+import { Footer as DefaultFooter, FooterProps } from './footer/Component';
+import { Header as DefaultHeader, HeaderProps } from './header/Component';
+
+type OptionsListWithApplyProps = OptionsListProps & {
+    showClear?: boolean;
+    onClose?: () => void;
+    selectedDraft?: OptionShape[];
+    OptionsList?: React.FC<OptionsListProps & RefAttributes<HTMLDivElement>>;
+    Footer?: FC<FooterProps>;
+    Header?: FC<HeaderProps>;
+    headerProps?: HeaderProps;
+    showHeaderWithSelectAll?: boolean;
+};
+
+export const OptionsListWithApply = forwardRef<HTMLDivElement, OptionsListWithApplyProps>(
+    (
+        {
+            toggleMenu,
+            getOptionProps: defaultGetOptionProps,
+            showClear = true,
+            showHeaderWithSelectAll,
+            selectedDraft = [],
+            flatOptions = [],
+            OptionsList = DefaultOptionsList,
+            onApply = () => null,
+            onClear = () => null,
+            onClose = () => null,
+            visibleOptions = DEFAULT_VISIBLE_OPTIONS,
+            Footer = DefaultFooter,
+            Header = DefaultHeader,
+            headerProps,
+            ...restProps
+        }: OptionsListWithApplyProps,
+        ref,
+    ) => {
+        const getOptionProps = useCallback(
+            (option: OptionShape, index: number) => {
+                const optionProps = defaultGetOptionProps(option, index);
+
+                const selected =
+                    option.key === SELECT_ALL_KEY
+                        ? selectedDraft.length === flatOptions.length - 1
+                        : selectedDraft.includes(option);
+
+                return {
+                    ...optionProps,
+                    selected,
+                };
+            },
+            [defaultGetOptionProps, flatOptions.length, selectedDraft],
+        );
+
+        const handleApply = useCallback(() => {
+            onApply();
+
+            toggleMenu();
+        }, [onApply, toggleMenu]);
+
+        const handleClear = useCallback(() => {
+            onClear();
+
+            toggleMenu();
+        }, [onClear, toggleMenu]);
+
+        useEffect(() => {
+            const activeElement = document.activeElement as HTMLElement;
+
+            return () => {
+                onClose();
+                if (activeElement) {
+                    activeElement.focus();
+                }
+            };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, []);
+
+        return (
+            <OptionsList
+                {...restProps}
+                ref={ref}
+                visibleOptions={visibleOptions}
+                toggleMenu={toggleMenu}
+                flatOptions={flatOptions}
+                getOptionProps={getOptionProps}
+                onApply={handleApply}
+                onClear={handleClear}
+                header={showHeaderWithSelectAll ? <Header {...headerProps} /> : undefined}
+                footer={
+                    <Footer
+                        handleApply={handleApply}
+                        handleClear={handleClear}
+                        showClear={showClear}
+                        selectedDraft={selectedDraft}
+                    />
+                }
+            />
+        );
+    },
+);

package/src/presets/useSelectWithApply/options-list-with-apply/footer/Component.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { ButtonDesktop } from '@alfalab/core-components-button/desktop';
+
+import { OptionShape } from '../../../../typings';
+
+import styles from './index.module.css';
+
+export type FooterProps = {
+    handleClear?: () => void;
+    handleApply?: () => void;
+    showClear?: boolean;
+    selectedDraft?: OptionShape[];
+};
+
+export const Footer = ({
+    handleApply,
+    handleClear,
+    showClear,
+    selectedDraft = [],
+}: FooterProps) => (
+    <div
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        tabIndex={0}
+        className={styles.footer}
+    >
+        <ButtonDesktop size='xxs' view='primary' onClick={handleApply}>
+            Применить
+        </ButtonDesktop>
+
+        {showClear && selectedDraft.length > 0 && (
+            <ButtonDesktop size='xxs' view='secondary' onClick={handleClear}>
+                Сбросить
+            </ButtonDesktop>
+        )}
+    </div>
+);

package/src/presets/useSelectWithApply/options-list-with-apply/footer/index.module.css

@@ -0,0 +1,11 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.footer {
+    background-color: var(--color-light-bg-primary);
+    padding: var(--gap-s);
+    outline: none;
+
+    & > * + * {
+        margin-left: var(--gap-xs);
+    }
+}

package/src/presets/useSelectWithApply/options-list-with-apply/header/Component.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import cn from 'classnames';
+
+import { Checkbox, CheckboxProps } from '@alfalab/core-components-checkbox';
+
+import styles from './index.module.css';
+
+export type HeaderProps = {
+    checked?: boolean;
+    indeterminate?: boolean;
+    onChange?: CheckboxProps['onChange'];
+    mobile?: boolean;
+};
+
+export const Header: React.FC<HeaderProps> = ({ onChange, checked, indeterminate, mobile }) => (
+    <div className={cn({ [styles.desktop]: !mobile, [styles.mobile]: mobile })}>
+        <Checkbox
+            block={true}
+            indeterminate={indeterminate}
+            size='m'
+            onChange={onChange}
+            checked={checked}
+            label='Выбрать все'
+        />
+    </div>
+);

package/src/presets/useSelectWithApply/options-list-with-apply/header/index.module.css

@@ -0,0 +1,9 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.desktop {
+    padding: var(--gap-s);
+}
+
+.mobile {
+    padding: var(--gap-s) var(--gap-xs);
+}

package/src/presets/useSelectWithApply/options-list-with-apply/index.ts

@@ -0,0 +1 @@
+export * from './Component';

package/src/presets/useSelectWithLoading/hook.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import { Skeleton } from '@alfalab/core-components-skeleton';
+
+import { Option as DefaultOption } from '../../components/option';
+import { BaseSelectProps, OptionProps, OptionShape } from '../../typings';
+
+import styles from './index.module.css';
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+type useSelectWithLoadingProps = {
+    loading?: boolean;
+    visibleOptions?: BaseSelectProps['visibleOptions'];
+    Option?: React.FC<OptionProps>;
+};
+
+export function useSelectWithLoading({
+    loading = false,
+    visibleOptions = 6,
+    Option = DefaultOption,
+}: useSelectWithLoadingProps) {
+    const renderOption = (props: OptionProps) => (
+        <Option {...props} Checkmark={null} highlighted={loading ? false : props.highlighted} />
+    );
+
+    const options: OptionShape[] = Array(visibleOptions)
+        .fill(0)
+        .map((_, key) => ({
+            key: `loading-${key}`,
+            disabled: true,
+            content: <Skeleton className={styles.skeleton} visible={true} />,
+        }));
+
+    if (!loading) return null;
+
+    return {
+        Option: renderOption,
+        options,
+    };
+}