fix(plasma-new-hope): fix no scroll in Modal

salute-developers · Nov 10, 2023 · 68bf296 · 68bf296
1 parent 2fada60
commit 68bf296
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 6 deletions.
diff --git a/packages/plasma-new-hope/src/components/Modal/Modal/Modal.styles.ts b/packages/plasma-new-hope/src/components/Modal/Modal/Modal.styles.ts
@@ -1,7 +1,9 @@
 import { css } from '@linaria/core';
 
 export const noScroll = css`
-    :global(body) {
-        overflow-y: hidden;
+    :global() {
+        body.disable-scroll {
+            overflow-y: hidden;
+        }
     }
 `;
diff --git a/packages/plasma-new-hope/src/components/Modal/Modal/Modal.tsx b/packages/plasma-new-hope/src/components/Modal/Modal/Modal.tsx
@@ -39,6 +39,7 @@ export const modalRoot = (Root: RootProps<HTMLInputElement, ModalProps>) =>
                 popupInfo,
                 children,
                 view,
+                isOpen,
                 ...rest
             },
             outerRootRef,
@@ -50,11 +51,12 @@ export const modalRoot = (Root: RootProps<HTMLInputElement, ModalProps>) =>
             const uniqId = useUniqId();
             const innerId = id || uniqId;
 
-            const { modalInfo } = useModal({ id: innerId, closeOnEsc, onEscKeyDown, onClose, popupInfo });
+            const { modalInfo } = useModal({ id: innerId, isOpen, closeOnEsc, onEscKeyDown, onClose, popupInfo });
 
             return (
                 <Popup
                     id={id}
+                    isOpen={isOpen}
                     ref={innerRef}
                     popupInfo={modalInfo}
                     withAnimation={withAnimation}

diff --git a/packages/plasma-new-hope/src/components/Modal/Modal/Modal.types.ts b/packages/plasma-new-hope/src/components/Modal/Modal/Modal.types.ts
@@ -42,5 +42,5 @@ export type ModalBaseRootProps = PopupRootProps & Pick<ModalProps, 'initialFocus
 export type ModalOverlayProps = Pick<PopupRootProps, 'id' | 'zIndex'> &
     Pick<ModalProps, 'withBlur' | 'closeOnOverlayClick' | 'onOverlayClick' | 'onClose'>;
 
-export type ModalHookArgs = Pick<PopupHookArgs, 'id' | 'popupInfo'> &
+export type ModalHookArgs = Pick<PopupHookArgs, 'id' | 'popupInfo' | 'isOpen'> &
     Pick<ModalProps, 'closeOnEsc' | 'onEscKeyDown' | 'onClose'>;
diff --git a/packages/plasma-new-hope/src/components/Modal/Modal/ModalContext.tsx b/packages/plasma-new-hope/src/components/Modal/Modal/ModalContext.tsx
@@ -14,6 +14,10 @@ const getModals = (items: ModalInfo[]) => {
     return items.filter((item: ModalInfo) => item?.info?.isModal);
 };
 
+export const hasModals = (items: ModalInfo[]) => {
+    return getModals(items).length > 0;
+};
+
 export const getIdLastModal = (items: ModalInfo[]) => {
     const modals = getModals(items);
     if (!modals.length) {

diff --git a/packages/plasma-new-hope/src/components/Modal/Modal/hooks/useModal.ts b/packages/plasma-new-hope/src/components/Modal/Modal/hooks/useModal.ts
@@ -1,12 +1,12 @@
 import { useCallback, useEffect } from 'react';
 
-import { ModalInfo, getIdLastModal } from '../ModalContext';
+import { ModalInfo, getIdLastModal, hasModals } from '../ModalContext';
 import { ModalHookArgs } from '../Modal.types';
 import { usePopupContext } from '../../../Popup';
 
 const ESCAPE_KEYCODE = 27;
 
-export const useModal = ({ id, popupInfo, onEscKeyDown, onClose, closeOnEsc = true }: ModalHookArgs) => {
+export const useModal = ({ id, isOpen, popupInfo, onEscKeyDown, onClose, closeOnEsc = true }: ModalHookArgs) => {
     const popupController = usePopupContext();
 
     // При ESC закрывает текущее окно, если это возможно
@@ -36,6 +36,15 @@ export const useModal = ({ id, popupInfo, onEscKeyDown, onClose, closeOnEsc = tr
         };
     }, [onClose, onEscKeyDown, popupController.items, closeOnEsc]);
 
+    // linaria не поддерживает динамический global
+    useEffect(() => {
+        if (isOpen) {
+            document.body.classList.add('disable-scroll');
+        } else if (!hasModals(popupController.items)) {
+            document.body.classList.remove('disable-scroll');
+        }
+    }, [isOpen, popupController.items]);
+
     const modalInfo: ModalInfo = {
         id,
         info: {