Merge pull request #1215 from core-ds/feat/portal_container

feat/portal_container
core-ds · Jun 28, 2024 · 47f3263 · 47f3263
2 parents 7f79f9f + 09d8f24
commit 47f3263
Show file tree

Hide file tree

Showing 11 changed files with 122 additions and 45 deletions.
diff --git a/.changeset/eleven-poems-fry.md b/.changeset/eleven-poems-fry.md
@@ -0,0 +1,6 @@
+---
+'@alfalab/core-components-portal': minor
+'@alfalab/core-components-shared': minor
+---
+
+Добавлена возможность переопределять рендер контейнер для группы элементов использующих Portal
diff --git a/packages/portal/package.json b/packages/portal/package.json
@@ -15,6 +15,7 @@
         "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "tslib": "^2.4.0"
+        "tslib": "^2.4.0",
+        "@alfalab/core-components-shared": "^0.10.0"
     }
 }
diff --git a/packages/portal/src/Component.test.tsx b/packages/portal/src/Component.test.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 import { Portal } from './index';
 import { PORTAL_CONTAINER_ATTRIBUTE } from './utils';
+import { PortalContext } from '@alfalab/core-components-shared';
 
 describe('Portal tests', () => {
     it('should render in a different node', () => {
@@ -63,4 +64,23 @@ describe('Portal tests', () => {
 
         expect(document.querySelector('#portal-container')).toContainElement(portalChild);
     });
+
+    it('render to element based on portal context', () => {
+        const textContent = 'Text content';
+        const getPortalContainer = () => document.querySelector('#portal-container');
+
+        render(
+            <>
+                <div data-test-id='portal-container' id='portal-container'></div>
+                <PortalContext.Provider value={getPortalContainer}>
+                    <Portal>
+                        <span>{textContent}</span>
+                    </Portal>
+                </PortalContext.Provider>
+            </>,
+        );
+
+        const portalChild = screen.queryByText(textContent);
+        expect(screen.queryByTestId('portal-container')).toContainElement(portalChild);
+    });
 });
diff --git a/packages/portal/src/Component.tsx b/packages/portal/src/Component.tsx
@@ -1,7 +1,8 @@
 import { forwardRef, ReactNode, useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 
-import { getDefaultPortalContainer, setRef } from './utils';
+import { usePortalContainer } from './hooks/usePortalContainer';
+import { setRef } from './utils';
 
 export type PortalProps = {
     /** Контент */
@@ -17,30 +18,32 @@ export type PortalProps = {
      */
     immediateMount?: boolean;
 };
-export const Portal = forwardRef<Element, PortalProps>(
-    ({ getPortalContainer = getDefaultPortalContainer, immediateMount = false, children }, ref) => {
-        const [mountNode, setMountNode] = useState<Element | null>(() =>
-            typeof window !== 'undefined' && immediateMount ? getPortalContainer() : null,
-        );
-
-        useEffect(() => {
-            setMountNode(getPortalContainer());
-        }, [getPortalContainer]);
-
-        useEffect(() => {
-            if (mountNode) {
-                setRef(ref, mountNode);
-
-                return () => {
-                    setRef(ref, null);
-                };
-            }
-
-            return () => null;
-        }, [ref, mountNode]);
-
-        return mountNode ? createPortal(children, mountNode) : mountNode;
-    },
-);
+export const Portal = forwardRef<Element, PortalProps>((props, ref) => {
+    const portalContainer = usePortalContainer();
+
+    const { getPortalContainer = portalContainer, immediateMount = false, children } = props;
+
+    const [mountNode, setMountNode] = useState<Element | null>(() =>
+        typeof window !== 'undefined' && immediateMount ? getPortalContainer() : null,
+    );
+
+    useEffect(() => {
+        setMountNode(getPortalContainer());
+    }, [getPortalContainer]);
+
+    useEffect(() => {
+        if (mountNode) {
+            setRef(ref, mountNode);
+
+            return () => {
+                setRef(ref, null);
+            };
+        }
+
+        return () => null;
+    }, [ref, mountNode]);
+
+    return mountNode ? createPortal(children, mountNode) : mountNode;
+});
 
 Portal.displayName = 'Portal';
diff --git a/packages/portal/src/docs/development.mdx b/packages/portal/src/docs/development.mdx
@@ -7,6 +7,22 @@ import { Portal } from '../index';
 import { Portal } from '@alfalab/core-components/portal';
 ```
 
+## Глобальное переопределение контейнера для рендера
+
+Если вам необходимо переопределить рендер контейнер для группы элементов, вы можете использовать следующую обертку:
+
+
+```jsx
+import {PortalContext} from '@alfalab/core-components/shared';
+
+<PortalContext.Provider value={() => document.querySelector('.foobar')}>
+    ...
+</PortalContext.Provider>;
+```
+
+Все компоненты внутри обертки, которые используют Portal, будут ссылаться на один и тот же DOM элемент.
+Таким образом, вам не потребуется отдельно переопределять контейнер с помощью пропса getPortalContainer.
+
 ## Свойства
 
 <ArgTypes of={Portal} />
diff --git a/packages/portal/src/hooks/usePortalContainer.tsx b/packages/portal/src/hooks/usePortalContainer.tsx
@@ -0,0 +1,15 @@
+import { useContext } from 'react';
+
+import { PortalContext } from '@alfalab/core-components-shared';
+
+import { getDefaultPortalContainer } from '../utils';
+
+export const usePortalContainer = () => {
+    const getContextPortalContainer = useContext(PortalContext);
+
+    if (getContextPortalContainer()) {
+        return getContextPortalContainer;
+    }
+
+    return getDefaultPortalContainer;
+};
diff --git a/packages/portal/tsconfig.json b/packages/portal/tsconfig.json
@@ -4,5 +4,8 @@
     "compilerOptions": {
         "outDir": "dist",
         "rootDirs": ["src"]
-    }
+    },
+  "references": [
+    { "path": "../shared" },
+  ]
 }
diff --git a/packages/shared/src/context/PortalContext/PortalContext.ts b/packages/shared/src/context/PortalContext/PortalContext.ts
@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+type PortalContextType = () => Element | null;
+
+export const PortalContext = createContext<PortalContextType>(() => null);
diff --git a/packages/shared/src/context/PortalContext/index.ts b/packages/shared/src/context/PortalContext/index.ts
@@ -0,0 +1 @@
+export { PortalContext } from './PortalContext';
diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts
@@ -9,3 +9,4 @@ export * from './hooks';
 export * from './os';
 export * from './dom';
 export * from './exhaustiveCheck';
+export * from './context/PortalContext';
diff --git a/packages/toast-plate/src/component.screenshots.test.tsx b/packages/toast-plate/src/component.screenshots.test.tsx
@@ -24,14 +24,17 @@ describe('ToastPlate | main props', () => {
                         componentName: 'ToastPlate',
                         knobs: {
                             children: 'Вам одобрено. Согласитесь на предложение',
-                            badge: ['positive-checkmark',
-                            'negative-cross',
-                            'negative-alert',
-                            'negative-block',
-                            'attention-alert',
-                            'neutral-information',
-                            'neutral-operation',
-                            'neutral-cross', ''],
+                            badge: [
+                                'positive-checkmark',
+                                'negative-cross',
+                                'negative-alert',
+                                'negative-block',
+                                'attention-alert',
+                                'neutral-information',
+                                'neutral-operation',
+                                'neutral-cross',
+                                '',
+                            ],
                             title: '',
                             hasCloser: [false, true],
                         },
@@ -44,14 +47,17 @@ describe('ToastPlate | main props', () => {
                         componentName: 'ToastPlate',
                         knobs: {
                             children: 'Вам одобрено. Согласитесь на предложение',
-                            badge: ['positive-checkmark',
-                            'negative-cross',
-                            'negative-alert',
-                            'negative-block',
-                            'attention-alert',
-                            'neutral-information',
-                            'neutral-operation',
-                            'neutral-cross', ''],
+                            badge: [
+                                'positive-checkmark',
+                                'negative-cross',
+                                'negative-alert',
+                                'negative-block',
+                                'attention-alert',
+                                'neutral-information',
+                                'neutral-operation',
+                                'neutral-cross',
+                                '',
+                            ],
                             title: 'Поздравляем, полный успех',
                             hasCloser: [false, true],
                         },
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { PortalContext } from './PortalContext';