feat(packages): use-array add findItem & reset

soybeanjs · Dec 12, 2024 · 64e0bb3 · 64e0bb3
1 parent 9ddae85
commit 64e0bb3
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 18 deletions.
diff --git a/packages/hooks/src/use-array.ts b/packages/hooks/src/use-array.ts
@@ -1,11 +1,15 @@
 import { useState } from 'react';
 
 type ArrayState<T> = T[];
+
 type ArrayActions<T, K extends keyof T> = {
+  clear: () => void;
   down: (itemKey: T[K]) => void;
+  findItem: (elementKey: T[K]) => T | undefined;
   pop: () => void;
   push: (...newItems: T[]) => void;
   remove: (itemKey: T[K]) => void;
+  reset: () => void;
   reverse: () => void;
   shift: () => void;
   sort: (compareFn?: (a: T, b: T) => number) => void;
@@ -83,31 +87,19 @@ export default function useArray<T, K extends keyof T>(initState: T[], key?: K):
   };
 
   const pop = () => {
-    setState(prevState => {
-      // 使用 slice(0, -1) 来移除最后一个元素
-      return prevState.slice(0, -1);
-    });
+    setState(prevState => prevState.slice(0, -1));
   };
 
   const shift = () => {
-    setState(prevState => {
-      // 使用 slice(1) 来移除第一个元素
-      return prevState.slice(1);
-    });
+    setState(prevState => prevState.slice(1));
   };
 
   const reverse = () => {
-    setState(prevState => {
-      // 使用 spread 运算符 ... 和 reverse() 来反转数组
-      return [...prevState].reverse();
-    });
+    setState(prevState => [...prevState].reverse());
   };
 
   const sort = (compareFn?: (a: T, b: T) => number) => {
-    setState(prevState => {
-      // 使用 spread 运算符 ... 和 sort() 方法进行排序
-      return [...prevState].sort(compareFn);
-    });
+    setState(prevState => [...prevState].sort(compareFn));
   };
 
   const splice = (start: number, deleteCount?: number, ...items: T[]) => {
@@ -120,5 +112,35 @@ export default function useArray<T, K extends keyof T>(initState: T[], key?: K):
     });
   };
 
-  return [state, { down, pop, push, remove, reverse, shift, sort, splice, unshift, up, updateState }];
+  const clear = () => {
+    setState([]);
+  };
+
+  const reset = () => {
+    setState(initState);
+  };
+
+  const findItem = (elementKey: T[K]) => {
+    return state.find(item => item[resolvedKey] === elementKey);
+  };
+
+  return [
+    state,
+    {
+      clear,
+      down,
+      findItem,
+      pop,
+      push,
+      remove,
+      reset,
+      reverse,
+      shift,
+      sort,
+      splice,
+      unshift,
+      up,
+      updateState
+    }
+  ];
 }
diff --git a/src/pages/home/modules/ProjectNews.tsx b/src/pages/home/modules/ProjectNews.tsx
@@ -12,7 +12,7 @@ const variants = {
 const ProjectNews = () => {
   const { t } = useTranslation();
 
-  const [newses, { down, pop, push, remove, reverse, shift, sort, unshift, up }] = useArray([
+  const [newses, { down, pop, push, remove, reset, reverse, shift, sort, unshift, up }] = useArray([
     { content: t('page.home.projectNews.desc1'), id: 1, time: '2021-05-28 22:22:22' },
     { content: t('page.home.projectNews.desc2'), id: 2, time: '2023-10-27 10:24:54' },
     { content: t('page.home.projectNews.desc3'), id: 3, time: '2021-10-31 22:43:12' },
@@ -31,6 +31,13 @@ const ProjectNews = () => {
       size="small"
       title={t('page.home.projectNews.title')}
       extra={[
+        <AButton
+          key="reset"
+          type="text"
+          onClick={reset}
+        >
+          重置
+        </AButton>,
         <AButton
           key="reverse"
           type="text"