@alfalab/core-components-popup-sheet 1.0.0

package/src/Component.tsx

@@ -0,0 +1,229 @@
+import React, {
+    CSSProperties,
+    forwardRef,
+    KeyboardEvent,
+    MouseEvent,
+    useRef,
+    useState,
+} from 'react';
+import { SwipeCallback, useSwipeable } from 'react-swipeable';
+import cn from 'classnames';
+
+import { BaseModal, BaseModalProps } from '@alfalab/core-components-base-modal';
+import { Closer } from '@alfalab/core-components-navigation-bar/shared';
+import { createPaddingStyle, easingFns, getDataTestId } from '@alfalab/core-components-shared';
+
+import { PaddingType } from '../../types';
+
+import { PopupBackdrop } from './components/backdrop';
+
+import styles from './index.module.css';
+
+const SWIPE_VELOCITY = 0.3;
+const CLOSE_OFFSET = 0.3;
+const ANIMATION_DURATION = 350;
+
+export type PopupSheetProps = Omit<BaseModalProps, 'onClose'> & {
+    /**
+     * Наличие кнопки закрытия
+     */
+    hasCloser?: boolean;
+
+    /**
+     * Будет ли свайпаться шторка
+     */
+    swipeable?: boolean;
+
+    /**
+     * Отступы
+     */
+    padding?: PaddingType;
+
+    /**
+     * Обработчик закрытия
+     */
+    onClose?: (
+        event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>,
+        reason?: 'backdropClick' | 'escapeKeyDown' | 'closerClick' | 'swipe',
+    ) => void;
+};
+
+const DEFAULT_PADDING = 32;
+
+export const PopupSheet = forwardRef<HTMLDivElement, PopupSheetProps>(
+    (
+        {
+            children,
+            hasCloser,
+            className,
+            onClose,
+            transitionProps,
+            contentProps,
+            swipeable,
+            dataTestId,
+            backdropProps,
+            padding = DEFAULT_PADDING,
+            ...restProps
+        },
+        ref,
+    ) => {
+        const [sheetOffset, setSheetOffset] = useState(0);
+        const [backdropOpacity, setBackdropOpacity] = useState(1);
+
+        const sheetHeight = useRef(0);
+        const sheetRef = useRef<HTMLDivElement>(null);
+        const bySwipeCloseAnimation = useRef(false);
+
+        const getSheetOffset = (deltaY: number): number => Math.max(0, deltaY);
+
+        const getBackdropOpacity = (offset: number): number =>
+            Math.max(0, 1 - offset / sheetHeight.current);
+
+        const getSwipeStyles = (): CSSProperties =>
+            sheetOffset ? { transform: `translateY(${sheetOffset}px)` } : {};
+
+        const handleSwiping: SwipeCallback = ({ deltaY }) => {
+            const offset = getSheetOffset(deltaY);
+
+            setSheetOffset(offset);
+            setBackdropOpacity(getBackdropOpacity(offset));
+        };
+
+        const handleSwiped: SwipeCallback = ({ deltaY, velocity, event }) => {
+            const shouldCloseByVelocity = deltaY >= 0 && velocity >= SWIPE_VELOCITY;
+            const shouldCloseByOffset = deltaY >= sheetHeight.current * CLOSE_OFFSET;
+
+            const offset = sheetOffset;
+            const animDuration = ANIMATION_DURATION / 2;
+            let start: number;
+
+            if (shouldCloseByVelocity || shouldCloseByOffset) {
+                bySwipeCloseAnimation.current = true;
+                onClose?.(event as MouseEvent<HTMLElement>, 'swipe');
+
+                const runLoop = (timeStamp: number) => {
+                    if (!start) start = timeStamp;
+                    const elapsedTime = timeStamp - start;
+
+                    if (elapsedTime <= animDuration) {
+                        const nextOffset =
+                            offset +
+                            (sheetHeight.current - offset) *
+                                easingFns.easeInOutQuad(elapsedTime / animDuration);
+
+                        if (nextOffset > 0) {
+                            setSheetOffset(nextOffset);
+                        }
+                        requestAnimationFrame(runLoop);
+                    } else {
+                        setSheetOffset(0);
+                        bySwipeCloseAnimation.current = false;
+                    }
+                };
+
+                requestAnimationFrame(runLoop);
+            } else {
+                const runLoop = (timeStamp: number) => {
+                    if (!start) start = timeStamp;
+                    const elapsedTime = timeStamp - start;
+
+                    if (elapsedTime <= animDuration) {
+                        const nextOffset =
+                            offset - offset * easingFns.easeInOutQuad(elapsedTime / animDuration);
+
+                        if (nextOffset > 0) {
+                            setSheetOffset(nextOffset);
+                            setBackdropOpacity(getBackdropOpacity(nextOffset));
+                        }
+                        requestAnimationFrame(runLoop);
+                    } else {
+                        setSheetOffset(0);
+                        setBackdropOpacity(1);
+                    }
+                };
+
+                requestAnimationFrame(runLoop);
+            }
+        };
+
+        const handleEntered = (node: HTMLElement, isAppearing: boolean) => {
+            bySwipeCloseAnimation.current = false;
+            if (sheetRef.current) {
+                sheetHeight.current = sheetRef.current.offsetHeight;
+            }
+
+            if (transitionProps?.onEntered) {
+                transitionProps.onEntered(node, isAppearing);
+            }
+        };
+
+        const handleExited = (node: HTMLElement) => {
+            bySwipeCloseAnimation.current = false;
+            setSheetOffset(0);
+            setBackdropOpacity(1);
+
+            if (transitionProps?.onExited) {
+                transitionProps.onExited(node);
+            }
+        };
+
+        const sheetSwipeableHandlers = useSwipeable({
+            onSwiping: handleSwiping,
+            onSwiped: handleSwiped,
+            trackMouse: swipeable,
+            trackTouch: swipeable,
+            delta: 5,
+        });
+
+        return (
+            <BaseModal
+                {...restProps}
+                onClose={onClose}
+                ref={ref}
+                className={cn(styles.component, className)}
+                dataTestId={dataTestId}
+                Backdrop={PopupBackdrop}
+                backdropProps={{
+                    ...backdropProps,
+                    opacity: backdropOpacity,
+                }}
+                transitionProps={{
+                    classNames: {
+                        enter: styles.enter,
+                        appear: styles.appear,
+                        enterActive: styles.enterActive,
+                        appearActive: styles.appearActive,
+                        exit: bySwipeCloseAnimation.current ? styles.exitBySwipe : styles.exit,
+                        exitActive: bySwipeCloseAnimation.current
+                            ? styles.exitActiveBySwipe
+                            : styles.exitActive,
+                    },
+                    timeout: ANIMATION_DURATION,
+                    ...transitionProps,
+                    onEntered: handleEntered,
+                    onExited: handleExited,
+                }}
+                componentDivProps={{
+                    ref: sheetRef,
+                    style: getSwipeStyles(),
+                }}
+                contentProps={{
+                    style: createPaddingStyle(padding),
+                    ...contentProps,
+                    ...sheetSwipeableHandlers,
+                    className: cn(styles.content, contentProps?.className),
+                }}
+            >
+                {hasCloser && (
+                    <Closer
+                        view='mobile'
+                        className={styles.closer}
+                        onClick={onClose}
+                        dataTestId={getDataTestId(dataTestId, 'closer')}
+                    />
+                )}
+                {children}
+            </BaseModal>
+        );
+    },
+);

package/src/components/backdrop/Component.tsx

@@ -0,0 +1,35 @@
+import React, { FC } from 'react';
+
+import { Backdrop, BackdropProps } from '@alfalab/core-components-backdrop';
+
+import styles from './index.module.css';
+
+export type PopupBackdropProps = BackdropProps & {
+    /**
+     * Прозрачность бэкдропа
+     */
+    opacity?: number;
+
+    /**
+     * Время анимации opacity
+     */
+    opacityTimeout?: number;
+};
+
+export const PopupBackdrop: FC<BackdropProps> = ({
+    opacity,
+    opacityTimeout,
+    style,
+    ...backdropProps
+}) => (
+    <div
+        style={{
+            opacity,
+            transition: opacity === 1 ? `opacity ${opacityTimeout}ms ease-in-out` : '',
+            position: 'relative',
+            ...style,
+        }}
+    >
+        <Backdrop transitionClassNames={styles} {...backdropProps} />
+    </div>
+);

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

@@ -0,0 +1,25 @@
+@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-backdrop/src/vars.css';
+
+.appear,
+.enter {
+    background-color: var(--backdrop-hidden-background);
+}
+
+.appearActive,
+.enterActive,
+.appearDone,
+.enterDone {
+    background-color: var(--backdrop-visible-background);
+    transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);
+}
+
+.exit {
+    background-color: var(--backdrop-visible-background);
+}
+
+.exitActive,
+.exitDone {
+    background-color: var(--backdrop-hidden-background);
+    transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);
+}

package/src/components/backdrop/index.tsx

@@ -0,0 +1 @@
+export { PopupBackdrop } from './Component';

package/src/index.module.css

@@ -0,0 +1,56 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.component {
+    position: fixed;
+    bottom: 0;
+    margin: auto var(--gap-xs) var(--gap-xs);
+    width: calc(100% - 2 * var(--gap-xs));
+    max-width: 600px;
+    border-radius: 36px;
+    overflow: hidden;
+}
+
+.closer {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+
+    & > button {
+        backdrop-filter: none;
+    }
+}
+
+.content {
+    box-sizing: border-box;
+}
+
+/* 100px нужны для того, чтобы фон успевал немного затемниться перед тем, как начнет выезжать шторка */
+.appear,
+.enter {
+    transform: translateY(calc(100% + 100px));
+}
+
+.appearActive,
+.enterActive {
+    transform: translateY(0);
+    transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);
+    transition-delay: 50ms;
+}
+
+.exit {
+    transform: translateY(0);
+}
+
+.exitBySwipe {
+    transform: translateY(calc(100% + 100px));
+}
+
+.exitActiveBySwipe {
+    transition: none;
+}
+
+.exitActive,
+.exitDone {
+    transform: translateY(calc(100% + 100px));
+    transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);
+}

package/src/index.ts

@@ -0,0 +1 @@
+export { PopupSheet, PopupSheetProps } from './Component';

package/typings-9211a437.d.ts

@@ -0,0 +1,95 @@
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, ElementType, ReactNode } from 'react';
+type StyleColors = {
+    default: {
+        [key: string]: string;
+    };
+    inverted: {
+        [key: string]: string;
+    };
+};
+type ComponentProps = {
+    /**
+     * Тип кнопки
+     * @default secondary
+     */
+    view?: 'accent' | 'primary' | 'secondary' | 'tertiary' | 'outlined' | 'filled' | 'transparent' | 'link' | 'ghost';
+    /**
+     * Слот слева
+     */
+    leftAddons?: ReactNode;
+    /**
+     * Слот справа
+     */
+    rightAddons?: ReactNode;
+    /**
+     * Размер компонента
+     * @default m
+     */
+    size?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';
+    /**
+     * Растягивает компонент на ширину контейнера
+     * @default false
+     */
+    block?: boolean;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для спиннера
+     */
+    spinnerClassName?: string;
+    /**
+     * Выводит ссылку в виде кнопки
+     */
+    href?: string;
+    /**
+     * Позволяет использовать кастомный компонент для кнопки (например Link из роутера)
+     */
+    Component?: ElementType;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Показать лоадер
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Не переносить текст кнопки на новую строку
+     * @default false
+     */
+    nowrap?: boolean;
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: 'default' | 'inverted';
+    /**
+     * Дочерние элементы.
+     */
+    children?: ReactNode;
+    /**
+     * Основные стили компонента.
+     */
+    styles: {
+        [key: string]: string;
+    };
+    /**
+     * Стили компонента для default и inverted режима.
+     */
+    colorStylesMap: StyleColors;
+};
+type AnchorBaseButtonProps = ComponentProps & AnchorHTMLAttributes<HTMLAnchorElement>;
+type NativeBaseButtonProps = ComponentProps & ButtonHTMLAttributes<HTMLButtonElement>;
+type BaseButtonProps = Partial<AnchorBaseButtonProps | NativeBaseButtonProps>;
+type AnchorButtonProps = Omit<BaseButtonProps, 'styles' | 'colorStylesMap'> & AnchorHTMLAttributes<HTMLAnchorElement>;
+type NativeButtonProps = Omit<BaseButtonProps, 'styles' | 'colorStylesMap'> & ButtonHTMLAttributes<HTMLButtonElement>;
+type ButtonProps = Partial<AnchorButtonProps | NativeButtonProps> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+};
+export { StyleColors, ComponentProps, AnchorBaseButtonProps, NativeBaseButtonProps, BaseButtonProps, AnchorButtonProps, NativeButtonProps, ButtonProps };