diff --git a/packages/nutui-taro-demo-rn/scripts/taro/adapted.js b/packages/nutui-taro-demo-rn/scripts/taro/adapted.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/nutui-taro-demo-rn/src/app.config.ts b/packages/nutui-taro-demo-rn/src/app.config.ts index 95ba9ce7c5..1e4216f2c6 100644 --- a/packages/nutui-taro-demo-rn/src/app.config.ts +++ b/packages/nutui-taro-demo-rn/src/app.config.ts @@ -124,7 +124,7 @@ const subPackages = [ } ]; -export default defineAppConfig({ +export default defineAppConfig ({ pages: ['pages/index/index'], subPackages, window: { @@ -133,4 +133,4 @@ export default defineAppConfig({ navigationBarTitleText: 'NutUI-React', navigationBarTextStyle: 'black' } -}) \ No newline at end of file +}) diff --git a/packages/nutui-taro-demo-rn/src/feedback/pages/pulltorefresh/index.config.ts b/packages/nutui-taro-demo-rn/src/feedback/pages/pulltorefresh/index.config.ts index 350fc31c3f..0f2566639f 100644 --- a/packages/nutui-taro-demo-rn/src/feedback/pages/pulltorefresh/index.config.ts +++ b/packages/nutui-taro-demo-rn/src/feedback/pages/pulltorefresh/index.config.ts @@ -1,3 +1,3 @@ export default { - navigationBarTitleText: 'PullToRefresh', + navigationBarTitleText: 'Pulltorefresh' } \ No newline at end of file diff --git a/packages/nutui-taro-demo-rn/src/feedback/pages/pulltorefresh/index.tsx b/packages/nutui-taro-demo-rn/src/feedback/pages/pulltorefresh/index.tsx index 039e05e8ec..657e772514 100644 --- a/packages/nutui-taro-demo-rn/src/feedback/pages/pulltorefresh/index.tsx +++ b/packages/nutui-taro-demo-rn/src/feedback/pages/pulltorefresh/index.tsx @@ -1 +1,2 @@ -export default <>button; \ No newline at end of file +import Demo from '@/packages/pulltorefresh/demo.taro'; +export default Demo; \ No newline at end of file diff --git a/src/config.json b/src/config.json index f458f6f4ce..666def6196 100644 --- a/src/config.json +++ b/src/config.json @@ -839,7 +839,7 @@ "author": "szg2008" }, { - "version": "2.0.0", + "version": "3.0.0", "name": "PullToRefresh", "type": "component", "cName": "δΈ‹ζ‹‰εˆ·ζ–°", diff --git a/src/packages/pulltorefresh/demo.taro.tsx b/src/packages/pulltorefresh/demo.taro.tsx index 3ca65a8124..728490d445 100644 --- a/src/packages/pulltorefresh/demo.taro.tsx +++ b/src/packages/pulltorefresh/demo.taro.tsx @@ -1,5 +1,6 @@ import React from 'react' import Taro from '@tarojs/taro' +import { ScrollView, View } from '@tarojs/components' import Header from '@/sites/components/header' import { useTranslate } from '@/sites/assets/locale/taro' import Demo1 from './demos/taro/demo1' @@ -27,16 +28,16 @@ const PullToRefreshDemo = () => { return ( <>
-
-

{translated.basic}

+ + {translated.basic} -

{translated.scrollView}

+ {translated.scrollView} -

{translated.primary}

+ {translated.primary} -
+ ) } diff --git a/src/packages/pulltorefresh/demos/taro/demo1.tsx b/src/packages/pulltorefresh/demos/taro/demo1.tsx index 29db55e4ba..efabca17ea 100644 --- a/src/packages/pulltorefresh/demos/taro/demo1.tsx +++ b/src/packages/pulltorefresh/demos/taro/demo1.tsx @@ -1,14 +1,12 @@ import React, { useState } from 'react' -import { PullToRefresh, Toast } from '@nutui/nutui-react-taro' +import { Image, View } from '@tarojs/components' +import { PullToRefresh } from '@nutui/nutui-react-taro' +import Taro from '@tarojs/taro' +import pxTransform from '@/utils/px-transform' const Demo1 = () => { const [list] = useState([1, 2, 3, 4, 5, 6, 7]) - const [show, SetShow] = useState(false) - const [toastMsg, SetToastMsg] = useState('') - const toastShow = (msg: any) => { - SetToastMsg(msg) - SetShow(true) - } + return ( <> { }} onRefresh={() => new Promise((resolve) => { - toastShow('😊') + Taro.showToast({ + title: '😊', + icon: 'none', + }) resolve('done') }) } @@ -26,16 +27,14 @@ const Demo1 = () => { return ( <> {(status === 'pulling' || status === 'complete') && ( - )} {(status === 'canRelease' || status === 'refreshing') && ( - )} @@ -44,26 +43,19 @@ const Demo1 = () => { }} > {list.map((item) => ( -
{item} -
+ ))} - { - SetShow(false) - }} - /> ) } diff --git a/src/packages/pulltorefresh/demos/taro/demo2.tsx b/src/packages/pulltorefresh/demos/taro/demo2.tsx index ca97b51715..6bd9942177 100644 --- a/src/packages/pulltorefresh/demos/taro/demo2.tsx +++ b/src/packages/pulltorefresh/demos/taro/demo2.tsx @@ -1,6 +1,7 @@ import React, { useState } from 'react' import { ScrollView } from '@tarojs/components' -import { PullToRefresh, Cell, Toast } from '@nutui/nutui-react-taro' +import { Cell, PullToRefresh } from '@nutui/nutui-react-taro' +import pxTransform from '@/utils/px-transform' const Demo2 = () => { const [list] = useState([1, 2, 3, 4, 5, 6, 7]) @@ -14,7 +15,7 @@ const Demo2 = () => { return ( <> { // scrollTop > 0, PullToRefresh 不触发 touchmove 事仢。 @@ -37,14 +38,6 @@ const Demo2 = () => { ))} - { - SetShow(false) - }} - /> ) } diff --git a/src/packages/pulltorefresh/demos/taro/demo3.tsx b/src/packages/pulltorefresh/demos/taro/demo3.tsx index a10409fb27..933b3bd686 100644 --- a/src/packages/pulltorefresh/demos/taro/demo3.tsx +++ b/src/packages/pulltorefresh/demos/taro/demo3.tsx @@ -1,21 +1,21 @@ import React, { useState } from 'react' -import { PullToRefresh, Toast } from '@nutui/nutui-react-taro' +import { Image, Text, View } from '@tarojs/components' +import { PullToRefresh } from '@nutui/nutui-react-taro' +import Taro from '@tarojs/taro' +import pxTransform from '@/utils/px-transform' const Demo1 = () => { const [list] = useState([1, 2, 3, 4, 5, 6, 7]) - const [show, SetShow] = useState(false) - const [toastMsg, SetToastMsg] = useState('') - const toastShow = (msg: any) => { - SetToastMsg(msg) - SetShow(true) - } return ( <> new Promise((resolve) => { - toastShow('😊') + Taro.showToast({ + title: '😊', + icon: 'none', + }) resolve('done') }) } @@ -23,16 +23,14 @@ const Demo1 = () => { return ( <> {(status === 'pulling' || status === 'complete') && ( - )} {(status === 'canRelease' || status === 'refreshing') && ( - )} @@ -41,26 +39,19 @@ const Demo1 = () => { }} > {list.map((item) => ( -
- {item} -
+ {item} + ))} - { - SetShow(false) - }} - /> ) } diff --git a/src/packages/pulltorefresh/pulltorefresh.harmony.css b/src/packages/pulltorefresh/pulltorefresh.harmony.css index 4826f1901f..05f98074bf 100644 --- a/src/packages/pulltorefresh/pulltorefresh.harmony.css +++ b/src/packages/pulltorefresh/pulltorefresh.harmony.css @@ -8,7 +8,7 @@ bottom: 0; left: 0; width: 100%; - color: #1A1A1A; + color: #1a1a1a; display: flex; flex-direction: column; justify-content: center; @@ -19,6 +19,18 @@ height: 26px; margin-bottom: 4px; } +.nut-pulltorefresh-primary { + background: #ff0f23; +} +.nut-pulltorefresh-primary-content { + color: rgba(255, 255, 255, 0.9); +} +.nut-pulltorefresh-primary-head-content { + color: rgba(255, 255, 255, 0.9); +} +.nut-pulltorefresh-primary-status-text { + color: #ffffff; +} [dir=rtl] .nut-pulltorefresh-head-content, .nut-rtl .nut-pulltorefresh-head-content { diff --git a/src/packages/pulltorefresh/pulltorefresh.scss b/src/packages/pulltorefresh/pulltorefresh.scss index 565c2466c6..21ee71381c 100644 --- a/src/packages/pulltorefresh/pulltorefresh.scss +++ b/src/packages/pulltorefresh/pulltorefresh.scss @@ -25,15 +25,20 @@ &-primary { background: $pulltorefresh-color-primary; - .nut-pulltorefresh-content { + + &-content { color: $color-text-dark; } - .nut-pulltorefresh-head { + &-head { &-content { color: $color-text-dark; } } + + &-status-text { + color: $white; + } } } diff --git a/src/packages/pulltorefresh/pulltorefresh.taro.tsx b/src/packages/pulltorefresh/pulltorefresh.taro.tsx index 7fbbc7749f..e4f77cbbc2 100644 --- a/src/packages/pulltorefresh/pulltorefresh.taro.tsx +++ b/src/packages/pulltorefresh/pulltorefresh.taro.tsx @@ -7,8 +7,10 @@ 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' +import { BasicComponent, ComponentDefaults, Timeout } from '@/utils/typings' import { PullToRefreshType } from './types' +import pxTransform from '@/utils/px-transform' +import { harmonyAndRn, rn } from '@/utils/platform-taro' export type PullStatus = 'pulling' | 'canRelease' | 'refreshing' | 'complete' @@ -42,6 +44,7 @@ const defaultProps = { scrollTop: 0, onRefresh: () => {}, } as PullToRefreshProps + export const PullToRefresh: FunctionComponent> = ( p ) => { @@ -69,12 +72,15 @@ export const PullToRefresh: FunctionComponent> = ( const pullingRef = useRef(false) const [status, setStatus] = useState('pulling') const [height, setHeight] = useState(0) + const timer = useRef() const renderIcons = (status: string) => { return ( <> - {(status === 'pulling' || status === 'complete') && } - {(status === 'canRelease' || status === 'refreshing') && } + {(status === 'pulling' || status === 'complete') && + (!harmonyAndRn() ? : null)} + {(status === 'canRelease' || status === 'refreshing') && + (!harmonyAndRn() ? : null)} ) } @@ -98,6 +104,7 @@ export const PullToRefresh: FunctionComponent> = ( touch.start(e as any) } const handleTouchMove: any = (e: ITouchEvent) => { + e.preventDefault() if (props.scrollTop > 0) { return } @@ -120,7 +127,14 @@ export const PullToRefresh: FunctionComponent> = ( ) setStatus(height > threshold ? 'canRelease' : 'pulling') } + clearTimeout(timer.current) + if (rn()) { + timer.current = setTimeout(() => { + handleTouchEnd() + }, 300) + } } + async function doRefresh() { setHeight(headHeight) setStatus('refreshing') @@ -138,7 +152,9 @@ export const PullToRefresh: FunctionComponent> = ( setHeight(0) setStatus('pulling') } + const handleTouchEnd: any = () => { + console.log('yyyyyyyyyyyyyy') pullingRef.current = false if (status === 'canRelease') { doRefresh() @@ -153,7 +169,7 @@ export const PullToRefresh: FunctionComponent> = ( const isAndroidWeApp = Taro.getSystemInfoSync().platform === 'android' && Taro.getEnv() === 'WEAPP' const springStyles = { - height: `${height}px`, + height: pxTransform(height), ...(!pullingRef.current || isAndroidWeApp ? { transition: 'height .3s ease' } : {}), @@ -166,16 +182,46 @@ export const PullToRefresh: FunctionComponent> = ( onTouchMove={handleTouchMove} onTouchEnd={handleTouchEnd} > - + - {renderStatusIcon()} - {renderStatusText()} + + {renderStatusIcon()} + + + {renderStatusText()} + - {props.children} + + {props.children} + ) } diff --git a/src/packages/pulltorefresh/pulltorefresh.tsx b/src/packages/pulltorefresh/pulltorefresh.tsx index b747b5d547..b6a73558d8 100644 --- a/src/packages/pulltorefresh/pulltorefresh.tsx +++ b/src/packages/pulltorefresh/pulltorefresh.tsx @@ -212,16 +212,46 @@ export const PullToRefresh: FunctionComponent> = ( return ( - +
-
{renderStatusIcon()}
-
{renderStatusText()}
+
+ {renderStatusIcon()} +
+
+ {renderStatusText()} +
-
{props.children}
+
+ {props.children} +
) } diff --git a/src/utils/typings.ts b/src/utils/typings.ts index a995f67e65..e5d09d5cb6 100644 --- a/src/utils/typings.ts +++ b/src/utils/typings.ts @@ -11,3 +11,5 @@ export const ComponentDefaults = { className: '', style: {}, } + +export type Timeout = ReturnType