From e07753a22e283c197c5d093b8f75f8f1430fae36 Mon Sep 17 00:00:00 2001
From: dyh_a <xinzon32177@163.com>
Date: Fri, 16 Jun 2023 18:42:23 +0800
Subject: [PATCH] =?UTF-8?q?feat(components/transition-group):=20=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4=E7=B1=BB=E5=9E=8B=E5=92=8C=E5=AF=BC=E5=87=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/transition-group/TransitionGroup.tsx  | 32 +++++++++----------
 .../components/src/transition-group/index.ts  |  1 +
 .../transition-group.types.ts                 | 11 ++++++-
 3 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/packages/components/src/transition-group/TransitionGroup.tsx b/packages/components/src/transition-group/TransitionGroup.tsx
index 0b77cc38..a70a15d9 100644
--- a/packages/components/src/transition-group/TransitionGroup.tsx
+++ b/packages/components/src/transition-group/TransitionGroup.tsx
@@ -1,35 +1,31 @@
 import React, { memo, useRef } from 'react';
 import { Transition } from '../transition/index';
-import type { Mode } from '../transition/transition.types';
 import { ChildStatus } from './transition-group.enums';
 import { useDispatcher } from './transition-gorup.hooks';
+import { TransitionGroupProps } from './transition-group.types';
 
-const TransitionGroup: React.FC<{
-  name?: string;
-  mode?: Mode;
-  children?: React.ReactElement[];
-  appear?: boolean;
-  tag?: keyof HTMLElementTagNameMap;
-  className?: string;
-}> = ({ mode, className, name, tag = 'div', ...props }): JSX.Element => {
+const TransitionGroup: React.FC<TransitionGroupProps> = (
+  props,
+): React.ReactElement => {
+  const { mode, name, tag, appear, children, ...rest } = props;
   const containerRef = useRef<HTMLElement>(null);
 
-  const [children, appear] = useDispatcher(
+  const [_children, _appear] = useDispatcher(
     containerRef,
     name,
-    props.children,
-    props.appear,
+    children,
+    appear,
   );
 
   return React.createElement(
-    tag,
-    { ref: containerRef, className },
-    children.map((child) => {
+    tag as string,
+    { ...rest, ref: containerRef },
+    _children.map((child) => {
       return (
         <Transition
           name={name}
           mode={mode}
-          appear={appear}
+          appear={_appear}
           key={child.component.key}
           on={child.on}>
           {child.status === ChildStatus.leave ? undefined : child.component}
@@ -38,4 +34,8 @@ const TransitionGroup: React.FC<{
     }),
   );
 };
+
+TransitionGroup.defaultProps = { tag: 'div' };
+TransitionGroup.displayName = 'TransitionGroup';
+
 export default memo(TransitionGroup);
diff --git a/packages/components/src/transition-group/index.ts b/packages/components/src/transition-group/index.ts
index c888ec33..b071cf7e 100644
--- a/packages/components/src/transition-group/index.ts
+++ b/packages/components/src/transition-group/index.ts
@@ -1 +1,2 @@
+export type { TransitionGroupProps } from './transition-group.types';
 export { default as TransitionGroup } from './TransitionGroup';
diff --git a/packages/components/src/transition-group/transition-group.types.ts b/packages/components/src/transition-group/transition-group.types.ts
index c29e8aed..36366004 100644
--- a/packages/components/src/transition-group/transition-group.types.ts
+++ b/packages/components/src/transition-group/transition-group.types.ts
@@ -1,5 +1,5 @@
 import type React from 'react';
-import type { CB } from '../transition/transition.types';
+import type { CB, TransitionProps } from '../transition/transition.types';
 import type { ChildStatus } from './transition-group.enums';
 
 export type CompKey = string | number;
@@ -8,3 +8,12 @@ export interface Child {
   on: CB;
   status: ChildStatus;
 }
+
+export type TransitionGroupProps = Omit<
+  React.HTMLAttributes<HTMLElement>,
+  'children'
+> &
+  Pick<TransitionProps, 'name' | 'appear' | 'mode'> & {
+    children?: React.ReactElement[];
+    tag?: keyof HTMLElementTagNameMap;
+  };