diff --git a/src/packages/infiniteloading/__tests__/infiniteloading.spec.tsx b/src/packages/infiniteloading/__tests__/infiniteloading.spec.tsx index e845b74aa9..cafd72b3c7 100644 --- 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( - - ) - 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 ( { 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 ( { expect(container).toMatchSnapshot() await waitFor(() => expect(done).toHaveBeenCalled()) }) + +test('hasMore false', () => { + const done = jest.fn() + const { container: container1, rerender } = render( + + {Array.from({ length: 100 }) + .fill('NutUI') + .map((item: string, index) => { + return ( +
  • + {item} +
    • + ) + })} +     + ) + const track1 = container1.querySelector('.nut-infiniteloading') + trigger(track1, 'scroll', 0, 100) +}) + +test('hasMore', () => { + const done = jest.fn() + const { container } = render( + + {Array.from({ length: 100 }) + .fill('NutUI') + .map((item: string, index) => { + return ( +
  • + {item} +
    • + ) + })} +     + ) + 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( + + ) + 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 index 499c20295b..edb0a43282 100644 --- a/src/packages/infiniteloading/demo.taro.tsx +++ b/src/packages/infiniteloading/demo.taro.tsx @@ -5,6 +5,7 @@ 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 @@ -12,6 +13,7 @@ interface T { eb4236fe: string '1254a90a': string } + const InfiniteLoadingDemo = () => { const [translated] = useTranslate({ '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 index abe4e44ce4..d5aca9f141 100644 --- 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({ '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 = () => { diff --git a/src/packages/infiniteloading/doc.en-US.md b/src/packages/infiniteloading/doc.en-US.md index ade89976f4..5e5082b6ee 100644 --- a/src/packages/infiniteloading/doc.en-US.md +++ b/src/packages/infiniteloading/doc.en-US.md @@ -20,6 +20,8 @@ import { InfiniteLoading } from '@nutui/nutui-react' import React, { useState, useEffect } from 'react' import { Cell, InfiniteLoading } from '@nutui/nutui-react' +const sleep = (time: number): Promise => + new Promise((resolve) => {setTimeout(resolve, time)}) const InfiniteUlStyle = { height: '300px', width: '100%', @@ -42,19 +44,17 @@ const App = () => { 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) + const curLen = defaultList.length + for (let i = curLen; i < curLen + 10; i++) { + defaultList.push(`${i}`) + } + if (defaultList.length >= 30) { + setHasMore(false) + } else { + setDefaultList([...defaultList]) + } } const init = () => { @@ -101,6 +101,8 @@ import React, { useState, useEffect } from 'react' import { Cell, InfiniteLoading } from '@nutui/nutui-react' import { Jd } from '@nutui/icons-react' +const sleep = (time: number): Promise => + new Promise((resolve) => {setTimeout(resolve, time)}) const InfiniteUlStyle = { height: '300px', width: '100%', @@ -130,26 +132,22 @@ const App = () => { 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(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 refresh = (done: () => void) => { - setTimeout(() => { - Toast.show('Refresh success!') - done() - }, 1000) + const refresh = async () => { + await sleep(1000) + Toast.show('刷新成功') } return ( @@ -197,6 +195,8 @@ export default App import React, { useState, useEffect } from 'react' import { Cell, InfiniteLoading } from '@nutui/nutui-react' +const sleep = (time: number): Promise => + new Promise((resolve) => {setTimeout(resolve, time)}) const InfiniteUlStyle = { height: '300px', width: '100%', @@ -226,19 +226,17 @@ const App = () => { setCustomList([...customList]) } - 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]) + } } return ( @@ -280,6 +278,8 @@ export default App import React, { useState, useEffect } from 'react' import { Cell, InfiniteLoading } from '@nutui/nutui-react' +const sleep = (time: number): Promise => + new Promise((resolve) => {setTimeout(resolve, time)}) const InfiniteUlStyle = { width: '100%', padding: '0', @@ -308,19 +308,17 @@ const App = () => { setCustomList([...customList]) } - 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]) + } } return ( @@ -366,8 +364,8 @@ export default App | pullRefresh | Enable pull refresh | `boolean` | `false` | | pullingText | Pull refresh text | `ReactNode` | `Let go and refresh` | | loadingText | Pull on loading text | `ReactNode` | `loading...` | -| onRefresh | Pull down refresh event callback | `(param: () => void) => void` | `-` | -| onLoadMore | Callback function to continue loading | `(param: () => void) => void` | `-` | +| onRefresh | Pull down refresh event callback | `() => Promise` | `-` | +| onLoadMore | Callback function to continue loading | `() => Promise` | `-` | | onScroll | Monitor scroll height in real time | `(param: number) => void` | `-` | ## Theming diff --git a/src/packages/infiniteloading/doc.md b/src/packages/infiniteloading/doc.md index 9c5623e34c..61b17ae7e9 100644 --- a/src/packages/infiniteloading/doc.md +++ b/src/packages/infiniteloading/doc.md @@ -20,6 +20,8 @@ import { InfiniteLoading } from '@nutui/nutui-react' import React, { useState, useEffect } from 'react' import { Cell, InfiniteLoading } from '@nutui/nutui-react' +const sleep = (time: number): Promise => + new Promise((resolve) => {setTimeout(resolve, time)}) const InfiniteUlStyle = { height: '300px', width: '100%', @@ -42,19 +44,17 @@ const App = () => { 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) + const curLen = defaultList.length + for (let i = curLen; i < curLen + 10; i++) { + defaultList.push(`${i}`) + } + if (defaultList.length >= 30) { + setHasMore(false) + } else { + setDefaultList([...defaultList]) + } } const init = () => { @@ -145,6 +145,8 @@ import React, { useState, useEffect } from 'react' import { Cell, InfiniteLoading } from '@nutui/nutui-react' import { Jd } from '@nutui/icons-react' +const sleep = (time: number): Promise => + new Promise((resolve) => {setTimeout(resolve, time)}) const InfiniteUlStyle = { height: '300px', width: '100%', @@ -174,26 +176,22 @@ const App = () => { 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(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 refresh = (done: () => void) => { - setTimeout(() => { - Toast.show('刷新成功') - done() - }, 1000) + const refresh = async () => { + await sleep(1000) + Toast.show('刷新成功') } return ( @@ -254,6 +252,8 @@ export default App import React, { useState, useEffect } from 'react' import { Cell, InfiniteLoading } from '@nutui/nutui-react' +const sleep = (time: number): Promise => + new Promise((resolve) => {setTimeout(resolve, time)}) const InfiniteUlStyle = { height: '300px', width: '100%', @@ -283,30 +283,28 @@ const App = () => { setCustomList([...customList]) } - 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]) + } } return ( <>

    自定义加载文案

    -
      +
        @@ -337,6 +335,8 @@ export default App import React, { useState, useEffect } from 'react' import { Cell, InfiniteLoading } from '@nutui/nutui-react' +const sleep = (time: number): Promise => + new Promise((resolve) => {setTimeout(resolve, time)}) const InfiniteUlStyle = { width: '100%', padding: '0', @@ -365,19 +365,17 @@ const App = () => { setCustomList([...customList]) } - 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]) + } } return ( @@ -423,8 +421,8 @@ export default App | pullRefresh | 是否开启下拉刷新 | `boolean` | `false` | | pullingText | 下拉刷新提示文案 | `ReactNode` | `松手刷新` | | loadingText | 上拉加载提示文案 | `ReactNode` | `刷新中` | -| onRefresh | 下拉刷新事件回调 | `(param: () => void) => void` | `-` | -| onLoadMore | 继续加载的回调函数 | `(param: () => void) => void` | `-` | +| onRefresh | 下拉刷新事件回调 | `() => Promise` | `-` | +| onLoadMore | 继续加载的回调函数 | `() => Promise` | `-` | | onScroll | 实时监听滚动高度 | `(param: number) => void` | `-` | ## 主题定制 diff --git a/src/packages/infiniteloading/doc.taro.md b/src/packages/infiniteloading/doc.taro.md index b4cbe6f164..7d299b5e5c 100644 --- a/src/packages/infiniteloading/doc.taro.md +++ b/src/packages/infiniteloading/doc.taro.md @@ -22,6 +22,8 @@ import Taro from '@tarojs/taro' import { Jd } from '@nutui/icons-react-taro' import { Cell, InfiniteLoading } from '@nutui/nutui-react-taro' +const sleep = (time: number): Promise => + new Promise((resolve) => {setTimeout(resolve, time)}) const InfiniteUlStyle = { height: '500px', width: '100%', @@ -44,30 +46,26 @@ const App = () => { 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) + const curLen = defaultList.length + for (let i = curLen; i < curLen + 10; i++) { + defaultList.push(`${i}`) + } + if (defaultList.length >= 30) { + setHasMore(false) + } else { + setDefaultList([...defaultList]) + } } - const refresh = (done: () => void) => { - setTimeout(() => { - Taro.showToast({ - title: '刷新成功', - icon: 'success', - duration: 2000, - }) - done() - }, 1000) + const refresh = async () => { + await sleep(1000) + Taro.showToast({ + title: '刷新成功', + icon: 'success', + duration: 2000, + }) } const init = () => { @@ -183,8 +181,8 @@ export default App | pullRefresh | 是否开启下拉刷新 | `boolean` | `false` | | pullingText | 下拉刷新提示文案 | `ReactNode` | `松手刷新` | | loadingText | 上拉加载提示文案 | `ReactNode` | `刷新中` | -| onRefresh | 下拉刷新事件回调 | `(param: () => void) => void` | `-` | -| onLoadMore | 继续加载的回调函数 | `(param: () => void) => void` | `-` | +| onRefresh | 下拉刷新事件回调 | `() => Promise` | `-` | +| onLoadMore | 继续加载的回调函数 | `() => Promise` | `-` | | onScroll | 实时监听滚动高度 | `(param: number) => void` | `-` | ## 主题定制 diff --git a/src/packages/infiniteloading/doc.zh-TW.md b/src/packages/infiniteloading/doc.zh-TW.md index d315ee63da..775b4a6789 100644 --- a/src/packages/infiniteloading/doc.zh-TW.md +++ b/src/packages/infiniteloading/doc.zh-TW.md @@ -20,6 +20,8 @@ import { InfiniteLoading } from '@nutui/nutui-react' import React, { useState, useEffect } from 'react' import { Cell, InfiniteLoading } from '@nutui/nutui-react' +const sleep = (time: number): Promise => + new Promise((resolve) => {setTimeout(resolve, time)}) const InfiniteUlStyle = { height: '300px', width: '100%', @@ -42,19 +44,17 @@ const App = () => { 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) + const curLen = defaultList.length + for (let i = curLen; i < curLen + 10; i++) { + defaultList.push(`${i}`) + } + if (defaultList.length >= 30) { + setHasMore(false) + } else { + setDefaultList([...defaultList]) + } } const init = () => { @@ -101,6 +101,8 @@ import React, { useState, useEffect } from 'react' import { Cell, InfiniteLoading } from '@nutui/nutui-react' import { Jd } from '@nutui/icons-react' +const sleep = (time: number): Promise => + new Promise((resolve) => {setTimeout(resolve, time)}) const InfiniteUlStyle = { height: '300px', width: '100%', @@ -130,26 +132,22 @@ const App = () => { 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(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 refresh = (done: () => void) => { - setTimeout(() => { - Toast.show('刷新成功') - done() - }, 1000) + const refresh = async () => { + await sleep(1000) + Toast.show('刷新成功') } return ( @@ -197,6 +195,8 @@ export default App import React, { useState, useEffect } from 'react' import { Cell, InfiniteLoading } from '@nutui/nutui-react' +const sleep = (time: number): Promise => + new Promise((resolve) => {setTimeout(resolve, time)}) const InfiniteUlStyle = { height: '300px', width: '100%', @@ -226,19 +226,17 @@ const App = () => { setCustomList([...customList]) } - 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]) + } } return ( @@ -280,6 +278,8 @@ export default App import React, { useState, useEffect } from 'react' import { Cell, InfiniteLoading } from '@nutui/nutui-react' +const sleep = (time: number): Promise => + new Promise((resolve) => {setTimeout(resolve, time)}) const InfiniteUlStyle = { width: '100%', padding: '0', @@ -308,19 +308,17 @@ const App = () => { setCustomList([...customList]) } - 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]) + } } return ( @@ -366,8 +364,8 @@ export default App | pullRefresh | 是否開啟下拉刷新 | `boolean` | `false` | | pullingText | 下拉刷新提示文案 | `ReactNode` | `鬆手刷新` | | loadingText | 上拉加載提示文案 | `ReactNode` | `加載中...` | -| onRefresh | 下拉刷新事件回調 | `(param: () => void) => void` | `-` | -| onLoadMore | 繼續加載的回調函數 | `(param: () => void) => void` | `-` | +| onRefresh | 下拉刷新事件回調 | `() => Promise` | `-` | +| onLoadMore | 繼續加載的回調函數 | `() => Promise` | `-` | | onScroll | 實時監聽滾動高度 | `(param: number) => void` | `-` | ## 主題定制 diff --git a/src/packages/infiniteloading/infiniteloading.taro.tsx b/src/packages/infiniteloading/infiniteloading.taro.tsx index 854a637d42..11f83380e1 100644 --- a/src/packages/infiniteloading/infiniteloading.taro.tsx +++ b/src/packages/infiniteloading/infiniteloading.taro.tsx @@ -20,8 +20,8 @@ export interface InfiniteLoadingProps extends BasicComponent { pullingText: ReactNode loadingText: ReactNode loadMoreText: ReactNode - onRefresh: (param: () => void) => void - onLoadMore: (param: () => void) => void + onRefresh: () => Promise + onLoadMore: () => Promise onScroll: (param: number) => void } @@ -115,12 +115,13 @@ export const InfiniteLoading: FunctionComponent< onScroll && onScroll(e.target.scrollTop) } - const lower = () => { + const lower = async () => { if (!hasMore || isInfiniting) { return false } setIsInfiniting(true) - onLoadMore && onLoadMore(infiniteDone) + await onLoadMore?.() + infiniteDone() } const touchStart = (event: any) => { @@ -146,12 +147,13 @@ export const InfiniteLoading: FunctionComponent< } } - const touchEnd = () => { + const touchEnd = async () => { if (distance.current < refreshMaxH.current) { distance.current = 0 setTopDisScoll(0) } else { - onRefresh && onRefresh(refreshDone) + await onRefresh?.() + refreshDone() } } diff --git a/src/packages/infiniteloading/infiniteloading.tsx b/src/packages/infiniteloading/infiniteloading.tsx index 6f203c2a64..73740f2a4b 100644 --- a/src/packages/infiniteloading/infiniteloading.tsx +++ b/src/packages/infiniteloading/infiniteloading.tsx @@ -8,7 +8,6 @@ import React, { import classNames from 'classnames' import { useConfig } from '@/packages/configprovider' import { BasicComponent, ComponentDefaults } from '@/utils/typings' -import requestAniFrame from '@/utils/raf' export interface InfiniteLoadingProps extends BasicComponent { hasMore: boolean @@ -19,8 +18,8 @@ export interface InfiniteLoadingProps extends BasicComponent { pullingText: ReactNode loadingText: ReactNode loadMoreText: ReactNode - onRefresh: (param: () => void) => void - onLoadMore: (param: () => void) => void + onRefresh: () => Promise + onLoadMore: () => Promise onScroll: (param: number) => void } @@ -107,15 +106,13 @@ export const InfiniteLoading: FunctionComponent< } } - const handleScroll = () => { - requestAniFrame(() => { - if (!isScrollAtBottom() || !hasMore || isInfiniting) { - return false - } - setIsInfiniting(true) - onLoadMore && onLoadMore(infiniteDone) - return true - }) + const handleScroll = async () => { + if (!isScrollAtBottom() || !hasMore || isInfiniting) { + return + } + setIsInfiniting(true) + await onLoadMore?.() + infiniteDone() } const infiniteDone = () => { @@ -159,12 +156,13 @@ export const InfiniteLoading: FunctionComponent< } } - const touchEnd = () => { + const touchEnd = async () => { if (distance.current < refreshMaxH.current) { distance.current = 0 getRefreshTop().style.height = `${distance.current}px` } else { - onRefresh && onRefresh(refreshDone) + await onRefresh?.() + refreshDone() } }