feat: support onAllRemoved (#30)

Author: zombieJ

src/CSSMotionList.tsx

@@ -44,6 +44,8 @@ export interface CSSMotionListProps
 
   /** This will always trigger after final visible changed. Even if no motion configured. */
   onVisibleChanged?: (visible: boolean, info: { key: React.Key }) => void;
+  /** All motion leaves in the screen */
+  onAllRemoved?: () => void;
 }
 
 export interface CSSMotionListState {
@@ -95,16 +97,23 @@ export function genCSSMotionList(
       };
     }
 
+    // ZombieJ: Return the count of rest keys. It's safe to refactor if need more info.
     removeKey = (removeKey: React.Key) => {
-      this.setState(({ keyEntities }) => ({
-        keyEntities: keyEntities.map(entity => {
-          if (entity.key !== removeKey) return entity;
-          return {
-            ...entity,
-            status: STATUS_REMOVED,
-          };
-        }),
-      }));
+      const { keyEntities } = this.state;
+      const nextKeyEntities = keyEntities.map(entity => {
+        if (entity.key !== removeKey) return entity;
+        return {
+          ...entity,
+          status: STATUS_REMOVED,
+        };
+      });
+
+      this.setState({
+        keyEntities: nextKeyEntities,
+      });
+
+      return nextKeyEntities.filter(({ status }) => status !== STATUS_REMOVED)
+        .length;
     };
 
     render() {
@@ -113,6 +122,7 @@ export function genCSSMotionList(
         component,
         children,
         onVisibleChanged,
+        onAllRemoved,
         ...restProps
       } = this.props;
 
@@ -139,7 +149,11 @@ export function genCSSMotionList(
                   onVisibleChanged?.(changedVisible, { key: eventProps.key });
 
                   if (!changedVisible) {
-                    this.removeKey(eventProps.key);
+                    const restKeysCount = this.removeKey(eventProps.key);
+
+                    if (restKeysCount === 0 && onAllRemoved) {
+                      onAllRemoved();
+                    }
                   }
                 }}
               >

tests/CSSMotionList.spec.tsx

@@ -106,13 +106,15 @@ describe('CSSMotionList', () => {
 
   it('onVisibleChanged', () => {
     const onVisibleChanged = jest.fn();
+    const onAllRemoved = jest.fn();
     const CSSMotionList = genCSSMotionList(false);
 
     const Demo = ({ keys }) => (
       <CSSMotionList
         motionName="transition"
         keys={keys}
         onVisibleChanged={onVisibleChanged}
+        onAllRemoved={onAllRemoved}
       >
         {({ key, style, className }) => (
           <div
@@ -127,13 +129,15 @@ describe('CSSMotionList', () => {
     );
 
     const { rerender } = render(<Demo keys={['a']} />);
+    expect(onAllRemoved).not.toHaveBeenCalled();
 
     act(() => {
       jest.runAllTimers();
     });
 
     expect(onVisibleChanged).toHaveBeenCalledWith(true, { key: 'a' });
     onVisibleChanged.mockReset();
+    expect(onAllRemoved).not.toHaveBeenCalled();
 
     // Remove
     rerender(<Demo keys={[]} />);
@@ -142,5 +146,6 @@ describe('CSSMotionList', () => {
     });
 
     expect(onVisibleChanged).toHaveBeenCalledWith(false, { key: 'a' });
+    expect(onAllRemoved).toHaveBeenCalled();
   });
 });