refactor: update dependencies & fix deprecated for React 16

lib/ToastContainer.js

@@ -20,9 +20,13 @@ var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
-var _reactAddonsUpdate = require("react-addons-update");
+var _propTypes = require("prop-types");
 
-var _reactAddonsUpdate2 = _interopRequireDefault(_reactAddonsUpdate);
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _immutabilityHelper = require("immutability-helper");
+
+var _immutabilityHelper2 = _interopRequireDefault(_immutabilityHelper);
 
 var _ToastMessage = require("./ToastMessage");
 
@@ -102,7 +106,7 @@ var ToastContainer = function (_Component) {
       }
       var key = this.state.toastId++;
       var toastId = key;
-      var newToast = (0, _reactAddonsUpdate2.default)(optionsOverride, {
+      var newToast = (0, _immutabilityHelper2.default)(optionsOverride, {
         $merge: {
           type: type,
           title: title,
@@ -123,7 +127,7 @@ var ToastContainer = function (_Component) {
 
       var messageOperation = _defineProperty({}, "" + (this.props.newestOnTop ? "$unshift" : "$push"), [message]);
 
-      var nextState = (0, _reactAddonsUpdate2.default)(this.state, {
+      var nextState = (0, _immutabilityHelper2.default)(this.state, {
         toasts: toastOperation,
         messageList: messageOperation
       });
@@ -152,7 +156,7 @@ var ToastContainer = function (_Component) {
         if (found || toast.toastId !== toastId) {
           return false;
         }
-        _this4.setState((0, _reactAddonsUpdate2.default)(_this4.state, {
+        _this4.setState((0, _immutabilityHelper2.default)(_this4.state, {
           toasts: { $splice: [[index, 1]] },
           messageList: { $splice: [[index, 1]] }
         }));
@@ -180,17 +184,17 @@ var ToastContainer = function (_Component) {
 }(_react.Component);
 
 ToastContainer.propTypes = {
-  toastType: _react.PropTypes.shape({
-    error: _react.PropTypes.string,
-    info: _react.PropTypes.string,
-    success: _react.PropTypes.string,
-    warning: _react.PropTypes.string
+  toastType: _propTypes2.default.shape({
+    error: _propTypes2.default.string,
+    info: _propTypes2.default.string,
+    success: _propTypes2.default.string,
+    warning: _propTypes2.default.string
   }).isRequired,
-  id: _react.PropTypes.string.isRequired,
-  toastMessageFactory: _react.PropTypes.func.isRequired,
-  preventDuplicates: _react.PropTypes.bool.isRequired,
-  newestOnTop: _react.PropTypes.bool.isRequired,
-  onClick: _react.PropTypes.func.isRequired
+  id: _propTypes2.default.string.isRequired,
+  toastMessageFactory: _propTypes2.default.func.isRequired,
+  preventDuplicates: _propTypes2.default.bool.isRequired,
+  newestOnTop: _propTypes2.default.bool.isRequired,
+  onClick: _propTypes2.default.func.isRequired
 };
 ToastContainer.defaultProps = {
   toastType: {

lib/ToastContainer.test.js

@@ -8,9 +8,9 @@ var _reactDom = require("react-dom");
 
 var _reactDom2 = _interopRequireDefault(_reactDom);
 
-var _reactAddonsTestUtils = require("react-addons-test-utils");
+var _testUtils = require("react-dom/test-utils");
 
-var _reactAddonsTestUtils2 = _interopRequireDefault(_reactAddonsTestUtils);
+var _testUtils2 = _interopRequireDefault(_testUtils);
 
 var _index = require("./index");
 
@@ -42,8 +42,8 @@ describe("ToastContainer", function () {
       component.success("yeah,", "cool");
       expect(dom.firstChild.childNodes.length).not.toBe(0);
 
-      var toastComp = _reactAddonsTestUtils2.default.findRenderedDOMComponentWithClass(component, "toast");
-      _reactAddonsTestUtils2.default.Simulate.click(toastComp);
+      var toastComp = _testUtils2.default.findRenderedDOMComponentWithClass(component, "toast");
+      _testUtils2.default.Simulate.click(toastComp);
 
       setTimeout(function () {
         expect(dom.firstChild.childNodes.length).toBe(0);

lib/ToastMessage/animationMixin.js

@@ -4,10 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _ReactTransitionEvents = require("react/lib/ReactTransitionEvents");
-
-var _ReactTransitionEvents2 = _interopRequireDefault(_ReactTransitionEvents);
-
 var _reactDom = require("react-dom");
 
 var _reactDom2 = _interopRequireDefault(_reactDom);
@@ -16,6 +12,10 @@ var _elementClass = require("element-class");
 
 var _elementClass2 = _interopRequireDefault(_elementClass);
 
+var _transitionEvents = require("./transitionEvents");
+
+var _transitionEvents2 = _interopRequireDefault(_transitionEvents);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var TICK = 17;
@@ -45,11 +45,11 @@ exports.default = {
     var onHideComplete = function onHideComplete() {
       if (_this.isHiding) {
         _this._set_is_hiding(false);
-        _ReactTransitionEvents2.default.removeEndEventListener(node, onHideComplete);
+        _transitionEvents2.default.removeEndEventListener(node, onHideComplete);
         _this._handle_remove();
       }
     };
-    _ReactTransitionEvents2.default.addEndEventListener(node, onHideComplete);
+    _transitionEvents2.default.addEndEventListener(node, onHideComplete);
 
     if (this.props.timeOut > 0) {
       this._set_interval_id(setTimeout(this.hideToast, this.props.timeOut));
@@ -76,10 +76,10 @@ exports.default = {
       classList.remove(className);
       classList.remove(activeClassName);
 
-      _ReactTransitionEvents2.default.removeEndEventListener(node, endListener);
+      _transitionEvents2.default.removeEndEventListener(node, endListener);
     };
 
-    _ReactTransitionEvents2.default.addEndEventListener(node, endListener);
+    _transitionEvents2.default.addEndEventListener(node, endListener);
 
     (0, _elementClass2.default)(node).add(className);
 
@@ -108,10 +108,10 @@ exports.default = {
         return (0, _elementClass2.default)(node).remove(anim);
       });
 
-      _ReactTransitionEvents2.default.removeEndEventListener(node, endListener);
+      _transitionEvents2.default.removeEndEventListener(node, endListener);
     };
 
-    _ReactTransitionEvents2.default.addEndEventListener(node, endListener);
+    _transitionEvents2.default.addEndEventListener(node, endListener);
 
     animations.forEach(function (anim) {
       return (0, _elementClass2.default)(node).add(anim);

lib/ToastMessage/index.js

@@ -9,9 +9,13 @@ var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
-var _reactAddonsUpdate = require("react-addons-update");
+var _createReactClass = require("create-react-class");
 
-var _reactAddonsUpdate2 = _interopRequireDefault(_reactAddonsUpdate);
+var _createReactClass2 = _interopRequireDefault(_createReactClass);
+
+var _immutabilityHelper = require("immutability-helper");
+
+var _immutabilityHelper2 = _interopRequireDefault(_immutabilityHelper);
 
 var _classnames = require("classnames");
 
@@ -102,12 +106,12 @@ var ToastMessageSpec = {
   }
 };
 
-var animation = exports.animation = _react2.default.createClass((0, _reactAddonsUpdate2.default)(ToastMessageSpec, {
+var animation = exports.animation = (0, _createReactClass2.default)((0, _immutabilityHelper2.default)(ToastMessageSpec, {
   displayName: { $set: "ToastMessage.animation" },
   mixins: { $set: [_animationMixin2.default] }
 }));
 
-var jQuery = exports.jQuery = _react2.default.createClass((0, _reactAddonsUpdate2.default)(ToastMessageSpec, {
+var jQuery = exports.jQuery = (0, _createReactClass2.default)((0, _immutabilityHelper2.default)(ToastMessageSpec, {
   displayName: { $set: "ToastMessage.jQuery" },
   mixins: { $set: [_jQueryMixin2.default] }
 }));
@@ -119,7 +123,7 @@ ToastMessageSpec.handleMouseEnter = noop;
 ToastMessageSpec.handleMouseLeave = noop;
 ToastMessageSpec.hideToast = noop;
 
-var ToastMessage = _react2.default.createClass(ToastMessageSpec);
+var ToastMessage = (0, _createReactClass2.default)(ToastMessageSpec);
 
 ToastMessage.animation = animation;
 ToastMessage.jQuery = jQuery;

lib/ToastMessage/transitionEvents.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var endEvents = [];
+
+var EVENTS = {
+  transitionend: {
+    transition: "transitionend",
+    WebkitTransition: "webkitTransitionEnd",
+    MozTransition: "mozTransitionEnd",
+    msTransition: "MSTransitionEnd",
+    OTransition: "oTransitionEnd"
+  },
+
+  animationend: {
+    animation: "animationend",
+    WebkitAnimation: "webkitAnimationEnd",
+    MozAnimation: "mozAnimationEnd",
+    msAnimation: "MSAnimationEnd",
+    OAnimation: "oAnimationEnd"
+  }
+};
+
+if (typeof window !== "undefined") {
+  var style = document.createElement("div").style;
+  for (var eventType in EVENTS) {
+    if (!EVENTS.hasOwnProperty(eventType)) {
+      continue;
+    }
+    var prefixes = EVENTS[eventType];
+    for (var styleProp in prefixes) {
+      if (prefixes.hasOwnProperty(styleProp) && styleProp in style) {
+        endEvents.push(prefixes[styleProp]);
+        break;
+      }
+    }
+  }
+}
+
+var TransitionEvents = {
+  addEndEventListener: function addEndEventListener(node, eventListener) {
+    if (endEvents.length === 0) {
+      setTimeout(eventListener, 0);
+      return;
+    }
+    endEvents.forEach(function (event) {
+      node.addEventListener(event, eventListener, false);
+    });
+  },
+
+  removeEndEventListener: function removeEndEventListener(node, eventListener) {
+    if (endEvents.length === 0) {
+      return;
+    }
+    endEvents.forEach(function (event) {
+      node.removeEventListener(event, eventListener, false);
+    });
+  }
+};
+
+exports.default = TransitionEvents;

package.json

@@ -74,8 +74,7 @@
     "jquery": "^3.1.0",
     "prismjs": "^1.5.1",
     "raw-loader": "^0.5.1",
-    "react": "^15.3.2",
-    "react-addons-test-utils": "^15.3.2",
+    "react": "^15.6.1",
     "react-github-fork-ribbon": "^0.4.4",
     "react-scripts": "0.6.1",
     "rimraf": "^2.5.4",
@@ -86,9 +85,11 @@
   },
   "dependencies": {
     "classnames": "^2.2.5",
+    "create-react-class": "^15.6.0",
     "element-class": "^0.2.2",
+    "immutability-helper": "^2.3.0",
     "lodash": "^4.16.1",
-    "react-addons-update": "^0.14.0 || ^15.0.0",
-    "react-dom": "^0.14.0 || ^15.0.0"
+    "react-dom": "^0.14.0 || ^15.0.0",
+    "prop-types": "^15.5.10"
   }
 }

src/lib/ToastContainer.js

@@ -3,12 +3,15 @@ import _ from "lodash";
 import {
   default as React,
   Component,
-  PropTypes,
 } from "react";
 
+import {
+  default as PropTypes,
+} from "prop-types";
+
 import {
   default as update,
-} from "react-addons-update";
+} from "immutability-helper";
 
 import {
   default as ToastMessage,

src/lib/ToastContainer.test.js

@@ -8,7 +8,7 @@ import {
 
 import {
   default as TestUtils,
-} from "react-addons-test-utils";
+} from "react-dom/test-utils";
 
 import {
   ToastContainer,

src/lib/ToastMessage/animationMixin.js

@@ -1,7 +1,3 @@
-import {
-  default as ReactTransitionEvents,
-} from "react/lib/ReactTransitionEvents";
-
 import {
   default as ReactDOM,
 } from "react-dom";
@@ -10,6 +6,10 @@ import {
   default as elementClass,
 } from "element-class";
 
+import {
+  default as ReactTransitionEvents,
+} from "./transitionEvents";
+
 const TICK = 17;
 const { toString } = Object.prototype;
 

src/lib/ToastMessage/index.js

@@ -2,9 +2,13 @@ import {
   default as React,
 } from "react";
 
+import {
+  default as createClass,
+} from 'create-react-class';
+
 import {
   default as update,
-} from "react-addons-update";
+} from "immutability-helper";
 
 import {
   default as classNames,
@@ -102,12 +106,12 @@ const ToastMessageSpec = {
   },
 };
 
-export const animation = React.createClass(update(ToastMessageSpec, {
+export const animation = createClass(update(ToastMessageSpec, {
   displayName: { $set: `ToastMessage.animation` },
   mixins: { $set: [animationMixin] },
 }));
 
-export const jQuery = React.createClass(update(ToastMessageSpec, {
+export const jQuery = createClass(update(ToastMessageSpec, {
   displayName: { $set: `ToastMessage.jQuery` },
   mixins: { $set: [jQueryMixin] },
 }));
@@ -119,7 +123,7 @@ ToastMessageSpec.handleMouseEnter = noop;
 ToastMessageSpec.handleMouseLeave = noop;
 ToastMessageSpec.hideToast = noop;
 
-const ToastMessage = React.createClass(ToastMessageSpec);
+const ToastMessage = createClass(ToastMessageSpec);
 
 ToastMessage.animation = animation;
 ToastMessage.jQuery = jQuery;