From 1289cff43cb9cb2dfed7363a8215212da2c2e44f Mon Sep 17 00:00:00 2001
From: Yoki Yu <yokiyuqian@gmail.com>
Date: Thu, 30 Dec 2021 10:24:40 +0800
Subject: [PATCH] feat: finished useListTransition(useTransitionGroup)

---
 src/index.ts                                  |  2 +-
 .../index.tsx                                 | 30 ++++++++++---------
 2 files changed, 17 insertions(+), 15 deletions(-)
 rename src/{useTransitionGroup => useListTransition}/index.tsx (81%)

diff --git a/src/index.ts b/src/index.ts
index 38e04b5..0e1fe46 100644
--- a/src/index.ts
+++ b/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';
diff --git a/src/useTransitionGroup/index.tsx b/src/useListTransition/index.tsx
similarity index 81%
rename from src/useTransitionGroup/index.tsx
rename to src/useListTransition/index.tsx
index 2a2aa1d..2f80116 100644
--- a/src/useTransitionGroup/index.tsx
+++ b/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]
   );