feat: pull-to-refresh新增交互时间参数（#509）

AntmJS · Jun 9, 2023 · b3f3275 · b3f3275
1 parent cd17796
commit b3f3275
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/packages/vantui/src/pull-to-refresh/pull-to-refresh.tsx b/packages/vantui/src/pull-to-refresh/pull-to-refresh.tsx
@@ -22,6 +22,8 @@ export default function PullToRefresh(props: IPullToRefreshProps) {
     onRefresh,
     touchMaxStart = 300,
     disable = false,
+    successDuration = SUCESS_DURATION,
+    touchMinTime = TOUCH_MIN_TIME,
   } = props
   const [statusHeight, setStatusHeight] = useState(0)
   const [status, setStatus] = useState<IStatus>('pull') // 待拖拽
@@ -72,7 +74,7 @@ export default function PullToRefresh(props: IPullToRefreshProps) {
     function (event) {
       if (
         !disable &&
-        Date.now() - touch.time > TOUCH_MIN_TIME &&
+        Date.now() - touch.time > touchMinTime &&
         (status === 'pull' || status === 'release')
       ) {
         event.preventDefault()
@@ -83,7 +85,7 @@ export default function PullToRefresh(props: IPullToRefreshProps) {
         setStatusHeight(y)
       }
     },
-    [disable, status, touch.start, touch.time],
+    [disable, status, touch.start, touch.time, touchMinTime],
   )
 
   const onTouchEnd = useCallback(async () => {
@@ -94,11 +96,11 @@ export default function PullToRefresh(props: IPullToRefreshProps) {
       setStatus('success')
       setTimeout(() => {
         reset()
-      }, SUCESS_DURATION)
+      }, successDuration)
     } else {
       reset()
     }
-  }, [headHeight, onRefresh, rendermarginTop, reset, status])
+  }, [headHeight, onRefresh, rendermarginTop, reset, status, successDuration])
 
   useEffect(() => {
     setTimeout(() => {

diff --git a/packages/vantui/types/pull-to-refresh.d.ts b/packages/vantui/types/pull-to-refresh.d.ts
@@ -46,6 +46,16 @@ export interface IPullToRefreshProps extends ViewProps {
    * @default `false`
    */
   disable?: boolean
+  /**
+   * @description 成功状态展示时长
+   * @default `1000`
+   */
+  successDuration?: number
+  /**
+   * @description 触摸触发拖拽的最小停留时间
+   * @default `400`
+   */
+  touchMinTime?: number
 }
 
 declare const PullToRefresh: FunctionComponent<IPullToRefreshProps>