rc-notification - npm Package Compare versions

Comparing version 5.2.0-0 to 5.2.0-1

es/NoticeList.js

@@ -26,3 +26,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
     ctxCls = _useContext.classNames;
-  var listRef = useRef([]);
+  var dictRef = useRef({});
   var _useState = useState(null),
@@ -82,3 +82,4 @@ _useState2 = _slicedToArray(_useState, 2),
       motionClassName = _ref2.className,
-      motionStyle = _ref2.style;
+      motionStyle = _ref2.style,
+      motionIndex = _ref2.index;
     var _ref3 = config,
@@ -90,14 +91,27 @@ key = _ref3.key,
       configStyle = _ref4.style;
-    var index = keys.length - 1 - keys.findIndex(function (item) {
+    var dataIndex = keys.findIndex(function (item) {
       return item.key === key;
     });
+
+    // If dataIndex is -1, that means this notice has been removed in data, but still in dom
+    // Should minus (motionIndex - 1) to get the correct index because keys.length is not the same as dom length
+    var index = keys.length - 1 - (dataIndex > -1 ? dataIndex : motionIndex - 1);
+    var transformX = placement === 'top' || placement === 'bottom' ? '-50%' : '0';
     var stackStyle = {};
     if (stack) {
       if (index > 0) {
-        var _listRef$current$inde;
-        stackStyle.height = expanded ? (_listRef$current$inde = listRef.current[index]) === null || _listRef$current$inde === void 0 ? void 0 : _listRef$current$inde.offsetHeight : latestNotice === null || latestNotice === void 0 ? void 0 : latestNotice.offsetHeight;
-        stackStyle.transform = "translateY(".concat((expanded ? listRef.current.reduce(function (acc, item, refIndex) {
-          var _item$offsetHeight;
-          return acc + (refIndex < index ? (_item$offsetHeight = item === null || item === void 0 ? void 0 : item.offsetHeight) !== null && _item$offsetHeight !== void 0 ? _item$offsetHeight : 0 : 0);
-        }, 0) + index * gap : index * offset) * (placement.startsWith('top') ? 1 : -1), "px)");
+        var _dictRef$current$key, _dictRef$current$key2, _dictRef$current$key3;
+        stackStyle.height = expanded ? (_dictRef$current$key = dictRef.current[key]) === null || _dictRef$current$key === void 0 ? void 0 : _dictRef$current$key.offsetHeight : latestNotice === null || latestNotice === void 0 ? void 0 : latestNotice.offsetHeight;
+
+        // Transform
+        var verticalOffset = 0;
+        for (var i = 0; i < index; i++) {
+          var _dictRef$current$keys;
+          verticalOffset += ((_dictRef$current$keys = dictRef.current[keys[keys.length - 1 - i].key]) === null || _dictRef$current$keys === void 0 ? void 0 : _dictRef$current$keys.offsetHeight) + gap;
+        }
+        var transformY = (expanded ? verticalOffset : index * offset) * (placement.startsWith('top') ? 1 : -1);
+        var scaleX = !expanded && latestNotice !== null && latestNotice !== void 0 && latestNotice.offsetWidth && (_dictRef$current$key2 = dictRef.current[key]) !== null && _dictRef$current$key2 !== void 0 && _dictRef$current$key2.offsetWidth ? ((latestNotice === null || latestNotice === void 0 ? void 0 : latestNotice.offsetWidth) - offset * 2 * (index < 3 ? index : 3)) / ((_dictRef$current$key3 = dictRef.current[key]) === null || _dictRef$current$key3 === void 0 ? void 0 : _dictRef$current$key3.offsetWidth) : 1;
+        stackStyle.transform = "translate3d(".concat(transformX, ", ").concat(transformY, "px, 0) scaleX(").concat(scaleX, ")");
+      } else {
+        stackStyle.transform = "translate3d(".concat(transformX, ", 0, 0)");
       }
@@ -108,3 +122,3 @@ }
       className: clsx("".concat(prefixCls, "-notice-wrapper"), motionClassName),
-      style: _objectSpread(_objectSpread({}, motionStyle), stackStyle),
+      style: _objectSpread(_objectSpread(_objectSpread({}, motionStyle), stackStyle), configStyle),
       onMouseEnter: function onMouseEnter() {
@@ -122,7 +136,10 @@ return setHoverCount(function (c) {
       ref: function ref(node) {
-        listRef.current[index] = node;
+        if (dataIndex > -1) {
+          dictRef.current[key] = node;
+        } else {
+          delete dictRef.current[key];
+        }
       },
       prefixCls: prefixCls,
       className: clsx(configClassName, ctxCls === null || ctxCls === void 0 ? void 0 : ctxCls.notice),
-      style: _objectSpread({}, configStyle),
       times: times,
@@ -129,0 +146,0 @@ key: key,

lib/NoticeList.js

@@ -36,3 +36,3 @@ "use strict";
     ctxCls = _useContext.classNames;
-  var listRef = (0, _react.useRef)([]);
+  var dictRef = (0, _react.useRef)({});
   var _useState = (0, _react.useState)(null),
@@ -92,3 +92,4 @@ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       motionClassName = _ref2.className,
-      motionStyle = _ref2.style;
+      motionStyle = _ref2.style,
+      motionIndex = _ref2.index;
     var _ref3 = config,
@@ -100,14 +101,27 @@ key = _ref3.key,
       configStyle = _ref4.style;
-    var index = keys.length - 1 - keys.findIndex(function (item) {
+    var dataIndex = keys.findIndex(function (item) {
       return item.key === key;
     });
+
+    // If dataIndex is -1, that means this notice has been removed in data, but still in dom
+    // Should minus (motionIndex - 1) to get the correct index because keys.length is not the same as dom length
+    var index = keys.length - 1 - (dataIndex > -1 ? dataIndex : motionIndex - 1);
+    var transformX = placement === 'top' || placement === 'bottom' ? '-50%' : '0';
     var stackStyle = {};
     if (stack) {
       if (index > 0) {
-        var _listRef$current$inde;
-        stackStyle.height = expanded ? (_listRef$current$inde = listRef.current[index]) === null || _listRef$current$inde === void 0 ? void 0 : _listRef$current$inde.offsetHeight : latestNotice === null || latestNotice === void 0 ? void 0 : latestNotice.offsetHeight;
-        stackStyle.transform = "translateY(".concat((expanded ? listRef.current.reduce(function (acc, item, refIndex) {
-          var _item$offsetHeight;
-          return acc + (refIndex < index ? (_item$offsetHeight = item === null || item === void 0 ? void 0 : item.offsetHeight) !== null && _item$offsetHeight !== void 0 ? _item$offsetHeight : 0 : 0);
-        }, 0) + index * gap : index * offset) * (placement.startsWith('top') ? 1 : -1), "px)");
+        var _dictRef$current$key, _dictRef$current$key2, _dictRef$current$key3;
+        stackStyle.height = expanded ? (_dictRef$current$key = dictRef.current[key]) === null || _dictRef$current$key === void 0 ? void 0 : _dictRef$current$key.offsetHeight : latestNotice === null || latestNotice === void 0 ? void 0 : latestNotice.offsetHeight;
+
+        // Transform
+        var verticalOffset = 0;
+        for (var i = 0; i < index; i++) {
+          var _dictRef$current$keys;
+          verticalOffset += ((_dictRef$current$keys = dictRef.current[keys[keys.length - 1 - i].key]) === null || _dictRef$current$keys === void 0 ? void 0 : _dictRef$current$keys.offsetHeight) + gap;
+        }
+        var transformY = (expanded ? verticalOffset : index * offset) * (placement.startsWith('top') ? 1 : -1);
+        var scaleX = !expanded && latestNotice !== null && latestNotice !== void 0 && latestNotice.offsetWidth && (_dictRef$current$key2 = dictRef.current[key]) !== null && _dictRef$current$key2 !== void 0 && _dictRef$current$key2.offsetWidth ? ((latestNotice === null || latestNotice === void 0 ? void 0 : latestNotice.offsetWidth) - offset * 2 * (index < 3 ? index : 3)) / ((_dictRef$current$key3 = dictRef.current[key]) === null || _dictRef$current$key3 === void 0 ? void 0 : _dictRef$current$key3.offsetWidth) : 1;
+        stackStyle.transform = "translate3d(".concat(transformX, ", ").concat(transformY, "px, 0) scaleX(").concat(scaleX, ")");
+      } else {
+        stackStyle.transform = "translate3d(".concat(transformX, ", 0, 0)");
       }
@@ -118,3 +132,3 @@ }
       className: (0, _classnames.default)("".concat(prefixCls, "-notice-wrapper"), motionClassName),
-      style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, motionStyle), stackStyle),
+      style: (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, motionStyle), stackStyle), configStyle),
       onMouseEnter: function onMouseEnter() {
@@ -132,7 +146,10 @@ return setHoverCount(function (c) {
       ref: function ref(node) {
-        listRef.current[index] = node;
+        if (dataIndex > -1) {
+          dictRef.current[key] = node;
+        } else {
+          delete dictRef.current[key];
+        }
       },
       prefixCls: prefixCls,
       className: (0, _classnames.default)(configClassName, ctxCls === null || ctxCls === void 0 ? void 0 : ctxCls.notice),
-      style: (0, _objectSpread2.default)({}, configStyle),
       times: times,
@@ -139,0 +156,0 @@ key: key,

package.json

 {
   "name": "rc-notification",
-  "version": "5.2.0-0",
+  "version": "5.2.0-1",
   "description": "notification ui component for react",
@@ -82,3 +82,3 @@ "engines": {
     "classnames": "2.x",
-    "rc-motion": "^2.8.0",
+    "rc-motion": "^2.9.0",
     "rc-util": "^5.20.1"
@@ -85,0 +85,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

80723

increased by3.21%

Lines of code

1606

increased by2.03%

Dependency changes

• Updatedrc-motion@^2.9.0