Completely updated React, fixed #11, (hopefully)

goTorrentWebUI/node_modules/react-toastify/lib/DefaultCloseButton.js

@@ -19,7 +19,7 @@ var _glamor = require('glamor');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var rule = function rule(isDefault) {
+var styles = function styles(isDefault) {
   return (0, _glamor.css)({
     color: isDefault ? '#000' : '#fff',
     fontWeight: 'bold',
@@ -40,17 +40,27 @@ var rule = function rule(isDefault) {
 
 function DefaultCloseButton(_ref) {
   var closeToast = _ref.closeToast,
-      type = _ref.type;
+      type = _ref.type,
+      ariaLabel = _ref.ariaLabel;
 
   return _react2.default.createElement(
     'button',
-    _extends({}, rule(type === 'default'), { type: 'button', onClick: closeToast }),
+    _extends({}, styles(type === 'default'), {
+      type: 'button',
+      onClick: closeToast,
+      'aria-label': ariaLabel
+    }),
     '\u2716'
   );
 }
 
 DefaultCloseButton.propTypes = {
-  closeToast: _propTypes2.default.func
+  closeToast: _propTypes2.default.func,
+  arialLabel: _propTypes2.default.string
+};
+
+DefaultCloseButton.defaultProps = {
+  ariaLabel: 'close'
 };
 
 exports.default = DefaultCloseButton;

goTorrentWebUI/node_modules/react-toastify/lib/DefaultTransition.js

@@ -16,9 +16,9 @@ var _Transition2 = _interopRequireDefault(_Transition);
 
 var _glamor = require('glamor');
 
-var _animation2 = require('./animation');
+var _animation = require('./animation');
 
-var _animation3 = _interopRequireDefault(_animation2);
+var _animation2 = _interopRequireDefault(_animation);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -29,17 +29,17 @@ var animate = {
   animationFillMode: 'both'
 };
 
-var animation = function animation(pos) {
-  var _getAnimation = (0, _animation3.default)(pos),
+var styles = function styles(pos) {
+  var _getAnimation = (0, _animation2.default)(pos),
       enter = _getAnimation.enter,
       exit = _getAnimation.exit;
 
-  var enterAnimation = _glamor.css.keyframes('enter', _extends({
+  var enterAnimation = _glamor.css.keyframes(_extends({
     'from, 60%, 75%, 90%, to': {
       animationTimingFunction: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)'
     }
   }, enter));
-  var exitAnimation = _glamor.css.keyframes('exit', exit);
+  var exitAnimation = _glamor.css.keyframes(exit);
 
   return {
     enter: (0, _glamor.css)(_extends({}, animate, { animationName: enterAnimation })),
@@ -52,23 +52,39 @@ function DefaultTransition(_ref) {
       position = _ref.position,
       props = _objectWithoutProperties(_ref, ['children', 'position']);
 
-  var _animation = animation(position),
-      enter = _animation.enter,
-      exit = _animation.exit;
+  var _styles = styles(position),
+      enter = _styles.enter,
+      exit = _styles.exit;
+
+  var onEnter = function onEnter(node) {
+    return node.classList.add(enter);
+  };
+  var onEntered = function onEntered(node) {
+    return node.classList.remove(enter);
+  };
+  var onExit = function onExit(node) {
+    var height = node.getBoundingClientRect().height;
+    node.style.transition = 'padding 0.75s, height 0.75s, maringBottom 0.75s';
+    node.style.minHeight = 0;
+    node.style.height = height >= 48 ? height + 'px' : '48px';
+
+    requestAnimationFrame(function () {
+      node.style.padding = 0;
+      node.style.height = 0;
+      node.style.marginBottom = 0;
+      requestAnimationFrame(function () {
+        return node.classList.add(exit);
+      });
+    });
+  };
 
   return _react2.default.createElement(
     _Transition2.default,
     _extends({}, props, {
       timeout: 750,
-      onEnter: function onEnter(node) {
-        return node.classList.add(enter);
-      },
-      onEntered: function onEntered(node) {
-        return node.classList.remove(enter);
-      },
-      onExit: function onExit(node) {
-        return node.classList.add(exit);
-      }
+      onEnter: onEnter,
+      onEntered: onEntered,
+      onExit: onExit
     }),
     children
   );

goTorrentWebUI/node_modules/react-toastify/lib/ProgressBar.js

@@ -18,31 +18,31 @@ var _glamor = require('glamor');
 
 var _constant = require('./constant');
 
-var _style = require('./style');
+var _defaultStyle = require('./defaultStyle');
 
-var _style2 = _interopRequireDefault(_style);
+var _defaultStyle2 = _interopRequireDefault(_defaultStyle);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var trackProgress = _glamor.css.keyframes('track-progress', {
+var trackProgress = _glamor.css.keyframes({
   '0%': { width: '100%' },
   '100%': { width: 0 }
 });
 
-var progress = function progress(type, isRunning, hide, delay) {
+var styles = function styles(type, isRunning, hide, delay) {
   return (0, _glamor.css)(_extends({
     position: 'absolute',
     bottom: 0,
     left: 0,
     width: 0,
     height: '5px',
-    zIndex: _style2.default.zIndex,
+    zIndex: _defaultStyle2.default.zIndex,
     opacity: hide ? 0 : 0.7,
     animation: trackProgress + ' linear 1',
     animationPlayState: isRunning ? 'running' : 'paused',
     animationDuration: delay + 'ms',
     backgroundColor: 'rgba(255,255,255,.7)'
-  }, type === 'default' ? { background: _style2.default.colorProgressDefault } : {}));
+  }, type === 'default' ? { background: _defaultStyle2.default.colorProgressDefault } : {}));
 };
 
 function ProgressBar(_ref) {
@@ -53,7 +53,7 @@ function ProgressBar(_ref) {
       hide = _ref.hide,
       className = _ref.className;
 
-  return _react2.default.createElement('div', _extends({}, typeof className !== 'string' ? (0, _glamor.css)(progress(type, isRunning, hide, delay), className) : progress(type, isRunning, hide, delay), typeof className === 'string' && { className: className }, {
+  return _react2.default.createElement('div', _extends({}, typeof className !== 'string' ? (0, _glamor.css)(styles(type, isRunning, hide, delay), className) : styles(type, isRunning, hide, delay), typeof className === 'string' && { className: className }, {
     onAnimationEnd: closeToast
   }));
 }

goTorrentWebUI/node_modules/react-toastify/lib/Toast.js

@@ -24,9 +24,9 @@ var _ProgressBar2 = _interopRequireDefault(_ProgressBar);
 
 var _constant = require('./constant');
 
-var _style = require('./style');
+var _defaultStyle = require('./defaultStyle');
 
-var _style2 = _interopRequireDefault(_style);
+var _defaultStyle2 = _interopRequireDefault(_defaultStyle);
 
 var _propValidator = require('./util/propValidator');
 
@@ -40,31 +40,32 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-var toast = function toast(type) {
-  return (0, _glamor.css)(_extends({
-    position: 'relative',
-    minHeight: '48px',
-    marginBottom: '1rem',
-    padding: '8px',
-    borderRadius: '1px',
-    boxShadow: '0 1px 10px 0 rgba(0, 0, 0, .1), 0 2px 15px 0 rgba(0, 0, 0, .05)',
-    display: 'flex',
-    justifyContent: 'space-between',
-    maxHeight: '800px',
-    overflow: 'hidden',
-    fontFamily: _style2.default.fontFamily,
-    cursor: 'pointer',
-    background: _style2.default['color' + type.charAt(0).toUpperCase() + type.slice(1)]
-  }, type === 'default' ? { color: '#aaa' } : {}, _defineProperty({}, '@media ' + _style2.default.mobile, {
-    marginBottom: 0
-  })));
+var styles = {
+  container: function container(type) {
+    return (0, _glamor.css)(_extends({
+      position: 'relative',
+      minHeight: '48px',
+      marginBottom: '1rem',
+      padding: '8px',
+      borderRadius: '1px',
+      boxShadow: '0 1px 10px 0 rgba(0, 0, 0, .1), 0 2px 15px 0 rgba(0, 0, 0, .05)',
+      display: 'flex',
+      justifyContent: 'space-between',
+      maxHeight: '800px',
+      overflow: 'hidden',
+      fontFamily: _defaultStyle2.default.fontFamily,
+      cursor: 'pointer',
+      background: _defaultStyle2.default['color' + type.charAt(0).toUpperCase() + type.slice(1)]
+    }, type === 'default' ? { color: '#aaa' } : {}, _defineProperty({}, '@media ' + _defaultStyle2.default.mobile, {
+      marginBottom: 0
+    })));
+  },
+  body: (0, _glamor.css)({
+    margin: 'auto 0',
+    flex: 1
+  })
 };
 
-var body = (0, _glamor.css)({
-  margin: 'auto 0',
-  flex: 1
-});
-
 var Toast = function (_Component) {
   _inherits(Toast, _Component);
 
@@ -142,7 +143,8 @@ var Toast = function (_Component) {
           className = _props.className,
           bodyClassName = _props.bodyClassName,
           progressClassName = _props.progressClassName,
-          updateId = _props.updateId;
+          updateId = _props.updateId,
+          role = _props.role;
 
 
       return _react2.default.createElement(
@@ -156,10 +158,10 @@ var Toast = function (_Component) {
         },
         _react2.default.createElement(
           'div',
-          _extends({}, typeof className !== 'string' ? (0, _glamor.css)(toast(type), className) : toast(type), this.getToastProps()),
+          _extends({}, typeof className !== 'string' ? (0, _glamor.css)(styles.container(type), className) : styles.container(type), this.getToastProps()),
           _react2.default.createElement(
             'div',
-            _extends({}, typeof bodyClassName !== 'string' ? (0, _glamor.css)(body, bodyClassName) : body, typeof bodyClassName === 'string' && {
+            _extends({}, this.props.in && { role: role }, typeof bodyClassName !== 'string' ? (0, _glamor.css)(styles.body, bodyClassName) : styles.body, typeof bodyClassName === 'string' && {
               className: bodyClassName
             }),
             children
@@ -201,7 +203,8 @@ Toast.propTypes = {
   className: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]),
   bodyClassName: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]),
   progressClassName: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]),
-  updateId: _propTypes2.default.number
+  updateId: _propTypes2.default.number,
+  ariaLabel: _propTypes2.default.string
 };
 Toast.defaultProps = {
   type: _constant.TYPE.DEFAULT,
@@ -212,6 +215,7 @@ Toast.defaultProps = {
   className: '',
   bodyClassName: '',
   progressClassName: '',
-  updateId: null
+  updateId: null,
+  role: 'alert'
 };
 exports.default = Toast;

goTorrentWebUI/node_modules/react-toastify/lib/ToastContainer.js

@@ -38,9 +38,9 @@ var _DefaultTransition2 = _interopRequireDefault(_DefaultTransition);
 
 var _constant = require('./constant');
 
-var _style = require('./style');
+var _defaultStyle = require('./defaultStyle');
 
-var _style2 = _interopRequireDefault(_style);
+var _defaultStyle2 = _interopRequireDefault(_defaultStyle);
 
 var _EventManager = require('./util/EventManager');
 
@@ -60,34 +60,33 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-var toastPosition = function toastPosition(pos) {
+var getToastPositionStyle = function getToastPositionStyle(pos) {
   var positionKey = pos.toUpperCase().replace('-', '_');
-  var positionRule = typeof _constant.POSITION[positionKey] !== 'undefined' ? _style2.default[positionKey] : _style2.default.TOP_RIGHT;
+  var positionRule = typeof _constant.POSITION[positionKey] !== 'undefined' ? _defaultStyle2.default[positionKey] : _defaultStyle2.default.TOP_RIGHT;
 
   /** define margin for center toast based on toast witdh */
   if (positionKey.indexOf('CENTER') !== -1 && typeof positionRule.marginLeft === 'undefined') {
-    positionRule.marginLeft = '-' + parseInt(_style2.default.width, 10) / 2 + 'px';
+    positionRule.marginLeft = '-' + parseInt(_defaultStyle2.default.width, 10) / 2 + 'px';
   }
 
-  return (0, _glamor.css)(positionRule, (0, _glamor.css)(_defineProperty({}, '@media ' + _style2.default.mobile, _extends({
+  return positionRule;
+};
+
+var styles = function styles(disablePointer, position) {
+  return (0, _glamor.css)(_extends({
+    zIndex: _defaultStyle2.default.zIndex,
+    position: 'fixed',
+    padding: '4px',
+    width: _defaultStyle2.default.width,
+    boxSizing: 'border-box',
+    color: '#fff'
+  }, disablePointer ? { pointerEvents: 'none' } : {}, _defineProperty({}, '@media ' + _defaultStyle2.default.mobile, _extends({
+    width: '100vw',
+    padding: 0,
     left: 0,
     margin: 0,
     position: 'fixed'
-  }, pos.substring(0, 3) === 'top' ? { top: 0 } : { bottom: 0 }))));
-};
-
-var container = function container(disablePointer, position) {
-  return (0, _glamor.css)(_extends({
-    zIndex: _style2.default.zIndex,
-    position: 'fixed',
-    padding: '4px',
-    width: _style2.default.width,
-    boxSizing: 'border-box',
-    color: '#fff'
-  }, disablePointer ? { pointerEvents: 'none' } : {}, _defineProperty({}, '@media ' + _style2.default.mobile, {
-    width: '100vw',
-    padding: 0
-  })), toastPosition(position));
+  }, position.substring(0, 3) === 'top' ? { top: 0 } : { bottom: 0 }))), getToastPositionStyle(position));
 };
 
 var ToastContainer = function (_Component) {
@@ -294,7 +293,7 @@ var ToastContainer = function (_Component) {
 
         return _react2.default.createElement(
           _TransitionGroup2.default,
-          _extends({}, typeof className !== 'string' ? (0, _glamor.css)(container(disablePointer, position), className) : container(disablePointer, position), typeof className === 'string' && { className: className }, style !== null && { style: style }, {
+          _extends({}, typeof className !== 'string' ? (0, _glamor.css)(styles(disablePointer, position), className) : styles(disablePointer, position), typeof className === 'string' && { className: className }, style !== null && { style: style }, {
             key: 'container-' + position
           }),
           toastToRender[position]

goTorrentWebUI/node_modules/react-toastify/lib/defaultStyle.js

@@ -0,0 +1,50 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defineStyle = defineStyle;
+var defaultStyle = {
+  width: '320px',
+  colorDefault: '#fff',
+  colorInfo: '#3498db',
+  colorSuccess: '#07bc0c',
+  colorWarning: '#f1c40f',
+  colorError: '#e74c3c',
+  colorProgressDefault: 'linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55)',
+  mobile: 'only screen and (max-width : 480px)',
+  fontFamily: 'sans-serif',
+  zIndex: 9999,
+  TOP_LEFT: {
+    top: '1em',
+    left: '1em'
+  },
+  TOP_CENTER: {
+    top: '1em',
+    left: '50%'
+  },
+  TOP_RIGHT: {
+    top: '1em',
+    right: '1em'
+  },
+  BOTTOM_LEFT: {
+    bottom: '1em',
+    left: '1em'
+  },
+  BOTTOM_CENTER: {
+    bottom: '1em',
+    left: '50%'
+  },
+  BOTTOM_RIGHT: {
+    bottom: '1em',
+    right: '1em'
+  }
+};
+
+function defineStyle(props) {
+  for (var prop in props) {
+    defaultStyle[prop] = props[prop];
+  }
+}
+
+exports.default = defaultStyle;

goTorrentWebUI/node_modules/react-toastify/lib/index.js

@@ -13,10 +13,10 @@ var _toaster = require('./toaster');
 
 var _toaster2 = _interopRequireDefault(_toaster);
 
-var _style = require('./style');
+var _defaultStyle = require('./defaultStyle');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 exports.ToastContainer = _ToastContainer2.default;
 exports.toast = _toaster2.default;
-exports.style = _style.defineStyle;
+exports.style = _defaultStyle.defineStyle;

goTorrentWebUI/node_modules/react-toastify/lib/toaster.js

@@ -85,24 +85,23 @@ var toaster = _extends(function (content, options) {
     return false;
   },
   update: function update(id, options) {
-    if (container && typeof container.collection[id] !== 'undefined') {
-      var _container$collection = container.collection[id],
-          oldOptions = _container$collection.options,
-          oldContent = _container$collection.content;
+    setTimeout(function () {
+      if (container && typeof container.collection[id] !== 'undefined') {
+        var _container$collection = container.collection[id],
+            oldOptions = _container$collection.options,
+            oldContent = _container$collection.content;
 
-      var updateId = oldOptions.updateId !== null ? oldOptions.updateId + 1 : 1;
+        var updateId = oldOptions.updateId !== null ? oldOptions.updateId + 1 : 1;
 
-      var nextOptions = _extends({}, oldOptions, options, {
-        toastId: id,
-        updateId: updateId
-      });
-      var content = typeof nextOptions.render !== 'undefined' ? nextOptions.render : oldContent;
-      delete nextOptions.render;
-
-      return emitEvent(content, nextOptions);
-    }
-
-    return false;
+        var nextOptions = _extends({}, oldOptions, options, {
+          toastId: id,
+          updateId: updateId
+        });
+        var content = typeof nextOptions.render !== 'undefined' ? nextOptions.render : oldContent;
+        delete nextOptions.render;
+        emitEvent(content, nextOptions);
+      }
+    }, 0);
   }
 }, {
   POSITION: _constant.POSITION,