chore: add refresh method in usePagingList

sheinsight · Sep 5, 2024 · aea132d · aea132d
1 parent d3d81ef
commit aea132d
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 9 deletions.
diff --git a/packages/react-use/src/use-paging-list/demo.tsx b/packages/react-use/src/use-paging-list/demo.tsx
@@ -16,7 +16,7 @@ interface Item {
 }
 
 export function App() {
-  const { list, loading, form, query, pagination, selection } = usePagingList<Item, FormState>(
+  const { list, loading, form, refresh, query, pagination, selection } = usePagingList<Item, FormState>(
     async (params) => {
       const { page, pageSize, form, setTotal } = params
       const { data, total } = await fetchPagination({ page, pageSize })
@@ -27,16 +27,16 @@ export function App() {
       form: {
         initialValue: {
           name: '',
-          gender: 'Girl',
-          color: ['Cyan'],
+          gender: 'Boy',
+          color: ['Red'],
         },
       },
       query: {
-        refreshInterval: 3_000,
+        refreshInterval: 6_000,
       },
       pagination: {
-        page: 2,
-        pageSize: 10,
+        page: 1,
+        pageSize: 50,
       },
       immediateQueryKeys: ['color', 'gender'],
     },
@@ -56,6 +56,8 @@ export function App() {
             <span className="text-right inline-block w-80px">Name:</span>
             <Input name="name" placeholder="Name" />
             <Button type="submit">Search</Button>
+            <Button type="reset">Reset</Button>
+            <Button onClick={() => refresh()}>Refresh</Button>
           </Zone>
           <Zone>
             <span className="text-right inline-block w-80px">Gender:</span>

diff --git a/packages/react-use/src/use-paging-list/index.mdx b/packages/react-use/src/use-paging-list/index.mdx
@@ -41,6 +41,7 @@ const {
   pagination,
   selection,
   list,
+  refresh,
   setTotal,
   loading
 } = usePagingList(fetcher, options)
@@ -197,6 +198,10 @@ export interface UsePagingListReturns<
    * query instance, refer to useQuery documentation
    */
   query: UseQueryOptions<Fetcher>
+  /**
+   * refresh query
+   */
+  refresh: () => void
   /**
    * Set total data amount
    */

diff --git a/packages/react-use/src/use-paging-list/index.ts b/packages/react-use/src/use-paging-list/index.ts
@@ -91,6 +91,10 @@ export interface UsePagingListReturns<
    * query instance
    */
   query: UseQueryOptions<Fetcher>
+  /**
+   * refresh query
+   */
+  refresh: () => void
   /**
    * set total count
    */
@@ -125,10 +129,19 @@ export function usePagingList<
     ...options.form,
     onReset(...args) {
       startNewQuery()
-      latest.current.options.form?.onReset?.(...args)
+      return latest.current.options.form?.onReset?.(...args)
     },
     onSubmit(...args) {
-      startNewQuery()
+      const form = args[0]
+
+      query.run({
+        previousData: previousDataRef.current,
+        page: paginationState.page,
+        pageSize: paginationState.pageSize,
+        form,
+        setTotal,
+      })
+
       latest.current.options.form?.onSubmit?.(...args)
     },
     onChange(...args) {
@@ -146,7 +159,7 @@ export function usePagingList<
 
       previousFormRef.current = nextForm
 
-      latest.current.options.form?.onChange?.(...args)
+      return latest.current.options.form?.onChange?.(...args)
     },
   })
 
@@ -230,6 +243,8 @@ export function usePagingList<
 
   const latest = useLatest({ options, paginationState })
 
+  const refresh = useStableFn(() => query.refresh())
+
   return {
     get loading() {
       return query.loading
@@ -238,6 +253,7 @@ export function usePagingList<
     form,
     query,
     setTotal,
+    refresh,
     selection: {
       ...select,
       ...selectActions,

diff --git a/packages/react-use/src/use-paging-list/index.zh-cn.mdx b/packages/react-use/src/use-paging-list/index.zh-cn.mdx
@@ -41,6 +41,7 @@ const {
   pagination,
   selection,
   list,
+  refresh,
   setTotal,
   loading
 } = usePagingList(fetcher, options)
@@ -197,6 +198,10 @@ export interface UsePagingListReturns<
    * query 实例，参考 useQuery 文档
    */
   query: UseQueryOptions<Fetcher>
+  /**
+   * 使用上次请求参数（表单状态等），刷新数据
+   */
+  refresh: () => void
   /**
    * 设置数据总数
    */