feat: universal modal refactor

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

Hide file tree

Showing 6 changed files with 11 additions and 19 deletions.
diff --git a/packages/universal-modal/src/ResponsiveContext.ts b/packages/universal-modal/src/ResponsiveContext.ts
@@ -1,5 +1,5 @@
-import React from 'react';
+import { createContext } from 'react';
 
 import type { TResponsiveModalContext } from './typings';
 
-export const ResponsiveContext = React.createContext<TResponsiveModalContext>(null);
+export const ResponsiveContext = createContext<TResponsiveModalContext>(null);
diff --git a/packages/universal-modal/src/desktop/Component.desktop.tsx b/packages/universal-modal/src/desktop/Component.desktop.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, useState } from 'react';
+import React, { forwardRef, useMemo, useState } from 'react';
 
 import { ContentDesktop } from '../components/content/Component.desktop';
 import { Controls, ControlsProps } from '../components/controls';
@@ -19,18 +19,16 @@ export const UniversalModalDesktopComponent = forwardRef<
     const [modalHeaderHighlighted, setModalHeaderHighlighted] = useState<boolean>(false);
     const [modalFooterHighlighted, setModalFooterHighlighted] = useState<boolean>(false);
 
-    const contextValue = React.useMemo<TResponsiveModalContext>(
+    const contextValue = useMemo<TResponsiveModalContext>(
         () => ({
-            view: 'desktop',
-            dataTestId,
             modalWidth,
             modalHeaderHighlighted,
             modalFooterHighlighted,
             setModalWidth,
             setModalHeaderHighlighted,
             setModalFooterHighlighted,
         }),
-        [dataTestId, modalWidth, modalHeaderHighlighted, modalFooterHighlighted],
+        [modalWidth, modalHeaderHighlighted, modalFooterHighlighted],
     );
 
     const renderContent = () => {

diff --git a/packages/universal-modal/src/desktop/components/buttons/arrow-button/arrow-button.tsx b/packages/universal-modal/src/desktop/components/buttons/arrow-button/arrow-button.tsx
@@ -1,6 +1,6 @@
 import React, { FC, MouseEvent } from 'react';
 
-import { Button } from '@alfalab/core-components-button';
+import { ButtonDesktop } from '@alfalab/core-components-button/desktop';
 import { Typography } from '@alfalab/core-components-typography';
 import { ArrowLeftMediumMIcon } from '@alfalab/icons-glyph/ArrowLeftMediumMIcon';
 
@@ -14,7 +14,7 @@ export const ArrowButtonDesktop: FC<ArrowButtonDesktopProps> = (props) => {
     const { onClick } = props;
 
     return (
-        <Button
+        <ButtonDesktop
             shape='rounded'
             size={48}
             leftAddons={<ArrowLeftMediumMIcon />}
@@ -24,6 +24,6 @@ export const ArrowButtonDesktop: FC<ArrowButtonDesktopProps> = (props) => {
             <Typography.Text view='primary-large' weight='medium'>
                 Назад
             </Typography.Text>
-        </Button>
+        </ButtonDesktop>
     );
 };
diff --git a/packages/universal-modal/src/desktop/components/buttons/cross-button/cross-button.tsx b/packages/universal-modal/src/desktop/components/buttons/cross-button/cross-button.tsx
@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 
-import { Button } from '@alfalab/core-components-button';
+import { ButtonDesktop } from '@alfalab/core-components-button/desktop';
 import { CrossMediumMIcon } from '@alfalab/icons-glyph/CrossMediumMIcon';
 
 import styles from './cross-button.module.css';
@@ -13,7 +13,7 @@ export const CrossButtonDesktop: FC<CrossButtonProps> = (props) => {
     const { onClick } = props;
 
     return (
-        <Button
+        <ButtonDesktop
             leftAddons={<CrossMediumMIcon />}
             size={48}
             shape='rounded'

diff --git a/packages/universal-modal/src/mobile/Component.mobile.tsx b/packages/universal-modal/src/mobile/Component.mobile.tsx
@@ -21,12 +21,10 @@ export const UniversalModalMobileComponent = forwardRef<HTMLDivElement, Universa
         const [modalHeaderHighlighted, setModalHeaderHighlighted] = useState<boolean>(false);
         const contextValue = useMemo<TResponsiveModalContext>(
             () => ({
-                view: 'mobile',
-                dataTestId,
                 modalHeaderHighlighted,
                 setModalHeaderHighlighted,
             }),
-            [dataTestId, modalHeaderHighlighted],
+            [modalHeaderHighlighted],
         );
 
         const renderContent = () => (

diff --git a/packages/universal-modal/src/typings.ts b/packages/universal-modal/src/typings.ts
@@ -1,11 +1,7 @@
 import { UniversalModalDesktopProps } from './desktop/types/props';
 import { UniversalModalMobileProps } from './mobile/types/props';
 
-export type View = 'desktop' | 'mobile';
-
 export type TResponsiveModalContext = {
-    view: View;
-    dataTestId?: string;
     modalWidth?: number;
     modalHeaderHighlighted?: boolean;
     modalFooterHighlighted?: boolean;