From 989dd876da4560cb5eb25e99b2f3323b2b57cae8 Mon Sep 17 00:00:00 2001 From: weixue Date: Wed, 20 Dec 2023 16:19:21 +0800 Subject: [PATCH 1/4] feat: feat manual tigger PullToRefresh --- src/components/pull-to-refresh/index.en.md | 6 ++++ src/components/pull-to-refresh/index.zh.md | 6 ++++ .../pull-to-refresh/pull-to-refresh.tsx | 35 +++++++++++++++---- 3 files changed, 40 insertions(+), 7 deletions(-) diff --git a/src/components/pull-to-refresh/index.en.md b/src/components/pull-to-refresh/index.en.md index 6c0a7234ab..7ea4280b8a 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 | +| --------- | -------------------------------------- | ------------------ | +| doRefresh | Manually trigger the drop-down refresh | `PullToRefreshRef` | + ## 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..31124375ac 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 + +| 属性 | 说明 | 类型 | +| --------- | ---------------- | ------------------- | +| doRefresh | 手动触发下拉刷新 | `()=>Promise` | + ## 常见问题 ### 是否支持上拉加载更多？ diff --git a/src/components/pull-to-refresh/pull-to-refresh.tsx b/src/components/pull-to-refresh/pull-to-refresh.tsx index dd34aa3f9c..b2ab39c1e3 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 = { + doRefresh: () => Promise +} + 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,12 @@ export const PullToRefresh: FC = p => { reset() } + useImperativeHandle(ref, () => { + return { + doRefresh, + } + }) + useDrag( state => { if (status === 'refreshing' || status === 'complete') return @@ -191,3 +210,5 @@ export const PullToRefresh: FC = p => { ) } + +export const PullToRefresh = forwardRef(PullToRefresh$) From ac1750f0fc56189761f8badcb5b1911968806fa5 Mon Sep 17 00:00:00 2001 From: weixue Date: Wed, 20 Dec 2023 16:34:23 +0800 Subject: [PATCH 2/4] fix: fix type and refresh --- src/components/pull-to-refresh/index.en.md | 6 +++--- src/components/pull-to-refresh/index.zh.md | 6 +++--- src/components/pull-to-refresh/pull-to-refresh.tsx | 7 +++++-- 3 files changed, 11 insertions(+), 8 deletions(-) diff --git a/src/components/pull-to-refresh/index.en.md b/src/components/pull-to-refresh/index.en.md index 7ea4280b8a..85a38c6a73 100644 --- a/src/components/pull-to-refresh/index.en.md +++ b/src/components/pull-to-refresh/index.en.md @@ -47,9 +47,9 @@ type PullStatus = 'pulling' | 'canRelease' | 'refreshing' | 'complete' ### Ref -| Name | Description | Type | -| --------- | -------------------------------------- | ------------------ | -| doRefresh | Manually trigger the drop-down refresh | `PullToRefreshRef` | +| Name | Description | Type | +| --------- | -------------------------------------- | ---------- | +| doRefresh | Manually trigger the drop-down refresh | `()=>void` | ## FAQ diff --git a/src/components/pull-to-refresh/index.zh.md b/src/components/pull-to-refresh/index.zh.md index 31124375ac..95adae5149 100644 --- a/src/components/pull-to-refresh/index.zh.md +++ b/src/components/pull-to-refresh/index.zh.md @@ -47,9 +47,9 @@ type PullStatus = 'pulling' | 'canRelease' | 'refreshing' | 'complete' ### Ref -| 属性 | 说明 | 类型 | -| --------- | ---------------- | ------------------- | -| doRefresh | 手动触发下拉刷新 | `()=>Promise` | +| 属性 | 说明 | 类型 | +| --------- | ---------------- | ---------- | +| doRefresh | 手动触发下拉刷新 | `()=>void` | ## 常见问题 diff --git a/src/components/pull-to-refresh/pull-to-refresh.tsx b/src/components/pull-to-refresh/pull-to-refresh.tsx index b2ab39c1e3..2a63320e2e 100644 --- a/src/components/pull-to-refresh/pull-to-refresh.tsx +++ b/src/components/pull-to-refresh/pull-to-refresh.tsx @@ -35,7 +35,7 @@ export type PullToRefreshProps = { } export type PullToRefreshRef = { - doRefresh: () => Promise + doRefresh: () => void } export const defaultProps = { @@ -119,7 +119,10 @@ export const PullToRefresh$: ForwardRefRenderFunction< useImperativeHandle(ref, () => { return { - doRefresh, + doRefresh: () => { + if (status === 'refreshing' || status === 'complete') return + doRefresh() + }, } }) From be9c42bc96d0e8a11d3248e12da56edc3974d546 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?= =?UTF-8?q?=E5=8D=9C?= Date: Tue, 19 Dec 2023 17:02:42 +0800 Subject: [PATCH 3/4] fix: resolve where measuring elements would cause the browser to print an extra blank page (#6488) fix: print more pages --- src/global/global.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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; } From 8518c21cd05cc9511abe70a501dc7eb416a5b5de Mon Sep 17 00:00:00 2001 From: weixue Date: Wed, 20 Dec 2023 17:01:25 +0800 Subject: [PATCH 4/4] fix: update export name --- src/components/pull-to-refresh/index.en.md | 6 +++--- src/components/pull-to-refresh/index.zh.md | 6 +++--- src/components/pull-to-refresh/pull-to-refresh.tsx | 4 ++-- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/pull-to-refresh/index.en.md b/src/components/pull-to-refresh/index.en.md index 85a38c6a73..003d4e6e42 100644 --- a/src/components/pull-to-refresh/index.en.md +++ b/src/components/pull-to-refresh/index.en.md @@ -47,9 +47,9 @@ type PullStatus = 'pulling' | 'canRelease' | 'refreshing' | 'complete' ### Ref -| Name | Description | Type | -| --------- | -------------------------------------- | ---------- | -| doRefresh | Manually trigger the drop-down refresh | `()=>void` | +| Name | Description | Type | +| ------- | -------------------------------------- | ---------- | +| refresh | Manually trigger the drop-down refresh | `()=>void` | ## FAQ diff --git a/src/components/pull-to-refresh/index.zh.md b/src/components/pull-to-refresh/index.zh.md index 95adae5149..cbddbbdceb 100644 --- a/src/components/pull-to-refresh/index.zh.md +++ b/src/components/pull-to-refresh/index.zh.md @@ -47,9 +47,9 @@ type PullStatus = 'pulling' | 'canRelease' | 'refreshing' | 'complete' ### Ref -| 属性 | 说明 | 类型 | -| --------- | ---------------- | ---------- | -| doRefresh | 手动触发下拉刷新 | `()=>void` | +| 属性 | 说明 | 类型 | +| ------- | ---------------- | ---------- | +| 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 2a63320e2e..96909f724c 100644 --- a/src/components/pull-to-refresh/pull-to-refresh.tsx +++ b/src/components/pull-to-refresh/pull-to-refresh.tsx @@ -35,7 +35,7 @@ export type PullToRefreshProps = { } export type PullToRefreshRef = { - doRefresh: () => void + refresh: () => void } export const defaultProps = { @@ -119,7 +119,7 @@ export const PullToRefresh$: ForwardRefRenderFunction< useImperativeHandle(ref, () => { return { - doRefresh: () => { + refresh: () => { if (status === 'refreshing' || status === 'complete') return doRefresh() },