feat(infiniteloading): add refreshDistance props and refactor pull-to-refresh trigger mechanism in taro

src/packages/infiniteloading/doc.en-US.md

@@ -65,6 +65,7 @@ import { InfiniteLoading } from '@nutui/nutui-react'
 | pullRefresh | Enable pull refresh | `boolean` | `false` |
 | pullingText | Pull refresh text | `ReactNode` | `Let go and refresh` |
 | loadingText | Pull on loading text | `ReactNode` | `loading...` |
+| refreshDistance | Pull refresh trigger distance | `number` | `100` |
 | onRefresh | Pull down refresh event callback | `() => Promise<void>` | `-` |
 | onLoadMore | Callback function to continue loading | `() => Promise<void>` | `-` |
 | onScroll | Monitor scroll height in real time | `(param: number) => void` | `-` |

src/packages/infiniteloading/doc.md

@@ -65,6 +65,7 @@ import { InfiniteLoading } from '@nutui/nutui-react'
 | pullRefresh | 是否开启下拉刷新 | `boolean` | `false` |
 | pullingText | 下拉刷新提示文案 | `ReactNode` | `松手刷新` |
 | loadingText | 上拉加载提示文案 | `ReactNode` | `刷新中` |
+| refreshDistance | 下拉刷新触发距离 | `number` | `100` |
 | onRefresh | 下拉刷新事件回调 | `() => Promise<void>` | `-` |
 | onLoadMore | 继续加载的回调函数 | `() => Promise<void>` | `-` |
 | onScroll | 实时监听滚动高度 | `(param: number) => void` | `-` |

src/packages/infiniteloading/doc.taro.md

@@ -56,6 +56,7 @@ import { InfiniteLoading } from '@nutui/nutui-react-taro'
 | pullRefresh | 是否开启下拉刷新 | `boolean` | `false` |
 | pullingText | 下拉刷新提示文案 | `ReactNode` | `松手刷新` |
 | loadingText | 上拉加载提示文案 | `ReactNode` | `刷新中` |
+| refreshDistance | 下拉刷新触发距离 | `number` | `100` |
 | onRefresh | 下拉刷新事件回调 | `() => Promise<void>` | `-` |
 | onLoadMore | 继续加载的回调函数 | `() => Promise<void>` | `-` |
 | onScroll | 实时监听滚动高度 | `(param: number) => void` | `-` |

src/packages/infiniteloading/doc.zh-TW.md

@@ -65,6 +65,7 @@ import { InfiniteLoading } from '@nutui/nutui-react'
 | pullRefresh | 是否開啟下拉刷新 | `boolean` | `false` |
 | pullingText | 下拉刷新提示文案 | `ReactNode` | `鬆手刷新` |
 | loadingText | 上拉加載提示文案 | `ReactNode` | `加載中...` |
+| refreshDistance | 下拉刷新觸發距離 | `number` | `100` |
 | onRefresh | 下拉刷新事件回調 | `() => Promise<void>` | `-` |
 | onLoadMore | 繼續加載的回調函數 | `() => Promise<void>` | `-` |
 | onScroll | 實時監聽滾動高度 | `(param: number) => void` | `-` |

src/packages/infiniteloading/infiniteloading.taro.tsx

@@ -6,14 +6,17 @@ import { useConfig } from '@/packages/configprovider/index.taro'
 import { ComponentDefaults } from '@/utils/typings'
 import { TaroInfiniteLoadingProps } from '@/types'
 import pxTransform from '@/utils/px-transform'
+import { mergeProps } from '@/utils/merge-props'
+import { getRectByTaro } from '@/utils/get-rect-by-taro'
 
 const defaultProps = {
   ...ComponentDefaults,
   type: 'default',
   hasMore: true,
-  threshold: 40,
+  threshold: 200,
   target: '',
   pullRefresh: false,
+  refreshDistance: 100,
 } as TaroInfiniteLoadingProps
 
 const classPrefix = `nut-infiniteloading`
@@ -36,11 +39,9 @@ export const InfiniteLoading: FunctionComponent<
     onRefresh,
     onLoadMore,
     onScroll,
+    refreshDistance,
     ...rest
-  } = {
-    ...defaultProps,
-    ...props,
-  }
+  } = mergeProps(defaultProps, props)
   const [isInfiniting, setIsInfiniting] = useState(false)
   const [topDisScoll, setTopDisScoll] = useState(0)
   const refreshTop = useRef<HTMLDivElement>(null)
@@ -50,16 +51,18 @@ export const InfiniteLoading: FunctionComponent<
   const y = useRef(0)
   const refreshMaxH = useRef(0)
   const distance = useRef(0)
+  const refreshTipsRef = useRef<HTMLDivElement>(null)
 
   const classes = classNames(classPrefix, className, `${classPrefix}-${type}`)
 
   useEffect(() => {
-    refreshMaxH.current = threshold
-    const timer = setTimeout(() => {
+    const timer = setTimeout(async () => {
       getScrollHeight()
+      const rect = await getRectByTaro(refreshTipsRef.current)
+      refreshMaxH.current = Math.floor((rect?.height ?? 0) * 1.5)
     }, 200)
     return () => clearTimeout(timer)
-  }, [hasMore, isInfiniting, threshold])
+  }, [hasMore, isInfiniting])
 
   /** 获取需要滚动的距离 */
   const getScrollHeight = () => {
@@ -122,9 +125,9 @@ export const InfiniteLoading: FunctionComponent<
     if (distance.current > 0 && isTouching.current) {
       event.preventDefault()
       setTopDisScoll(distance.current)
-      if (distance.current >= refreshMaxH.current) {
-        distance.current = refreshMaxH.current
-        setTopDisScoll(refreshMaxH.current)
+      if (distance.current >= refreshDistance) {
+        distance.current = refreshDistance
+        setTopDisScoll(refreshDistance)
       }
     } else {
       distance.current = 0
@@ -134,7 +137,7 @@ export const InfiniteLoading: FunctionComponent<
   }
 
   const touchEnd = async () => {
-    if (distance.current < refreshMaxH.current) {
+    if (distance.current < refreshDistance) {
       distance.current = 0
       setTopDisScoll(0)
       isTouching.current = false
@@ -161,6 +164,7 @@ export const InfiniteLoading: FunctionComponent<
       scrollY
       id="scroller"
       type="list"
+      lowerThreshold={threshold}
       style={{ height: '100%' }}
       onScroll={scrollAction}
       onScrollToLower={lower}
@@ -169,7 +173,7 @@ export const InfiniteLoading: FunctionComponent<
       onTouchEnd={touchEnd}
     >
       <View className="nut-infinite-top" ref={refreshTop} style={getStyle()}>
-        <View className="nut-infinite-top-tips">
+        <View className="nut-infinite-top-tips" ref={refreshTipsRef}>
           {pullingText || locale.infiniteloading.pullRefreshText}
         </View>
       </View>

src/packages/infiniteloading/infiniteloading.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames'
 import { useConfig } from '@/packages/configprovider'
 import { ComponentDefaults } from '@/utils/typings'
 import { WebInfiniteLoadingProps } from '@/types'
+import { mergeProps } from '@/utils/merge-props'
 
 declare let window: Window & { webkitRequestAnimationFrame: any } & {
   mozRequestAnimationFrame: any
@@ -16,6 +17,7 @@ const defaultProps = {
   target: '',
   capture: false,
   pullRefresh: false,
+  refreshDistance: 100,
 } as WebInfiniteLoadingProps
 
 const classPrefix = `nut-infiniteloading`
@@ -35,15 +37,13 @@ export const InfiniteLoading: FunctionComponent<
     pullingText,
     loadingText,
     loadMoreText,
+    refreshDistance,
     className,
     onRefresh,
     onLoadMore,
     onScroll,
     ...restProps
-  } = {
-    ...defaultProps,
-    ...props,
-  }
+  } = mergeProps(defaultProps, props)
   const [isInfiniting, setIsInfiniting] = useState(false)
   const scroller = useRef<HTMLDivElement>(null)
   const refreshTop = useRef<HTMLDivElement>(null)
@@ -126,8 +126,8 @@ export const InfiniteLoading: FunctionComponent<
     distance.current = event.touches[0].pageY - y.current
     if (distance.current > 0 && isTouching.current) {
       event.preventDefault()
-      if (distance.current >= refreshMaxH.current) {
-        distance.current = refreshMaxH.current
+      if (distance.current >= refreshDistance) {
+        distance.current = refreshDistance
         getRefreshTop().style.height = `${distance.current}px`
       } else {
         getRefreshTop().style.height = `${distance.current}px`
@@ -140,7 +140,7 @@ export const InfiniteLoading: FunctionComponent<
   }
 
   const touchEnd = async () => {
-    if (distance.current < refreshMaxH.current) {
+    if (distance.current < refreshDistance) {
       distance.current = 0
       getRefreshTop().style.height = `${distance.current}px`
       isTouching.current = false

src/sites/sites-react/doc/docs/react/migrate-from-v2.md

@@ -216,6 +216,7 @@ plugins: [
 #### InfiniteLoading
 
 - `target` 属性获取监听的目标元素
+- `refreshDistance` 下拉刷新触发距离
 
 [//]: # '#### Notify'
 [//]: # '#### PullToRefresh'

src/sites/sites-react/doc/docs/taro/migrate-from-v2.md

@@ -219,6 +219,7 @@ plugins: [
 #### InfiniteLoading
 
 - `target` 属性获取监听的目标元素
+- `refreshDistance` 下拉刷新触发距离
 
 [//]: # '#### Notify'
 [//]: # '#### PullToRefresh'

src/types/spec/infiniteloading/base.ts

@@ -8,6 +8,7 @@ export interface BaseInfiniteLoading extends BaseProps {
   type: InfiniteLoadingType
   hasMore: boolean
   threshold: number
+  refreshDistance: number
   target: string
   capture: boolean
   pullRefresh: boolean