rc-notification - npm Package Compare versions

Comparing version 4.4.0 to 4.5.0

es/Notice.d.ts

@@ -24,5 +24,2 @@ import React, { Component } from 'react';
         duration: number;
-        style: {
-            right: string;
-        };
     };
@@ -33,3 +30,3 @@ closeTimer: number | null;
     componentWillUnmount(): void;
-    close: (e?: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
+    close: (e?: React.MouseEvent<HTMLAnchorElement>) => void;
     startCloseTimer: () => void;
@@ -36,0 +33,0 @@ clearCloseTimer: () => void;

es/Notice.js

@@ -5,9 +5,3 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function () { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React, { Component } from 'react';
@@ -137,6 +131,3 @@ import ReactDOM from 'react-dom';
   onClose: function onClose() {},
-  duration: 1.5,
-  style: {
-    right: '50%'
-  }
+  duration: 1.5
 };

es/Notification.d.ts

@@ -1,2 +0,2 @@
-import React, { Component } from 'react';
+import React, { Component, ReactText } from 'react';
 import { NoticeProps } from './Notice';
@@ -51,5 +51,11 @@ export interface NoticeContent extends Omit<NoticeProps, 'prefixCls' | 'children'> {
     add: (notice: NoticeContent, holderCallback?: HolderReadyCallback) => void;
-    remove: (key: string | number) => void;
+    remove: (key: React.Key) => void;
+    noticePropsMap: Record<React.Key, {
+        props: NoticeProps & {
+            key: ReactText;
+        };
+        holderCallback?: HolderReadyCallback;
+    }>;
     render(): JSX.Element;
 }
 export default Notification;

es/Notification.js

 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function () { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
-import Animate from 'rc-animate';
+import classNames from 'classnames';
+import { CSSMotionList } from 'rc-motion';
 import createChainedFunction from "rc-util/es/createChainedFunction";
-import classnames from 'classnames';
 import Notice from './Notice';
@@ -90,6 +80,7 @@ import _useNotification from './useNotification';
     _this.remove = function (key) {
-      _this.setState(function (previousState) {
+      _this.setState(function (_ref) {
+        var notices = _ref.notices;
         return {
-          notices: previousState.notices.filter(function (_ref) {
-            var notice = _ref.notice;
+          notices: notices.filter(function (_ref2) {
+            var notice = _ref2.notice;
             return notice.key !== key;
@@ -101,2 +92,3 @@ })
 
+    _this.noticePropsMap = {};
     return _this;
@@ -130,5 +122,6 @@ }
           style = _this$props2.style;
-      var noticeNodes = notices.map(function (_ref2, index) {
-        var notice = _ref2.notice,
-            holderCallback = _ref2.holderCallback;
+      var noticeKeys = [];
+      notices.forEach(function (_ref3, index) {
+        var notice = _ref3.notice,
+            holderCallback = _ref3.holderCallback;
         var update = Boolean(index === notices.length - 1 && notice.updateKey);
@@ -147,8 +140,34 @@ var key = notice.updateKey ? notice.updateKey : notice.key;
           children: notice.content
-        });
+        }); // Give to motion
 
+
+        noticeKeys.push(key);
+        _this2.noticePropsMap[key] = {
+          props: noticeProps,
+          holderCallback: holderCallback
+        };
+      });
+      return React.createElement("div", {
+        className: classNames(prefixCls, className),
+        style: style
+      }, React.createElement(CSSMotionList, {
+        keys: noticeKeys,
+        motionName: this.getTransitionName(),
+        onLeaveEnd: function onLeaveEnd(_, __, _ref4) {
+          var key = _ref4.key;
+          delete _this2.noticePropsMap[key];
+        }
+      }, function (_ref5) {
+        var key = _ref5.key,
+            motionClassName = _ref5.className,
+            motionStyle = _ref5.style;
+        var _this2$noticePropsMap = _this2.noticePropsMap[key],
+            noticeProps = _this2$noticePropsMap.props,
+            holderCallback = _this2$noticePropsMap.holderCallback;
+
         if (holderCallback) {
           return React.createElement("div", {
             key: key,
-            className: "".concat(prefixCls, "-hook-holder"),
+            className: classNames(motionClassName, "".concat(prefixCls, "-hook-holder")),
+            style: _objectSpread({}, motionStyle),
             ref: function ref(div) {
@@ -170,10 +189,7 @@ if (typeof key === 'undefined') {
 
-        return React.createElement(Notice, Object.assign({}, noticeProps));
-      });
-      return React.createElement("div", {
-        className: classnames(prefixCls, className),
-        style: style
-      }, React.createElement(Animate, {
-        transitionName: this.getTransitionName()
-      }, noticeNodes));
+        return React.createElement(Notice, Object.assign({}, noticeProps, {
+          className: classNames(motionClassName, noticeProps === null || noticeProps === void 0 ? void 0 : noticeProps.className),
+          style: _objectSpread(_objectSpread({}, motionStyle), noticeProps === null || noticeProps === void 0 ? void 0 : noticeProps.style)
+        }));
+      }));
     }
@@ -195,5 +211,5 @@ }]);
 Notification.newInstance = function newNotificationInstance(properties, callback) {
-  var _ref3 = properties || {},
-      getContainer = _ref3.getContainer,
-      props = _objectWithoutProperties(_ref3, ["getContainer"]);
+  var _ref6 = properties || {},
+      getContainer = _ref6.getContainer,
+      props = _objectWithoutProperties(_ref6, ["getContainer"]);
 
@@ -200,0 +216,0 @@ var div = document.createElement('div');

lib/Notice.d.ts

@@ -24,5 +24,2 @@ import React, { Component } from 'react';
         duration: number;
-        style: {
-            right: string;
-        };
     };
@@ -33,3 +30,3 @@ closeTimer: number | null;
     componentWillUnmount(): void;
-    close: (e?: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
+    close: (e?: React.MouseEvent<HTMLAnchorElement>) => void;
     startCloseTimer: () => void;
@@ -36,0 +33,0 @@ clearCloseTimer: () => void;

lib/Notice.js

@@ -20,6 +20,4 @@ "use strict";
 
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
 
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
 var _react = _interopRequireWildcard(require("react"));
@@ -31,10 +29,6 @@
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function () { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-
 var Notice = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(Notice, _Component);
 
-  var _super = _createSuper(Notice);
+  var _super = (0, _createSuper2.default)(Notice);
 
@@ -155,6 +149,3 @@ function Notice() {
   onClose: function onClose() {},
-  duration: 1.5,
-  style: {
-    right: '50%'
-  }
+  duration: 1.5
 };

lib/Notification.d.ts

@@ -1,2 +0,2 @@
-import React, { Component } from 'react';
+import React, { Component, ReactText } from 'react';
 import { NoticeProps } from './Notice';
@@ -51,5 +51,11 @@ export interface NoticeContent extends Omit<NoticeProps, 'prefixCls' | 'children'> {
     add: (notice: NoticeContent, holderCallback?: HolderReadyCallback) => void;
-    remove: (key: string | number) => void;
+    remove: (key: React.Key) => void;
+    noticePropsMap: Record<React.Key, {
+        props: NoticeProps & {
+            key: ReactText;
+        };
+        holderCallback?: HolderReadyCallback;
+    }>;
     render(): JSX.Element;
 }
 export default Notification;

lib/Notification.js

@@ -14,3 +14,3 @@ "use strict";
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 
@@ -23,6 +23,4 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
 
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
 var _react = _interopRequireWildcard(require("react"));
@@ -32,8 +30,8 @@
 
-var _rcAnimate = _interopRequireDefault(require("rc-animate"));
+var _classnames = _interopRequireDefault(require("classnames"));
 
+var _rcMotion = require("rc-motion");
+
 var _createChainedFunction = _interopRequireDefault(require("rc-util/lib/createChainedFunction"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
 var _Notice = _interopRequireDefault(require("./Notice"));
@@ -43,10 +41,2 @@
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function () { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-
 var seed = 0;
@@ -64,3 +54,3 @@ var now = Date.now();
 
-  var _super = _createSuper(Notification);
+  var _super = (0, _createSuper2.default)(Notification);
 
@@ -118,6 +108,7 @@ function Notification() {
     _this.remove = function (key) {
-      _this.setState(function (previousState) {
+      _this.setState(function (_ref) {
+        var notices = _ref.notices;
         return {
-          notices: previousState.notices.filter(function (_ref) {
-            var notice = _ref.notice;
+          notices: notices.filter(function (_ref2) {
+            var notice = _ref2.notice;
             return notice.key !== key;
@@ -129,2 +120,3 @@ })
 
+    _this.noticePropsMap = {};
     return _this;
@@ -158,10 +150,10 @@ }
           style = _this$props2.style;
-      var noticeNodes = notices.map(function (_ref2, index) {
-        var notice = _ref2.notice,
-            holderCallback = _ref2.holderCallback;
+      var noticeKeys = [];
+      notices.forEach(function (_ref3, index) {
+        var notice = _ref3.notice,
+            holderCallback = _ref3.holderCallback;
         var update = Boolean(index === notices.length - 1 && notice.updateKey);
         var key = notice.updateKey ? notice.updateKey : notice.key;
         var onClose = (0, _createChainedFunction.default)(_this2.remove.bind(_this2, notice.key), notice.onClose);
-
-        var noticeProps = _objectSpread(_objectSpread(_objectSpread({
+        var noticeProps = (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({
           prefixCls: prefixCls,
@@ -175,8 +167,33 @@ closeIcon: closeIcon
           children: notice.content
-        });
+        }); // Give to motion
 
+        noticeKeys.push(key);
+        _this2.noticePropsMap[key] = {
+          props: noticeProps,
+          holderCallback: holderCallback
+        };
+      });
+      return _react.default.createElement("div", {
+        className: (0, _classnames.default)(prefixCls, className),
+        style: style
+      }, _react.default.createElement(_rcMotion.CSSMotionList, {
+        keys: noticeKeys,
+        motionName: this.getTransitionName(),
+        onLeaveEnd: function onLeaveEnd(_, __, _ref4) {
+          var key = _ref4.key;
+          delete _this2.noticePropsMap[key];
+        }
+      }, function (_ref5) {
+        var key = _ref5.key,
+            motionClassName = _ref5.className,
+            motionStyle = _ref5.style;
+        var _this2$noticePropsMap = _this2.noticePropsMap[key],
+            noticeProps = _this2$noticePropsMap.props,
+            holderCallback = _this2$noticePropsMap.holderCallback;
+
         if (holderCallback) {
           return _react.default.createElement("div", {
             key: key,
-            className: "".concat(prefixCls, "-hook-holder"),
+            className: (0, _classnames.default)(motionClassName, "".concat(prefixCls, "-hook-holder")),
+            style: (0, _objectSpread2.default)({}, motionStyle),
             ref: function ref(div) {
@@ -198,10 +215,7 @@ if (typeof key === 'undefined') {
 
-        return _react.default.createElement(_Notice.default, Object.assign({}, noticeProps));
-      });
-      return _react.default.createElement("div", {
-        className: (0, _classnames.default)(prefixCls, className),
-        style: style
-      }, _react.default.createElement(_rcAnimate.default, {
-        transitionName: this.getTransitionName()
-      }, noticeNodes));
+        return _react.default.createElement(_Notice.default, Object.assign({}, noticeProps, {
+          className: (0, _classnames.default)(motionClassName, noticeProps === null || noticeProps === void 0 ? void 0 : noticeProps.className),
+          style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, motionStyle), noticeProps === null || noticeProps === void 0 ? void 0 : noticeProps.style)
+        }));
+      }));
     }
@@ -222,5 +236,5 @@ }]);
 Notification.newInstance = function newNotificationInstance(properties, callback) {
-  var _ref3 = properties || {},
-      getContainer = _ref3.getContainer,
-      props = (0, _objectWithoutProperties2.default)(_ref3, ["getContainer"]);
+  var _ref6 = properties || {},
+      getContainer = _ref6.getContainer,
+      props = (0, _objectWithoutProperties2.default)(_ref6, ["getContainer"]);
 
@@ -227,0 +241,0 @@ var div = document.createElement('div');

package.json

 {
   "name": "rc-notification",
-  "version": "4.4.0",
+  "version": "4.5.0",
   "description": "notification ui component for react",
@@ -51,3 +51,3 @@ "engines": {
     "@types/classnames": "^2.2.10",
-    "@types/jest": "^25.1.0",
+    "@types/jest": "^26.0.4",
     "@types/react": "^16.9.34",
@@ -58,3 +58,3 @@ "@types/react-dom": "^16.9.7",
     "enzyme-to-json": "^3.4.0",
-    "eslint": "^6.8.0",
+    "eslint": "^7.8.1",
     "father": "^2.13.2",
@@ -70,5 +70,5 @@ "less": "^3.10.3",
     "classnames": "2.x",
-    "rc-animate": "3.x",
+    "rc-motion": "^2.1.1",
     "rc-util": "^5.0.1"
   }
 }

No alert changes

Improved metrics

Lines of code

1033

2.18%

Worsened metrics

Total package byte prevSize

47720

-5.32%

Dependency changes

• + Added

  rc-motion@^2.1.1

• + Added

  rc-motion@2.9.5
  (transitive)

• - Removed

  rc-animate@3.x

• - Removed

  @ant-design/css-animation@1.7.3
  (transitive)

• - Removed

  add-dom-event-listener@1.1.0
  (transitive)

• - Removed

  js-tokens@4.0.0
  (transitive)

• - Removed

  loose-envify@1.4.0
  (transitive)

• - Removed

  object-assign@4.1.1
  (transitive)

• - Removed

  performance-now@2.1.0
  (transitive)

• - Removed

  prop-types@15.8.1
  (transitive)

• - Removed

  raf@3.4.1
  (transitive)

• - Removed

  rc-animate@3.1.1
  (transitive)

• - Removed

  rc-util@4.21.1
  (transitive)

• - Removed

  react-is@16.13.1
  (transitive)

• - Removed

  react-lifecycles-compat@3.0.4
  (transitive)

• - Removed

  shallowequal@1.1.0
  (transitive)