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 all 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 |
| ------- | -------------------------------------- | ---------- |
| refresh | 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

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

## 常见问题

### 是否支持上拉加载更多?
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 @@
children?: ReactNode
}

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

export const defaultProps = {
pullingText: '下拉刷新',
canReleaseText: '释放立即刷新',
Expand All @@ -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,
Expand Down Expand Up @@ -104,6 +117,15 @@
reset()
}

useImperativeHandle(ref, () => {
return {
refresh: () => {

Check warning on line 122 in src/components/pull-to-refresh/pull-to-refresh.tsx

View check run for this annotation

Codecov / codecov/patch

src/components/pull-to-refresh/pull-to-refresh.tsx#L121-L122

Added lines #L121 - L122 were not covered by tests
if (status === 'refreshing' || status === 'complete') return
doRefresh()

Check warning on line 124 in src/components/pull-to-refresh/pull-to-refresh.tsx

View check run for this annotation

Codecov / codecov/patch

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

Added line #L124 was not covered by tests
},
}
})

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

export const PullToRefresh = forwardRef(PullToRefresh$)
4 changes: 2 additions & 2 deletions src/global/global.less
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Loading