feat: feat manual tigger PullToRefresh

src/components/pull-to-refresh/index.en.md

@@ -45,6 +45,12 @@ type PullStatus = 'pulling' | 'canRelease' | 'refreshing' | 'complete'
 | renderText | Customize the pulling content according to the pulling status | `(status: PullStatus) => ReactNode` | - |
 | threshold | How far to pull down to trigger refresh, unit is px | `number` | `60` |
 
+### Ref
+
+| Name    | Description                            | Type       |
+| ------- | -------------------------------------- | ---------- |
+| refresh | Manually trigger the drop-down refresh | `()=>void` |
+
 ## FAQ
 
 ### Does it support pull up to load more?

src/components/pull-to-refresh/index.zh.md

@@ -45,6 +45,12 @@ type PullStatus = 'pulling' | 'canRelease' | 'refreshing' | 'complete'
 | renderText | 根据下拉状态，自定义下拉提示文案 | `(status: PullStatus) => ReactNode` | - |
 | threshold | 触发刷新需要下拉多少距离，单位为 px | `number` | `60` |
 
+### Ref
+
+| 属性    | 说明             | 类型       |
+| ------- | ---------------- | ---------- |
+| refresh | 手动触发下拉刷新 | `()=>void` |
+
 ## 常见问题
 
 ### 是否支持上拉加载更多？

src/components/pull-to-refresh/pull-to-refresh.tsx

@@ -1,14 +1,20 @@
-import React, { useEffect, useRef, useState } from 'react'
-import type { FC, ReactNode } from 'react'
-import { mergeProps } from '../../utils/with-default-props'
 import { animated, useSpring } from '@react-spring/web'
 import { useDrag } from '@use-gesture/react'
-import { getScrollParent } from '../../utils/get-scroll-parent'
-import { supportsPassive } from '../../utils/supports-passive'
+import type { ForwardRefRenderFunction, ReactNode } from 'react'
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react'
 import { convertPx } from '../../utils/convert-px'
+import { getScrollParent } from '../../utils/get-scroll-parent'
 import { rubberbandIfOutOfBounds } from '../../utils/rubberband'
-import { useConfig } from '../config-provider'
 import { sleep } from '../../utils/sleep'
+import { supportsPassive } from '../../utils/supports-passive'
+import { mergeProps } from '../../utils/with-default-props'
+import { useConfig } from '../config-provider'
 
 const classPrefix = `adm-pull-to-refresh`
 
@@ -28,6 +34,10 @@
   children?: ReactNode
 }
 
+export type PullToRefreshRef = {
+  refresh: () => void
+}
+
 export const defaultProps = {
   pullingText: '下拉刷新',
   canReleaseText: '释放立即刷新',
@@ -38,7 +48,10 @@
   onRefresh: () => {},
 }
 
-export const PullToRefresh: FC<PullToRefreshProps> = p => {
+export const PullToRefresh$: ForwardRefRenderFunction<
+  PullToRefreshRef,
+  PullToRefreshProps
+> = (p, ref) => {
   const { locale } = useConfig()
   const props = mergeProps(
     defaultProps,
@@ -104,6 +117,15 @@
     reset()
   }
 
+  useImperativeHandle(ref, () => {
+    return {
+      refresh: () => {
+        if (status === 'refreshing' || status === 'complete') return
+        doRefresh()
+      },
+    }
+  })
+
   useDrag(
     state => {
       if (status === 'refreshing' || status === 'complete') return
@@ -191,3 +213,5 @@
     </animated.div>
   )
 }
+
+export const PullToRefresh = forwardRef(PullToRefresh$)

src/global/global.less

@@ -45,8 +45,8 @@ div.adm-px-tester {
   height: calc(var(--size) / 2 * 2px);
   width: 0;
   position: fixed;
-  right: -100vw;
-  bottom: -100vh;
+  left: -100vw;
+  top: -100vh;
   user-select: none;
   pointer-events: none;
 }