fix(pulltorefresh): icon 部分拆到demo中 (#1812)

jdf2e · Dec 22, 2023 · 5b0f927 · 5b0f927
1 parent 3949e1c
commit 5b0f927
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 72 deletions.
diff --git 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 (
     <>
       <div className="demo">

diff --git 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` | `<Loading />` |
 | 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<any>` | `-` |

diff --git 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` | `<Loading />` |
 | renderText | 根据下拉状态，自定义下拉提示文案 | `ReactNode` | `-` |
 | threshold | 触发刷新需要下拉多少距离，单位为 px | `number` | `60` |
 | onRefresh | 触发刷新时的处理函数 | `() => Promise<any>` | `-` |

diff --git 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` | `<Loading />` |
 | renderText | 根据下拉状态，自定义下拉提示文案 | `ReactNode` | `-` |
 | threshold | 触发刷新需要下拉多少距离，单位为 px | `number` | `60` |
 | onRefresh | 触发刷新时的处理函数 | `() => Promise<any>` | `-` |

diff --git 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` | `<Loading />` |
 | renderText | 根據下拉狀態，自定義下拉提示文案 | `ReactNode` | `-` |
 | threshold | 觸發刷新需要下拉多少距離，單位為 px | `number` | `60` |
 | onRefresh | 觸發刷新時的處理函數 | `() => Promise<any>` | `-` |
 
 
-## 主題定制
+## 主題定製
 
 ### 樣式變量
 

diff --git 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<Partial<PullToRefreshProps>> = (
   const [status, setStatus] = useState<PullStatus>('pulling')
   const [height, setHeight] = useState(0)
 
-  const renderIcons = () => {
+  const renderIcons = (status: string) => {
     return (
       <>
-        <i className={`${classPrefix}-head-content-icons`}>
-          {(status === 'pulling' || status === 'complete') && (
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="36"
-              height="26"
-              viewBox="0 0 36 26"
-              fill="none"
-            >
-              <path
-                d="M34.7243 10.965C32.842 8.94809 32.4297 5.92727 31.2018 4.90525C29.9738 3.88324 28.1722 5.51123 27.5089 6.46993C23.8429 3.88324 17.9809 4.00082 17.9809 4.00082C17.9809 4.00082 12.1458 3.88324 8.47083 6.46993C7.80754 5.51123 6.01488 3.88324 4.78691 4.90525C3.55894 5.92727 3.15559 8.94809 1.2733 10.965C-0.133943 12.4844 -0.250465 12.9276 0.323186 14.1305C0.887874 15.3334 4.40149 16.3283 6.88432 13.9496C7.21596 15.1887 10.0125 21.9991 17.9899 21.9991C25.9672 21.9991 28.7817 15.1887 29.1043 13.9496C31.5872 16.3283 35.1098 15.3334 35.6834 14.1305C36.2481 12.9276 36.1316 12.4844 34.7243 10.965Z"
-                fill="#8C8C8C"
-              />
-            </svg>
-          )}
-          {(status === 'canRelease' || status === 'refreshing') && (
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="36"
-              height="26"
-              viewBox="0 0 36 26"
-              fill="none"
-            >
-              <circle cx="33" cy="13" r="3" fill="#8C8C8C" />
-              <circle cx="18" cy="13" r="3" fill="#8C8C8C" />
-              <circle cx="3" cy="13" r="3" fill="#8C8C8C" />
-            </svg>
-          )}
-        </i>
+        {(status === 'pulling' || status === 'complete') && <Loading />}
+        {(status === 'canRelease' || status === 'refreshing') && <More />}
       </>
     )
   }
+  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<Partial<PullToRefreshProps>> = (
     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<Partial<PullToRefreshProps>> = (
       setStatus(height > threshold ? 'canRelease' : 'pulling')
     }
   }
-
   async function doRefresh() {
     setHeight(headHeight)
     setStatus('refreshing')
@@ -149,7 +129,6 @@ export const PullToRefresh: FunctionComponent<Partial<PullToRefreshProps>> = (
     setHeight(0)
     setStatus('pulling')
   }
-
   const handleTouchEnd: any = () => {
     pullingRef.current = false
     if (status === 'canRelease') {
@@ -178,7 +157,7 @@ export const PullToRefresh: FunctionComponent<Partial<PullToRefreshProps>> = (
           className={`${classPrefix}-head-content`}
           style={{ height: headHeight }}
         >
-          {renderIcons()}
+          <div>{renderStatusIcon()}</div>
           <div>{renderStatusText()}</div>
         </div>
       </View>

diff --git 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<Partial<PullToRefreshProps>> = (
     }
   )
 
-  const renderIcons = () => {
+  const renderIcons = (status: string) => {
     return (
       <>
         <i className={`${classPrefix}-head-content-icons`}>
-          {(status === 'pulling' || status === 'complete') && (
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="36"
-              height="26"
-              viewBox="0 0 36 26"
-              fill="none"
-            >
-              <path
-                d="M34.7243 10.965C32.842 8.94809 32.4297 5.92727 31.2018 4.90525C29.9738 3.88324 28.1722 5.51123 27.5089 6.46993C23.8429 3.88324 17.9809 4.00082 17.9809 4.00082C17.9809 4.00082 12.1458 3.88324 8.47083 6.46993C7.80754 5.51123 6.01488 3.88324 4.78691 4.90525C3.55894 5.92727 3.15559 8.94809 1.2733 10.965C-0.133943 12.4844 -0.250465 12.9276 0.323186 14.1305C0.887874 15.3334 4.40149 16.3283 6.88432 13.9496C7.21596 15.1887 10.0125 21.9991 17.9899 21.9991C25.9672 21.9991 28.7817 15.1887 29.1043 13.9496C31.5872 16.3283 35.1098 15.3334 35.6834 14.1305C36.2481 12.9276 36.1316 12.4844 34.7243 10.965Z"
-                fill="#8C8C8C"
-              />
-            </svg>
-          )}
-          {(status === 'canRelease' || status === 'refreshing') && (
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="36"
-              height="26"
-              viewBox="0 0 36 26"
-              fill="none"
-            >
-              <circle cx="33" cy="13" r="3" fill="#8C8C8C" />
-              <circle cx="18" cy="13" r="3" fill="#8C8C8C" />
-              <circle cx="3" cy="13" r="3" fill="#8C8C8C" />
-            </svg>
-          )}
+          {(status === 'pulling' || status === 'complete') && <Loading />}
+          {(status === 'canRelease' || status === 'refreshing') && <More />}
         </i>
       </>
     )
   }
 
+  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<Partial<PullToRefreshProps>> = (
           className={`${classPrefix}-head-content`}
           style={{ height: headHeight }}
         >
-          {renderIcons()}
+          <div>{renderStatusIcon()}</div>
           <div>{renderStatusText()}</div>
         </div>
       </animated.div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -16,6 +16,7 @@ const PullToRefreshDemo = () => { @@
         },
       })
       const [list] = useState([1, 2, 3, 4, 5, 6, 7])
       return (
         <>
           <div className="demo">
@@ Expand Down @@