Add support for toast.custom

- Render any JSX without additional styles
timolins · Mar 22, 2021 · b7509bd · b7509bd
1 parent e58d6a8
commit b7509bd
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 10 deletions.
diff --git a/src/components/toast-bar.tsx b/src/components/toast-bar.tsx
@@ -1,9 +1,7 @@
 import * as React from 'react';
 import { styled, keyframes } from 'goober';
 
-import { Toast, ToastPosition, resolveValueOrFunction } from '../core/types';
-import { Indicator } from './indicator';
-import { AnimatedIconWrapper } from './icon-wrapper';
+import { Toast, ToastPosition, resolveValue } from '../core/types';
 
 const enterAnimation = (factor: number) => `
 0% {transform: translate3d(0,${factor * -200}%,0) scale(.6); opacity:.5;}
@@ -91,7 +89,7 @@ export const ToastBar: React.FC<ToastBarProps> = React.memo(
       >
         {renderIcon()}
         <Message role={toast.role} aria-live={toast.ariaLive}>
-          {resolveValueOrFunction(toast.message, toast)}
+          {resolveValue(toast.message, toast)}
         </Message>
       </ToastBarBase>
     );

diff --git a/src/components/toaster.tsx b/src/components/toaster.tsx
@@ -3,7 +3,12 @@ import { setup } from 'goober';
 
 import { useToaster } from '../core/use-toaster';
 import { ToastBar } from './toast-bar';
-import { ToastPosition, DefaultToastOptions, Toast } from '../core/types';
+import {
+  ToastPosition,
+  DefaultToastOptions,
+  Toast,
+  resolveValue,
+} from '../core/types';
 import { createRectRef } from '../core/utils';
 
 setup(React.createElement);
@@ -97,7 +102,9 @@ export const Toaster: React.FC<ToasterProps> = ({
               ...positionStyle,
             }}
           >
-            {renderToast ? (
+            {t.type === 'custom' ? (
+              resolveValue(t.message, t)
+            ) : renderToast ? (
               renderToast(t)
             ) : (
               <ToastBar toast={t} position={toastPosition} />

diff --git a/src/core/store.ts b/src/core/store.ts
@@ -173,6 +173,7 @@ const defaultTimeouts: {
   error: 4000,
   success: 2000,
   loading: Infinity,
+  custom: 30000,
 };
 
 export const useStore = (toastOptions: DefaultToastOptions = {}): State => {

diff --git a/src/core/toast.ts b/src/core/toast.ts
@@ -45,6 +45,7 @@ const toast = (message: Message, opts?: ToastOptions) =>
 toast.error = createHandler('error');
 toast.success = createHandler('success');
 toast.loading = createHandler('loading');
+toast.custom = createHandler('custom');
 
 toast.dismiss = (toastId?: string) => {
   dispatch({
@@ -69,15 +70,15 @@ toast.promise = <T>(
 
   promise
     .then((p) => {
-      toast.success(resolveValueOrFunction(msgs.success, p), {
+      toast.success(resolveValue(msgs.success, p), {
         id,
         ...opts,
         ...opts?.success,
       });
       return p;
     })
     .catch((e) => {
-      toast.error(resolveValueOrFunction(msgs.error, e), {
+      toast.error(resolveValue(msgs.error, e), {
         id,
         ...opts,
         ...opts?.error,

diff --git a/src/core/types.ts b/src/core/types.ts
@@ -9,7 +9,7 @@ export type ToastPosition =
   | 'bottom-center'
   | 'bottom-right';
 
-export type Renderable = JSX.Element | string | number | null;
+export type Renderable = JSX.Element | string | null;
 
 export interface IconTheme {
   primary: string;
@@ -26,7 +26,7 @@ const isFunction = <TValue, TArg>(
 ): valOrFunction is ValueFunction<TValue, TArg> =>
   typeof valOrFunction === 'function';
 
-export const resolveValueOrFunction = <TValue, TArg>(
+export const resolveValue = <TValue, TArg>(
   valOrFunction: ValueOrFunction<TValue, TArg>,
   arg: TArg
 ): TValue => (isFunction(valOrFunction) ? valOrFunction(arg) : valOrFunction);