Merge branch 'develop'

index.d.ts

@@ -2,6 +2,8 @@ import * as React from 'react';
 
 type ToastType = 'info' | 'success' | 'warning' | 'error' | 'default';
 
+type ToastPosition = 'top-right' | 'top-center' | 'top-left' | 'bottom-right' | 'bottom-center' | 'bottom-left';
+
 type ToastContent = React.ReactNode | { (): void };
 
 interface cssTransitionProps {
@@ -36,6 +38,12 @@ interface CommonOptions {
    */
   pauseOnHover?: boolean;
 
+  /**
+   * Pause the toast when the window loose focus.
+   * `Default: true`
+   */
+  pauseOnFocusLoss?: boolean;
+
   /**
    * Remove the toast when clicked.
    * `Default: true`
@@ -54,7 +62,7 @@ interface CommonOptions {
    * `One of: 'top-right', 'top-center', 'top-left', 'bottom-right', 'bottom-center', 'bottom-left'`
    * `Default: 'top-right'`
    */
-  position?: string;
+  position?: ToastPosition;
 
   /**
    * Pass a custom close button.
@@ -149,13 +157,6 @@ interface ToastContainerProps extends CommonOptions {
    * `Default: false`
    */
   rtl?: boolean;
-
-  /**
-   * ⚠️ NOT WORKING ATM, has been disabled until I fix it ⚠️
-   * Pause toast's timer on document visibility change
-   * `Default: true`
-   */
-  pauseOnVisibilityChange?: boolean;
 }
 
 interface Toast {

package.json

@@ -48,9 +48,9 @@
   },
   "homepage": "https://github.com/fkhadra/react-toastify#readme",
   "dependencies": {
-    "classnames": "^2.2.5",
+    "classnames": "^2.2.6",
     "prop-types": "^15.6.0",
-    "react-transition-group": "^2.2.1"
+    "react-transition-group": "^2.4.0"
   },
   "jest": {
     "verbose": true,

playground/components/App.js

@@ -38,12 +38,12 @@ const flags = [
     label: 'Pause delay on hover'
   },
   {
-    id: 'rtl',
-    label: 'Right to left layout*'
+    id: 'pauseOnFocusLoss',
+    label: 'Pause toast when the window loses focus'
   },
   {
-    id: 'pauseOnVisibilityChange',
-    label: 'Pause toast on visibility change*'
+    id: 'rtl',
+    label: 'Right to left layout*'
   },
   {
     id: 'draggable',
@@ -94,7 +94,7 @@ class App extends Component {
       !this.state.hideProgressBar &&
       !this.state.newestOnTop &&
       !this.state.rtl &&
-      this.state.pauseOnVisibilityChange &&
+      this.state.pauseOnFocusLoss &&
       this.state.pauseOnHover &&
       this.state.closeOnClick &&
       this.state.draggable

playground/components/ContainerCode.js

@@ -1,7 +1,6 @@
 import React from 'react';
 
 function getProp(prop, value) {
-  const P = () => <span className="code__props">{prop}</span>;
   return value ? (
     <div>
       <span className="code__props">{prop}</span>
@@ -23,7 +22,7 @@ const ContainerCode = ({
   closeOnClick,
   pauseOnHover,
   rtl,
-  pauseOnVisibilityChange,
+  pauseOnFocusLoss,
   isDefaultProps,
   draggable
 }) => (
@@ -46,7 +45,7 @@ const ContainerCode = ({
       {getProp('newestOnTop', newestOnTop)}
       {getProp('closeOnClick', closeOnClick)}
       {getProp('rtl', rtl)}
-      {getProp('pauseOnVisibilityChange', pauseOnVisibilityChange)}
+      {getProp('pauseOnFocusLoss', pauseOnFocusLoss)}
       {getProp('draggable', draggable)}
       {!disableAutoClose ? getProp('pauseOnHover', pauseOnHover) : ''}
       <div>

playground/components/Header.js

@@ -41,9 +41,9 @@ export default () => (
     <div>
       <a className="btn" href="https://github.com/fkhadra/react-toastify">
         <span role="img" aria-label="link to github">
-          😸
+          📖
         </span>{' '}
-        View on GitHub
+        Documentation
       </a>
       <a
         className="btn"

src/__tests__/CloseButton.js → src/__tests__/components/CloseButton.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import CloseButton from './../components/CloseButton';
+import CloseButton from './../../components/CloseButton';
 
 const closeToast = jest.fn();
 

src/__tests__/ProgressBar.js → src/__tests__/components/ProgressBar.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import ProgressBar from './../components/ProgressBar';
+import ProgressBar from './../../components/ProgressBar';
 
 const REQUIRED_PROPS = {
   delay: 5000,

src/__tests__/Toast.js → src/__tests__/components/Toast.js

@@ -2,15 +2,14 @@
 import React from 'react';
 import { shallow, mount } from 'enzyme';
 
-import Toast from './../components/Toast';
-import ToastContainer from './../components/ToastContainer';
-import CloseButton from './../components/CloseButton';
-import ProgressBar from './../components/ProgressBar';
+import Toast from './../../components/Toast';
+import ToastContainer from './../../components/ToastContainer';
+import CloseButton from './../../components/CloseButton';
+import ProgressBar from './../../components/ProgressBar';
 
 const REQUIRED_PROPS = {
   ...ToastContainer.defaultProps,
   closeToast: () => {},
-  isDocumentHidden: false,
   type: 'default'
 };
 
@@ -136,13 +135,46 @@ describe('Toast', () => {
     expect(component.state('isRunning')).toBeTruthy();
   });
 
-  // ⚠️ Disabled until I fix the issue
-  //it('Should pause Toast when document visibility change', () => {
-    // const component = mount(<Toast {...REQUIRED_PROPS}>FooBar</Toast>);
-    // expect(component.state('isRunning')).toBe(true);
-    // component.setProps({ isDocumentHidden: true });
-    // expect(component.state('isRunning')).toBe(false);
-  //});
+  it('Should pause Toast on window blur and resume Toast on focus', () => {
+    const component = mount(<Toast {...REQUIRED_PROPS}>FooBar</Toast>);
+    expect(component.state('isRunning')).toBe(true);
+
+    let ev = new Event('blur');
+    window.dispatchEvent(ev);
+
+    expect(component.state('isRunning')).toBe(false);
+
+    ev = new Event('focus');
+    window.dispatchEvent(ev);
+
+    expect(component.state('isRunning')).toBe(true);
+  });
+
+  it('Should bind or unbind dom events when `pauseOnFocusLoss` and `draggable` props are updated', () => {
+    const component = mount(<Toast {...REQUIRED_PROPS}>FooBar</Toast>);
+
+    document.removeEventListener = jest.fn();
+    window.removeEventListener = jest.fn();
+
+    component.setProps({
+      draggable: false,
+      pauseOnFocusLoss: false
+    });
+
+    expect(document.removeEventListener).toHaveBeenCalled();
+    expect(window.removeEventListener).toHaveBeenCalled();
+
+    document.addEventListener = jest.fn();
+    window.addEventListener = jest.fn();
+
+    component.setProps({
+      draggable: true,
+      pauseOnFocusLoss: true
+    });
+
+    expect(document.removeEventListener).toHaveBeenCalled();
+    expect(window.removeEventListener).toHaveBeenCalled();
+  });
 
   describe('Drag event', () => {
     it('Should handle drag start on mousedown', () => {