feat(components/transition): 新增 expired 生命周期

packages/components/src/transition/__tests__/Transition.test.tsx

@@ -1,6 +1,6 @@
 import { testAttrs } from '~/testAttrs';
 import { Transition, TRANSITION_STATUS, TRANSITION_LIFE_CIRCLE } from '..';
-import { fireEvent, render } from '@testing-library/react';
+import { act, fireEvent, render } from '@testing-library/react';
 import { useEffect, useReducer, useRef } from 'react';
 import { Button } from '~/button';
 
@@ -47,6 +47,7 @@ describe('Transition', () => {
   });
 
   test('on', () => {
+    jest.useFakeTimers();
     const on = jest.fn();
     expect(
       render(
@@ -55,12 +56,32 @@ describe('Transition', () => {
         </Transition>,
       ).container.firstChild,
     ).toMatchSnapshot();
+
+    act(() => jest.advanceTimersByTime(500));
+
     expect(on).toBeCalled();
-    expect(on.mock.calls.length).toBe(3);
+    expect(on.mock.calls.length).toBe(5);
     expect(on.mock.calls.map((it) => it.slice(1))).toEqual([
       [TRANSITION_STATUS.show, TRANSITION_LIFE_CIRCLE.before],
       [TRANSITION_STATUS.show, TRANSITION_LIFE_CIRCLE.ready],
       [TRANSITION_STATUS.show, TRANSITION_LIFE_CIRCLE.go],
+      [TRANSITION_STATUS.show, TRANSITION_LIFE_CIRCLE.expired],
+      [TRANSITION_STATUS.idle, TRANSITION_LIFE_CIRCLE.before],
+    ]);
+
+    on.mock.calls.length = 0;
+
+    render(
+      <Transition appear={false} on={on}>
+        <div>foo bar</div>
+      </Transition>,
+    );
+
+    act(() => jest.advanceTimersByTime(500));
+
+    expect(on.mock.calls.length).toBe(1);
+    expect(on.mock.calls.map((it) => it.slice(1))).toEqual([
+      [TRANSITION_STATUS.idle, TRANSITION_LIFE_CIRCLE.before],
     ]);
   });
 

packages/components/src/transition/demo/expired.tsx

@@ -0,0 +1,40 @@
+/**
+ * title: 超时
+ * debug: true
+ * description: >
+ *  超时清除 className
+ */
+
+import React, { useReducer } from 'react';
+import { Button, Transition, transitionCBAdapter } from '@tool-pack/react-ui';
+
+const App: React.FC = () => {
+  const [visible, setVisible] = useReducer((prevState) => !prevState, true);
+
+  return (
+    <div style={{ textAlign: 'center' }}>
+      <Button type="primary" shape="round" onClick={setVisible}>
+        切 换
+      </Button>
+      <br />
+      <br />
+      <div className="transition-box">
+        <div></div>
+        <Transition
+          name="fade123"
+          show={visible}
+          on={transitionCBAdapter({}, false)}>
+          <button disabled>name: fade</button>
+        </Transition>
+      </div>
+      <div className="transition-box">
+        <div></div>
+        <Transition name="fade123" on={transitionCBAdapter({}, true)}>
+          {visible && <button disabled>name: fade</button>}
+        </Transition>
+      </div>
+    </div>
+  );
+};
+
+export default App;

packages/components/src/transition/index.zh-CN.md

@@ -49,6 +49,7 @@ Transition 会在一个元素或组件进入和离开 DOM 时应用动画，类
 <code src="./demo/adpter.tsx"></code>
 <code src="./demo/input.tsx"></code>
 <code src="./demo/show.tsx"></code>
+<code src="./demo/expired.tsx"></code>
 <code src="./demo/show-appear.tsx"></code>
 
 ## API

packages/components/src/transition/transition.enums.ts

@@ -3,8 +3,9 @@ export enum LIFE_CIRCLE {
   ready,
   go,
   start,
-  after,
   cancel,
+  expired,
+  after,
 }
 
 export enum STATUS {

packages/components/src/transition/transition.hooks.tsx

@@ -30,7 +30,7 @@ export function useDispatcher(
 
   const createAfterHandler = (p = STATUS.none, n = STATUS.idle): CB => {
     return (_el, _status, lifeCircle) => {
-      if (LIFE_CIRCLE.after === lifeCircle) {
+      if ([LIFE_CIRCLE.after, LIFE_CIRCLE.expired].includes(lifeCircle)) {
         statusCacheRef.current = [p, n];
         cbRef.current = undefined;
         forceUpdate();
@@ -56,7 +56,11 @@ export function useDispatcher(
           nextStatus = show ? STATUS.show : STATUS.invisible;
           break;
       }
-    } else if (!isShowChanged && prevLifeRef.current[1] === LIFE_CIRCLE.start) {
+    } else if (
+      !isShowChanged &&
+      (prevLifeRef.current[1] === LIFE_CIRCLE.start ||
+        prevLifeRef.current[0] === LIFE_CIRCLE.expired)
+    ) {
       // 这里产出 idle 和 invisible，且没有下一步操作
       // 判断是否正常的事件，这里只有after才能进来，但是有些交叉的after的前面并不是start
       // 奇怪的问题，不过只会在频繁切换show时出现，如果是不正常的事件那就重新再启动动画

packages/components/src/transition/transition.utils.ts

@@ -2,15 +2,15 @@ import React from 'react';
 import type { CB } from './transition.types';
 import { LIFE_CIRCLE, STATUS } from './transition.enums';
 import {
-  filter,
-  fromEvent,
+  tap,
   map,
-  merge,
   race,
-  Subscription,
   take,
-  tap,
+  merge,
   timer,
+  filter,
+  fromEvent,
+  Subscription,
 } from 'rxjs';
 
 export function getClasses(name: string, show: boolean) {
@@ -44,7 +44,7 @@ export function addTransition({
       Transition,
       Timer,
     }
-    const due = 150;
+    const due = 300;
     const raceObserve = race(
       // transition
       startEvent.pipe(
@@ -57,7 +57,7 @@ export function addTransition({
 
     sub = merge(
       raceObserve.pipe(
-        tap((type) => (type === RaceType.Timer ? onEnd() : onStart())),
+        tap((type) => (type === RaceType.Timer ? onExpired() : onStart())),
         take(1),
       ),
       cancelEvent.pipe(filterTarget(), tap(onCancel), take(1)),
@@ -73,6 +73,9 @@ export function addTransition({
     function onCancel() {
       on(LIFE_CIRCLE.cancel);
     }
+    function onExpired() {
+      on(LIFE_CIRCLE.expired);
+    }
     function onEnd() {
       on(LIFE_CIRCLE.after);
     }
@@ -118,13 +121,15 @@ export function transitionCBAdapter(
     onEnterGo: Cb;
     onEnterStart: Cb;
     onEnterCancel: Cb;
+    onEnterExpired: Cb;
     onAfterEnter: Cb;
     // ---- leave ----
     onBeforeLeave: Cb;
     onLeaveReady: Cb;
     onLeaveGo: Cb;
     onLeaveStart: Cb;
     onLeaveCancel: Cb;
+    onLeaveExpired: Cb;
     onAfterLeave: Cb;
     // ---- idle ----
     onIdle: Cb;
@@ -153,8 +158,9 @@ export function transitionCBAdapter(
           [LIFE_CIRCLE.ready]: cbs.onEnterReady,
           [LIFE_CIRCLE.go]: cbs.onEnterGo,
           [LIFE_CIRCLE.start]: cbs.onEnterStart,
-          [LIFE_CIRCLE.after]: cbs.onAfterEnter,
           [LIFE_CIRCLE.cancel]: cbs.onEnterCancel,
+          [LIFE_CIRCLE.expired]: cbs.onEnterExpired,
+          [LIFE_CIRCLE.after]: cbs.onAfterEnter,
         };
         map[lifeCircle]?.(el);
       },
@@ -164,8 +170,9 @@ export function transitionCBAdapter(
           [LIFE_CIRCLE.ready]: cbs.onLeaveReady,
           [LIFE_CIRCLE.go]: cbs.onLeaveGo,
           [LIFE_CIRCLE.start]: cbs.onLeaveStart,
-          [LIFE_CIRCLE.after]: cbs.onAfterLeave,
           [LIFE_CIRCLE.cancel]: cbs.onLeaveCancel,
+          [LIFE_CIRCLE.expired]: cbs.onLeaveExpired,
+          [LIFE_CIRCLE.after]: cbs.onAfterLeave,
         };
         map[lifeCircle]?.(el);
       },