Merge pull request #8 from iamyoki/feature

feat: finished useListTransition(useTransitionGroup)

src/index.ts

@@ -1,5 +1,5 @@
 export * from './useTransition';
 export * from './useSwitchTransition';
-export * from './useTransitionGroup';
+export * from './useListTransition';
 export * from './Transition';
 export * from './SwitchTransition';

src/useTransitionGroup/index.tsx → src/useListTransition/index.tsx

@@ -1,4 +1,4 @@
-import {Fragment, useEffect, useState} from 'react';
+import {Fragment, useEffect, useRef, useState} from 'react';
 import {Stage} from '..';
 import {insertArray} from '../helpers/insertArray';
 import {setAnimationFrameTimeout} from '../helpers/setAnimationFrameTimeout';
@@ -16,11 +16,12 @@ type ItemWithKey<Item> = {
   index: number;
 };
 
-export function useTransitionGroup<Item>(list: Array<Item>, timeout: number) {
+export function useListTransition<Item>(list: Array<Item>, timeout: number) {
+  const keyRef = useRef(0);
   // change list to our list form with extra information.
   const initialList: Array<ItemWithState<Item>> = list.map((item, key) => ({
     item,
-    key,
+    key: keyRef.current,
     stage: 'enter',
   }));
 
@@ -38,15 +39,18 @@ export function useTransitionGroup<Item>(list: Array<Item>, timeout: number) {
 
       // 1 add new items into list state
       if (newItemsWithIndex.length > 0) {
-        setListState((prevListState) => {
-          return newItemsWithIndex.reduce((prev, {item, index}, i) => {
-            return insertArray(prev, index, {
-              item,
-              key: prevListState.length + 1 + i,
-              stage: 'from',
-            });
-          }, prevListState);
-        });
+        keyRef.current++;
+        setListState((prevListState) =>
+          newItemsWithIndex.reduce(
+            (prev, {item, index}, i) =>
+              insertArray(prev, index, {
+                item,
+                key: keyRef.current,
+                stage: 'from',
+              }),
+            prevListState
+          )
+        );
       }
 
       // 2 enter those new items immediatly
@@ -86,8 +90,6 @@ export function useTransitionGroup<Item>(list: Array<Item>, timeout: number) {
           );
         }, timeout);
       }
-
-      console.log(listState);
     },
     [list, listState, timeout]
   );