Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: feat manual tigger PullToRefresh #6490

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions src/components/pull-to-refresh/index.en.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
| --------- | -------------------------------------- | ---------- |
| doRefresh | Manually trigger the drop-down refresh | `()=>void` |

## FAQ

### Does it support pull up to load more?
Expand Down
6 changes: 6 additions & 0 deletions src/components/pull-to-refresh/index.zh.md
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,12 @@ type PullStatus = 'pulling' | 'canRelease' | 'refreshing' | 'complete'
| renderText | 根据下拉状态,自定义下拉提示文案 | `(status: PullStatus) => ReactNode` | - |
| threshold | 触发刷新需要下拉多少距离,单位为 px | `number` | `60` |

### Ref

| 属性 | 说明 | 类型 |
| --------- | ---------------- | ---------- |
| doRefresh | 手动触发下拉刷新 | `()=>void` |
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

refresh 吧,本身就是动词,不需要 do 了

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

refresh 吧,本身就是动词,不需要 do 了

好的

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

refresh 吧,本身就是动词,不需要 do 了

已修改


## 常见问题

### 是否支持上拉加载更多?
Expand Down
38 changes: 31 additions & 7 deletions src/components/pull-to-refresh/pull-to-refresh.tsx
Original file line number Diff line number Diff line change
@@ -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`

Expand All @@ -28,6 +34,10 @@ export type PullToRefreshProps = {
children?: ReactNode
}

export type PullToRefreshRef = {
doRefresh: () => void
}

export const defaultProps = {
pullingText: '下拉刷新',
canReleaseText: '释放立即刷新',
Expand All @@ -38,7 +48,10 @@ export const defaultProps = {
onRefresh: () => {},
}

export const PullToRefresh: FC<PullToRefreshProps> = p => {
export const PullToRefresh$: ForwardRefRenderFunction<
PullToRefreshRef,
PullToRefreshProps
> = (p, ref) => {
const { locale } = useConfig()
const props = mergeProps(
defaultProps,
Expand Down Expand Up @@ -104,6 +117,15 @@ export const PullToRefresh: FC<PullToRefreshProps> = p => {
reset()
}

useImperativeHandle(ref, () => {
return {
doRefresh: () => {
if (status === 'refreshing' || status === 'complete') return
doRefresh()
},
}
})

useDrag(
state => {
if (status === 'refreshing' || status === 'complete') return
Expand Down Expand Up @@ -191,3 +213,5 @@ export const PullToRefresh: FC<PullToRefreshProps> = p => {
</animated.div>
)
}

export const PullToRefresh = forwardRef(PullToRefresh$)