feat(toast): add portal

core-ds · Jan 21, 2021 · 439148d · 439148d
1 parent 9fed95d
commit 439148d
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 33 deletions.
diff --git a/packages/toast/package.json b/packages/toast/package.json
@@ -17,6 +17,7 @@
     },
     "dependencies": {
         "@alfalab/core-components-popover": "^1.4.0",
+        "@alfalab/core-components-portal": "^1.4.0",
         "@alfalab/core-components-toast-plate": "^1.0.0",
         "@alfalab/hooks": "^1.1.1",
         "classnames": "^2.2.6"

diff --git a/packages/toast/src/component.tsx b/packages/toast/src/component.tsx
@@ -3,11 +3,12 @@ import mergeRefs from 'react-merge-refs';
 import { useClickOutside, usePrevious } from '@alfalab/hooks';
 import { ToastPlate, ToastPlateProps } from '@alfalab/core-components-toast-plate';
 import { Popover, PopoverProps } from '@alfalab/core-components-popover';
+import { Portal } from '@alfalab/core-components-portal';
 
 import styles from './index.module.css';
 
 export type ToastProps = ToastPlateProps &
-    Pick<PopoverProps, 'anchorElement' | 'position' | 'offset' | 'open'> & {
+    Pick<PopoverProps, 'anchorElement' | 'position' | 'offset' | 'open' | 'getPortalContainer'> & {
         /**
          * Через сколько исчезнет компонент (ms)
          */
@@ -21,7 +22,16 @@ export type ToastProps = ToastPlateProps &
 
 export const Toast = forwardRef<HTMLDivElement, ToastProps>(
     (
-        { anchorElement, position, offset, open, onClose, autoCloseDelay = 3000, ...restProps },
+        {
+            anchorElement,
+            position,
+            offset,
+            open,
+            autoCloseDelay = 3000,
+            onClose,
+            getPortalContainer,
+            ...restProps
+        },
         ref,
     ) => {
         const plateRef = useRef<HTMLDivElement>(null);
@@ -45,17 +55,25 @@ export const Toast = forwardRef<HTMLDivElement, ToastProps>(
             };
         }, [autoCloseDelay, open, prevOpen, onClose]);
 
+        if (anchorElement) {
+            return (
+                <Popover
+                    open={open}
+                    anchorElement={anchorElement}
+                    position={position}
+                    offset={offset}
+                    popperClassName={styles.popover}
+                    transition={{ timeout: 150 }}
+                >
+                    <ToastPlate {...restProps} ref={mergeRefs([ref, plateRef])} onClose={onClose} />
+                </Popover>
+            );
+        }
+
         return (
-            <Popover
-                open={open}
-                anchorElement={anchorElement}
-                position={position}
-                offset={offset}
-                popperClassName={styles.popover}
-                transition={{ timeout: 150 }}
-            >
+            <Portal getPortalContainer={getPortalContainer}>
                 <ToastPlate {...restProps} ref={mergeRefs([ref, plateRef])} onClose={onClose} />
-            </Popover>
+            </Portal>
         );
     },
 );
diff --git a/packages/toast/src/index.module.css b/packages/toast/src/index.module.css
@@ -2,25 +2,4 @@
     border: none;
     border-radius: var(--toast-plate-border-radius);
     transition-timing-function: ease-in-out;
-    transition-property: opacity, transform;
-
-    &.entering {
-        opacity: 0;
-        transform: scale(0.98);
-    }
-
-    &.entered {
-        opacity: 1;
-        transform: scale(1);
-    }
-
-    &.exiting {
-        opacity: 0;
-        transform: scale(0.98);
-    }
-
-    &.exited {
-        opacity: 0;
-        transform: scale(0.98);
-    }
 }
diff --git a/packages/toast/tsconfig.json b/packages/toast/tsconfig.json
@@ -9,5 +9,5 @@
             "@alfalab/core-components-*": ["../*/src"]
         }
     },
-    "references": [{ "path": "../toast-plate" }, { "path": "../popover" }]
+    "references": [{ "path": "../toast-plate" }, { "path": "../popover" }, { "path": "../portal" }]
 }