Merge branch 'update-draggable'

fkhadra · Jun 7, 2018 · f3874dc · f3874dc
2 parents fa8b19b + 1b13cd4
commit f3874dc
Show file tree

Hide file tree

Showing 7 changed files with 88 additions and 69 deletions.
diff --git a/dist/ReactToastify.js b/dist/ReactToastify.js
diff --git a/dist/ReactToastify.js.map b/dist/ReactToastify.js.map
diff --git a/index.d.ts b/index.d.ts
@@ -151,6 +151,7 @@ interface ToastContainerProps extends CommonOptions {
   rtl?: boolean;
 
   /**
+   * ⚠️ NOT WORKING ATM, has been disabled until I fix it ⚠️
    * Pause toast's timer on document visibility change
    * `Default: true`
    */

diff --git a/src/__tests__/Toast.js b/src/__tests__/Toast.js
@@ -136,12 +136,13 @@ describe('Toast', () => {
     expect(component.state('isRunning')).toBeTruthy();
   });
 
-  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);
-  });
+  // ⚠️ 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);
+  //});
 
   describe('Drag event', () => {
     it('Should handle drag start on mousedown', () => {

diff --git a/src/__tests__/ToastContainer.js b/src/__tests__/ToastContainer.js
@@ -41,22 +41,22 @@ describe('ToastContainer', () => {
     -pauseOnHover
     -transition
     -closeToast`, () => {
-    const component = mount(<ToastContainer />);
-    // Create a toast
-    toaster('coucou');
-    jest.runAllTimers();
+      const component = mount(<ToastContainer />);
+      // Create a toast
+      toaster('coucou');
+      jest.runAllTimers();
 
-    const props = getToastProps(component);
+      const props = getToastProps(component);
 
-    [
-      'autoClose',
-      'closeButton',
-      'position',
-      'closeToast',
-      'transition',
-      'pauseOnHover'
-    ].forEach(key => expect(hasProp(props, key)).toBeTruthy());
-  });
+      [
+        'autoClose',
+        'closeButton',
+        'position',
+        'closeToast',
+        'transition',
+        'pauseOnHover'
+      ].forEach(key => expect(hasProp(props, key)).toBeTruthy());
+    });
 
   it('Should clear all toast when clear is called without id', () => {
     const component = mount(<ToastContainer />);
@@ -98,7 +98,7 @@ describe('ToastContainer', () => {
   it('Toast options should supersede ToastContainer props', () => {
     const component = mount(<ToastContainer />);
     const CloseBtn = () => <div>Close</div>;
-    const fn = () => {};
+    const fn = () => { };
     const desiredProps = {
       pauseOnHover: false,
       closeOnClick: false,
@@ -173,20 +173,22 @@ describe('ToastContainer', () => {
     expect(props).toHaveProperty('closeToast');
   });
 
-  it('Should update state when document visibility change', () => {
-    let trigger;
-    let event;
-    document.addEventListener = (evt, cb) => {
-      trigger = cb;
-      event = evt;
-    };
-
-    const component = mount(<ToastContainer />);
-    expect(event).toBe('visibilitychange');
-    expect(component.state().isDocumentHidden).toBe(false);
-    trigger();
-    expect(component.state().isDocumentHidden).toBe(true);
-  });
+  // ⚠️ Disabled until I fix the issue
+  // it('Should update state when document visibility change', () => {
+  //   expect(true).toBe(true);
+  // let trigger;
+  // let event;
+  // document.addEventListener = (evt, cb) => {
+  //   trigger = cb;
+  //   event = evt;
+  // };
+
+  // const component = mount(<ToastContainer />);
+  // expect(event).toBe('visibilitychange');
+  // expect(component.state().isDocumentHidden).toBe(false);
+  // trigger();
+  // expect(component.state().isDocumentHidden).toBe(true);
+  //});
 
   describe('closeToast function', () => {
     it('Should remove toast when closeToast is called', () => {

diff --git a/src/components/Toast.js b/src/components/Toast.js
@@ -22,7 +22,7 @@ function getY(e) {
     : e.clientY;
 }
 
-const noop = () => {};
+const noop = () => { };
 
 class Toast extends Component {
   static propTypes = {
@@ -88,33 +88,37 @@ class Toast extends Component {
 
   componentDidMount() {
     this.props.onOpen(this.props.children.props);
-
     if (this.props.draggable) {
-      document.addEventListener('mousemove', this.onDragMove);
-      document.addEventListener('mouseup', this.onDragEnd);
-
-      document.addEventListener('touchmove', this.onDragMove);
-      document.addEventListener('touchend', this.onDragEnd);
+      this.bindDragEvents();
     }
   }
 
-  componentWillUnmount() {
-    this.props.onClose(this.props.children.props);
+  bindDragEvents() {
+    document.addEventListener('mousemove', this.onDragMove);
+    document.addEventListener('mouseup', this.onDragEnd);
 
-    if (this.props.draggable) {
-      document.removeEventListener('mousemove', this.onDragMove);
-      document.removeEventListener('mouseup', this.onDragEnd);
+    document.addEventListener('touchmove', this.onDragMove);
+    document.addEventListener('touchend', this.onDragEnd);
+  }
 
-      document.removeEventListener('touchmove', this.onDragMove);
-      document.removeEventListener('touchend', this.onDragEnd);
+  unbindDragEvents() {
+    document.removeEventListener('mousemove', this.onDragMove);
+    document.removeEventListener('mouseup', this.onDragEnd);
+
+    document.removeEventListener('touchmove', this.onDragMove);
+    document.removeEventListener('touchend', this.onDragEnd);
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.draggable !== this.props.draggable) {
+      this.props.draggable ? this.bindDragEvents() : this.unbindDragEvents();
     }
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (this.props.isDocumentHidden !== nextProps.isDocumentHidden) {
-      this.setState({
-        isRunning: !nextProps.isDocumentHidden
-      });
+  componentWillUnmount() {
+    this.props.onClose(this.props.children.props);
+    if (this.props.draggable) {
+      this.unbindDragEvents();
     }
   }
 
@@ -259,7 +263,7 @@ class Toast extends Component {
           {closeButton !== false && closeButton}
           {autoClose !== false && (
             <ProgressBar
-              key={`pb-${updateId}`}
+              {...updateId ? { key: `pb-${updateId}` } : {}}
               rtl={rtl}
               delay={autoClose}
               isRunning={this.state.isRunning}

diff --git a/src/components/ToastContainer.js b/src/components/ToastContainer.js
@@ -101,6 +101,7 @@ class ToastContainer extends Component {
     draggablePercent: PropTypes.number,
 
     /**
+     * ⚠️ NOT WORKING ATM, has been disabled until I fix it ⚠️
      * pause on document visibility change
      */
     pauseOnVisibilityChange: PropTypes.bool
@@ -149,19 +150,19 @@ class ToastContainer extends Component {
       .on(CLEAR, id => (id !== null ? this.removeToast(id) : this.clear()))
       .emit(MOUNTED, this);
 
-    this.props.pauseOnVisibilityChange &&
-      document.addEventListener('visibilitychange', this.isDocumentHidden);
+    //this.props.pauseOnVisibilityChange &&
+    //  document.addEventListener('visibilitychange', this.isDocumentHidden);
   }
 
   componentWillUnmount() {
     EventManager.off(ACTION.SHOW);
     EventManager.off(ACTION.CLEAR);
 
-    this.props.pauseOnVisibilityChange &&
-      document.removeEventListener('visibilitychange', this.isDocumentHidden);
+    // this.props.pauseOnVisibilityChange &&
+    //   document.removeEventListener('visibilitychange', this.isDocumentHidden);
   }
 
-  isDocumentHidden = () => this.setState({ isDocumentHidden: document.hidden });
+  //isDocumentHidden = () => this.setState({ isDocumentHidden: document.hidden });
 
   isToastActive = id => this.state.toast.indexOf(parseInt(id, 10)) !== -1;
 
@@ -188,9 +189,9 @@ class ToastContainer extends Component {
     return closeButton === false
       ? false
       : cloneElement(closeButton, {
-          closeToast: () => this.removeToast(toastId),
-          type: type
-        });
+        closeToast: () => this.removeToast(toastId),
+        type: type
+      });
   }
 
   getAutoCloseDelay(toastAutoClose) {
@@ -208,6 +209,16 @@ class ToastContainer extends Component {
     );
   }
 
+  parseClassName(prop){
+    if (typeof prop === 'string') {
+      return prop;
+    } else if(prop !== null && typeof prop === 'object' && 'toString' in prop) {
+      return prop.toString()
+    }
+
+    return null;
+  }
+
   show(content, options) {
     if (!this.canBeRendered(content)) {
       throw new Error(
@@ -224,8 +235,8 @@ class ToastContainer extends Component {
       rtl: this.props.rtl,
       position: options.position || this.props.position,
       transition: options.transition || this.props.transition,
-      className: options.className || this.props.toastClassName,
-      bodyClassName: options.bodyClassName || this.props.bodyClassName,
+      className: this.parseClassName(options.className || this.props.toastClassName),
+      bodyClassName: this.parseClassName(options.bodyClassName || this.props.bodyClassName),
       closeButton: this.makeCloseButton(
         options.closeButton,
         toastId,
@@ -246,7 +257,7 @@ class ToastContainer extends Component {
           ? options.closeOnClick
           : this.props.closeOnClick,
       progressClassName:
-        options.progressClassName || this.props.progressClassName,
+        this.parseClassName(options.progressClassName || this.props.progressClassName),
       autoClose: this.getAutoCloseDelay(
         options.autoClose !== false
           ? parseInt(options.autoClose, 10)
@@ -344,7 +355,7 @@ class ToastContainer extends Component {
           'Toastify__toast-container',
           `Toastify__toast-container--${position}`,
           { 'Toastify__toast-container--rtl': this.props.rtl },
-          className
+          this.parseClassName(className)
         ),
         style: disablePointer
           ? { ...style, pointerEvents: 'none' }