fix #476

fkhadra · May 19, 2020 · 4209f0b · 4209f0b
1 parent ce818bc
commit 4209f0b
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 58 deletions.
diff --git a/src/components/ToastContainer.tsx b/src/components/ToastContainer.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { TransitionGroup } from 'react-transition-group';
 
 import { Toast } from './Toast';
 import { CloseButton } from './CloseButton';
@@ -23,43 +22,41 @@ export const ToastContainer: React.FC<ToastContainerProps> = props => {
       className={DEFAULT.CSS_NAMESPACE as string}
       id={containerId as string}
     >
-      <TransitionGroup component={null}>
-        {getToastToRender((position, toastList) => {
-          const swag = {
-            className: cx(
-              `${DEFAULT.CSS_NAMESPACE}__toast-container`,
-              `${DEFAULT.CSS_NAMESPACE}__toast-container--${position}`,
-              { [`${DEFAULT.CSS_NAMESPACE}__toast-container--rtl`]: rtl },
-              parseClassName(className)
-            ),
-            style:
-              toastList.length === 0
-                ? { ...style, pointerEvents: 'none' }
-                : { ...style }
-          } as any;
+      {getToastToRender((position, toastList) => {
+        const swag = {
+          className: cx(
+            `${DEFAULT.CSS_NAMESPACE}__toast-container`,
+            `${DEFAULT.CSS_NAMESPACE}__toast-container--${position}`,
+            { [`${DEFAULT.CSS_NAMESPACE}__toast-container--rtl`]: rtl },
+            parseClassName(className)
+          ),
+          style:
+            toastList.length === 0
+              ? { ...style, pointerEvents: 'none' }
+              : { ...style }
+        } as any;
 
-          return (
-            <ToastPositioner {...swag} key={`container-${position}`}>
-              {toastList.map(({ content, props: toastProps }) => {
-                return (
-                  <Toast
-                    {...toastProps}
-                    in={isToastActive(toastProps.toastId)}
-                    key={`toast-${toastProps.key}`}
-                    closeButton={
-                      toastProps.closeButton === true
-                        ? CloseButton
-                        : toastProps.closeButton
-                    }
-                  >
-                    {content}
-                  </Toast>
-                );
-              })}
-            </ToastPositioner>
-          );
-        })}
-      </TransitionGroup>
+        return (
+          <ToastPositioner {...swag} key={`container-${position}`}>
+            {toastList.map(({ content, props: toastProps }) => {
+              return (
+                <Toast
+                  {...toastProps}
+                  in={isToastActive(toastProps.toastId)}
+                  key={`toast-${toastProps.key}`}
+                  closeButton={
+                    toastProps.closeButton === true
+                      ? CloseButton
+                      : toastProps.closeButton
+                  }
+                >
+                  {content}
+                </Toast>
+              );
+            })}
+          </ToastPositioner>
+        );
+      })}
     </div>
   );
 };

diff --git a/src/hooks/useToastContainer.ts b/src/hooks/useToastContainer.ts
@@ -50,6 +50,7 @@ export interface ContainerInstance {
 }
 
 export function useToastContainer(props: ToastContainerProps) {
+  const [, forceUpdate] = useReducer(x => x + 1, 0);
   const [toast, dispatch] = useReducer(reducer, []);
   const containerRef = useRef(null);
   let toastCount = useKeeper(0);
@@ -274,6 +275,7 @@ export function useToastContainer(props: ToastContainerProps) {
 
   function removeFromCollection(toastId: Id) {
     delete collection[toastId];
+    forceUpdate();
   }
 
   function getToastToRender<T>(

diff --git a/src/utils/collapseToast.ts b/src/utils/collapseToast.ts
@@ -11,11 +11,6 @@ export function collapseToast(
   const height = node.scrollHeight;
   const style = node.style;
 
-  function onCollapseEnd() {
-    node.removeEventListener('transitionend', onCollapseEnd);
-    done();
-  }
-
   requestAnimationFrame(() => {
     style.minHeight = 'initial';
     style.height = height + 'px';
@@ -25,7 +20,7 @@ export function collapseToast(
       style.height = '0';
       style.padding = '0';
       style.margin = '0';
+      setTimeout(() => done(), duration as number);
     });
-    node.addEventListener('transitionend', onCollapseEnd);
   });
 }
diff --git a/src/utils/constant.ts b/src/utils/constant.ts
@@ -27,5 +27,6 @@ export const TYPE = {
 
 export const enum DEFAULT {
   COLLAPSE_DURATION = 300,
+  DEBOUNCE_DURATION = 50,
   CSS_NAMESPACE = 'Toastify'
 }
diff --git a/src/utils/cssTransition.tsx b/src/utils/cssTransition.tsx
@@ -86,11 +86,12 @@ export function cssTransition({
       }
     };
 
-    const onCollapseStart = () => {
+    const onExited = () => {
       const node = props.nodeRef.current;
+
       if (node) {
-        collapseToast(node, done, collapseDuration);
-        node.removeEventListener('animationend', onCollapseStart);
+        node.removeEventListener('animationend', onExited);
+        collapse ? collapseToast(node, done, collapseDuration) : done();
       }
     };
 
@@ -100,9 +101,7 @@ export function cssTransition({
         node.classList.add(exitClassName);
         node.style.animationFillMode = 'forwards';
         node.style.animationDuration = `${exitDuration}ms`;
-        collapse
-          ? node.addEventListener('animationend', onCollapseStart)
-          : done();
+        node.addEventListener('animationend', onExited);
       }
     };
 
@@ -114,7 +113,9 @@ export function cssTransition({
             ? 0
             : {
                 enter: enterDuration,
-                exit: collapse ? exitDuration + collapseDuration : exitDuration
+                exit: collapse
+                  ? exitDuration + collapseDuration
+                  : exitDuration + DEFAULT.DEBOUNCE_DURATION
               }
         }
         onEnter={onEnter}

diff --git a/test/utils/collapseToast.test.ts b/test/utils/collapseToast.test.ts
@@ -10,22 +10,17 @@ afterEach(() => {
   window.requestAnimationFrame.mockRestore();
 });
 
+jest.useFakeTimers();
+
 describe('collapseToast function', () => {
   it('Should handle collapse function', () => {
     const done = jest.fn();
     const node = document.createElement('div');
-    const addEvent = jest.fn((_, fn) => {
-      fn();
-    });
-    const removeEvent = jest.fn();
 
-    node.addEventListener = addEvent;
-    node.removeEventListener = removeEvent;
 
     collapseToast(node, done);
+    jest.runAllTimers();
 
-    expect(addEvent).toHaveBeenCalled();
-    expect(removeEvent).toHaveBeenCalled();
     expect(done).toHaveBeenCalled();
   });
 });