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

src/packages/infiniteloading/__tests__/__snapshots__/infiniteloading.spec.tsx.snap

@@ -118,7 +118,7 @@ exports[`pull base 01 1`] = `
   >
     <div
       class="nut-infinite-top"
-      style="height: 10px; transition: height 0.2s cubic-bezier(0.25,0.1,0.25,1);"
+      style="height: 20px; transition: height 0.2s cubic-bezier(0.25,0.1,0.25,1);"
     >
       <div
         class="nut-infinite-top-tips"
@@ -205,7 +205,7 @@ exports[`pull base 1`] = `
   >
     <div
       class="nut-infinite-top"
-      style="height: 10px; transition: height 0.2s cubic-bezier(0.25,0.1,0.25,1);"
+      style="height: 20px; transition: height 0.2s cubic-bezier(0.25,0.1,0.25,1);"
     >
       <div
         class="nut-infinite-top-tips"
@@ -234,7 +234,7 @@ exports[`pull base 2`] = `
   >
     <div
       class="nut-infinite-top"
-      style="height: 10px; transition: height 0.2s cubic-bezier(0.25,0.1,0.25,1);"
+      style="height: 0px; transition: height 0.2s cubic-bezier(0.25,0.1,0.25,1);"
     >
       <div
         class="nut-infinite-top-tips"

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

@@ -11,9 +11,10 @@
   ...ComponentDefaults,
   type: 'default',
   hasMore: true,
-  threshold: 40,
+  threshold: 200,
   target: '',
   pullRefresh: false,
+  refreshDistance: 100,
 } as TaroInfiniteLoadingProps
 
 const classPrefix = `nut-infiniteloading`
@@ -36,30 +37,26 @@
     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)
   const scrollHeight = useRef(0)
   const scrollTop = useRef(0)
   const isTouching = useRef(false)
   const y = useRef(0)
-  const refreshMaxH = useRef(0)
   const distance = useRef(0)
 
   const classes = classNames(classPrefix, className, `${classPrefix}-${type}`)
 
   useEffect(() => {
-    refreshMaxH.current = threshold
-    const timer = setTimeout(() => {
+    const timer = setTimeout(async () => {
       getScrollHeight()
     }, 200)
     return () => clearTimeout(timer)
-  }, [hasMore, isInfiniting, threshold])
+  }, [hasMore, isInfiniting])
 
   /** 获取需要滚动的距离 */
   const getScrollHeight = () => {
@@ -111,21 +108,25 @@
   }
 
   const touchStart = (event: any) => {
-    if (scrollTop.current === 0 && !isTouching.current && pullRefresh) {
+    if (!isTouching.current && pullRefresh) {
       y.current = event.touches[0].pageY
+      distance.current = 0
+      setTopDisScoll(0)
       isTouching.current = true
     }
   }
 
   const touchMove = (event: any) => {
-    distance.current = event.touches[0].pageY - y.current
-    if (distance.current > 0 && isTouching.current) {
+    if (!isTouching.current) return
+    const currentY = event.touches[0].pageY
+    const newDistance = Math.max(0, currentY - y.current)
+    distance.current = newDistance
+
+    if (newDistance > 0) {
       event.preventDefault()
-      setTopDisScoll(distance.current)
-      if (distance.current >= refreshMaxH.current) {
-        distance.current = refreshMaxH.current
-        setTopDisScoll(refreshMaxH.current)
-      }
+      const finalDistance = Math.min(newDistance, refreshDistance)
+      distance.current = finalDistance
+      setTopDisScoll(finalDistance)
     } else {
       distance.current = 0
       setTopDisScoll(0)
@@ -134,14 +135,17 @@
   }
 
   const touchEnd = async () => {
-    if (distance.current < refreshMaxH.current) {
+    if (!isTouching.current) return
+
+    if (distance.current < refreshDistance) {
       distance.current = 0
       setTopDisScoll(0)
-      isTouching.current = false
-    } else {
-      await onRefresh?.()
-      refreshDone()
+    } else if (onRefresh) {
+      await onRefresh()
     }
+
+    isTouching.current = false
+    refreshDone()
   }
 
   function getBottomTipsText() {
@@ -161,6 +165,7 @@
       scrollY
       id="scroller"
       type="list"
+      lowerThreshold={threshold}
       style={{ height: '100%' }}
       onScroll={scrollAction}
       onScrollToLower={lower}

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,22 +37,19 @@ 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)
   const scrollEl = useRef<Window | HTMLElement | null>(null)
   const isTouching = useRef(false)
   const beforeScrollTop = useRef(0)
-  const refreshMaxH = useRef(0)
   const y = useRef(0)
   const distance = useRef(0)
 
@@ -118,16 +117,15 @@ export const InfiniteLoading: FunctionComponent<
       isTouching.current = true
       const childHeight = (getRefreshTop().firstElementChild as HTMLElement)
         .offsetHeight
-      refreshMaxH.current = Math.floor(childHeight * 1 + 10)
     }
   }
 
   const touchMove = (event: any) => {
     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 +138,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.en-US.md

@@ -1,4 +1,4 @@
-# Upgrade from v2 to v3.
+# Upgrade from v2 to v3
 
 This document will assist you in upgrading from NutUI React 2.x to NutUI React 3.x.
 
@@ -214,6 +214,7 @@ If your project uses these components, please read the documentation carefully a
 #### InfiniteLoading
 
 - The target attribute is used to obtain the element that is being listened to.
+- `refreshDistance` The distance to trigger the pull-down refresh.
 
 [//]: # '#### Notify'
 [//]: # '#### PullToRefresh'

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

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

src/sites/sites-react/doc/docs/react/official-theme-react.md

@@ -12,7 +12,6 @@ NutUI 默认提供多套官方`UI`主题，同时允许在一定程度上定制
 | 京东 JDesign 主题 ([预览](https://nutui.jd.com/h5/react/jdesign-3x/#/zh-CN/component/button)) | `variables-jmapp.scss` |
 | 京东 JRKF 主题 | `variables-jrkf.scss` |
 
-
 ## 使用方式
 
 需要注意的是，配置主题时，你还需要在入口文件中引入 global 类的文件来加载一些 NutUI React 的全局性逻辑和样式：

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

@@ -1,4 +1,4 @@
-# Upgrade from v2 to v3.
+# Upgrade from v2 to v3
 
 This document will assist you in upgrading from NutUI React 2.x to NutUI React 3.x.
 
@@ -214,6 +214,7 @@ If your project uses these components, please read the documentation carefully a
 #### InfiniteLoading
 
 - The target attribute is used to obtain the element that is being listened to.
+- `refreshDistance` The distance to trigger the pull-down refresh.
 
 [//]: # '#### Notify'
 [//]: # '#### PullToRefresh'

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

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

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