Refactor and prettify

fkhadra · Mar 24, 2019 · 6e22c46 · 6e22c46
1 parent 1a97967
commit 6e22c46
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 79 deletions.
diff --git a/src/__tests__/utils/eventManager.js b/src/__tests__/utils/eventManager.js
@@ -25,7 +25,7 @@ describe('EventManager', () => {
     expect(done => {
       eventManager.emit('bar');
       done();
-    })
+    });
   });
 
   it('Should be able to remove event', () => {

diff --git a/src/components/Toast.js b/src/components/Toast.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 
 import ProgressBar from './ProgressBar';
-import { POSITION, TYPE } from './../utils/constant';
+import { POSITION, TYPE, NOOP } from './../utils/constant';
 import {
   falseOrDelay,
   objectValues,
@@ -22,7 +22,6 @@ function getY(e) {
     : e.clientY;
 }
 
-const noop = () => {};
 const iLoveInternetExplorer =
   canUseDom && /(msie|trident)/i.test(navigator.userAgent);
 
@@ -63,8 +62,8 @@ class Toast extends Component {
   static defaultProps = {
     type: TYPE.DEFAULT,
     in: true,
-    onOpen: noop,
-    onClose: noop,
+    onOpen: NOOP,
+    onClose: NOOP,
     className: null,
     bodyClassName: null,
     progressClassName: null,

diff --git a/src/toast.js b/src/toast.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { render } from 'react-dom';
 
 import eventManager from './utils/eventManager';
-import { POSITION, TYPE, ACTION } from './utils/constant';
+import { POSITION, TYPE, ACTION, NOOP } from './utils/constant';
 import { ToastContainer } from '.';
 import { canUseDom } from './utils/propValidator';
 
@@ -11,8 +11,6 @@ let containerDomNode = null;
 let containerConfig = {};
 let queue = [];
 
-const noop = () => false;
-
 /**
  * Merge provided options with the defaults settings and generate the toastId
  */
@@ -60,74 +58,99 @@ function emitEvent(content, options) {
   return options.toastId;
 }
 
-const toast = Object.assign(
-  (content, options) =>
-    emitEvent(
-      content,
-      mergeOptions(options, (options && options.type) || TYPE.DEFAULT)
-    ),
-  {
-    success: (content, options) =>
-      emitEvent(content, mergeOptions(options, TYPE.SUCCESS)),
-    info: (content, options) =>
-      emitEvent(content, mergeOptions(options, TYPE.INFO)),
-    warn: (content, options) =>
-      emitEvent(content, mergeOptions(options, TYPE.WARNING)),
-    warning: (content, options) =>
-      emitEvent(content, mergeOptions(options, TYPE.WARNING)),
-    error: (content, options) =>
-      emitEvent(content, mergeOptions(options, TYPE.ERROR)),
-    dismiss: (id = null) => container && eventManager.emit(ACTION.CLEAR, id),
-    isActive: noop,
-    update(toastId, options) {
-      // if you call toast and toast.update directly nothing will be displayed
-      // this is way I defered the update
-      setTimeout(() => {
-        if (container && typeof container.collection[toastId] !== 'undefined') {
-          const {
-            options: oldOptions,
-            content: oldContent
-          } = container.collection[toastId];
-
-          const nextOptions = {
-            ...oldOptions,
-            ...options,
-            toastId: options.toastId || toastId
-          };
-
-          if (!options.toastId || options.toastId === toastId) {
-            nextOptions.updateId = generateToastId();
-          } else {
-            nextOptions.staleToastId = toastId;
-          }
-
-          const content =
-            typeof nextOptions.render !== 'undefined'
-              ? nextOptions.render
-              : oldContent;
-          delete nextOptions.render;
-          emitEvent(content, nextOptions);
-        }
-      }, 0);
-    },
-    done(id, progress = 1) {
-      toast.update(id, {
-        progress,
-        isProgressDone: true
-      });
-    },
-    onChange(callback) {
-      if (typeof callback === 'function') {
-        eventManager.on(ACTION.ON_CHANGE, callback);
+const toast = (content, options) =>
+  emitEvent(
+    content,
+    mergeOptions(options, (options && options.type) || TYPE.DEFAULT)
+  );
+
+/**
+ * For each available position create a shortcut
+ */
+for (const pos in TYPE) {
+  if (TYPE[pos] !== TYPE.DEFAULT) {
+    toast[TYPE[pos].toLowerCase()] = (content, options) =>
+      emitEvent(
+        content,
+        mergeOptions(options, (options && options.type) || TYPE[pos])
+      );
+  }
+}
+
+/**
+ * Maybe I should remove warning in favor of warn, I don't know
+ */
+toast.warn = toast.warning;
+
+/**
+ * Remove toast programmaticaly
+ */
+toast.dismiss = (id = null) => container && eventManager.emit(ACTION.CLEAR, id);
+
+/**
+ * Do nothing until the container is mounted. Reassigned later
+ */
+toast.isActive = NOOP;
+
+toast.update = (toastId, options) => {
+  // if you call toast and toast.update directly nothing will be displayed
+  // this is way I defered the update
+  setTimeout(() => {
+    if (container && typeof container.collection[toastId] !== 'undefined') {
+      const { options: oldOptions, content: oldContent } = container.collection[
+        toastId
+      ];
+
+      const nextOptions = {
+        ...oldOptions,
+        ...options,
+        toastId: options.toastId || toastId
+      };
+
+      if (!options.toastId || options.toastId === toastId) {
+        nextOptions.updateId = generateToastId();
+      } else {
+        nextOptions.staleToastId = toastId;
       }
-    },
-    configure(config) {
-      containerConfig = config;
-    },
-    POSITION,
-    TYPE
+
+      const content =
+        typeof nextOptions.render !== 'undefined'
+          ? nextOptions.render
+          : oldContent;
+      delete nextOptions.render;
+      emitEvent(content, nextOptions);
+    }
+  }, 0);
+};
+
+/**
+ * Used for controlled progress bar.
+ */
+toast.done = (id, progress = 1) => {
+  toast.update(id, {
+    progress,
+    isProgressDone: true
+  });
+};
+
+/**
+ * Track changes. The callback get the number of toast displayed
+ */
+toast.onChange = callback => {
+  if (typeof callback === 'function') {
+    eventManager.on(ACTION.ON_CHANGE, callback);
   }
-);
+};
+
+/**
+ * Configure the ToastContainer when lazy mounted
+ */
+toast.configure = config => {
+  containerConfig = config;
+};
+
+toast.POSITION = POSITION;
+toast.TYPE = TYPE;
 
 /**
  * Wait until the ToastContainer is mounted to dispatch the toast
@@ -146,8 +169,8 @@ eventManager
   })
   .on(ACTION.WILL_UNMOUNT, () => {
     container = null;
-    toast.isActive = noop;
-    
+    toast.isActive = NOOP;
+
     if (canUseDom && containerDomNode) {
       document.body.removeChild(containerDomNode);
     }

diff --git a/src/utils/constant.js b/src/utils/constant.js
@@ -21,3 +21,5 @@ export const ACTION = {
   WILL_UNMOUNT: 3,
   ON_CHANGE: 4
 };
+
+export const NOOP = () => {};
diff --git a/src/utils/cssTransition.js b/src/utils/cssTransition.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import Transition from 'react-transition-group/Transition';
-
-const noop = () => {};
+import { NOOP } from './constant';
 
 export default function({
   enter,
@@ -53,7 +52,7 @@ export default function({
         }
         onEnter={onEnter}
         onEntered={onEntered}
-        onExit={preventExitTransition ? noop : onExit}
+        onExit={preventExitTransition ? NOOP : onExit}
       >
         {children}
       </Transition>