@alfalab/core-components-modal 7.0.15 → 8.0.0

package/src/Component.tsx

@@ -0,0 +1,93 @@
+import React, { forwardRef, useMemo, useRef } from 'react';
+import mergeRefs from 'react-merge-refs';
+import cn from 'classnames';
+
+import { BaseModal } from '@alfalab/core-components-base-modal';
+
+import { ResponsiveContext } from './ResponsiveContext';
+import { ModalDesktopProps, View } from './typings';
+
+import desktopStyles from './desktop.module.css';
+import mobileStyles from './mobile.module.css';
+import transitions from './transitions.module.css';
+
+export const Modal = forwardRef<HTMLDivElement, ModalDesktopProps & { view: View }>(
+    (
+        {
+            size = 's',
+            fixedPosition,
+            fullscreen,
+            children,
+            className,
+            wrapperClassName,
+            transitionProps = {},
+            view,
+            ...restProps
+        },
+        ref,
+    ) => {
+        // TODO: удалить, после удаления пропсы fullscreen
+        const componentSize = fullscreen ? 'fullscreen' : size;
+
+        const modalRef = useRef<HTMLElement>(null);
+
+        const handleEntered = (node: HTMLElement, isAppearing: boolean) => {
+            if (fixedPosition && modalRef.current) {
+                const content = modalRef.current.querySelector<HTMLElement>(
+                    `.${desktopStyles.component}`,
+                );
+
+                if (content) {
+                    const { marginTop } = window.getComputedStyle(content);
+
+                    content.style.marginTop = marginTop;
+                }
+            }
+
+            if (transitionProps.onEntered) {
+                transitionProps.onEntered(node, isAppearing);
+            }
+        };
+
+        const baseModalProps =
+            view === 'desktop'
+                ? {
+                      ref: mergeRefs([ref, modalRef]),
+                      wrapperClassName: cn(desktopStyles.wrapper, wrapperClassName, {
+                          [desktopStyles.fullscreen]: componentSize === 'fullscreen',
+                      }),
+                      className: cn(
+                          desktopStyles.component,
+                          className,
+                          desktopStyles[componentSize],
+                      ),
+                      backdropProps: {
+                          invisible: componentSize === 'fullscreen',
+                          ...restProps.backdropProps,
+                      },
+                      transitionProps: {
+                          classNames: transitions,
+                          ...transitionProps,
+                          onEntered: handleEntered,
+                      },
+                  }
+                : {
+                      ref,
+                      transitionProps: {
+                          classNames: transitions,
+                          ...transitionProps,
+                      },
+                      className: cn(className, mobileStyles.component),
+                  };
+
+        const contextValue = useMemo(() => ({ size: componentSize, view }), [componentSize, view]);
+
+        return (
+            <ResponsiveContext.Provider value={contextValue}>
+                <BaseModal {...restProps} {...baseModalProps}>
+                    {children}
+                </BaseModal>
+            </ResponsiveContext.Provider>
+        );
+    },
+);

package/src/Context.tsx

@@ -0,0 +1,3 @@
+import { BaseModalContext } from '@alfalab/core-components-base-modal';
+
+export const ModalContext = BaseModalContext;

package/src/ResponsiveContext.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+
+import type { TResponsiveModalContext } from './typings';
+
+export const ResponsiveContext = React.createContext<TResponsiveModalContext>({
+    view: 'desktop',
+    size: 's',
+});

package/src/components/content/Component.tsx

@@ -0,0 +1,29 @@
+import React, { FC, Ref, useContext } from 'react';
+import cn from 'classnames';
+
+import { ModalContext } from '../../Context';
+import { ResponsiveContext } from '../../ResponsiveContext';
+import { ContentProps } from '../../typings';
+
+import desktopStyles from './desktop.module.css';
+import styles from './index.module.css';
+import mobileStyles from './mobile.module.css';
+
+export const Content: FC<ContentProps> = ({ children, flex, className }) => {
+    const { contentRef, hasHeader } = useContext(ModalContext);
+    const { size, view } = useContext(ResponsiveContext);
+
+    return (
+        <div
+            className={cn(styles.content, className, {
+                [styles.flex]: flex,
+                [styles.withHeader]: hasHeader,
+                [desktopStyles[size]]: view === 'desktop' && size,
+                [mobileStyles.content]: view === 'mobile',
+            })}
+            ref={contentRef as Ref<HTMLDivElement>}
+        >
+            {children}
+        </div>
+    );
+};

package/src/components/content/desktop.module.css

@@ -0,0 +1,13 @@
+@import '../../vars.css';
+
+.s,
+.m,
+.l,
+.xl,
+.fullscreen {
+    padding: var(--modal-s-content-paddings);
+
+    &:last-child {
+        padding-bottom: var(--modal-s-content-only-bottom-padding);
+    }
+}

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

@@ -0,0 +1,16 @@
+@import '../../vars.css';
+
+.content {
+    position: relative;
+    box-sizing: border-box;
+    width: 100%;
+    z-index: 0;
+
+    &.withHeader {
+        padding-top: 0;
+    }
+}
+
+.flex {
+    flex: 1;
+}

package/src/components/content/mobile.module.css

@@ -0,0 +1,9 @@
+@import '../../vars.css';
+
+.content {
+    padding: var(--gap-m) var(--gap-m) 0;
+
+    &:last-child {
+        padding-bottom: var(--gap-m);
+    }
+}

package/src/components/footer/Component.tsx

@@ -0,0 +1,69 @@
+import React, { FC, ReactNode, useContext, useEffect } from 'react';
+import cn from 'classnames';
+
+import { ModalContext } from '../../Context';
+import { ResponsiveContext } from '../../ResponsiveContext';
+
+import desktopStyles from './desktop.module.css';
+import styles from './index.module.css';
+import layoutStyles from './layout.module.css';
+import mobileStyles from './mobile.module.css';
+
+export type FooterProps = {
+    /**
+     * Контент футера
+     */
+    children?: ReactNode;
+
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+
+    /**
+     * Фиксирует футер
+     */
+    sticky?: boolean;
+
+    /**
+     * Выравнивание элементов футера
+     */
+    layout?: 'start' | 'center' | 'space-between' | 'column';
+
+    /**
+     * Отступы между элементами футера
+     */
+    gap?: 16 | 24 | 32;
+};
+
+export const Footer: FC<FooterProps> = ({ children, className, sticky, layout = 'start', gap }) => {
+    const { footerHighlighted, setHasFooter } = useContext(ModalContext);
+    const { size, view } = useContext(ResponsiveContext);
+
+    useEffect(() => {
+        setHasFooter(true);
+    }, [setHasFooter]);
+
+    return (
+        <div
+            className={cn(
+                styles.footer,
+                className,
+                layoutStyles[layout],
+                gap && layoutStyles[`gap-${gap}`],
+                {
+                    [styles.highlighted]: sticky && footerHighlighted,
+                    [styles.sticky]: sticky,
+                    [desktopStyles.footer]: view === 'desktop',
+                    [desktopStyles.sticky]: view === 'desktop' && sticky,
+                    [desktopStyles[size]]: view === 'desktop',
+                    [mobileStyles.footer]: view === 'mobile',
+                    [mobileStyles.sticky]: view === 'mobile' && sticky,
+                    [layoutStyles[`${layout}-mobile`]]: view === 'mobile',
+                },
+            )}
+        >
+            {children}
+        </div>
+    );
+};

package/src/components/footer/desktop.module.css

@@ -0,0 +1,22 @@
+@import '../../vars.css';
+
+.footer {
+    border-bottom-left-radius: var(--modal-border-radius);
+    border-bottom-right-radius: var(--modal-border-radius);
+}
+
+.sticky {
+    bottom: calc(var(--modal-vertical-padding) * -1);
+
+    &.fullscreen {
+        bottom: 0;
+    }
+}
+
+.s,
+.m,
+.l,
+.xl,
+.fullscreen {
+    padding: var(--modal-s-footer-paddings);
+}

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

@@ -0,0 +1,17 @@
+@import '../../vars.css';
+
+.footer {
+    width: 100%;
+    box-sizing: border-box;
+    transition: box-shadow 0.2s ease, background 0.2s ease;
+}
+
+.sticky {
+    background: var(--modal-footer-background);
+    position: sticky;
+}
+
+.highlighted {
+    background: var(--modal-footer-highlight-background);
+    box-shadow: var(--modal-footer-highlight-box-shadow);
+}

package/src/components/footer/layout.module.css

@@ -0,0 +1,86 @@
+@import '../../vars.css';
+
+.column {
+    display: flex;
+    flex-direction: column;
+
+    & > * {
+        margin-bottom: var(--modal-footer-default-gap);
+    }
+
+    & > *:last-child,
+    & > *:only-child {
+        margin-bottom: 0;
+    }
+
+    &.gap-16 > * {
+        margin-bottom: var(--gap-m);
+    }
+
+    &.gap-24 > * {
+        margin-bottom: var(--gap-xl);
+    }
+
+    &.gap-32 > * {
+        margin-bottom: var(--gap-2xl);
+    }
+}
+
+.column-mobile {
+    flex-direction: column-reverse;
+
+    & > * {
+        margin-bottom: 0;
+    }
+
+    & > *:last-child {
+        margin-bottom: var(--modal-footer-default-gap);
+    }
+
+    & > *:only-child {
+        margin-bottom: 0;
+    }
+}
+
+.start {
+    justify-content: flex-start;
+}
+
+.center {
+    justify-content: center;
+}
+
+.space-between {
+    justify-content: space-between;
+
+    & > * {
+        flex: 1;
+    }
+}
+
+.start,
+.center,
+.space-between {
+    display: flex;
+
+    & > * {
+        margin-right: var(--modal-footer-default-gap);
+    }
+
+    & > *:last-child,
+    & > *:only-child {
+        margin-right: 0;
+    }
+
+    &.gap-16 > * {
+        margin-right: var(--gap-m);
+    }
+
+    &.gap-24 > * {
+        margin-right: var(--gap-xl);
+    }
+
+    &.gap-32 > * {
+        margin-right: var(--gap-2xl);
+    }
+}

package/src/components/footer/mobile.module.css

@@ -0,0 +1,9 @@
+@import '../../vars.css';
+
+.footer {
+    padding: var(--gap-m);
+}
+
+.sticky {
+    bottom: 0;
+}

package/src/components/header/Component.tsx

@@ -0,0 +1,60 @@
+import React, { FC, useContext, useEffect } from 'react';
+import cn from 'classnames';
+
+import { NavigationBar, NavigationBarProps } from '@alfalab/core-components-navigation-bar';
+
+import { ModalContext } from '../../Context';
+import { ResponsiveContext } from '../../ResponsiveContext';
+
+import desktopStyles from './desktop.module.css';
+import styles from './index.module.css';
+import mobileStyles from './mobile.module.css';
+
+export type HeaderProps = Omit<NavigationBarProps, 'size' | 'view' | 'parentRef'>;
+
+export const Header: FC<HeaderProps> = ({
+    className,
+    sticky,
+    title,
+    children,
+    contentClassName,
+    hasCloser = true,
+    ...restProps
+}) => {
+    const { setHasHeader, headerHighlighted, parentRef, onClose } = useContext(ModalContext);
+    const { view, size } = useContext(ResponsiveContext);
+
+    useEffect(() => {
+        setHasHeader(true);
+    }, [setHasHeader]);
+
+    const hasContent = Boolean(title || children);
+
+    return (
+        <NavigationBar
+            {...restProps}
+            scrollableParentRef={parentRef}
+            hasCloser={hasCloser}
+            sticky={sticky}
+            view={view}
+            title={title}
+            onClose={onClose}
+            className={cn(className, {
+                [styles.highlighted]: hasContent && sticky && headerHighlighted,
+                [styles.sticky]: sticky,
+                [styles.hasContent]: hasContent,
+                [desktopStyles.header]: view === 'desktop',
+                [desktopStyles.sticky]: view === 'desktop' && sticky,
+                [desktopStyles[size]]: view === 'desktop',
+                [mobileStyles.header]: view === 'mobile',
+                [mobileStyles.sticky]: view === 'mobile' && sticky,
+            })}
+            contentClassName={cn(contentClassName, {
+                [desktopStyles.content]: view === 'desktop',
+                [mobileStyles.content]: view === 'mobile',
+            })}
+        >
+            {children}
+        </NavigationBar>
+    );
+};

package/src/components/header/desktop.module.css

@@ -0,0 +1,42 @@
+@import '../../vars.css';
+
+.header {
+    border-top-left-radius: var(--modal-border-radius);
+    border-top-right-radius: var(--modal-border-radius);
+}
+
+.content {
+    font-weight: var(--modal-header-desktop-font-weight);
+    font-family: var(--modal-header-desktop-font-family);
+}
+
+.s .content,
+.m .content {
+    padding: var(--modal-s-header-desktop-content-paddings);
+    font-size: var(--modal-s-header-desktop-font-size);
+    line-height: var(--modal-s-header-desktop-line-height);
+}
+
+.l .content,
+.xl .content,
+.fullscreen .content {
+    padding: var(--modal-l-header-desktop-content-paddings);
+    font-size: var(--modal-l-header-desktop-font-size);
+    line-height: var(--modal-l-header-desktop-line-height);
+}
+
+.s,
+.m,
+.l,
+.xl,
+.fullscreen {
+    padding: var(--modal-s-header-paddings);
+}
+
+.sticky {
+    top: calc(var(--modal-vertical-padding) * -1);
+
+    &.fullscreen {
+        top: 0;
+    }
+}

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

@@ -0,0 +1,15 @@
+@import '../../vars.css';
+
+.highlighted {
+    background: var(--modal-header-highlight-background);
+    box-shadow: var(--modal-header-highlight-box-shadow);
+}
+
+.sticky {
+    position: sticky;
+    z-index: 1;
+
+    &.hasContent {
+        background: var(--modal-header-background);
+    }
+}

package/src/components/header/mobile.module.css

@@ -0,0 +1,18 @@
+@import '../../vars.css';
+
+.header {
+    padding: var(--modal-header-mobile-paddings);
+}
+
+.sticky {
+    top: 0;
+}
+
+.content {
+    font-size: var(--modal-header-mobile-font-size);
+    line-height: var(--modal-header-mobile-line-height);
+    font-family: var(--modal-header-mobile-font-family);
+    font-weight: var(--modal-header-mobile-font-weight);
+
+    padding: var(--modal-header-mobile-content-paddings);
+}

package/src/desktop.module.css

@@ -0,0 +1,38 @@
+@import './vars.css';
+
+.wrapper {
+    padding-top: var(--modal-vertical-padding);
+    padding-bottom: var(--modal-vertical-padding);
+}
+
+.component {
+    width: 100%;
+    max-width: 100%;
+    border-radius: var(--modal-border-radius);
+}
+
+.fullscreen {
+    padding-top: 0;
+    padding-bottom: 0;
+
+    & .component {
+        flex: 1;
+        border-radius: 0;
+    }
+}
+
+.s {
+    width: var(--modal-s-width);
+}
+
+.m {
+    width: var(--modal-m-width);
+}
+
+.l {
+    width: var(--modal-l-width);
+}
+
+.xl {
+    width: var(--modal-xl-width);
+}

package/src/desktop.ts

@@ -0,0 +1,2 @@
+export * from './Component.desktop';
+export { ModalDesktopProps } from './typings';

package/src/index.ts

@@ -0,0 +1,2 @@
+export { ModalResponsive as Modal } from './Component.responsive';
+export { ModalResponsiveProps as ModalProps } from './typings';

package/src/mobile.module.css

@@ -0,0 +1,7 @@
+@import './vars.css';
+
+.component {
+    flex: 1;
+    width: 100%;
+    max-width: 600px;
+}

package/src/mobile.ts

@@ -0,0 +1,2 @@
+export * from './Component.mobile';
+export { ModalMobileProps } from './typings';

package/src/shared.ts

@@ -0,0 +1 @@
+export { ModalContext } from './Context';

package/src/transitions.module.css

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

package/src/typings.ts

@@ -0,0 +1,63 @@
+import { ReactNode } from 'react';
+
+import type { BaseModalProps } from '@alfalab/core-components-base-modal';
+
+export type ModalDesktopProps = BaseModalProps & {
+    /**
+     * Ширина модального окна
+     * @default "m"
+     */
+    size?: 's' | 'm' | 'l' | 'xl' | 'fullscreen';
+
+    /**
+     * Растягивает модальное окно на весь экран
+     * @deprecated Используйте размер fullscreen
+     */
+    fullscreen?: boolean;
+
+    /**
+     * Фиксирует позицию модального окна после открытия,
+     * предотвращая скачки, если контент внутри будет меняться
+     */
+    fixedPosition?: boolean;
+
+    /**
+     * Управление наличием закрывающего крестика
+     * @default false
+     */
+    hasCloser?: boolean;
+};
+
+export type ModalMobileProps = Omit<ModalDesktopProps, 'size' | 'fixedPosition' | 'fullscreen'>;
+
+export type ModalResponsiveProps = ModalDesktopProps & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+};
+
+export type View = 'desktop' | 'mobile';
+
+export type TResponsiveModalContext = {
+    view: View;
+    size: NonNullable<ModalDesktopProps['size']>;
+};
+
+export type ContentProps = {
+    /**
+     * Контент
+     */
+    children?: ReactNode;
+
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+
+    /**
+     * Растягивает контент на всю высоту
+     */
+    flex?: boolean;
+};