react-toastify - npm Package Compare versions

Comparing version 2.2.1 to 2.2.2

lib/DefaultCloseButton.js

@@ -7,2 +7,5 @@ 'use strict';
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; /* eslint react/require-default-props: 0 */
+
+
 var _react = require('react');
@@ -16,15 +19,35 @@
 
+var _glamor = require('glamor');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-/* eslint react/require-default-props: 0 */
+var rule = function rule(isDefault) {
+  return (0, _glamor.css)({
+    padding: 0,
+    color: isDefault ? "#000" : "#fff",
+    fontWeight: "bold",
+    fontSize: "14px",
+    background: "transparent",
+    outline: "none",
+    border: "none",
+    cursor: "pointer",
+    opacity: isDefault ? "0.3" : "0.7",
+    transition: ".3s ease",
+    alignSelf: "flex-start",
+    ":hover, :focus": {
+      opacity: 1
+    }
+  });
+};
+
 function DefaultCloseButton(_ref) {
-  var closeToast = _ref.closeToast;
+  var closeToast = _ref.closeToast,
+      type = _ref.type;
 
   return _react2.default.createElement(
     'button',
-    {
-      className: 'toastify__close',
+    _extends({}, rule(type === "default"), {
       type: 'button',
       onClick: closeToast
-    },
+    }),
     '\u2716'
@@ -31,0 +54,0 @@ );

lib/DefaultTransition.js

@@ -17,2 +17,8 @@ "use strict";
 
+var _glamor = require("glamor");
+
+var _animation2 = require("./animation");
+
+var _animation3 = _interopRequireDefault(_animation2);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -22,2 +28,25 @@
 
+var animate = {
+  animationDuration: "0.75s",
+  animationFillMode: "both"
+};
+
+var animation = function animation(pos) {
+  var _getAnimation = (0, _animation3.default)(pos),
+      enter = _getAnimation.enter,
+      exit = _getAnimation.exit;
+
+  var enterAnimation = _glamor.css.keyframes('enter', _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);
+
+  return {
+    enter: (0, _glamor.css)(_extends({}, animate, { animationName: enterAnimation })),
+    exit: (0, _glamor.css)(_extends({}, animate, { animationName: exitAnimation }))
+  };
+};
+
 function DefaultTransition(_ref) {
@@ -28,2 +57,6 @@ var children = _ref.children,
 
+  var _animation = animation(position),
+      enter = _animation.enter,
+      exit = _animation.exit;
+
   return _react2.default.createElement(
@@ -34,10 +67,7 @@ _Transition2.default,
       onEnter: function onEnter(node) {
-        node.classList.add("toast-enter--" + position);
-        node.classList.add("toastify-animated");
+        node.classList.add(enter);
       },
       onExit: function onExit(node) {
-        node.classList.remove("toast-enter--" + position);
-        node.classList.remove("toastify-animated");
-        node.classList.add("toast-exit--" + position);
-        node.classList.add("toastify-animated");
+        node.classList.remove(enter);
+        node.classList.add(exit);
       }
@@ -44,0 +74,0 @@ }),

lib/index.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.toast = exports.ToastContainer = undefined;
+exports.style = exports.toast = exports.ToastContainer = undefined;
 
@@ -17,5 +17,8 @@ var _ToastContainer = require('./ToastContainer');
 
+var _style = require('./style');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 exports.ToastContainer = _ToastContainer2.default;
-exports.toast = _toaster2.default;
+exports.toast = _toaster2.default;
+exports.style = _style.defineStyle;

lib/ProgressBar.js

@@ -7,2 +7,4 @@ 'use strict';
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _react = require('react');
@@ -16,6 +18,31 @@
 
+var _glamor = require('glamor');
+
 var _constant = require('./constant');
 
+var _style = require('./style');
+
+var _style2 = _interopRequireDefault(_style);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+var trackProgress = _glamor.css.keyframes('track-progress', {
+  "0%": { width: "100%" },
+  "100%": { width: 0 }
+});
+
+var progress = function progress(type) {
+  return (0, _glamor.css)(_extends({
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    width: 0,
+    height: "5px",
+    zIndex: 999,
+    opacity: 0.7,
+    animation: trackProgress + ' linear 1',
+    backgroundColor: "rgba(255,255,255,.7)"
+  }, type === "default" ? { background: _style2.default.colorProgressDefault } : {}));
+};
+
 function ProgressBar(_ref) {
@@ -39,7 +66,7 @@ var delay = _ref.delay,
 
-  return _react2.default.createElement('div', {
-    className: 'toastify__progress toastify__progress--' + type + ' ' + className,
+  return _react2.default.createElement('div', _extends({}, progress(type), {
+    className: className,
     style: style,
     onAnimationEnd: closeToast
-  });
+  }));
 }
@@ -76,3 +103,3 @@
    */
-  className: _propTypes2.default.string
+  className: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object])
 };
@@ -79,0 +106,0 @@

lib/Toast.js

@@ -9,2 +9,4 @@ "use strict";
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _react = require("react");
@@ -18,2 +20,4 @@
 
+var _glamor = require("glamor");
+
 var _ProgressBar = require("./ProgressBar");
@@ -25,2 +29,6 @@
 
+var _style = require("./style");
+
+var _style2 = _interopRequireDefault(_style);
+
 var _objectValues = require("./util/objectValues");
@@ -40,2 +48,29 @@
 
+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: "sans-serif",
+    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 body = (0, _glamor.css)({
+  margin: "auto 0",
+  flex: 1
+});
+
 var Toast = function (_Component) {
@@ -86,5 +121,3 @@ _inherits(Toast, _Component);
     value: function getToastProps() {
-      var toastProps = {
-        className: "toastify-content toastify-content--" + this.props.type + " " + this.props.className
-      };
+      var toastProps = {};
 
@@ -110,9 +143,10 @@ if (this.props.autoClose !== false && this.props.pauseOnHover === true) {
           closeToast = _props.closeToast,
-          transition = _props.transition,
+          Transition = _props.transition,
           position = _props.position,
-          onExited = _props.onExited;
+          onExited = _props.onExited,
+          className = _props.className,
+          bodyClassName = _props.bodyClassName,
+          progressClassName = _props.progressClassName;
 
 
-      var Transition = transition;
-
       return _react2.default.createElement(
@@ -123,6 +157,6 @@ Transition,
           "div",
-          this.getToastProps(),
+          _extends({}, toast(type), this.getToastProps(), { className: className }),
           _react2.default.createElement(
             "div",
-            { className: "toastify__body " + this.props.bodyClassName },
+            _extends({}, body, { className: bodyClassName }),
             children
@@ -137,3 +171,3 @@ ),
             type: type,
-            className: this.props.progressClassName
+            className: progressClassName
           })
@@ -163,5 +197,5 @@ )
   type: _propTypes2.default.oneOf((0, _objectValues2.default)(_constant.TYPE)),
-  className: _propTypes2.default.string,
-  bodyClassName: _propTypes2.default.string,
-  progressClassName: _propTypes2.default.string
+  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])
 };
@@ -168,0 +202,0 @@ Toast.defaultProps = {

lib/ToastContainer.js

@@ -9,6 +9,6 @@ "use strict";
 
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
 var _react = require("react");
@@ -22,2 +22,4 @@
 
+var _glamor = require("glamor");
+
 var _TransitionGroup = require("react-transition-group/TransitionGroup");
@@ -41,2 +43,6 @@
 
+var _style = require("./style");
+
+var _style2 = _interopRequireDefault(_style);
+
 var _EventManager = require("./util/EventManager");
@@ -56,4 +62,2 @@
 
-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; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -65,2 +69,68 @@
 
+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 container = function container() {
+  return (0, _glamor.css)(_defineProperty({
+    zIndex: 999,
+    position: "fixed",
+    padding: "4px",
+    width: _style2.default.width,
+    boxSizing: "border-box",
+    color: "#fff"
+  }, "@media " + _style2.default.mobile, {
+    width: "100vw",
+    padding: 0
+  }));
+};
+
+var toastPosition = function toastPosition(pos) {
+  var rule = void 0;
+  var marginLeft = "-" + parseInt(_style2.default.width, 10) / 2 + "px";
+  switch (pos) {
+    case _constant.POSITION.TOP_LEFT:
+      rule = {
+        top: "1em",
+        left: "1em"
+      };
+      break;
+    case _constant.POSITION.TOP_CENTER:
+      rule = {
+        top: "1em",
+        left: "50%",
+        marginLeft: marginLeft
+      };
+      break;
+    case _constant.POSITION.TOP_RIGHT:
+    default:
+      rule = {
+        top: "1em",
+        right: "1em"
+      };
+      break;
+    case _constant.POSITION.BOTTOM_LEFT:
+      rule = {
+        bottom: "1em",
+        left: "1em"
+      };
+      break;
+    case _constant.POSITION.BOTTOM_CENTER:
+      rule = {
+        bottom: "1em",
+        left: "50%",
+        marginLeft: marginLeft
+      };
+      break;
+    case _constant.POSITION.BOTTOM_RIGHT:
+      rule = {
+        bottom: "1em",
+        right: "1em"
+      };
+  }
+  return (0, _glamor.css)(rule, (0, _glamor.css)(_defineProperty({}, "@media " + _style2.default.mobile, _extends({
+    left: 0,
+    margin: 0,
+    position: "fixed"
+  }, pos.substring(0, 3) === "top" ? { top: 0 } : { bottom: 0 }))));
+};
+
 var ToastContainer = function (_Component) {
@@ -124,3 +194,3 @@ _inherits(ToastContainer, _Component);
     key: "makeCloseButton",
-    value: function makeCloseButton(toastClose, toastId) {
+    value: function makeCloseButton(toastClose, toastId, type) {
       var _this3 = this;
@@ -137,3 +207,4 @@
           return _this3.removeToast(toastId);
-        }
+        },
+        type: type
       });
@@ -171,3 +242,3 @@ }
         type: options.type,
-        closeButton: this.makeCloseButton(options.closeButton, toastId),
+        closeButton: this.makeCloseButton(options.closeButton, toastId, options.type),
         position: options.position || this.props.position,
@@ -222,11 +293,5 @@ transition: options.transition || this.props.transition,
   }, {
-    key: "hasToast",
-    value: function hasToast() {
-      return this.state.toast.length > 0;
-    }
-  }, {
     key: "getContainerProps",
-    value: function getContainerProps(pos, disablePointer) {
+    value: function getContainerProps(disablePointer) {
       var props = {
-        className: "toastify toastify--" + pos,
         style: disablePointer ? { pointerEvents: "none" } : {}
@@ -236,3 +301,3 @@ };
       if (this.props.className !== null) {
-        props.className = props.className + " " + this.props.className;
+        props.className = this.props.className;
       }
@@ -271,3 +336,3 @@
           _TransitionGroup2.default,
-          _extends({}, _this5.getContainerProps(position, disablePointer), {
+          _extends({}, container(), toastPosition(position), _this5.getContainerProps(disablePointer), {
             key: "container-" + position
@@ -332,3 +397,3 @@ }),
    */
-  className: _propTypes2.default.string,
+  className: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]),
 
@@ -343,3 +408,3 @@ /**
    */
-  toastClassName: _propTypes2.default.string,
+  toastClassName: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]),
 
@@ -349,3 +414,3 @@ /**
    */
-  bodyClassName: _propTypes2.default.string,
+  bodyClassName: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]),
 
@@ -355,3 +420,3 @@ /**
    */
-  progressClassName: _propTypes2.default.string,
+  progressClassName: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]),
 
@@ -358,0 +423,0 @@ /**

lib/toaster.js

@@ -34,3 +34,3 @@ 'use strict';
   progressClassName: null,
-  tansition: null
+  transition: null
 };
@@ -85,3 +85,3 @@
     var id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-    return _EventManager2.default.emit(_constant.ACTION.CLEAR, id);
+    return container && _EventManager2.default.emit(_constant.ACTION.CLEAR, id);
   },
@@ -88,0 +88,0 @@ isActive: function isActive() {

package.json

 {
   "name": "react-toastify",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "description": "React notification made easy",
@@ -5,0 +5,0 @@ "keywords": [

README.md

 # React Toastify [![Build Status](https://travis-ci.org/fkhadra/react-toastify.svg?branch=master)](https://travis-ci.org/fkhadra/react-toastify) [![npm](https://img.shields.io/npm/dm/react-toastify.svg)]() [![npm](https://img.shields.io/npm/v/react-toastify.svg)]() [![license](https://img.shields.io/github/license/fkhadra/react-toastify.svg?maxAge=2592000)]() [![Coverage Status](https://coveralls.io/repos/github/fkhadra/react-toastify/badge.svg?branch=master)](https://coveralls.io/github/fkhadra/react-toastify?branch=master)
 
 
+:fire: Try [react-toastify v3](https://github.com/fkhadra/react-toastify/tree/v3-beta) ! :fire:
 
+```
+$ npm install --save react-toastify@next
+$ yarn add react-toastify@next
+```
+
 ![React toastify](https://user-images.githubusercontent.com/5574267/28753331-1380a2f0-7534-11e7-8456-0b32e959db07.gif "React toastify")
 
+
 <a target='_blank' rel='nofollow' href='https://app.codesponsor.io/link/qxxWZzh3YmHPKmwHHm79SuG4/fkhadra/react-toastify'>
@@ -8,0 +15,0 @@ <img alt='Sponsor' width='888' height='68' src='https://app.codesponsor.io/embed/qxxWZzh3YmHPKmwHHm79SuG4/fkhadra/react-toastify.svg' />

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

496888

increased by2.17%

Number of package files

45

increased by7.14%

Lines of code

2062

increased by19.54%

Number of lines in readme file

722

increased by0.98%

No dependency changes