feat: CSSMotionList support index in children (#49)

* feat: CSSMotionList support index in children

* test: add test case

Author: MadCcc

src/CSSMotionList.tsx

@@ -38,7 +38,7 @@ const MOTION_PROP_NAMES = [
 ];
 
 export interface CSSMotionListProps
-  extends Omit<CSSMotionProps, 'onVisibleChanged'>,
+  extends Omit<CSSMotionProps, 'onVisibleChanged' | 'children'>,
     Omit<React.HTMLAttributes<any>, 'children'> {
   keys: (React.Key | { key: React.Key; [name: string]: any })[];
   component?: string | React.ComponentType | false;
@@ -47,6 +47,16 @@ export interface CSSMotionListProps
   onVisibleChanged?: (visible: boolean, info: { key: React.Key }) => void;
   /** All motion leaves in the screen */
   onAllRemoved?: () => void;
+  children?: (
+    props: {
+      visible?: boolean;
+      className?: string;
+      style?: React.CSSProperties;
+      index?: number;
+      [key: string]: any;
+    },
+    ref: (node: any) => void,
+  ) => React.ReactElement;
 }
 
 export interface CSSMotionListState {
@@ -138,7 +148,7 @@ export function genCSSMotionList(
 
       return (
         <Component {...restProps}>
-          {keyEntities.map(({ status, ...eventProps }) => {
+          {keyEntities.map(({ status, ...eventProps }, index) => {
             const visible = status === STATUS_ADD || status === STATUS_KEEP;
             return (
               <CSSMotion
@@ -158,7 +168,7 @@ export function genCSSMotionList(
                   }
                 }}
               >
-                {children}
+                {(props, ref) => children({ ...props, index }, ref)}
               </CSSMotion>
             );
           })}

tests/CSSMotionList.spec.tsx

@@ -148,4 +148,30 @@ describe('CSSMotionList', () => {
     expect(onVisibleChanged).toHaveBeenCalledWith(false, { key: 'a' });
     expect(onAllRemoved).toHaveBeenCalled();
   });
+
+  it('should support index', () => {
+    const CSSMotionList = genCSSMotionList(false);
+
+    const Demo = ({ keys }) => (
+      <CSSMotionList motionName="transition" keys={keys}>
+        {({ key, style, className, index }) => (
+          <div
+            key={key}
+            style={style}
+            className={classNames('motion-box', className)}
+          >
+            {index}
+          </div>
+        )}
+      </CSSMotionList>
+    );
+
+    const { container } = render(<Demo keys={['a', 'b', 'c']} />);
+    expect(container.querySelectorAll('.motion-box')[0].textContent).toEqual(
+      '0',
+    );
+    expect(container.querySelectorAll('.motion-box')[1].textContent).toEqual(
+      '1',
+    );
+  });
 });