refactor(infiniteloading): onRefresh、onLoadMore 改为 Promise 类型，去掉显示调用 …

…done 方法 (#1827)
jdf2e · Dec 29, 2023 · 4c647db · 4c647db
1 parent 5ce3924
commit 4c647db
Show file tree

Hide file tree

Showing 9 changed files with 375 additions and 358 deletions.
diff --git a/src/packages/infiniteloading/__tests__/infiniteloading.spec.tsx b/src/packages/infiniteloading/__tests__/infiniteloading.spec.tsx
@@ -1,9 +1,10 @@
 import * as React from 'react'
-import { render, waitFor } from '@testing-library/react'
+import { act, render, waitFor } from '@testing-library/react'
 import { trigger, triggerDrag } from '@/utils/test/event'
 import '@testing-library/jest-dom'
 
 import { InfiniteLoading } from '../infiniteloading'
+import { sleep } from '@/utils/sleep'
 
 test('pull base', () => {
   const refresh = jest.fn()
@@ -26,33 +27,6 @@ test('pull base', () => {
   expect(refresh).toBeCalled()
 })
 
-test('pull base 01', async () => {
-  const done = jest.fn()
-  const refresh = (done: () => void) => {
-    setTimeout(() => {
-      done()
-    }, 10)
-  }
-  const { container } = render(
-    <InfiniteLoading pullRefresh pullingText="下拉刷新" onRefresh={refresh} />
-  )
-  const track = container.querySelector('.nut-infiniteloading')
-
-  // pulling
-  trigger(track, 'touchstart', 0, 0)
-  trigger(track, 'touchmove', 0, 20)
-  expect(container).toMatchSnapshot()
-
-  // loading
-  trigger(track, 'touchend', 0, 100)
-  expect(container).toMatchSnapshot()
-
-  // still loading
-  triggerDrag(track, 0, 100)
-  refresh(done)
-  await waitFor(() => expect(done).toHaveBeenCalled())
-})
-
 test('pull base 03', () => {
   const refresh = jest.fn()
   const { container } = render(
@@ -98,19 +72,17 @@ test('infiniteloading base 01', async () => {
       setRefreshList([...refreshList])
     }
 
-    const refreshLoadMore = (done: () => void) => {
-      setTimeout(() => {
-        const curLen = refreshList.length
-        for (let i = curLen; i < curLen + 10; i++) {
-          refreshList.push(`${i}`)
-        }
-        if (refreshList.length >= 300) {
-          setRefreshHasMore(false)
-        } else {
-          setRefreshList([...refreshList])
-        }
-        done()
-      }, 500)
+    const refreshLoadMore = async () => {
+      await sleep(10)
+      const curLen = refreshList.length
+      for (let i = curLen; i < curLen + 10; i++) {
+        refreshList.push(`${i}`)
+      }
+      if (refreshList.length >= 300) {
+        setRefreshHasMore(false)
+      } else {
+        setRefreshList([...refreshList])
+      }
     }
     return (
       <InfiniteLoading
@@ -141,19 +113,17 @@ test('infiniteloading base 02', async () => {
       setRefreshList([...refreshList])
     }
 
-    const refreshLoadMore = (done: () => void) => {
-      setTimeout(() => {
-        const curLen = refreshList.length
-        for (let i = curLen; i < curLen + 10; i++) {
-          refreshList.push(`${i}`)
-        }
-        if (refreshList.length >= 30) {
-          setRefreshHasMore(false)
-        } else {
-          setRefreshList([...refreshList])
-        }
-        done()
-      }, 500)
+    const refreshLoadMore = async () => {
+      await sleep(100)
+      const curLen = refreshList.length
+      for (let i = curLen; i < curLen + 10; i++) {
+        refreshList.push(`${i}`)
+      }
+      if (refreshList.length >= 30) {
+        setRefreshHasMore(false)
+      } else {
+        setRefreshList([...refreshList])
+      }
     }
     return (
       <InfiniteLoading
@@ -178,3 +148,66 @@ test('infiniteloading base 02', async () => {
   expect(container).toMatchSnapshot()
   await waitFor(() => expect(done).toHaveBeenCalled())
 })
+
+test('hasMore false', () => {
+  const done = jest.fn()
+  const { container: container1, rerender } = render(
+    <InfiniteLoading loadMoreText="没有更多" hasMore={false} onScroll={done}>
+      {Array.from<string>({ length: 100 })
+        .fill('NutUI')
+        .map((item: string, index) => {
+          return (
+            <li className="infiniteLi" key={index}>
+              {item}
+            </li>
+          )
+        })}
+    </InfiniteLoading>
+  )
+  const track1 = container1.querySelector('.nut-infiniteloading')
+  trigger(track1, 'scroll', 0, 100)
+})
+
+test('hasMore', () => {
+  const done = jest.fn()
+  const { container } = render(
+    <InfiniteLoading loadMoreText="没有更多" hasMore onScroll={done}>
+      {Array.from<string>({ length: 100 })
+        .fill('NutUI')
+        .map((item: string, index) => {
+          return (
+            <li className="infiniteLi" key={index}>
+              {item}
+            </li>
+          )
+        })}
+    </InfiniteLoading>
+  )
+  const track1 = container.querySelector('.nut-infiniteloading')
+  act(() => {
+    trigger(track1, 'scroll', 0, 100)
+  })
+
+  waitFor(() => {
+    expect(done).toBeCalled()
+  })
+})
+
+test('pull base 01', async () => {
+  const refresh = async () => {
+    await sleep(10)
+  }
+  const { container } = render(
+    <InfiniteLoading pullRefresh pullingText="下拉刷新" onRefresh={refresh} />
+  )
+  const track = container.querySelector('.nut-infiniteloading')
+
+  // pulling
+  trigger(track, 'touchstart', 0, 0)
+  trigger(track, 'touchmove', 0, 20)
+  expect(container).toMatchSnapshot()
+
+  // loading
+  trigger(track, 'touchend', 0, 100)
+  expect(container).toMatchSnapshot()
+})
diff --git a/src/packages/infiniteloading/demo.taro.tsx b/src/packages/infiniteloading/demo.taro.tsx
@@ -5,13 +5,15 @@ import { useTranslate } from '@/sites/assets/locale/taro'
 import { InfiniteLoading, Cell } from '@/packages/nutui.react.taro'
 import '@/packages/infiniteloading/demo.scss'
 import Header from '@/sites/components/header'
+import { sleep } from '@/utils/sleep'
 
 interface T {
   '83913e71': string
   '84aa6bce': string
   eb4236fe: string
   '1254a90a': string
 }
+
 const InfiniteLoadingDemo = () => {
   const [translated] = useTranslate<T>({
     'zh-CN': {
@@ -41,30 +43,26 @@ const InfiniteLoadingDemo = () => {
     init()
   }, [])
 
-  const loadMore = (done: () => void) => {
-    setTimeout(() => {
-      const curLen = defaultList.length
-      for (let i = curLen; i < curLen + 10; i++) {
-        defaultList.push(`${i}`)
-      }
-      if (defaultList.length >= 100) {
-        setHasMore(false)
-      } else {
-        setDefaultList([...defaultList])
-      }
-      done()
-    }, 500)
+  const loadMore = async () => {
+    await sleep(2000)
+    const curLen = defaultList.length
+    for (let i = curLen; i < curLen + 10; i++) {
+      defaultList.push(`${i}`)
+    }
+    if (defaultList.length >= 100) {
+      setHasMore(false)
+    } else {
+      setDefaultList([...defaultList])
+    }
   }
 
-  const refresh = (done: () => void) => {
-    setTimeout(() => {
-      Taro.showToast({
-        title: translated['83913e71'],
-        icon: 'success',
-        duration: 2000,
-      })
-      done()
-    }, 1000)
+  const refresh = async () => {
+    await sleep(2000)
+    Taro.showToast({
+      title: translated['83913e71'],
+      icon: 'success',
+      duration: 2000,
+    })
   }
 
   const init = () => {

diff --git a/src/packages/infiniteloading/demo.tsx b/src/packages/infiniteloading/demo.tsx
@@ -5,6 +5,7 @@ import { InfiniteLoading } from './infiniteloading'
 import Cell from '@/packages/cell'
 import Toast from '@/packages/toast'
 import './demo.scss'
+import { sleep } from '@/utils/sleep'
 
 interface T {
   '83913e71': string
@@ -14,6 +15,7 @@ interface T {
   '1254a90a': string
   '1254a90n': string
 }
+
 const InfiniteloadingDemo = () => {
   const [translated] = useTranslate<T>({
     'zh-CN': {
@@ -55,71 +57,63 @@ const InfiniteloadingDemo = () => {
     init()
   }, [])
 
-  const loadMore = (done: () => void) => {
-    setTimeout(() => {
-      const curLen = defaultList.length
-      for (let i = curLen; i < curLen + 10; i++) {
-        defaultList.push(`${i}`)
-      }
-      if (defaultList.length >= 30) {
-        setHasMore(false)
-      } else {
-        setDefaultList([...defaultList])
-      }
-      done()
-    }, 500)
+  const loadMore = async () => {
+    await sleep(2000)
+    // setTimeout(() => {
+    const curLen = defaultList.length
+    for (let i = curLen; i < curLen + 10; i++) {
+      defaultList.push(`${i}`)
+    }
+    if (defaultList.length >= 30) {
+      setHasMore(false)
+    } else {
+      setDefaultList([...defaultList])
+    }
+    // }, 500)
   }
 
-  const refreshLoadMore = (done: () => void) => {
-    setTimeout(() => {
-      const curLen = refreshList.length
-      for (let i = curLen; i < curLen + 10; i++) {
-        refreshList.push(`${i}`)
-      }
-      if (refreshList.length >= 30) {
-        setRefreshHasMore(false)
-      } else {
-        setRefreshList([...refreshList])
-      }
-      done()
-    }, 500)
+  const refreshLoadMore = async () => {
+    await sleep(2000)
+    const curLen = refreshList.length
+    for (let i = curLen; i < curLen + 10; i++) {
+      refreshList.push(`${i}`)
+    }
+    if (refreshList.length >= 30) {
+      setRefreshHasMore(false)
+    } else {
+      setRefreshList([...refreshList])
+    }
   }
 
-  const customLoadMore = (done: () => void) => {
-    setTimeout(() => {
-      const curLen = customList.length
-      for (let i = curLen; i < curLen + 10; i++) {
-        customList.push(`${i}`)
-      }
-      if (customList.length >= 30) {
-        setCustomHasMore(false)
-      } else {
-        setCustomList([...customList])
-      }
-      done()
-    }, 500)
+  const customLoadMore = async () => {
+    await sleep(2000)
+    const curLen = customList.length
+    for (let i = curLen; i < curLen + 10; i++) {
+      customList.push(`${i}`)
+    }
+    if (customList.length >= 30) {
+      setCustomHasMore(false)
+    } else {
+      setCustomList([...customList])
+    }
   }
 
-  const windowLoadMore = (done: () => void) => {
-    setTimeout(() => {
-      const curLen = windowList.length
-      for (let i = curLen; i < curLen + 10; i++) {
-        windowList.push(`${i}`)
-      }
-      if (windowList.length >= 300) {
-        setWindowHasMore(false)
-      } else {
-        setWindowList([...windowList])
-      }
-      done()
-    }, 500)
+  const windowLoadMore = async () => {
+    await sleep(2000)
+    const curLen = windowList.length
+    for (let i = curLen; i < curLen + 10; i++) {
+      windowList.push(`${i}`)
+    }
+    if (windowList.length >= 300) {
+      setWindowHasMore(false)
+    } else {
+      setWindowList([...windowList])
+    }
   }
 
-  const refresh = (done: () => void) => {
-    setTimeout(() => {
-      Toast.show(translated['83913e71'])
-      done()
-    }, 1000)
+  const refresh = async () => {
+    await sleep(1000)
+    Toast.show(translated['83913e71'])
   }
 
   const init = () => {