@alfalab/core-components-universal-modal 1.0.0

package/src/desktop/components/side-modal/index.ts

@@ -0,0 +1 @@
+export { SideModal } from './side-modal';

package/src/desktop/components/side-modal/side-modal.tsx

@@ -0,0 +1,95 @@
+import React, { forwardRef, useRef } from 'react';
+import cn from 'classnames';
+
+import { BaseModal } from '@alfalab/core-components-base-modal';
+
+import { useModalHeight } from '../../hooks/useModalHeight';
+import { useModalWheel } from '../../hooks/useModalWheel';
+import { useModalWidth } from '../../hooks/useModalWidth';
+import { ModalBySideProps } from '../../types/props';
+import { getFullSizeModalTransitions } from '../../utils/get-full-size-modal-transitions';
+import { getMargins } from '../../utils/get-margins';
+import { BaseUniversalModalContent } from '../base-universal-modal-content/base-universal-modal-content';
+
+import { getDefaultTransitionProps } from './get-default-transition-props';
+
+import styles from './styles/index.module.css';
+
+export const SideModal = forwardRef<HTMLDivElement, ModalBySideProps>((props, ref) => {
+    const {
+        width = 500,
+        height = 'fullHeight',
+        horizontalAlign = 'center',
+        verticalAlign = 'center',
+        overlay = true,
+        open,
+        dataTestId,
+        className,
+        children,
+        margin,
+        onClose,
+        ...restProps
+    } = props;
+    const componentRef = useRef<HTMLDivElement>(null);
+    const contentRef = useRef<HTMLDivElement>(null);
+
+    useModalWidth(width, open, componentRef);
+    useModalHeight(height, open, componentRef);
+    const { wheelDeltaY, handleWheel } = useModalWheel(overlay);
+
+    const isHorizontalStart = horizontalAlign === 'start';
+    const isHorizontalEnd = horizontalAlign === 'end';
+    const isVerticalCenter = verticalAlign === 'center';
+    const isVerticalBottom = verticalAlign === 'bottom';
+
+    const {
+        isFullSizeModal,
+        componentTransitions: fullSizeModalContentTransitions,
+        backdropTransitions: fullSizeModalBackdropTransitions,
+    } = getFullSizeModalTransitions({ verticalAlign, width, height });
+
+    return (
+        <BaseModal
+            {...restProps}
+            open={open}
+            dataTestId={dataTestId}
+            ref={ref}
+            componentRef={componentRef}
+            contentElementRef={contentRef}
+            scrollHandler='content'
+            disableBlockingScroll={!overlay}
+            wrapperClassName={cn(styles.wrapper, {
+                [styles.wrapperAlignStart]: isHorizontalStart,
+                [styles.wrapperAlignEnd]: isHorizontalEnd,
+                [styles.wrapperJustifyCenter]: isVerticalCenter,
+                [styles.wrapperJustifyEnd]: isVerticalBottom,
+            })}
+            className={cn(styles.component, className, {
+                [styles.overlayHidden]: !overlay,
+                ...getMargins({ styles, margin }),
+            })}
+            contentClassName={styles.content}
+            transitionProps={{
+                ...getDefaultTransitionProps({
+                    horizontalAlign,
+                    margin,
+                }),
+                ...(isFullSizeModal && fullSizeModalContentTransitions),
+                ...restProps.transitionProps,
+            }}
+            backdropProps={{
+                transparent: !overlay,
+                ...(isFullSizeModal && fullSizeModalBackdropTransitions),
+                ...restProps.backdropProps,
+            }}
+            onWheel={handleWheel}
+            onClose={onClose}
+        >
+            <div className={styles.container}>
+                <BaseUniversalModalContent wheelDeltaY={wheelDeltaY}>
+                    {children}
+                </BaseUniversalModalContent>
+            </div>
+        </BaseModal>
+    );
+});

package/src/desktop/components/side-modal/styles/index.module.css

@@ -0,0 +1,2 @@
+@import './side-modal.module.css';
+@import '../../../styles/margins.module.css';

package/src/desktop/components/side-modal/styles/side-modal.module.css

@@ -0,0 +1,45 @@
+@import '@alfalab/core-components-vars/src/index.css';
+
+.wrapper {
+    overflow-x: hidden;
+}
+
+.wrapperAlignStart {
+    align-items: start;
+}
+
+.wrapperAlignEnd {
+    align-items: end;
+}
+
+.wrapperJustifyCenter {
+    justify-content: center;
+}
+
+.wrapperJustifyEnd {
+    justify-content: end;
+}
+
+.component {
+    min-width: 500px;
+    min-height: 264px;
+    height: 100%;
+    border-radius: var(--border-radius-24);
+    overflow-x: hidden;
+    margin: unset;
+
+    /*
+        Применяем аппаратное ускорение с помощью will-change и backface-visibility
+        Также в классах анимации добавлен translateZ(0)
+    */
+    will-change: transform;
+    backface-visibility: hidden;
+
+    &.overlayHidden {
+        box-shadow: var(--shadow-m);
+    }
+
+    & .container {
+        height: 100%;
+    }
+}

package/src/desktop/components/side-modal/styles/transitions/transitions.module.css

@@ -0,0 +1,46 @@
+:root {
+    --universal-modal-transitions-timeout: 200ms;
+}
+
+/* prettier-ignore */
+@each $size in 0, 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64, 72, 80, 96, 128 {
+    .enterLeft-$(size) {
+        transform: translateX(calc(-100% - $(size)px)) translateZ(0);
+    }
+}
+
+/* prettier-ignore */
+@each $size in 0, 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64, 72, 80, 96, 128 {
+    .enterRight-$(size) {
+        transform: translateX(calc(100% + $(size)px)) translateZ(0);
+    }
+}
+
+.enterActive {
+    transform: translateX(0);
+    transition: transform var(--universal-modal-transitions-timeout) ease-in;
+}
+
+.enterDone {
+    transform: translateX(0);
+}
+
+.exit {
+    transform: translateX(0);
+}
+
+/* prettier-ignore */
+@each $size in 0, 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64, 72, 80, 96, 128 {
+    .exitActiveLeft-$(size) {
+        transform: translateX(calc(-100% - $(size)px)) translateZ(0);
+        transition: transform var(--universal-modal-transitions-timeout) ease-out;
+    }
+}
+
+/* prettier-ignore */
+@each $size in 0, 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64, 72, 80, 96, 128 {
+    .exitActiveRight-$(size) {
+        transform: translateX(calc(100% + $(size)px)) translateZ(0);
+        transition: transform var(--universal-modal-transitions-timeout) ease-out;
+    }
+}

package/src/desktop/constants/index.ts

@@ -0,0 +1,2 @@
+export const SCROLLBAR_DEFAULT_GAP = 16;
+export const FOOTER_MEDIUM_BREAKPOINT = 800;

package/src/desktop/hooks/useModalHeight.tsx

@@ -0,0 +1,42 @@
+import { MutableRefObject, useEffect } from 'react';
+
+import { isClient } from '@alfalab/core-components-shared';
+
+/** Устанавливает необходимую высоту модального окна */
+export const useModalHeight = (
+    height: number | 'fullHeight',
+    open: boolean,
+    componentRef: MutableRefObject<HTMLDivElement | null>,
+) => {
+    const ref = componentRef;
+
+    useEffect(() => {
+        if (ref.current) {
+            let viewportHeight = 0;
+            let computedMarginTop = 0;
+            let computedMarginBottom = 0;
+
+            if (isClient()) {
+                viewportHeight = Math.max(
+                    document.documentElement.clientHeight || 0,
+                    window.innerHeight || 0,
+                );
+                // рассчитываем margin'ы для дальнейшего вычитания из высоты viewport'а
+                computedMarginTop = parseFloat(window.getComputedStyle(ref.current).marginTop);
+                computedMarginBottom = parseFloat(
+                    window.getComputedStyle(ref.current).marginBottom,
+                );
+            }
+
+            if (height > viewportHeight || height === 'fullHeight') {
+                ref.current.style.height = `calc(100% - ${computedMarginTop}px - ${computedMarginBottom}px)`;
+
+                return;
+            }
+
+            if (!Number.isNaN(parseFloat(String(height)))) {
+                ref.current.style.height = `${parseFloat(String(height))}px`;
+            }
+        }
+    }, [open, height, ref]);
+};

package/src/desktop/hooks/useModalWheel.tsx

@@ -0,0 +1,16 @@
+import { useState, WheelEvent } from 'react';
+
+export const useModalWheel = (overlay: boolean) => {
+    const [wheelDeltaY, setWheelDeltaY] = useState<number>(0);
+
+    // передаем e.deltaY от события на элементе dialog компонента base-modal
+    const handleWheel = (e: WheelEvent<HTMLElement>) => {
+        const target = e.target as HTMLDivElement;
+
+        if (target.getAttribute('role') === 'dialog' && overlay) {
+            setWheelDeltaY(e.deltaY);
+        }
+    };
+
+    return { wheelDeltaY, handleWheel };
+};

package/src/desktop/hooks/useModalWidth.tsx

@@ -0,0 +1,52 @@
+import { MutableRefObject, useContext, useEffect } from 'react';
+
+import { isClient } from '@alfalab/core-components-shared';
+
+import { ResponsiveContext } from '../../ResponsiveContext';
+
+/** Устанавливает необходимую ширину модального окна */
+export const useModalWidth = (
+    width: number | 'fullWidth',
+    open: boolean,
+    componentRef: MutableRefObject<HTMLDivElement | null>,
+) => {
+    const ref = componentRef;
+    const context = useContext(ResponsiveContext);
+    const { setModalWidth } = context || {};
+
+    useEffect(() => {
+        if (ref.current) {
+            let viewportWidth = 0;
+            let computedMarginLeft = 0;
+            let computedMarginRight = 0;
+
+            if (isClient()) {
+                viewportWidth = Math.max(
+                    document.documentElement.clientWidth || 0,
+                    window.innerWidth || 0,
+                );
+
+                computedMarginLeft = parseFloat(window.getComputedStyle(ref.current).marginLeft);
+                computedMarginRight = parseFloat(window.getComputedStyle(ref.current).marginRight);
+            }
+
+            if (width > viewportWidth || width === 'fullWidth') {
+                ref.current.style.width = `calc(100% - ${computedMarginLeft}px - ${computedMarginRight}px)`;
+
+                if (setModalWidth) {
+                    setModalWidth(viewportWidth - computedMarginLeft - computedMarginRight);
+                }
+
+                return;
+            }
+
+            if (!Number.isNaN(parseFloat(String(width)))) {
+                ref.current.style.width = `${parseFloat(String(width))}px`;
+
+                if (setModalWidth) {
+                    setModalWidth(width);
+                }
+            }
+        }
+    }, [open, width, ref, setModalWidth, context]);
+};

package/src/desktop/index.ts

@@ -0,0 +1,14 @@
+export { UniversalModalDesktop, UniversalModalDesktopComponent } from './Component.desktop';
+export type { UniversalModalDesktopProps } from './types/props';
+
+export { HeaderDesktop } from '../components/header';
+export type { HeaderDesktopProps } from '../components/header';
+
+export { FooterDesktop } from '../components/footer';
+export type { FooterDesktopProps } from '../components/footer';
+
+export { ContentDesktop } from '../components/content';
+export type { ContentDesktopProps } from '../components/content';
+
+export { CrossButtonDesktop } from './components/buttons/cross-button';
+export { ArrowButtonDesktop } from './components/buttons/arrow-button';

package/src/desktop/package.json

@@ -0,0 +1,3 @@
+{
+    "module": "../esm/desktop/index.js"
+}

package/src/desktop/styles/margins.module.css

@@ -0,0 +1,27 @@
+/* prettier-ignore */
+@for $i from 0 to 128 {
+    .marginTop-$(i) {
+        margin-top: $(i)px;
+    }
+}
+
+/* prettier-ignore */
+@for $i from 0 to 128 {
+    .marginRight-$(i) {
+        margin-right: $(i)px;
+    }
+}
+
+/* prettier-ignore */
+@for $i from 0 to 128 {
+    .marginBottom-$(i) {
+        margin-bottom: $(i)px;
+    }
+}
+
+/* prettier-ignore */
+@for $i from 0 to 128 {
+    .marginLeft-$(i) {
+        margin-left: $(i)px;
+    }
+}

package/src/desktop/styles/transitions/full-size-backdrop-transitions.module.css

@@ -0,0 +1,52 @@
+@import '@alfalab/core-components-vars/src/index.css';
+
+:root {
+    --universal-modal-backdrop-visible-background: var(--color-light-overlay-default);
+    --universal-modal-backdrop-hidden-background: transparent;
+}
+
+@keyframes step_1 {
+    0% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0.5;
+    }
+}
+
+@keyframes step_2 {
+    0% {
+        opacity: 0.5;
+    }
+    100% {
+        opacity: 0;
+        background-color: var(--universal-modal-backdrop-hidden-background);
+    }
+}
+
+.appear,
+.enter {
+    background-color: var(--universal-modal-backdrop-hidden-background);
+}
+
+.appearActive,
+.enterActive,
+.appearDone,
+.enterDone {
+    background-color: var(--universal-modal-backdrop-visible-background);
+}
+
+.exit {
+    background-color: var(--universal-modal-backdrop-visible-background);
+}
+
+.exitActive {
+    opacity: 1;
+    animation: step_1 200ms cubic-bezier(0, 0, 1, 0),
+        step_2 200ms cubic-bezier(0, 0, 0, 1) 200ms forwards;
+}
+
+.exitDone {
+    opacity: 0;
+    background-color: var(--universal-modal-backdrop-hidden-background);
+}

package/src/desktop/styles/transitions/full-size-vertical-bottom-transitions.module.css

@@ -0,0 +1,24 @@
+.appear,
+.enter {
+    opacity: 0;
+    transform: translateY(40px);
+}
+
+.appearActive,
+.enterActive {
+    opacity: 1;
+    transform: translateY(0);
+    transition: opacity 200ms cubic-bezier(0, 0, 0, 1), transform 200ms cubic-bezier(0, 0, 0, 1);
+}
+
+.exit {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.exitActive,
+.exitDone {
+    opacity: 0;
+    transform: translateY(40px);
+    transition: opacity 200ms cubic-bezier(0, 0, 1, 0), transform 200ms cubic-bezier(0, 0, 1, 0);
+}

package/src/desktop/styles/transitions/full-size-vertical-center-transitions.module.css

@@ -0,0 +1,20 @@
+.appear,
+.enter {
+    opacity: 0;
+}
+
+.appearActive,
+.enterActive {
+    opacity: 1;
+    transition: opacity 200ms cubic-bezier(0, 0, 0, 1);
+}
+
+.exit {
+    opacity: 1;
+}
+
+.exitActive,
+.exitDone {
+    opacity: 0;
+    transition: opacity 200ms cubic-bezier(0, 0, 1, 0);
+}

package/src/desktop/styles/transitions/full-size-vertical-top-transitions.module.css

@@ -0,0 +1,24 @@
+.appear,
+.enter {
+    opacity: 0;
+    transform: translateY(-40px);
+}
+
+.appearActive,
+.enterActive {
+    opacity: 1;
+    transform: translateY(0);
+    transition: opacity 200ms cubic-bezier(0, 0, 0, 1), transform 200ms cubic-bezier(0, 0, 0, 1);
+}
+
+.exit {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.exitActive,
+.exitDone {
+    opacity: 0;
+    transform: translateY(-40px);
+    transition: opacity 200ms cubic-bezier(0, 0, 1, 0), transform 200ms cubic-bezier(0, 0, 1, 0);
+}

package/src/desktop/types/props.ts

@@ -0,0 +1,66 @@
+import { BaseModalProps } from '@alfalab/core-components-base-modal';
+
+import { TMargin } from '../../typings/margin-type';
+
+export type BaseUniversalModalProps = {
+    /**
+     * Расположение по горизонтали и сторона с которой модал “выезжает” при открытии
+     * @default center
+     */
+    horizontalAlign?: 'start' | 'center' | 'end';
+
+    /**
+     * Расположение модального окна по вертикали
+     * @default center
+     */
+    verticalAlign?: 'top' | 'center' | 'bottom';
+
+    /**
+     * Ширина модального окна
+     * fullWidth - ширина модального окна подстроится под viewport
+     * minWidth - 500
+     * @default 500
+     */
+    width?: number | 'fullWidth';
+
+    /**
+     * Высота модального окна
+     * fullHeight - высота модального окна подстроится под viewport
+     * minHeight - 264
+     * @default fullHeight
+     */
+    height?: number | 'fullHeight';
+
+    /**
+     * Наличие оверлея
+     * @default true
+     */
+    overlay?: boolean;
+
+    /**
+     * Устанавливает отступы модального окна
+     */
+    margin?: TMargin;
+
+    /**
+     * Хэндлер закрытия модалки
+     */
+    onClose?: () => void;
+};
+
+export type UniversalModalDesktopProps = BaseUniversalModalProps &
+    Pick<
+        BaseModalProps,
+        | 'children'
+        | 'dataTestId'
+        | 'open'
+        | 'className'
+        | 'wrapperClassName'
+        | 'onUnmount'
+        | 'transitionProps'
+        | 'backdropProps'
+    >;
+
+export type ModalBySideProps = UniversalModalDesktopProps;
+
+export type ModalByCenterProps = UniversalModalDesktopProps;

package/src/desktop/utils/get-full-size-modal-transitions.ts

@@ -0,0 +1,64 @@
+import { TransitionProps } from 'react-transition-group/Transition';
+
+import { BackdropProps } from '@alfalab/core-components-backdrop';
+import { exhaustiveCheck } from '@alfalab/core-components-shared';
+
+import { UniversalModalDesktopProps } from '../types/props';
+
+import fullSizeBackdropTransitions from '../styles/transitions/full-size-backdrop-transitions.module.css';
+import fullSizeVerticalBottomTransitions from '../styles/transitions/full-size-vertical-bottom-transitions.module.css';
+import fullSizeVerticalCenterTransitions from '../styles/transitions/full-size-vertical-center-transitions.module.css';
+import fullSizeVerticalTopTransitions from '../styles/transitions/full-size-vertical-top-transitions.module.css';
+
+type Params = {
+    verticalAlign: Exclude<UniversalModalDesktopProps['verticalAlign'], undefined>;
+    width: UniversalModalDesktopProps['width'];
+    height: UniversalModalDesktopProps['height'];
+};
+
+type ReturnType = {
+    isFullSizeModal: boolean;
+    backdropTransitions: Partial<BackdropProps>;
+    componentTransitions: Partial<TransitionProps>;
+};
+
+export const getFullSizeModalTransitions = (params: Params): ReturnType => {
+    const { verticalAlign, width, height } = params;
+
+    const isFullSizeModal = width === 'fullWidth' && height === 'fullHeight';
+
+    const backdropTransitions = {
+        timeout: {
+            enter: 0,
+            exit: 400,
+        },
+        transitionClassNames: fullSizeBackdropTransitions,
+    };
+
+    const getContentTransitionsClassNames = () => {
+        switch (verticalAlign) {
+            case 'top':
+                return fullSizeVerticalTopTransitions;
+            case 'bottom':
+                return fullSizeVerticalBottomTransitions;
+            case 'center':
+                return fullSizeVerticalCenterTransitions;
+            default:
+                return exhaustiveCheck(verticalAlign);
+        }
+    };
+
+    const componentTransitions = {
+        timeout: {
+            enter: 200,
+            exit: 400,
+        },
+        classNames: getContentTransitionsClassNames(),
+    };
+
+    return {
+        isFullSizeModal,
+        backdropTransitions,
+        componentTransitions,
+    };
+};

package/src/desktop/utils/get-margins.ts

@@ -0,0 +1,24 @@
+import { hasOwnProperty } from '@alfalab/core-components-shared';
+
+import { UniversalModalDesktopProps } from '../types/props';
+
+type Params = {
+    styles: Record<string, string>;
+    margin: UniversalModalDesktopProps['margin'];
+};
+
+export const getMargins = (params: Params): Record<string, boolean> => {
+    const { margin, styles } = params;
+
+    const hasMarginTop = (margin && hasOwnProperty(margin, 'top')) || false;
+    const hasMarginRight = (margin && hasOwnProperty(margin, 'right')) || false;
+    const hasMarginBottom = (margin && hasOwnProperty(margin, 'bottom')) || false;
+    const hasMarginLeft = (margin && hasOwnProperty(margin, 'left')) || false;
+
+    return {
+        [styles[`marginTop-${margin?.top}`]]: hasMarginTop,
+        [styles[`marginRight-${margin?.right}`]]: hasMarginRight,
+        [styles[`marginBottom-${margin?.bottom}`]]: hasMarginBottom,
+        [styles[`marginLeft-${margin?.left}`]]: hasMarginLeft,
+    };
+};

package/src/desktop/vars.css

@@ -0,0 +1,6 @@
+@import '@alfalab/core-components-vars/src/index.css';
+
+:root {
+    --universal-modal-header-desktop-font-weight: bold;
+    --universal-modal-header-desktop-font-family: var(--font-family-system);
+}

package/src/index.ts

@@ -0,0 +1,11 @@
+export { UniversalModalResponsive, UniversalModal } from './Component.responsive';
+export type { UniversalModalResponsiveProps } from './typings';
+
+export { ContentResponsive } from './components/content';
+export type { ContentResponsiveProps } from './components/content';
+
+export { HeaderResponsive } from './components/header';
+export type { HeaderResponsiveProps } from './components/header';
+
+export { FooterResponsive } from './components/footer';
+export type { FooterResponsiveProps } from './components/footer';