Refactor Indicator to ToastIcon component

- Also export resolveValue to render custom JSX content

src/components/toast-bar.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { styled, keyframes } from 'goober';
 
 import { Toast, ToastPosition, resolveValue } from '../core/types';
+import { ToastIcon } from './toast-icon';
 
 const enterAnimation = (factor: number) => `
 0% {transform: translate3d(0,${factor * -200}%,0) scale(.6); opacity:.5;}
@@ -38,6 +39,7 @@ const Message = styled('div')`
 interface ToastBarProps {
   toast: Toast;
   position: ToastPosition;
+  style?: React.CSSProperties;
 }
 
 const getAnimationStyle = (
@@ -61,33 +63,21 @@ const getAnimationStyle = (
 };
 
 export const ToastBar: React.FC<ToastBarProps> = React.memo(
-  ({ toast, position }) => {
+  ({ toast, position, style }) => {
     const animationStyle = toast?.height
       ? getAnimationStyle(position, toast.visible)
       : { opacity: 0 };
 
-    const renderIcon = () => {
-      const { icon, type, iconTheme } = toast;
-      if (icon !== undefined) {
-        if (typeof icon === 'string') {
-          return <AnimatedIconWrapper>{icon}</AnimatedIconWrapper>;
-        } else {
-          return icon;
-        }
-      }
-
-      return <Indicator theme={iconTheme} type={type} />;
-    };
-
     return (
       <ToastBarBase
         className={toast.className}
         style={{
           ...animationStyle,
+          ...style,
           ...toast.style,
         }}
       >
-        {renderIcon()}
+        <ToastIcon toast={toast} />
         <Message role={toast.role} aria-live={toast.ariaLive}>
           {resolveValue(toast.message, toast)}
         </Message>

src/components/toast-icon.tsx

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import { styled, keyframes } from 'goober';
+
+import { Toast } from '../core/types';
+import { ErrorIcon, ErrorTheme } from './error';
+import { LoaderIcon, LoaderTheme } from './loader';
+import { CheckmarkIcon, CheckmarkTheme } from './checkmark';
+
+const StatusWrapper = styled('div')`
+  position: absolute;
+`;
+
+const IndicatorWrapper = styled('div')`
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 20px;
+  min-height: 20px;
+`;
+
+const enter = keyframes`
+from {
+  transform: scale(0.6);
+  opacity: 0.4;
+}
+
+to {
+  transform: scale(1);
+  opacity: 1;
+}
+`;
+
+export const AnimatedIconWrapper = styled('div')`
+  position: relative;
+  transform: scale(0.6);
+  opacity: 0.4;
+  min-width: 20px;
+  animation: ${enter} 0.3s 0.12s cubic-bezier(0.175, 0.885, 0.32, 1.275)
+    forwards;
+`;
+
+export type IconThemes = Partial<{
+  success: CheckmarkTheme;
+  error: ErrorTheme;
+  loading: LoaderTheme;
+}>;
+
+export const ToastIcon: React.FC<{
+  toast: Toast;
+}> = ({ toast }) => {
+  const { icon, type, iconTheme } = toast;
+  if (icon !== undefined) {
+    if (typeof icon === 'string') {
+      return <AnimatedIconWrapper>{icon}</AnimatedIconWrapper>;
+    } else {
+      return icon;
+    }
+  }
+
+  if (type === 'blank') {
+    return null;
+  }
+
+  return (
+    <IndicatorWrapper>
+      <LoaderIcon {...iconTheme} />
+      {type !== 'loading' && (
+        <StatusWrapper>
+          {type === 'error' ? (
+            <ErrorIcon {...iconTheme} />
+          ) : (
+            <CheckmarkIcon {...iconTheme} />
+          )}
+        </StatusWrapper>
+      )}
+    </IndicatorWrapper>
+  );
+};

src/index.tsx

@@ -7,12 +7,10 @@ import {
 } from './core/types';
 export { useToaster } from './core/use-toaster';
 export { ToastBar } from './components/toast-bar';
+export { ToastIcon } from './components/toast-icon';
 export { Toaster } from './components/toaster';
 export { useStore as useToasterStore } from './core/store';
-
-export { CheckmarkIcon } from './components/checkmark';
-export { ErrorIcon } from './components/error';
-export { LoaderIcon } from './components/loader';
+export { resolveValue } from './core/types';
 
 export type ToastOptions = _ToastOptions;
 export type ToastPosition = _ToastPosition;