refactor: enhance maintainability and reusability

example/src/main.tsx

@@ -8,7 +8,6 @@ import.meta.globEager('/node_modules/react-simple-toasts/dist/theme/*.css');
 
 toastConfig({
   theme: 'dark',
-  duration: null,
 });
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(<App />);

src/component/toast-container.tsx

@@ -0,0 +1,61 @@
+import React, { cloneElement, Fragment } from 'react';
+import { reverse } from '../lib/utils';
+import { ToastComponent, ToastEnterEvent } from '../type/common';
+
+export interface ToastContainerProps {
+  toastComponentList: ToastComponent[];
+  onToastEnter: () => void
+}
+
+function ToastContainer(props: ToastContainerProps) {
+  const { toastComponentList, onToastEnter } = props
+
+  const handleToastEnter = (t: ToastComponent, e: ToastEnterEvent) => {
+    toastComponentList.forEach((toast) => {
+      if (toast.id !== t.id) return;
+      toast.startCloseTimer();
+      toast.height = e.height;
+    });
+
+    onToastEnter();
+  };
+
+  return (
+    <>
+      {toastComponentList.map((t) => {
+        const toastComponents = t.position.includes('top')
+          ? reverse(toastComponentList)
+          : toastComponentList;
+
+        const currentIndex = toastComponents.findIndex((toast) => toast.id === t.id);
+        const bottomToasts = toastComponents
+          .slice(currentIndex + 1)
+          .filter((toast) => toast.position === t.position && !toast.isExit);
+
+        const bottomToastsHeight = bottomToasts.reduce((acc, toast) => {
+          return acc + (toast.height ?? 0) + t.gap;
+        }, 0);
+
+        const deltaOffsetX = t.position.includes('left') || t.position.includes('right') ? '0%' : '-50%';
+        const offsetYAlpha = t.position.includes('top') ? 1 : -1;
+        const baseOffsetY = bottomToastsHeight * offsetYAlpha;
+        const deltaOffsetY =
+          t.position === 'center' ? `calc(-50% - ${baseOffsetY * -1}px)` : `${baseOffsetY}px`;
+
+        return (
+          <Fragment key={t.id}>
+            {cloneElement(t.component, {
+              isExit: t.isExit,
+              deltaOffsetX,
+              deltaOffsetY,
+              _onEnter: (event: ToastEnterEvent) => handleToastEnter(t, event),
+            })}
+          </Fragment>
+        );
+      })}
+    </>
+  );
+}
+
+
+export default ToastContainer

src/component/toast-message.tsx

@@ -28,38 +28,37 @@ function Loading({ color }: LoadingProps) {
 export interface ToastMessageProps
   extends Pick<
     ToastOptions,
-    'className' | 'clickable' | 'position' | 'render' | 'theme' | 'onClick'
+    'className' | 'clickable' | 'position' | 'render' | 'theme' | 'onClick' | 'clickClosable' | 'offsetX' | 'offsetY' | 'zIndex' | 'loading'
   > {
   id: number;
   message: ReactNode;
   isExit?: boolean;
-  offsetX?: string;
-  offsetY?: string;
-  baseOffsetX?: number;
-  baseOffsetY?: number;
-  zIndex?: number;
-  loading?: boolean | Promise<unknown>;
+  deltaOffsetX?: string;
+  deltaOffsetY?: string;
   _onEnter?: (e: ToastEnterEvent) => void;
 }
 
 function ToastMessage({
   id,
   message,
   className,
-  clickable,
+  clickable: clickableProp,
+  clickClosable,
   position,
   isExit,
   render,
   theme,
   offsetX,
   offsetY,
-  baseOffsetX,
-  baseOffsetY,
+  deltaOffsetX,
+  deltaOffsetY,
   zIndex,
   loading,
   onClick,
   _onEnter,
 }: ToastMessageProps): ReactElement {
+  const clickable = clickableProp || clickClosable;
+
   const messageDOM = useRef<HTMLDivElement>(null);
   const hasTopPosition = position?.includes('top');
   const hasBottomPosition = position?.includes('bottom');
@@ -69,23 +68,23 @@ function ToastMessage({
   const isCenterPosition = position === ToastPosition.CENTER;
   const [isEnter, setIsEnter] = useState(false);
   const [messageStyle, setMessageStyle] = useState<React.CSSProperties>({
-    transform: `translate(${offsetX}, ${
+    transform: `translate(${deltaOffsetX}, ${
       isCenterPosition
         ? 'calc(50% - 20px)'
-        : `${parseInt(offsetY || '0') + 20 * (hasTopPosition ? -1 : 1)}px`
+        : `${parseInt(deltaOffsetY || '0') + 20 * (hasTopPosition ? -1 : 1)}px`
     })`,
   });
   const [localLoading, setLocalLoading] = useState<boolean>(!!loading);
   const [loadingColor, setLoadingColor] = useState<string>();
 
-  const top = isCenterPosition ? '50%' : hasTopPosition ? baseOffsetY : undefined;
-  const bottom = hasBottomPosition ? baseOffsetY : undefined;
-  const right = hasRightPosition ? baseOffsetX : undefined;
+  const top = isCenterPosition ? '50%' : hasTopPosition ? offsetY : undefined;
+  const bottom = hasBottomPosition ? offsetY : undefined;
+  const right = hasRightPosition ? offsetX : undefined;
   const left =
-    hasCenterPosition || isCenterPosition ? '50%' : hasLeftPosition ? baseOffsetX : undefined;
+    hasCenterPosition || isCenterPosition ? '50%' : hasLeftPosition ? offsetX : undefined;
 
   useIsomorphicLayoutEffect(() => {
-    const transform = `translate(${offsetX}, ${offsetY})`;
+    const transform = `translate(${deltaOffsetX}, ${deltaOffsetY})`;
 
     setMessageStyle({
       top,
@@ -96,7 +95,7 @@ function ToastMessage({
       transform,
       WebkitTransform: transform,
     });
-  }, [offsetX, offsetY, zIndex, top, right, bottom, left]);
+  }, [deltaOffsetX, deltaOffsetY, zIndex, top, right, bottom, left]);
 
   useIsomorphicLayoutEffect(() => {
     if (messageDOM.current?.clientHeight == null || isEnter) return;