diff --git a/src/components/pull-to-refresh/index.en.md b/src/components/pull-to-refresh/index.en.md index 6c0a7234ab..003d4e6e42 100644 --- a/src/components/pull-to-refresh/index.en.md +++ b/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? diff --git a/src/components/pull-to-refresh/index.zh.md b/src/components/pull-to-refresh/index.zh.md index 370cb8fa8d..cbddbbdceb 100644 --- a/src/components/pull-to-refresh/index.zh.md +++ b/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` | + ## 常见问题 ### 是否支持上拉加载更多? diff --git a/src/components/pull-to-refresh/pull-to-refresh.tsx b/src/components/pull-to-refresh/pull-to-refresh.tsx index dd34aa3f9c..96909f724c 100644 --- a/src/components/pull-to-refresh/pull-to-refresh.tsx +++ b/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 @@ export type PullToRefreshProps = { children?: ReactNode } +export type PullToRefreshRef = { + refresh: () => void +} + export const defaultProps = { pullingText: '下拉刷新', canReleaseText: '释放立即刷新', @@ -38,7 +48,10 @@ export const defaultProps = { onRefresh: () => {}, } -export const PullToRefresh: FC = p => { +export const PullToRefresh$: ForwardRefRenderFunction< + PullToRefreshRef, + PullToRefreshProps +> = (p, ref) => { const { locale } = useConfig() const props = mergeProps( defaultProps, @@ -104,6 +117,15 @@ export const PullToRefresh: FC = p => { reset() } + useImperativeHandle(ref, () => { + return { + refresh: () => { + if (status === 'refreshing' || status === 'complete') return + doRefresh() + }, + } + }) + useDrag( state => { if (status === 'refreshing' || status === 'complete') return @@ -191,3 +213,5 @@ export const PullToRefresh: FC = p => { ) } + +export const PullToRefresh = forwardRef(PullToRefresh$) diff --git a/src/global/global.less b/src/global/global.less index d2ad61f684..3882982f04 100644 --- a/src/global/global.less +++ b/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; }