@alfalab/core-components-select 15.2.3 → 16.0.0

package/src/Component.modal.mobile.tsx

@@ -1,150 +1,8 @@
 import React, { forwardRef } from 'react';
 
-import { FormControlMobile } from '@alfalab/core-components-form-control/mobile';
-import { ModalMobile } from '@alfalab/core-components-modal/Component.mobile';
+import { SelectMobile } from './Component.mobile';
+import { SelectModalMobileProps } from './typings';
 
-import { Arrow as DefaultArrow } from './components/arrow';
-import { BaseSelectMobile } from './components/base-select-mobile';
-import { Footer } from './components/base-select-mobile/footer';
-import { Field as DefaultField } from './components/field';
-import { Optgroup as DefaultOptgroup } from './components/optgroup';
-import { Option as DefaultOption } from './components/option';
-import { OptionsList as DefaultOptionsList } from './components/options-list';
-import { VirtualOptionsList as DefaultVirtualOptionsList } from './components/virtual-options-list';
-import { useSelectWithApply, UseSelectWithApplyProps } from './presets/useSelectWithApply/hook';
-import { Header } from './presets/useSelectWithApply/options-list-with-apply/header/Component';
-import { AnyObject, BaseSelectProps } from './typings';
-
-export type SelectModalMobileProps = Omit<BaseSelectProps, 'Checkmark' | 'onScroll'> & {
-    /**
-     * Показывать кнопку очистки
-     */
-    showClear?: UseSelectWithApplyProps['showClear'];
-
-    /**
-     * Показывать пункт "Выбрать все"
-     */
-    showSelectAll?: UseSelectWithApplyProps['showSelectAll'];
-
-    /**
-     *  Дополнительные пропсы шапки модалки
-     */
-    modalHeaderProps?: Partial<React.ComponentProps<typeof ModalMobile.Header>>;
-
-    /**
-     *  Дополнительные пропсы модалки
-     */
-    modalProps?: Partial<React.ComponentProps<typeof ModalMobile>>;
-
-    /**
-     *  Дополнительные пропсы футера модалки
-     */
-    modalFooterProps?: Partial<React.ComponentProps<typeof ModalMobile.Footer>>;
-
-    /*
-     * Показывать пункт "Выбрать все" в заголовке списка
-     */
-    showHeaderWithSelectAll?: UseSelectWithApplyProps['showHeaderWithSelectAll'];
-
-    /**
-     * Использовать ли хук useSelectWithApply
-     */
-    useWithApplyHook?: boolean;
-};
-
-const VIRTUAL_OPTIONS_LIST_THRESHOLD = 30;
-
-export const SelectModalMobile = forwardRef(
-    (
-        {
-            autocomplete = false,
-            multiple = false,
-            allowUnselect = false,
-            disabled = false,
-            closeOnSelect = !multiple,
-            circularNavigation = false,
-            defaultOpen = false,
-            open: openProp,
-            size = 'm',
-            optionsSize = 'm',
-            fieldProps = {},
-            optionProps = {},
-            optionsListProps = {},
-            Arrow = DefaultArrow,
-            Field = DefaultField,
-            Optgroup = DefaultOptgroup,
-            Option = DefaultOption,
-            selected,
-            options,
-            OptionsList = options.length > VIRTUAL_OPTIONS_LIST_THRESHOLD
-                ? DefaultVirtualOptionsList
-                : DefaultOptionsList,
-            onChange,
-            showClear = true,
-            showSelectAll,
-            useWithApplyHook = multiple,
-            modalHeaderProps,
-            showHeaderWithSelectAll,
-            showSearch,
-            searchProps,
-            ...restProps
-        }: SelectModalMobileProps,
-        ref,
-    ) => {
-        const applyProps = useSelectWithApply({
-            optionsListProps: {
-                ...(optionsListProps as AnyObject),
-                Footer,
-            },
-            OptionsList,
-            selected,
-            options,
-            onChange,
-            showSearch,
-            searchProps,
-            showClear,
-            showSelectAll,
-        });
-
-        return (
-            <BaseSelectMobile
-                ref={ref}
-                autocomplete={autocomplete}
-                multiple={multiple}
-                allowUnselect={allowUnselect}
-                disabled={disabled}
-                closeOnSelect={closeOnSelect}
-                circularNavigation={circularNavigation}
-                defaultOpen={defaultOpen}
-                open={openProp}
-                size={size}
-                optionsSize={optionsSize}
-                fieldProps={{
-                    FormControlComponent: FormControlMobile,
-                    ...(fieldProps as object),
-                }}
-                optionProps={optionProps}
-                Arrow={Arrow}
-                Field={Field}
-                Optgroup={Optgroup}
-                Option={Option}
-                isBottomSheet={false}
-                options={options}
-                selected={selected}
-                onChange={onChange}
-                OptionsList={OptionsList}
-                optionsListProps={optionsListProps}
-                showSearch={showSearch}
-                searchProps={searchProps}
-                modalHeaderProps={{
-                    bottomAddons: useWithApplyHook && showHeaderWithSelectAll && (
-                        <Header {...applyProps.optionsListProps.headerProps} mobile={true} />
-                    ),
-                    ...modalHeaderProps,
-                }}
-                {...restProps}
-                {...(useWithApplyHook && applyProps)}
-            />
-        );
-    },
-);
+export const SelectModalMobile = forwardRef((props: SelectModalMobileProps, ref) => (
+    <SelectMobile {...props} isBottomSheet={false} ref={ref} />
+));

package/src/Component.responsive.tsx

@@ -1,59 +1,24 @@
 import React, { forwardRef } from 'react';
 
-import { useMedia } from '@alfalab/hooks';
+import { useMatchMedia } from '@alfalab/core-components-mq';
 
-import { SelectDesktop, SelectFieldProps } from './Component.desktop';
-import { AdditionalMobileProps, SelectMobile } from './Component.mobile';
-import type { BaseSelectProps } from './typings';
+import { SelectDesktop } from './Component.desktop';
+import { SelectMobile } from './Component.mobile';
+import type { SelectFieldProps, SelectProps } from './typings';
 
-export type SelectResponsiveProps = BaseSelectProps &
-    AdditionalMobileProps & {
-        /**
-         * Контрольная точка, с нее начинается desktop версия
-         * @default 1024
-         */
-        breakpoint?: number;
-    };
+export const SelectResponsive = forwardRef<HTMLDivElement, SelectProps>(
+    ({ onScroll, fieldProps, breakpoint = 1024, defaultMatchMediaValue, ...restProps }, ref) => {
+        const [isDesktop] = useMatchMedia(`(min-width: ${breakpoint}px)`, defaultMatchMediaValue);
 
-export const SelectResponsive = forwardRef<HTMLDivElement, SelectResponsiveProps>(
-    (
-        {
-            footer,
-            swipeable,
-            bottomSheetProps,
-            OptionsList,
-            onScroll,
-            fieldProps,
-            breakpoint = 1024,
-            ...restProps
-        },
-        ref,
-    ) => {
-        const [view] = useMedia(
-            [
-                ['mobile', `(max-width: ${breakpoint - 1}px)`],
-                ['desktop', `(min-width: ${breakpoint}px)`],
-            ],
-            'desktop',
-        );
-
-        return view === 'desktop' ? (
+        return isDesktop ? (
             <SelectDesktop
-                OptionsList={OptionsList}
                 onScroll={onScroll}
                 {...restProps}
                 ref={ref}
                 fieldProps={fieldProps as SelectFieldProps}
             />
         ) : (
-            <SelectMobile
-                footer={footer}
-                swipeable={swipeable}
-                bottomSheetProps={bottomSheetProps}
-                fieldProps={fieldProps}
-                {...restProps}
-                ref={ref}
-            />
+            <SelectMobile fieldProps={fieldProps} {...restProps} ref={ref} />
         );
     },
 );