refactor(components/message): 根据transition-group修改重构

js-tool-pack · Jul 27, 2023 · 73d2ff0 · 73d2ff0
1 parent 459f6c6
commit 73d2ff0
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 12 deletions.
diff --git a/packages/components/src/message/Message.tsx b/packages/components/src/message/Message.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import type { MessageProps } from './message.types';
 import type { RequiredPart } from '@tool-pack/types';
 import { getComponentClass, useForwardRef, useTimeDown } from '@pkg/shared';
@@ -40,9 +40,13 @@ export const Message: React.FC<MessageProps> = React.forwardRef<
   const [time, stop] = useTimeDown(duration);
   const rootRef = useForwardRef(ref);
 
+  const isTimeout = useRef(false);
+
   useEffect(() => {
+    if (isTimeout.current) return;
     if (duration > 0 && time <= 0) {
       onLeave?.();
+      isTimeout.current = true;
     }
   }, [time, onLeave]);
 
@@ -69,7 +73,7 @@ export const Message: React.FC<MessageProps> = React.forwardRef<
       {children}
       {showClose && (
         <Button size="small" plain="text" onClick={onLeave}>
-          <Icon>
+          <Icon size="0.8em">
             <Close />
           </Icon>
         </Button>

diff --git a/packages/components/src/message/MessageQueue.tsx b/packages/components/src/message/MessageQueue.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useImperativeHandle, useRef } from 'react';
 import { createPortal } from 'react-dom';
-import { TransitionGroup, TransitionGroupCB } from '../transition-group';
+import { TransitionGroup } from '../transition-group';
 import { getComponentClass, useForceUpdate } from '@pkg/shared';
 import { getClassNames } from '@tool-pack/basic';
 import { Message } from './Message';
@@ -9,7 +9,12 @@ import type {
   MessageQueueProps,
   MessageQueueRef,
 } from './message.types';
-import { TRANSITION_STATUS, TRANSITION_LIFE_CIRCLE } from '../transition';
+import {
+  Transition,
+  type TransitionCB,
+  TRANSITION_STATUS,
+  TRANSITION_LIFE_CIRCLE,
+} from '../transition';
 import LeaveQueue from './LeaveQueue';
 
 const rootClass = getComponentClass('message-queue');
@@ -50,7 +55,7 @@ export const MessageQueue: React.FC<MessageQueueProps> = React.forwardRef<
   // 需要维护一个离开动画队列,否则离开动画会堆叠在一起，
   const queue = useRef(new LeaveQueue(remove));
 
-  const on: TransitionGroupCB = useCallback((_, status, lifeCircle) => {
+  const on: TransitionCB = useCallback((_, status, lifeCircle) => {
     if (
       status === TRANSITION_STATUS.hide &&
       lifeCircle === TRANSITION_LIFE_CIRCLE.after
@@ -62,21 +67,24 @@ export const MessageQueue: React.FC<MessageQueueProps> = React.forwardRef<
   return createPortal(
     <TransitionGroup
       {...rest}
-      on={on}
       name={rootClass}
       tag="ul"
       className={getClassNames(rootClass, className)}>
       {MsgList.current.map((it) => {
         const { key, content, ...rest } = it;
         return (
-          <li key={key}>
-            <Message {...rest} onLeave={() => queue.current.push(it)}>
-              {content}
-            </Message>
-          </li>
+          <Transition key={key} on={on}>
+            <li>
+              <Message {...rest} onLeave={() => queue.current.push(it)}>
+                {content}
+              </Message>
+            </li>
+          </Transition>
         );
       })}
     </TransitionGroup>,
     document.body,
   );
 });
+
+MessageQueue.displayName = 'MessageQueue';
diff --git a/packages/components/src/message/index.scss b/packages/components/src/message/index.scss
@@ -62,7 +62,6 @@ $q: '#{$r}-queue';
     transition-timing-function: linear;
   }
   &-leave-active {
-    position: absolute;
     width: 100%;
   }
   &-enter-from,