Scope aria props and add render function support

timolins · May 16, 2021 · f1d367c · f1d367c
1 parent 0363011
commit f1d367c
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 12 deletions.
diff --git a/src/components/toast-bar.tsx b/src/components/toast-bar.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { styled, keyframes } from 'goober';
 
-import { Toast, ToastPosition, resolveValue } from '../core/types';
+import { Toast, ToastPosition, resolveValue, Renderable } from '../core/types';
 import { ToastIcon } from './toast-icon';
 import { prefersReducedMotion } from '../core/utils';
 
@@ -41,6 +41,10 @@ interface ToastBarProps {
   toast: Toast;
   position?: ToastPosition;
   style?: React.CSSProperties;
+  children?: (components: {
+    icon: Renderable;
+    message: Renderable;
+  }) => Renderable;
 }
 
 const getAnimationStyle = (
@@ -59,11 +63,11 @@ const getAnimationStyle = (
         animation: `${keyframes`${exitAnimation(
           factor
         )}`} 0.4s forwards cubic-bezier(.06,.71,.55,1)`,
-        pointerEvents: 'none',
       };
 };
 
 export const ToastBar: React.FC<ToastBarProps> = React.memo(
+  ({ toast, position, style, children }) => {
     const animationStyle: React.CSSProperties = toast?.height
       ? prefersReducedMotion()
         ? {}
@@ -73,6 +77,13 @@ export const ToastBar: React.FC<ToastBarProps> = React.memo(
           )
       : { opacity: 0 };
 
+    const icon = <ToastIcon toast={toast} />;
+    const message = (
+      <Message {...toast.ariaProps}>
+        {resolveValue(toast.message, toast)}
+      </Message>
+    );
+
     return (
       <ToastBarBase
         className={toast.className}
@@ -82,10 +93,12 @@ export const ToastBar: React.FC<ToastBarProps> = React.memo(
           ...toast.style,
         }}
       >
-        <ToastIcon toast={toast} />
-        <Message role={toast.role} aria-live={toast.ariaLive}>
-          {resolveValue(toast.message, toast)}
-        </Message>
+        {typeof children === 'function'
+          ? children({
+              icon,
+              message,
+            })
+          : [icon, message]}
       </ToastBarBase>
     );
   }

diff --git a/src/core/toast.ts b/src/core/toast.ts
@@ -22,8 +22,10 @@ const createToast = (
   createdAt: Date.now(),
   visible: true,
   type,
-  role: 'status',
-  ariaLive: 'polite',
+  ariaProps: {
+    role: 'status',
+    'aria-live': 'polite',
+  },
   message,
   pauseDuration: 0,
   ...opts,

diff --git a/src/core/types.ts b/src/core/types.ts
@@ -40,8 +40,10 @@ export interface Toast {
   pauseDuration: number;
   position?: ToastPosition;
 
-  role: 'status' | 'alert';
-  ariaLive: 'assertive' | 'off' | 'polite';
+  ariaProps: {
+    role: 'status' | 'alert';
+    'aria-live': 'assertive' | 'off' | 'polite';
+  };
 
   style?: CSSProperties;
   className?: string;
@@ -58,8 +60,7 @@ export type ToastOptions = Partial<
     | 'id'
     | 'icon'
     | 'duration'
-    | 'role'
-    | 'ariaLive'
+    | 'ariaProps'
     | 'className'
     | 'style'
     | 'position'