feat: Support onVisibleChanged (#7)

* feat: support onVisibleChanged

* wrap an useState

* fix trigger visible change logic

* fix test case

Author: zombieJ

examples/CSSMotion.tsx

@@ -140,6 +140,9 @@ class Demo extends React.Component<{}, DemoState> {
               onLeaveActive={this.onCollapse}
               onEnterEnd={this.skipColorTransition}
               onLeaveEnd={this.skipColorTransition}
+              onVisibleChanged={(visible) => {
+                console.log('Visible Changed:', visible);
+              }}
             >
               {({ style, className }, ref) => (
                 <Div

examples/CSSMotionList.tsx

@@ -33,7 +33,7 @@ class Demo extends React.Component<{}, DemoState> {
       }
     }
 
-    keyList = keyList.map(key => {
+    keyList = keyList.map((key) => {
       if (key === 3) {
         return { key, background: 'orange' };
       }
@@ -92,6 +92,9 @@ class Demo extends React.Component<{}, DemoState> {
           onAppearStart={this.onCollapse}
           onEnterStart={this.onCollapse}
           onLeaveActive={this.onCollapse}
+          onVisibleChanged={(changedVisible, info) => {
+            console.log('Visible Changed >>>', changedVisible, info);
+          }}
         >
           {({ key, background, className, style }) => {
             return (

src/CSSMotion.tsx

@@ -67,6 +67,10 @@ export interface CSSMotionProps {
   onEnterEnd?: MotionEndEventHandler;
   onLeaveEnd?: MotionEndEventHandler;
 
+  // Special
+  /** This will always trigger after final visible changed. Even if no motion configured. */
+  onVisibleChanged?: (visible: boolean) => void;
+
   internalRef?: React.Ref<any>;
 
   children?: (

src/CSSMotionList.tsx

@@ -11,7 +11,6 @@ import {
   parseKeys,
   KeyObject,
 } from './util/diff';
-import { ListMotionEndEventHandler } from './interface';
 
 const MOTION_PROP_NAMES = [
   'eventProps',
@@ -36,16 +35,24 @@ const MOTION_PROP_NAMES = [
   'onLeaveEnd',
 ];
 
-export interface CSSMotionListProps extends Omit<CSSMotionProps, 'onLeaveEnd'> {
+export interface CSSMotionListProps
+  extends Omit<CSSMotionProps, 'onVisibleChanged'> {
   keys: (React.Key | { key: React.Key; [name: string]: any })[];
   component?: string | React.ComponentType | false;
-  onLeaveEnd?: ListMotionEndEventHandler;
+
+  /** This will always trigger after final visible changed. Even if no motion configured. */
+  onVisibleChanged?: (visible: boolean, info: { key: React.Key }) => void;
 }
 
 export interface CSSMotionListState {
   keyEntities: KeyObject[];
 }
 
+/**
+ * Generate a CSSMotionList component with config
+ * @param transitionSupport No need since CSSMotionList no longer depends on transition support
+ * @param CSSMotion CSSMotion component
+ */
 export function genCSSMotionList(
   transitionSupport: boolean,
   CSSMotion = OriginCSSMotion,
@@ -67,31 +74,11 @@ export function genCSSMotionList(
       { keyEntities }: CSSMotionListState,
     ) {
       const parsedKeyObjects = parseKeys(keys);
-
-      // Always as keep when motion not support
-      if (!transitionSupport) {
-        return {
-          keyEntities: parsedKeyObjects.map(obj => ({
-            ...obj,
-            status: STATUS_KEEP,
-          })),
-        };
-      }
-
       const mixedKeyEntities = diffKeys(keyEntities, parsedKeyObjects);
 
-      const keyEntitiesLen = keyEntities.length;
       return {
-        keyEntities: mixedKeyEntities.filter(entity => {
-          // IE 9 not support Array.prototype.find
-          let prevEntity = null;
-          for (let i = 0; i < keyEntitiesLen; i += 1) {
-            const currentEntity = keyEntities[i];
-            if (currentEntity.key === entity.key) {
-              prevEntity = currentEntity;
-              break;
-            }
-          }
+        keyEntities: mixedKeyEntities.filter((entity) => {
+          const prevEntity = keyEntities.find(({ key }) => entity.key === key);
 
           // Remove if already mark as removed
           if (
@@ -108,7 +95,7 @@ export function genCSSMotionList(
 
     removeKey = (removeKey: React.Key) => {
       this.setState(({ keyEntities }) => ({
-        keyEntities: keyEntities.map(entity => {
+        keyEntities: keyEntities.map((entity) => {
           if (entity.key !== removeKey) return entity;
           return {
             ...entity,
@@ -120,12 +107,17 @@ export function genCSSMotionList(
 
     render() {
       const { keyEntities } = this.state;
-      const { component, children, onLeaveEnd, ...restProps } = this.props;
+      const {
+        component,
+        children,
+        onVisibleChanged,
+        ...restProps
+      } = this.props;
 
       const Component = component || React.Fragment;
 
       const motionProps: CSSMotionProps = {};
-      MOTION_PROP_NAMES.forEach(prop => {
+      MOTION_PROP_NAMES.forEach((prop) => {
         motionProps[prop] = restProps[prop];
         delete restProps[prop];
       });
@@ -141,11 +133,12 @@ export function genCSSMotionList(
                 key={eventProps.key}
                 visible={visible}
                 eventProps={eventProps}
-                onLeaveEnd={(...args) => {
-                  if (onLeaveEnd) {
-                    onLeaveEnd(...args, { key: eventProps.key });
+                onVisibleChanged={(changedVisible) => {
+                  onVisibleChanged?.(changedVisible, { key: eventProps.key });
+
+                  if (!changedVisible) {
+                    this.removeKey(eventProps.key);
                   }
-                  this.removeKey(eventProps.key);
                 }}
               >
                 {children}

src/hooks/useState.ts

@@ -0,0 +1,23 @@
+import { useEffect, useState, useRef } from 'react';
+
+export default function useMountStatus<T>(
+  defaultValue?: T,
+): [T, (next: T | (() => T)) => void] {
+  const destroyRef = useRef(false);
+  const [val, setVal] = useState<T>(defaultValue);
+
+  function setValue(next: T | (() => T)) {
+    if (!destroyRef.current) {
+      setVal(next);
+    }
+  }
+
+  useEffect(
+    () => () => {
+      destroyRef.current = true;
+    },
+    [],
+  );
+
+  return [val, setValue];
+}

src/hooks/useStatus.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useState, useRef, useEffect } from 'react';
+import { useRef, useEffect } from 'react';
 import {
   STATUS_APPEAR,
   STATUS_NONE,
@@ -14,11 +14,11 @@ import {
   MotionPrepareEventHandler,
   StepStatus,
 } from '../interface';
+import useState from './useState';
 import { CSSMotionProps } from '../CSSMotion';
 import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect';
 import useStepQueue, { DoStep, SkipStep, isActive } from './useStepQueue';
 import useDomMotionEvents from './useDomMotionEvents';
-// import useFrameStep, { StepMap, StepCell } from './useFrameStep';
 
 export default function useStatus(
   supportMotion: boolean,
@@ -42,10 +42,11 @@ export default function useStatus(
     onAppearEnd,
     onEnterEnd,
     onLeaveEnd,
+    onVisibleChanged,
   }: CSSMotionProps,
 ): [MotionStatus, StepStatus, React.CSSProperties, boolean] {
   // Used for outer render usage to avoid `visible: false & status: none` to render nothing
-  const [asyncVisible, setAsyncVisible] = useState(visible);
+  const [asyncVisible, setAsyncVisible] = useState<boolean>();
   const [status, setStatus] = useState<MotionStatus>(STATUS_NONE);
   const [style, setStyle] = useState<React.CSSProperties | undefined>(null);
 
@@ -220,6 +221,13 @@ export default function useStatus(
     [],
   );
 
+  // Trigger `onVisibleChanged`
+  useEffect(() => {
+    if (asyncVisible !== undefined && status === STATUS_NONE) {
+      onVisibleChanged?.(asyncVisible);
+    }
+  }, [asyncVisible, status]);
+
   // ============================ Styles ============================
   let mergedStyle = style;
   if (eventHandlers[STEP_PREPARE] && step === STEP_START) {
@@ -229,5 +237,5 @@ export default function useStatus(
     };
   }
 
-  return [status, step, mergedStyle, asyncVisible];
+  return [status, step, mergedStyle, asyncVisible ?? visible];
 }

src/hooks/useStepQueue.ts

@@ -40,10 +40,6 @@ export default (
   }
 
   useIsomorphicLayoutEffect(() => {
-    // if (step === STEP_START) {
-    //   return;
-    // }
-
     if (step !== STEP_NONE && step !== STEP_ACTIVATED) {
       const index = STEP_QUEUE.indexOf(step);
       const nextStep = STEP_QUEUE[index + 1];
@@ -55,7 +51,7 @@ export default (
         setStep(nextStep);
       } else {
         // Do as frame for step update
-        nextFrame(info => {
+        nextFrame((info) => {
           function doNext() {
             // Skip since current queue is ood
             if (info.isCanceled()) return;

src/interface.ts

@@ -37,9 +37,3 @@ export type MotionEndEventHandler = (
   element: HTMLElement,
   event: MotionEvent,
 ) => boolean | void;
-
-export type ListMotionEndEventHandler = (
-  element: HTMLElement,
-  event: MotionEvent,
-  info: { key: React.Key },
-) => void;

tests/CSSMotion.spec.tsx

@@ -246,7 +246,10 @@ describe('CSSMotion', () => {
         });
       }
 
-      test('without ref', React.forwardRef(props => <div {...props} />));
+      test(
+        'without ref',
+        React.forwardRef((props) => <div {...props} />),
+      );
 
       test(
         'FC with ref',
@@ -506,7 +509,7 @@ describe('CSSMotion', () => {
     let lockResolve: Function;
     const onAppearPrepare = jest.fn(
       () =>
-        new Promise(resolve => {
+        new Promise((resolve) => {
           lockResolve = resolve;
         }),
     );
@@ -538,8 +541,6 @@ describe('CSSMotion', () => {
       wrapper.update();
     });
 
-    console.log(wrapper.html());
-
     expect(
       wrapper.find('.motion-box').hasClass('bamboo-appear-prepare'),
     ).toBeFalsy();