feat: universal modal footer atom export refactor

core-ds · Dec 13, 2024 · cf361e7 · cf361e7
1 parent e4bb5d9
commit cf361e7
Show file tree

Hide file tree

Showing 13 changed files with 98 additions and 73 deletions.
diff --git a/packages/universal-modal/src/Component.responsive.tsx b/packages/universal-modal/src/Component.responsive.tsx
@@ -2,13 +2,13 @@ import React, { forwardRef } from 'react';
 
 import { useIsDesktop } from '@alfalab/core-components-mq';
 
+import { ContentResponsive } from './components/content';
 import { Controls } from './components/controls';
+import { FooterResponsive } from './components/footer';
 import { HeaderResponsive } from './components/header';
-import { createResponsive } from './utils/createResponsive';
 import { UniversalModalDesktop } from './desktop';
 import { UniversalModalMobile } from './mobile';
 import { UniversalModalResponsiveProps } from './typings';
-import { ContentResponsive } from './components/content';
 
 export const UniversalModal = forwardRef<HTMLDivElement, UniversalModalResponsiveProps>(
     ({ children, breakpoint, defaultMatchMediaValue, dataTestId, ...restProps }, ref) => {
@@ -27,7 +27,7 @@ export const UniversalModal = forwardRef<HTMLDivElement, UniversalModalResponsiv
 export const UniversalModalResponsive = Object.assign(UniversalModal, {
     Header: HeaderResponsive,
     Content: ContentResponsive,
-    Footer: createResponsive(UniversalModalDesktop.Footer, UniversalModalMobile.Footer),
+    Footer: FooterResponsive,
     Controls,
 });
 

diff --git a/packages/universal-modal/src/Component.test.tsx b/packages/universal-modal/src/Component.test.tsx
@@ -76,7 +76,9 @@ describe('UniversalModal', () => {
                 >
                     Content
                 </UniversalModalResponsive.Content>
-                <UniversalModalResponsive.Footer>Footer</UniversalModalResponsive.Footer>
+                <UniversalModalResponsive.Footer dataTestId={getUniversalModalTestIds(dti).footer}>
+                    Footer
+                </UniversalModalResponsive.Footer>
             </UniversalModalResponsive>,
         );
 

diff --git a/packages/universal-modal/src/components/content/Component.responsive.tsx b/packages/universal-modal/src/components/content/Component.responsive.tsx
@@ -1,4 +1,5 @@
 import React, { FC } from 'react';
+
 import { useIsDesktop } from '@alfalab/core-components-mq';
 
 import type { ContentDesktopProps, ContentMobileProps } from '.';

diff --git a/packages/universal-modal/src/components/footer/Component.desktop.tsx b/packages/universal-modal/src/components/footer/Component.desktop.tsx
@@ -1,9 +1,13 @@
-import React, { FC } from 'react';
+import React, { FC, useContext } from 'react';
 import cn from 'classnames';
 
-import { Footer, FooterProps } from './Component';
+import { FOOTER_MEDIUM_BREAKPOINT } from '../../desktop/const';
+import { ResponsiveContext } from '../../ResponsiveContext';
+
+import { BaseFooter, FooterProps } from './base-footer';
 
 import styles from './desktop.module.css';
+import layoutStyles from './layout.module.css';
 
 export type FooterDesktopProps = FooterProps & {
     /**
@@ -12,12 +16,25 @@ export type FooterDesktopProps = FooterProps & {
     size?: 's' | 500;
 };
 
-export const FooterDesktop: FC<FooterDesktopProps> = ({ className, sticky, ...restProps }) => (
-    <Footer
-        className={cn(className, {
-            [styles.sticky]: sticky,
-        })}
-        sticky={sticky}
-        {...restProps}
-    />
-);
+export const FooterDesktop: FC<FooterDesktopProps> = ({
+    className,
+    sticky,
+    layout = 'start',
+    ...restProps
+}) => {
+    const responsiveContext = useContext(ResponsiveContext);
+    const { modalWidth = 500, modalFooterHighlighted } = responsiveContext || {};
+
+    return (
+        <BaseFooter
+            className={cn(layoutStyles[layout], className, {
+                [styles.sticky]: sticky,
+                [layoutStyles.middle]: modalWidth >= FOOTER_MEDIUM_BREAKPOINT,
+            })}
+            sticky={sticky}
+            layout={layout}
+            isHighlighted={modalFooterHighlighted}
+            {...restProps}
+        />
+    );
+};
diff --git a/packages/universal-modal/src/components/footer/Component.mobile.tsx b/packages/universal-modal/src/components/footer/Component.mobile.tsx
@@ -1,8 +1,11 @@
-import React, { FC } from 'react';
+import React, { FC, useContext } from 'react';
 import cn from 'classnames';
 
-import { Footer, FooterProps } from './Component';
+import { ModalContext } from '../../Context';
 
+import { BaseFooter, FooterProps } from './base-footer';
+
+import layoutStylesMobile from './layout.mobile.module.css';
 import styles from './mobile.module.css';
 
 export type FooterMobileProps = FooterProps;
@@ -12,13 +15,18 @@ export const FooterMobile: FC<FooterMobileProps> = ({
     sticky,
     layout = 'start',
     ...restProps
-}) => (
-    <Footer
-        className={cn(className, styles.footer, {
-            [styles.sticky]: sticky,
-        })}
-        sticky={sticky}
-        layout={layout}
-        {...restProps}
-    />
-);
+}) => {
+    const { footerHighlighted } = useContext(ModalContext);
+
+    return (
+        <BaseFooter
+            className={cn(styles.footer, layoutStylesMobile[layout], className, {
+                [styles.sticky]: sticky,
+            })}
+            sticky={sticky}
+            layout={layout}
+            isHighlighted={footerHighlighted}
+            {...restProps}
+        />
+    );
+};
diff --git a/packages/universal-modal/src/components/footer/Component.responsive.tsx b/packages/universal-modal/src/components/footer/Component.responsive.tsx
@@ -0,0 +1,18 @@
+import React, { FC } from 'react';
+
+import { useIsDesktop } from '@alfalab/core-components-mq';
+
+import type { FooterDesktopProps, FooterMobileProps } from '.';
+import { FooterDesktop, FooterMobile } from '.';
+
+export type FooterResponsiveProps = FooterDesktopProps | FooterMobileProps;
+
+export const FooterResponsive: FC<FooterResponsiveProps> = ({ ...restProps }) => {
+    const isDesktop = useIsDesktop();
+
+    if (isDesktop) {
+        return <FooterDesktop {...restProps} />;
+    }
+
+    return <FooterMobile {...restProps} />;
+};
diff --git a/...modal/src/components/footer/Component.tsx → ...dal/src/components/footer/base-footer.tsx b/...modal/src/components/footer/Component.tsx → ...dal/src/components/footer/base-footer.tsx
@@ -1,20 +1,9 @@
 import React, { FC, ReactNode, useContext, useEffect } from 'react';
 import cn from 'classnames';
 
-import { getDataTestId } from '@alfalab/core-components-shared';
-
 import { ModalContext } from '../../Context';
-import { FOOTER_MEDIUM_BREAKPOINT } from '../../desktop/const';
-import { ResponsiveContext } from '../../ResponsiveContext';
 
 import styles from './index.module.css';
-import layoutStylesMobile from './layout.mobile.module.css';
-import layoutStyles from './layout.module.css';
-
-const layouts = {
-    desktop: layoutStyles,
-    mobile: layoutStylesMobile,
-};
 
 export type FooterProps = {
     /**
@@ -41,18 +30,21 @@ export type FooterProps = {
      * Идентификатор для систем автоматизированного тестирования
      */
     dataTestId?: string;
+
+    /**
+     * Отбивка бордером
+     */
+    isHighlighted?: boolean;
 };
 
-export const Footer: FC<FooterProps> = ({
+export const BaseFooter: FC<FooterProps> = ({
     children,
     className,
     sticky,
-    layout = 'start',
     dataTestId,
+    isHighlighted,
 }) => {
-    const { setHasFooter, footerHighlighted } = useContext(ModalContext);
-    const responsiveContext = useContext(ResponsiveContext);
-    const { modalFooterHighlighted, view = 'desktop', modalWidth = 500 } = responsiveContext || {};
+    const { setHasFooter } = useContext(ModalContext);
 
     useEffect(() => {
         setHasFooter(true);
@@ -62,17 +54,13 @@ export const Footer: FC<FooterProps> = ({
         };
     }, [setHasFooter]);
 
-    // custom scroll ломает highlight логику в base-modal, поэтому для десктопа обрабатываем самостоятельно
-    const isHighlighted = view === 'desktop' ? modalFooterHighlighted : footerHighlighted;
-
     return (
         <div
-            className={cn(styles.footer, className, layouts[view][layout], {
+            className={cn(styles.footer, className, {
                 [styles.highlighted]: sticky && isHighlighted,
                 [styles.sticky]: sticky,
-                [layoutStyles.middle]: view === 'desktop' && modalWidth >= FOOTER_MEDIUM_BREAKPOINT,
             })}
-            data-test-id={dataTestId || getDataTestId(responsiveContext?.dataTestId, 'footer')}
+            data-test-id={dataTestId}
             data-name='modalFooterDesktop'
         >
             {children}

diff --git a/packages/universal-modal/src/components/footer/index.ts b/packages/universal-modal/src/components/footer/index.ts
@@ -1,3 +1,6 @@
+export { FooterResponsive } from './Component.responsive';
+export type { FooterResponsiveProps } from './Component.responsive';
+
 export { FooterDesktop } from './Component.desktop';
 export type { FooterDesktopProps } from './Component.desktop';
 

diff --git a/packages/universal-modal/src/desktop/Component.desktop.tsx b/packages/universal-modal/src/desktop/Component.desktop.tsx
@@ -2,7 +2,7 @@ import React, { forwardRef, useState } from 'react';
 
 import { ContentDesktop } from '../components/content/Component.desktop';
 import { Controls, ControlsProps } from '../components/controls';
-import { FooterDesktop as Footer } from '../components/footer/Component.desktop';
+import { FooterDesktop } from '../components/footer/Component.desktop';
 import { HeaderDesktop } from '../components/header';
 import { ResponsiveContext } from '../ResponsiveContext';
 import { TResponsiveModalContext } from '../typings';
@@ -69,6 +69,6 @@ export const UniversalModalDesktopComponent = forwardRef<
 export const UniversalModalDesktop = Object.assign(UniversalModalDesktopComponent, {
     Header: HeaderDesktop,
     Content: ContentDesktop,
-    Footer,
+    Footer: FooterDesktop,
     Controls: Controls as React.FC<Omit<ControlsProps, 'mobileLayout'>>,
 });
diff --git a/packages/universal-modal/src/docs/development.mdx b/packages/universal-modal/src/docs/development.mdx
@@ -54,8 +54,8 @@ import type { ControlsProps } from '@alfalab/core-components/universal-modal';
 import { HeaderResponsive, HeaderDesktop, HeaderMobile } from '@alfalab/core-components/universal-modal';
 import type { HeaderResponsiveProps, HeaderPropsDesktop, HeaderPropsMobile } from '@alfalab/core-components/universal-modal';
 
-import { FooterDesktop, FooterMobile } from '@alfalab/core-components/universal-modal';
-import type { FooterDesktopProps, FooterMobileProps } from '@alfalab/core-components/universal-modal';
+import { FooterResponsive, FooterDesktop, FooterMobile } from '@alfalab/core-components/universal-modal';
+import type { FooterResponsiveProps, FooterDesktopProps, FooterMobileProps } from '@alfalab/core-components/universal-modal';
 ```
 
 Из индекса импортируется responsive версия компонента.

diff --git a/packages/universal-modal/src/index.ts b/packages/universal-modal/src/index.ts
@@ -24,5 +24,9 @@ export type {
     HeaderPropsMobile,
 } from './components/header';
 
-export { FooterDesktop, FooterMobile } from './components/footer';
-export type { FooterDesktopProps, FooterMobileProps } from './components/footer';
+export { FooterResponsive, FooterDesktop, FooterMobile } from './components/footer';
+export type {
+    FooterResponsiveProps,
+    FooterDesktopProps,
+    FooterMobileProps,
+} from './components/footer';
diff --git a/packages/universal-modal/src/mobile/Component.mobile.tsx b/packages/universal-modal/src/mobile/Component.mobile.tsx
@@ -5,7 +5,7 @@ import { BaseModal } from '@alfalab/core-components-base-modal';
 
 import { ContentMobile } from '../components/content/Component.mobile';
 import { Controls, ControlsProps } from '../components/controls';
-import { FooterMobile as Footer } from '../components/footer/Component.mobile';
+import { FooterMobile } from '../components/footer/Component.mobile';
 import { HeaderMobile } from '../components/header';
 import { ResponsiveContext } from '../ResponsiveContext';
 import { TResponsiveModalContext } from '../typings';
@@ -57,6 +57,6 @@ export const UniversalModalMobileComponent = forwardRef<HTMLDivElement, Universa
 export const UniversalModalMobile = Object.assign(UniversalModalMobileComponent, {
     Header: HeaderMobile,
     Content: ContentMobile,
-    Footer,
+    Footer: FooterMobile,
     Controls: Controls as React.FC<Omit<ControlsProps, 'mobileLayout'>>,
 });
diff --git a/packages/universal-modal/src/utils/createResponsive.tsx b/packages/universal-modal/src/utils/createResponsive.tsx