Move height ref to <Toaster/>

timolins · Mar 14, 2021 · 06e271c · 06e271c
1 parent 802fe9e
commit 06e271c
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 20 deletions.
diff --git a/src/components/toast-bar.tsx b/src/components/toast-bar.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { useCallback } from 'react';
 import { styled, keyframes } from 'goober';
 
 import { Toast, ToastPosition, resolveValueOrFunction } from '../core/types';
@@ -25,7 +24,6 @@ const ToastBarBase = styled('div', React.forwardRef)`
   will-change: transform;
   box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1), 0 3px 3px rgba(0, 0, 0, 0.05);
   max-width: 350px;
-  margin: 16px;
   pointer-events: auto;
   padding: 8px 10px;
   border-radius: 8px;
@@ -41,8 +39,6 @@ const Message = styled('div')`
 
 interface ToastBarProps {
   toast: Toast;
-  onHeight: (height: number) => void;
-
   position: ToastPosition;
 }
 
@@ -67,16 +63,7 @@ const getAnimationStyle = (
 };
 
 export const ToastBar: React.FC<ToastBarProps> = React.memo(
-  ({ toast, position, onHeight }) => {
-    const ref = useCallback((el: HTMLElement | null) => {
-      if (el) {
-        setTimeout(() => {
-          const boundingRect = el.getBoundingClientRect();
-          onHeight(boundingRect.height);
-        });
-      }
-    }, []);
-
+  ({ toast, position }) => {
     const animationStyle = toast?.height
       ? getAnimationStyle(position, toast.visible)
       : { opacity: 0 };
@@ -96,7 +83,6 @@ export const ToastBar: React.FC<ToastBarProps> = React.memo(
 
     return (
       <ToastBarBase
-        ref={ref}
         className={toast.className}
         style={{
           ...animationStyle,

diff --git a/src/components/toaster.tsx b/src/components/toaster.tsx
@@ -5,6 +5,7 @@ import CSS from 'csstype';
 import { useToaster } from '../core/use-toaster';
 import { ToastBar } from './toast-bar';
 import { ToastPosition, DefaultToastOptions } from '../core/types';
+import { createRectRef } from '../core/utils';
 
 setup(React.createElement);
 
@@ -70,19 +71,23 @@ export const Toaster: React.FC<ToasterProps> = ({
         });
         const positionStyle = getPositionStyle(position, offset);
 
+        const ref = t.height
+          ? undefined
+          : createRectRef((rect) => {
+              handlers.updateHeight(t.id, rect.height);
+            });
+
         return (
           <div
+            ref={ref}
             key={t.id}
             style={{
               zIndex: t.visible ? 9999 : undefined,
+              margin: 16,
               ...positionStyle,
             }}
           >
-            <ToastBar
-              onHeight={(height) => handlers.updateHeight(t.id, height)}
-              toast={t}
-              position={position}
-            />
+            <ToastBar toast={t} position={position} />
           </div>
         );
       })}

diff --git a/src/core/utils.ts b/src/core/utils.ts
@@ -4,3 +4,14 @@ export const genId = (() => {
     return (++count).toString();
   };
 })();
+
+export const createRectRef = (onRect: (rect: DOMRect) => void) => (
+  el: HTMLElement | null
+) => {
+  if (el) {
+    setTimeout(() => {
+      const boundingRect = el.getBoundingClientRect();
+      onRect(boundingRect);
+    });
+  }
+};