feat(components): transition-group组件支持回调事件

js-tool-pack · Jun 20, 2023 · 4e3f7ca · 4e3f7ca
1 parent 1e4354a
commit 4e3f7ca
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 4 deletions.
diff --git a/packages/components/src/transition-group/TransitionGroup.tsx b/packages/components/src/transition-group/TransitionGroup.tsx
@@ -7,14 +7,15 @@ import { TransitionGroupProps } from './transition-group.types';
 const TransitionGroup: React.FC<TransitionGroupProps> = (
   props,
 ): React.ReactElement => {
-  const { mode, name, tag, appear, children, ...rest } = props;
+  const { mode, name, on, tag, appear, children, ...rest } = props;
   const containerRef = useRef<HTMLElement>(null);
 
   const [_children, _appear] = useDispatcher(
     containerRef,
     name,
     children,
     appear,
+    on,
   );
 
   return React.createElement(

diff --git a/packages/components/src/transition-group/index.ts b/packages/components/src/transition-group/index.ts
@@ -1,2 +1,5 @@
-export type { TransitionGroupProps } from './transition-group.types';
+export type {
+  TransitionGroupProps,
+  TransitionGroupCB,
+} from './transition-group.types';
 export { default as TransitionGroup } from './TransitionGroup';
diff --git a/packages/components/src/transition-group/transition-gorup.hooks.ts b/packages/components/src/transition-group/transition-gorup.hooks.ts
@@ -8,14 +8,19 @@ import React, {
 import { LIFE_CIRCLE } from '../transition/transition.enums';
 import { ChildStatus } from './transition-group.enums';
 import { applyTranslation } from './transition-group.utils';
-import type { CompKey, Child } from './transition-group.types';
+import type {
+  CompKey,
+  Child,
+  TransitionGroupCB,
+} from './transition-group.types';
 import { useForceUpdate, useIsInitDep } from '@pkg/shared';
 
 export function useDispatcher(
   el: RefObject<HTMLElement>,
   name?: string,
   children?: React.ReactElement[],
   appear = false,
+  on?: TransitionGroupCB,
 ) {
   const forceUpdate = useForceUpdate();
   const isInit = useIsInitDep(children);
@@ -75,7 +80,8 @@ export function useDispatcher(
         const child: Child = {
           component: it,
           status: isInit && !appear ? ChildStatus.idle : ChildStatus.enter,
-          on(el, _, lifeCircle) {
+          on(el, status, lifeCircle) {
+            on?.(it.key!, status, lifeCircle);
             if (child.status === ChildStatus.enter) {
               if (lifeCircle === LIFE_CIRCLE.before) {
                 forceUpdate();

diff --git a/packages/components/src/transition-group/transition-group.types.ts b/packages/components/src/transition-group/transition-group.types.ts
@@ -1,6 +1,7 @@
 import type React from 'react';
 import type { CB, TransitionProps } from '../transition/transition.types';
 import type { ChildStatus } from './transition-group.enums';
+import { LIFE_CIRCLE, STATUS } from '../transition/transition.enums';
 
 export type CompKey = string | number;
 export interface Child {
@@ -9,11 +10,18 @@ export interface Child {
   status: ChildStatus;
 }
 
+export type TransitionGroupCB = (
+  key: number | string,
+  status: STATUS,
+  lifeCircle: LIFE_CIRCLE,
+) => void;
+
 export type TransitionGroupProps = Omit<
   React.HTMLAttributes<HTMLElement>,
   'children'
 > &
   Pick<TransitionProps, 'name' | 'appear' | 'mode'> & {
     children?: React.ReactElement[];
     tag?: keyof HTMLElementTagNameMap;
+    on?: TransitionGroupCB;
   };