feat: dynamic width (#313)

* fix: height flick

* feat: dynamic width

* fix: top and bottom

* chore: code clean

Author: MadCcc

src/NoticeList.tsx

@@ -45,7 +45,7 @@ const NoticeList: FC<NoticeListProps> = (props) => {
 
   const { classNames: ctxCls } = useContext(NotificationContext);
 
-  const listRef = useRef<HTMLDivElement[]>([]);
+  const dictRef = useRef<Record<React.Key, HTMLDivElement>>({});
   const [latestNotice, setLatestNotice] = useState<HTMLDivElement>(null);
   const [hoverCount, setHoverCount] = useState(0);
 
@@ -91,21 +91,30 @@ const NoticeList: FC<NoticeListProps> = (props) => {
         // 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
         const index = keys.length - 1 - (dataIndex > -1 ? dataIndex : motionIndex - 1);
+        const transformX = placement === 'top' || placement === 'bottom' ? '-50%' : '0';
         const stackStyle: CSSProperties = {};
         if (stack) {
           if (index > 0) {
             stackStyle.height = expanded
-              ? listRef.current[index]?.offsetHeight
+              ? dictRef.current[key]?.offsetHeight
               : latestNotice?.offsetHeight;
-            stackStyle.transform = `translateY(${
-              (expanded
-                ? listRef.current.reduce(
-                    (acc, item, refIndex) => acc + (refIndex < index ? item?.offsetHeight ?? 0 : 0),
-                    0,
-                  ) +
-                  index * gap
-                : index * offset) * (placement.startsWith('top') ? 1 : -1)
-            }px)`;
+
+            // Transform
+            let verticalOffset = 0;
+            for (let i = 0; i < index; i++) {
+              verticalOffset += dictRef.current[keys[keys.length - 1 - i].key]?.offsetHeight + gap;
+            }
+
+            const transformY =
+              (expanded ? verticalOffset : index * offset) * (placement.startsWith('top') ? 1 : -1);
+            const scaleX =
+              !expanded && latestNotice?.offsetWidth && dictRef.current[key]?.offsetWidth
+                ? (latestNotice?.offsetWidth - offset * 2 * (index < 3 ? index : 3)) /
+                  dictRef.current[key]?.offsetWidth
+                : 1;
+            stackStyle.transform = `translate3d(${transformX}, ${transformY}px, 0) scaleX(${scaleX})`;
+          } else {
+            stackStyle.transform = `translate3d(${transformX}, 0, 0)`;
           }
         }
 
@@ -116,6 +125,7 @@ const NoticeList: FC<NoticeListProps> = (props) => {
             style={{
               ...motionStyle,
               ...stackStyle,
+              ...configStyle,
             }}
             onMouseEnter={() => setHoverCount((c) => c + 1)}
             onMouseLeave={() => setHoverCount((c) => c - 1)}
@@ -124,14 +134,13 @@ const NoticeList: FC<NoticeListProps> = (props) => {
               {...config}
               ref={(node) => {
                 if (dataIndex > -1) {
-                  listRef.current[index] = node;
+                  dictRef.current[key] = node;
+                } else {
+                  delete dictRef.current[key];
                 }
               }}
               prefixCls={prefixCls}
               className={clsx(configClassName, ctxCls?.notice)}
-              style={{
-                ...configStyle,
-              }}
               times={times}
               key={key}
               eventKey={key}