From 5b0f927ed005134a242ce386ff69e77236d10f6a Mon Sep 17 00:00:00 2001 From: xiaoyatong <84436086+xiaoyatong@users.noreply.github.com> Date: Fri, 22 Dec 2023 17:40:33 +0800 Subject: [PATCH] =?UTF-8?q?fix(pulltorefresh):=20icon=20=E9=83=A8=E5=88=86?= =?UTF-8?q?=E6=8B=86=E5=88=B0demo=E4=B8=AD=20(#1812)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/pulltorefresh/demo.tsx | 1 + src/packages/pulltorefresh/doc.en-US.md | 3 +- src/packages/pulltorefresh/doc.md | 5 +- src/packages/pulltorefresh/doc.taro.md | 5 +- src/packages/pulltorefresh/doc.zh-TW.md | 9 ++-- .../pulltorefresh/pulltorefresh.taro.tsx | 47 +++++-------------- src/packages/pulltorefresh/pulltorefresh.tsx | 42 +++++------------ 7 files changed, 40 insertions(+), 72 deletions(-) diff --git a/src/packages/pulltorefresh/demo.tsx b/src/packages/pulltorefresh/demo.tsx index 53da06eb24..d7b6058a43 100644 --- a/src/packages/pulltorefresh/demo.tsx +++ b/src/packages/pulltorefresh/demo.tsx @@ -16,6 +16,7 @@ const PullToRefreshDemo = () => { }, }) const [list] = useState([1, 2, 3, 4, 5, 6, 7]) + return ( <>
diff --git a/src/packages/pulltorefresh/doc.en-US.md b/src/packages/pulltorefresh/doc.en-US.md index 9d80dc6c49..00c2c04a5c 100644 --- a/src/packages/pulltorefresh/doc.en-US.md +++ b/src/packages/pulltorefresh/doc.en-US.md @@ -52,7 +52,8 @@ export default App | disabled | Whether to disable pull-to-refresh | `boolean` | `false` | | headHeight | The height of the head tip content area, in px | `number` | `40` | | pullingText | Pull down text | `ReactNode` | `Pull to refresh` | -| refreshingText | Refresh text when refreshing | `ReactNode` | `Loading...` | +| refreshingText | Refresh text when refreshing | `ReactNode` | `Loading` | +| renderIcon | Customize the drop-down prompt icon according to the drop-down state | `ReactNode` | `` | | renderText | Customize the drop-down prompt text according to the drop-down state | `ReactNode` | `-` | | threshold | How far to pull down to trigger refresh, the unit is px | `number` | `60` | | onRefresh | the handler function for triggering a refresh | `() => Promise` | `-` | diff --git a/src/packages/pulltorefresh/doc.md b/src/packages/pulltorefresh/doc.md index 997634d24d..bd9120e7a6 100644 --- a/src/packages/pulltorefresh/doc.md +++ b/src/packages/pulltorefresh/doc.md @@ -47,13 +47,14 @@ export default App | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | -| canReleaseText | 释放的提示文案 | `ReactNode` | `释放立即刷新` | +| canReleaseText | 释放的提示文案 | `ReactNode` | `松手刷新` | | completeText | 完成时的提示文案 | `ReactNode` | `刷新成功` | | completeDelay | 完成后延迟消失的时间，单位为 ms | `number` | `500` | | disabled | 是否禁用下拉刷新 | `boolean` | `false` | | headHeight | 头部提示内容区的高度，单位为 px | `number` | `40` | | pullingText | 下拉的提示文案 | `ReactNode` | `下拉刷新` | -| refreshingText | 刷新时的提示文案 | `ReactNode` | `加载中……` | +| refreshingText | 刷新时的提示文案 | `ReactNode` | `刷新中` | +| renderIcon | 根据下拉状态，自定义下拉提示图标 | `ReactNode` | `` | | renderText | 根据下拉状态，自定义下拉提示文案 | `ReactNode` | `-` | | threshold | 触发刷新需要下拉多少距离，单位为 px | `number` | `60` | | onRefresh | 触发刷新时的处理函数 | `() => Promise` | `-` | diff --git a/src/packages/pulltorefresh/doc.taro.md b/src/packages/pulltorefresh/doc.taro.md index bff83988cf..09e7174d0c 100644 --- a/src/packages/pulltorefresh/doc.taro.md +++ b/src/packages/pulltorefresh/doc.taro.md @@ -98,14 +98,15 @@ export default App | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | -| canReleaseText | 释放的提示文案 | `ReactNode` | `释放立即刷新` | +| canReleaseText | 释放的提示文案 | `ReactNode` | `松手刷新` | | completeText | 完成时的提示文案 | `ReactNode` | `刷新成功` | | completeDelay | 完成后延迟消失的时间，单位为 ms | `number` | `500` | | disabled | 是否禁用下拉刷新 | `boolean` | `false` | | headHeight | 头部提示内容区的高度，单位为 px | `number` | `40` | | scrollTop | 可滚动的父元素的 scrollTop | `number` | `0` | | pullingText | 下拉的提示文案 | `ReactNode` | `下拉刷新` | -| refreshingText | 刷新时的提示文案 | `ReactNode` | `加载中……` | +| refreshingText | 刷新时的提示文案 | `ReactNode` | `刷新中` | +| renderIcon | 根据下拉状态，自定义下拉提示图标 | `ReactNode` | `` | | renderText | 根据下拉状态，自定义下拉提示文案 | `ReactNode` | `-` | | threshold | 触发刷新需要下拉多少距离，单位为 px | `number` | `60` | | onRefresh | 触发刷新时的处理函数 | `() => Promise` | `-` | diff --git a/src/packages/pulltorefresh/doc.zh-TW.md b/src/packages/pulltorefresh/doc.zh-TW.md index ab7e91c048..e51b868c10 100644 --- a/src/packages/pulltorefresh/doc.zh-TW.md +++ b/src/packages/pulltorefresh/doc.zh-TW.md @@ -2,7 +2,7 @@ ## 介紹 -在列錶中通過手指下拉刷新加載新內容的交互操作。 +在列表中通過手指下拉刷新加載新內容的交互操作。 ## 安裝 @@ -47,19 +47,20 @@ export default App | 屬性 | 說明 | 類型 | 默認值 | | --- | --- | --- | --- | -| canReleaseText | 釋放的提示文案 | `ReactNode` | `釋放立即刷新` | +| canReleaseText | 釋放的提示文案 | `ReactNode` | `松手刷新` | | completeText | 完成時的提示文案 | `ReactNode` | `刷新成功` | | completeDelay | 完成後延遲消失的時間，單位為 ms | `number` | `500` | | disabled | 是否禁用下拉刷新 | `boolean` | `false` | | headHeight | 頭部提示內容區的高度，單位為 px | `number` | `40` | | pullingText | 下拉的提示文案 | `ReactNode` | `下拉刷新` | -| refreshingText | 刷新時的提示文案 | `ReactNode` | `加載中……` | +| refreshingText | 刷新時的提示文案 | `ReactNode` | `刷新中` | +| renderIcon | 根據下拉狀態，自定義下拉提示圖標 | `ReactNode` | `` | | renderText | 根據下拉狀態，自定義下拉提示文案 | `ReactNode` | `-` | | threshold | 觸發刷新需要下拉多少距離，單位為 px | `number` | `60` | | onRefresh | 觸發刷新時的處理函數 | `() => Promise` | `-` | -## 主題定制 +## 主題定製 ### 樣式變量 diff --git a/src/packages/pulltorefresh/pulltorefresh.taro.tsx b/src/packages/pulltorefresh/pulltorefresh.taro.tsx index 4d81dd1bb4..21d61048a6 100644 --- a/src/packages/pulltorefresh/pulltorefresh.taro.tsx +++ b/src/packages/pulltorefresh/pulltorefresh.taro.tsx @@ -1,8 +1,10 @@ import React, { FunctionComponent, ReactNode, useRef, useState } from 'react' import { ITouchEvent, View } from '@tarojs/components' +import { Loading, More } from '@nutui/icons-react-taro' import { useConfig } from '@/packages/configprovider/index.taro' import { useTouch } from '@/utils/use-touch' import { rubberbandIfOutOfBounds } from '@/utils/rubberband' + import { sleep } from '@/utils/sleep' import { BasicComponent, ComponentDefaults } from '@/utils/typings' @@ -19,6 +21,7 @@ export interface PullToRefreshProps extends BasicComponent { threshold: number disabled: boolean scrollTop: number + renderIcon: (status: PullStatus) => ReactNode renderText: (status: PullStatus) => ReactNode } @@ -58,41 +61,20 @@ export const PullToRefresh: FunctionComponent> = ( const [status, setStatus] = useState('pulling') const [height, setHeight] = useState(0) - const renderIcons = () => { + const renderIcons = (status: string) => { return ( <> - - {(status === 'pulling' || status === 'complete') && ( - - - - )} - {(status === 'canRelease' || status === 'refreshing') && ( - - - - - - )} - + {(status === 'pulling' || status === 'complete') && } + {(status === 'canRelease' || status === 'refreshing') && } ) } + const renderStatusIcon = () => { + if (props.renderIcon) { + return props.renderIcon?.(status) + } + return renderIcons(status) + } const renderStatusText = () => { if (props.renderText) { return props.renderText?.(status) @@ -103,7 +85,6 @@ export const PullToRefresh: FunctionComponent> = ( if (status === 'complete') return props.completeText return '' } - const handleTouchStart: any = (e: ITouchEvent) => { touch.start(e as any) } @@ -131,7 +112,6 @@ export const PullToRefresh: FunctionComponent> = ( setStatus(height > threshold ? 'canRelease' : 'pulling') } } - async function doRefresh() { setHeight(headHeight) setStatus('refreshing') @@ -149,7 +129,6 @@ export const PullToRefresh: FunctionComponent> = ( setHeight(0) setStatus('pulling') } - const handleTouchEnd: any = () => { pullingRef.current = false if (status === 'canRelease') { @@ -178,7 +157,7 @@ export const PullToRefresh: FunctionComponent> = ( className={`${classPrefix}-head-content`} style={{ height: headHeight }} > - {renderIcons()} +
{renderStatusIcon()}
{renderStatusText()}
diff --git a/src/packages/pulltorefresh/pulltorefresh.tsx b/src/packages/pulltorefresh/pulltorefresh.tsx index 80d124fe14..73df162aec 100644 --- a/src/packages/pulltorefresh/pulltorefresh.tsx +++ b/src/packages/pulltorefresh/pulltorefresh.tsx @@ -7,6 +7,7 @@ import React, { } from 'react' import { useDrag } from '@use-gesture/react' import { animated, useSpring } from '@react-spring/web' +import { Loading, More } from '@nutui/icons-react' import { useConfig } from '@/packages/configprovider' import { getScrollParent } from '@/utils/get-scroll-parent' import { rubberbandIfOutOfBounds } from '@/utils/rubberband' @@ -26,6 +27,7 @@ export interface PullToRefreshProps extends BasicComponent { headHeight: number threshold: number disabled: boolean + renderIcon: (status: PullStatus) => ReactNode renderText: (status: PullStatus) => ReactNode } @@ -169,42 +171,24 @@ export const PullToRefresh: FunctionComponent> = ( } ) - const renderIcons = () => { + const renderIcons = (status: string) => { return ( <> - {(status === 'pulling' || status === 'complete') && ( - - - - )} - {(status === 'canRelease' || status === 'refreshing') && ( - - - - - - )} + {(status === 'pulling' || status === 'complete') && } + {(status === 'canRelease' || status === 'refreshing') && } ) } + const renderStatusIcon = () => { + if (props.renderIcon) { + return props.renderIcon?.(status) + } + return renderIcons(status) + } + const renderStatusText = () => { if (props.renderText) { return props.renderText?.(status) @@ -227,7 +211,7 @@ export const PullToRefresh: FunctionComponent> = ( className={`${classPrefix}-head-content`} style={{ height: headHeight }} > - {renderIcons()} +
{renderStatusIcon()}
{renderStatusText()}