@alfalab/core-components-select 14.3.4 → 15.0.0

package/src/Component.modal.mobile.tsx

@@ -0,0 +1,144 @@
+import React, { forwardRef } from 'react';
+
+import { FormControlMobile } from '@alfalab/core-components-form-control/mobile';
+import { ModalMobile } from '@alfalab/core-components-modal/Component.mobile';
+
+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,
+            ...restProps
+        }: SelectModalMobileProps,
+        ref,
+    ) => {
+        const applyProps = useSelectWithApply({
+            optionsListProps: {
+                ...(optionsListProps as AnyObject),
+                Footer,
+            },
+            OptionsList,
+            selected,
+            options,
+            onChange,
+            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}
+                modalHeaderProps={{
+                    bottomAddons: useWithApplyHook && showHeaderWithSelectAll && (
+                        <Header {...applyProps.optionsListProps.headerProps} mobile={true} />
+                    ),
+                    ...modalHeaderProps,
+                }}
+                {...restProps}
+                {...(useWithApplyHook && applyProps)}
+            />
+        );
+    },
+);

package/src/Component.responsive.tsx

@@ -0,0 +1,59 @@
+import React, { forwardRef } from 'react';
+
+import { useMedia } from '@alfalab/hooks';
+
+import { SelectDesktop, SelectFieldProps } from './Component.desktop';
+import { AdditionalMobileProps, SelectMobile } from './Component.mobile';
+import type { BaseSelectProps } from './typings';
+
+export type SelectResponsiveProps = BaseSelectProps &
+    AdditionalMobileProps & {
+        /**
+         * Контрольная точка, с нее начинается desktop версия
+         * @default 1024
+         */
+        breakpoint?: number;
+    };
+
+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' ? (
+            <SelectDesktop
+                OptionsList={OptionsList}
+                onScroll={onScroll}
+                {...restProps}
+                ref={ref}
+                fieldProps={fieldProps as SelectFieldProps}
+            />
+        ) : (
+            <SelectMobile
+                footer={footer}
+                swipeable={swipeable}
+                bottomSheetProps={bottomSheetProps}
+                fieldProps={fieldProps}
+                {...restProps}
+                ref={ref}
+            />
+        );
+    },
+);

package/src/components/arrow/Component.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import cn from 'classnames';
+
+import { ChevronDownMIcon } from '@alfalab/icons-glyph/ChevronDownMIcon';
+
+import { ArrowProps } from '../../typings';
+
+import styles from './index.module.css';
+
+export const Arrow = ({ open, className }: ArrowProps) => (
+    <ChevronDownMIcon className={cn(styles.arrow, className, { [styles.open]: open })} />
+);

package/src/components/arrow/index.module.css

@@ -0,0 +1,15 @@
+@import '@alfalab/core-components-themes/src/default.css';
+@import '../../vars.css';
+
+.arrow {
+    display: block;
+    width: 24px;
+    height: 24px;
+    color: var(--select-arrow-color);
+
+    transition: transform 0.15s ease-in-out, opacity 0.2s ease;
+}
+
+.open {
+    transform: var(--arrow-transform);
+}

package/src/components/arrow/index.ts

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

package/src/components/base-checkmark/Component.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import cn from 'classnames';
+
+import { Checkbox } from '@alfalab/core-components-checkbox';
+import { CheckmarkMIcon } from '@alfalab/icons-glyph/CheckmarkMIcon';
+
+import { CheckmarkProps } from '../../typings';
+
+import styles from './index.module.css';
+
+export const BaseCheckmark = ({
+    selected,
+    disabled = false,
+    className,
+    multiple,
+}: CheckmarkProps) => {
+    const checkmarkClassNames = cn(styles.checkmark, className, {
+        [styles.single]: !multiple,
+        [styles.selected]: selected,
+    });
+
+    return multiple ? (
+        <Checkbox
+            checked={selected}
+            disabled={disabled}
+            className={checkmarkClassNames}
+            size='m'
+            hiddenInput={true}
+        />
+    ) : (
+        <CheckmarkMIcon className={checkmarkClassNames} />
+    );
+};

package/src/components/base-checkmark/index.module.css

@@ -0,0 +1,18 @@
+@import '@alfalab/core-components-themes/src/default.css';
+@import '../../vars.css';
+
+.checkmark {
+    flex-shrink: 0;
+    box-sizing: border-box;
+}
+
+.single {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+
+    &.selected {
+        opacity: 1;
+    }
+}

package/src/components/base-checkmark/index.ts

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

package/src/components/base-option/Component.tsx

@@ -0,0 +1,57 @@
+import React, { FC, isValidElement } from 'react';
+import cn from 'classnames';
+
+import { OptionProps } from '../../typings';
+import { BaseCheckmark } from '../base-checkmark';
+
+import styles from './index.module.css';
+
+export const BaseOption: FC<OptionProps> = ({
+    className,
+    option,
+    children,
+    selected,
+    highlighted,
+    disabled,
+    multiple,
+    Checkmark = BaseCheckmark,
+    checkmarkPosition = multiple ? 'before' : 'after',
+    innerProps,
+    dataTestId,
+    mobile = false,
+}) => {
+    const content = children || option.content || option.key;
+    const { showCheckMark = true } = option;
+
+    const isTextContent = !isValidElement(content);
+
+    const renderCheckmark = () => {
+        if (Checkmark && showCheckMark) {
+            return <Checkmark disabled={disabled} selected={selected} multiple={multiple} />;
+        }
+
+        return null;
+    };
+
+    return (
+        <div
+            {...innerProps}
+            className={cn(styles.option, className, {
+                [styles.highlighted]: !mobile && highlighted,
+                [styles.selected]: selected,
+                [styles.disabled]: disabled,
+                [styles.textContent]: isTextContent,
+                [styles.mobile]: mobile,
+                [styles.checkmarkAfter]: !isTextContent && checkmarkPosition === 'after',
+                [styles.checkmarkBefore]: !isTextContent && checkmarkPosition === 'before',
+            })}
+            data-test-id={dataTestId}
+        >
+            {checkmarkPosition === 'before' && renderCheckmark()}
+
+            <div className={cn(styles.content)}>{content}</div>
+
+            {checkmarkPosition === 'after' && renderCheckmark()}
+        </div>
+    );
+};

package/src/components/base-option/index.module.css

@@ -0,0 +1,67 @@
+@import '@alfalab/core-components-themes/src/default.css';
+@import '../../vars.css';
+
+.option {
+    @mixin paragraph_component;
+
+    display: flex;
+    align-items: center;
+    gap: var(--gap-s);
+    transition: background-color 0.2s ease;
+    background: var(--select-option-background);
+    color: var(--select-option-color);
+    box-sizing: border-box;
+    position: relative;
+    cursor: pointer;
+    min-height: var(--size-s-height);
+
+    &:not(.disabled):active {
+        background: var(--select-option-active-background);
+        color: var(--select-option-active-color);
+    }
+
+    &.checkmarkBefore {
+        padding: 0 0 0 var(--gap-s);
+
+        &.mobile {
+            padding-left: var(--gap-m);
+        }
+    }
+
+    &.checkmarkAfter {
+        padding: 0 var(--gap-s) 0 0;
+
+        &.mobile {
+            padding-right: var(--gap-l);
+        }
+    }
+
+    &.textContent {
+        padding: var(--gap-s);
+
+        &.mobile {
+            padding: var(--gap-m) var(--gap-l) var(--gap-m) var(--gap-m);
+        }
+    }
+}
+
+.selected {
+    background: var(--select-option-selected-background);
+    color: var(--select-option-selected-color);
+    cursor: default;
+}
+
+.highlighted {
+    background: var(--select-option-hover-background);
+    color: var(--select-option-hover-color);
+}
+
+.disabled {
+    cursor: var(--disabled-cursor);
+    background: var(--select-option-disabled-background);
+    color: var(--select-option-disabled-color);
+}
+
+.content {
+    flex: 1;
+}

package/src/components/base-option/index.ts

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