feat(pulltorefresh): v15

jdf2e · Dec 30, 2024 · 22c8d11 · 22c8d11
1 parent 744bb5b
commit 22c8d11
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 63 deletions.
diff --git a/src/packages/pulltorefresh/demos/h5/demo1.tsx b/src/packages/pulltorefresh/demos/h5/demo1.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { PullToRefresh, Toast } from '@nutui/nutui-react'
+import { Lottie, PullToRefresh, Toast } from '@nutui/nutui-react'
+import lightPull from '@/packages/lottie/animation/light/pulltorefresh.json'
 
 const Demo1 = () => {
   const [list] = useState([1, 2, 3, 4, 5, 6, 7])
@@ -15,21 +16,7 @@ const Demo1 = () => {
         renderIcon={(status) => {
           return (
             <>
-              {(status === 'pulling' || status === 'complete') && (
-                <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="#818181"
-                  />
-                </svg>
-              )}
-              {(status === 'canRelease' || status === 'refreshing') && (
-                <svg width="36" height="26" viewBox="0 0 36 26" fill="none">
-                  <circle cx="18" cy="13" r="3" fill="#818181" />
-                  <circle cx="33" cy="13" r="3" fill="#818181" />
-                  <circle cx="3" cy="13" r="3" fill="#818181" />
-                </svg>
-              )}
+              <Lottie source={lightPull} style={{ width: 132, height: 26 }} />
             </>
           )
         }}

diff --git a/src/packages/pulltorefresh/demos/h5/demo2.tsx b/src/packages/pulltorefresh/demos/h5/demo2.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { PullToRefresh, Toast } from '@nutui/nutui-react'
+import { Lottie, PullToRefresh, Toast } from '@nutui/nutui-react'
+import whitePull from '@/packages/lottie/animation/dark/pulltorefresh-white.json'
 
 const Demo1 = () => {
   const [list] = useState([1, 2, 3, 4, 5, 6, 7])
@@ -16,21 +17,7 @@ const Demo1 = () => {
         renderIcon={(status) => {
           return (
             <>
-              {(status === 'pulling' || status === 'complete') && (
-                <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="#ffffff"
-                  />
-                </svg>
-              )}
-              {(status === 'canRelease' || status === 'refreshing') && (
-                <svg width="36" height="26" viewBox="0 0 36 26" fill="none">
-                  <circle cx="18" cy="13" r="3" fill="#ffffff" />
-                  <circle cx="33" cy="13" r="3" fill="#ffffff" />
-                  <circle cx="3" cy="13" r="3" fill="#ffffff" />
-                </svg>
-              )}
+              <Lottie source={whitePull} style={{ width: 132, height: 26 }} />
             </>
           )
         }}
@@ -41,6 +28,7 @@ const Demo1 = () => {
               textAlign: 'center',
               height: '50px',
               lineHeight: '50px',
+              color: 'white',
             }}
             key={item}
           >

diff --git a/src/packages/pulltorefresh/demos/taro/demo1.tsx b/src/packages/pulltorefresh/demos/taro/demo1.tsx
@@ -1,8 +1,9 @@
 import React, { useState } from 'react'
-import { Image, View } from '@tarojs/components'
-import { PullToRefresh } from '@nutui/nutui-react-taro'
+import { View } from '@tarojs/components'
+import { PullToRefresh, Lottie } from '@nutui/nutui-react-taro'
 import Taro from '@tarojs/taro'
 import pxTransform from '@/utils/px-transform'
+import lightPull from '@/packages/lottie/animation/light/pulltorefresh.json'
 
 const Demo1 = () => {
   const [list] = useState([1, 2, 3, 4, 5, 6, 7])
@@ -26,18 +27,7 @@ const Demo1 = () => {
         renderIcon={(status) => {
           return (
             <>
-              {(status === 'pulling' || status === 'complete') && (
-                <Image
-                  style={{ height: pxTransform(26), width: pxTransform(36) }}
-                  src="https://img13.360buyimg.com/imagetools/jfs/t1/219180/19/37902/438/65fa8cbbF5278d022/5eabe69b64bba791.png"
-                />
-              )}
-              {(status === 'canRelease' || status === 'refreshing') && (
-                <Image
-                  style={{ height: pxTransform(26), width: pxTransform(36) }}
-                  src="https://img10.360buyimg.com/imagetools/jfs/t1/230454/20/14523/223/65fab2d1F379c3968/ac35992443abab0c.png"
-                />
-              )}
+              <Lottie source={lightPull} style={{ width: 132, height: 26 }} />
             </>
           )
         }}

diff --git a/src/packages/pulltorefresh/demos/taro/demo3.tsx b/src/packages/pulltorefresh/demos/taro/demo3.tsx
@@ -1,8 +1,9 @@
 import React, { useState } from 'react'
-import { Image, Text, View } from '@tarojs/components'
-import { PullToRefresh } from '@nutui/nutui-react-taro'
+import { Text, View } from '@tarojs/components'
+import { Lottie, PullToRefresh } from '@nutui/nutui-react-taro'
 import Taro from '@tarojs/taro'
 import pxTransform from '@/utils/px-transform'
+import lightPull from '@/packages/lottie/animation/light/pulltorefresh.json'
 
 const Demo1 = () => {
   const [list] = useState([1, 2, 3, 4, 5, 6, 7])
@@ -22,18 +23,7 @@ const Demo1 = () => {
         renderIcon={(status) => {
           return (
             <>
-              {(status === 'pulling' || status === 'complete') && (
-                <Image
-                  style={{ height: pxTransform(26), width: pxTransform(36) }}
-                  src="https://img12.360buyimg.com/imagetools/jfs/t1/232373/2/15010/432/65fab02fF99afdb71/0457cdfa268f92df.png"
-                />
-              )}
-              {(status === 'canRelease' || status === 'refreshing') && (
-                <Image
-                  style={{ height: pxTransform(26), width: pxTransform(36) }}
-                  src="https://img14.360buyimg.com/imagetools/jfs/t1/186707/25/42738/223/65fab272F0965554b/eae33de2f17909b8.png"
-                />
-              )}
+              <Lottie source={lightPull} style={{ width: 132, height: 26 }} />
             </>
           )
         }}

diff --git a/src/packages/pulltorefresh/pulltorefresh.scss b/src/packages/pulltorefresh/pulltorefresh.scss
@@ -9,7 +9,7 @@
       bottom: 0;
       left: 0;
       width: 100%;
-      color: $color-title;
+      color: $color-text-help;
       display: flex;
       flex-direction: column;
       justify-content: center;

diff --git a/src/packages/pulltorefresh/pulltorefresh.taro.tsx b/src/packages/pulltorefresh/pulltorefresh.taro.tsx
@@ -39,7 +39,7 @@ const defaultProps = {
   completeText: '',
   completeDelay: 500,
   disabled: false,
-  headHeight: 50,
+  headHeight: 64 + 16,
   threshold: 60,
   scrollTop: 0,
   onRefresh: () => {},

diff --git a/src/packages/pulltorefresh/pulltorefresh.tsx b/src/packages/pulltorefresh/pulltorefresh.tsx
@@ -43,7 +43,7 @@ const defaultProps = {
   completeText: '',
   completeDelay: 500,
   disabled: false,
-  headHeight: 50,
+  headHeight: 64 + 16,
   threshold: 60,
   onRefresh: () => {},
 } as PullToRefreshProps