From 935422d8135801efe87f091cd090b2d036d6422e Mon Sep 17 00:00:00 2001 From: hanyuxinting Date: Mon, 16 Dec 2024 19:14:48 +0800 Subject: [PATCH 1/7] refactor: use hoverbutton --- scripts/rn/update-taro-entry.js | 1 + src/config.json | 1 + src/packages/backtop/backtop.scss | 22 +++------- src/packages/backtop/backtop.taro.tsx | 42 ++++++++----------- src/packages/backtop/backtop.tsx | 37 +++++++--------- src/packages/backtop/demos/h5/demo3.tsx | 14 ++----- src/packages/backtop/demos/h5/demo5.tsx | 14 ++----- src/packages/backtop/demos/taro/demo1.tsx | 25 ++--------- src/packages/backtop/demos/taro/demo2.tsx | 5 +-- src/packages/backtop/demos/taro/demo3.tsx | 16 ++----- src/packages/backtop/demos/taro/demo4.tsx | 30 ++----------- src/packages/backtop/demos/taro/demo5.tsx | 13 +----- src/packages/hoverbutton/demos/taro/demo4.tsx | 1 - .../hoverbuttonitem/hoverbuttonitem.scss | 6 +-- src/styles/variables.scss | 7 +--- 15 files changed, 65 insertions(+), 169 deletions(-) diff --git a/scripts/rn/update-taro-entry.js b/scripts/rn/update-taro-entry.js index e5855ca391..8a9452658a 100644 --- a/scripts/rn/update-taro-entry.js +++ b/scripts/rn/update-taro-entry.js @@ -8,6 +8,7 @@ const param = process.env.C // C=radio pnpm dev:taro:jdharmonycpp or C=radio,button,cell pnpm dev:taro:jdharmonycpp function specialComponent(name) { + if(!param) return const entries = param.split(',').map((i) => i.toLowerCase()) return entries.includes(name.toLowerCase()) } diff --git a/src/config.json b/src/config.json index e1ff16c552..c887ebc452 100644 --- a/src/config.json +++ b/src/config.json @@ -274,6 +274,7 @@ "tarodoc": true, "show": true, "taro": true, + "v15": true, "author": "vickyYe" }, { diff --git a/src/packages/backtop/backtop.scss b/src/packages/backtop/backtop.scss index 685e3b5089..737befbe30 100644 --- a/src/packages/backtop/backtop.scss +++ b/src/packages/backtop/backtop.scss @@ -7,25 +7,15 @@ } &-show { - width: 40px; - height: 40px; display: flex; align-items: center; justify-content: center; - background: $color-background-overlay; - color: $color-title; - border: 1px solid $backtop-border-color; - border-radius: 21px; - z-index: 100; - - &:active, - &-active { - background: $color-background; - } - } - - &-main { transition: all 0.2s ease-in-out; - color: $color-title; + .nut-hoverbutton-item-container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } } } diff --git a/src/packages/backtop/backtop.taro.tsx b/src/packages/backtop/backtop.taro.tsx index ed3342aa6c..43b1cc4027 100644 --- a/src/packages/backtop/backtop.taro.tsx +++ b/src/packages/backtop/backtop.taro.tsx @@ -2,7 +2,6 @@ import React, { FunctionComponent, useCallback, useState, - useMemo, useEffect, useRef, } from 'react' @@ -13,13 +12,12 @@ import { PageScrollObject, getSystemInfo, } from '@tarojs/taro' -import { View, ITouchEvent } from '@tarojs/components' -import { Top } from '@nutui/icons-react-taro' +import { ITouchEvent, View } from '@tarojs/components' import classNames from 'classnames' +import { Top } from '@nutui/icons-react-taro' import { BasicComponent, ComponentDefaults } from '@/utils/typings' -import { useRtl } from '@/packages/configprovider/index.taro' +import HoverButton from '@/packages/hoverbutton/index.taro' import { harmonyAndRn, rn } from '@/utils/platform-taro' -import pxTransform from '@/utils/px-transform' export interface BackTopProps extends BasicComponent { threshold: number @@ -44,7 +42,6 @@ const isNative = harmonyAndRn() export const BackTop: FunctionComponent< Partial & Omit, 'onClick'> > = (props) => { - const rtl = useRtl() const { children, threshold, @@ -65,7 +62,7 @@ export const BackTop: FunctionComponent< classPrefix, { [`${classPrefix}-show`]: backTop, - [`${classPrefix}-show-active`]: isNative && isTouchStart, + // [`${classPrefix}-show-active`]: isNative && isTouchStart, [`${classPrefix}-rn`]: rn(), }, className @@ -113,23 +110,11 @@ export const BackTop: FunctionComponent< [duration, onClick] ) - const styles = useMemo(() => { - return Object.keys(style || {}).length !== 0 - ? { - zIndex, - ...style, - } - : { - [rtl ? 'left' : 'right']: pxTransform(10), - bottom: pxTransform(20), - zIndex, - } - }, [rtl, style, zIndex]) - return ( - } onClick={(e) => { goTop(e) }} @@ -137,8 +122,17 @@ export const BackTop: FunctionComponent< onTouchEnd={handleActiveEnd} onTouchCancel={handleActiveEnd} > - {children || } - + {children && ( + { + goTop(e) + }} + > + {children} + + )} + ) } diff --git a/src/packages/backtop/backtop.tsx b/src/packages/backtop/backtop.tsx index 97fa3edbd4..3cb8a8967f 100644 --- a/src/packages/backtop/backtop.tsx +++ b/src/packages/backtop/backtop.tsx @@ -4,14 +4,13 @@ import React, { useState, useRef, useCallback, - useMemo, } from 'react' import type { MouseEvent } from 'react' -import { Top } from '@nutui/icons-react' import classNames from 'classnames' +import { Top } from '@nutui/icons-react' import { BasicComponent, ComponentDefaults } from '@/utils/typings' import requestAniFrame, { cancelRaf } from '@/utils/raf' -import { useRtl } from '@/packages/configprovider' +import HoverButton from '@/packages/hoverbutton/index' export interface BackTopProps extends BasicComponent { target: string @@ -32,7 +31,6 @@ const defaultProps = { export const BackTop: FunctionComponent< Partial & Omit, 'onClick'> > = (props) => { - const rtl = useRtl() const { children, target, @@ -121,29 +119,26 @@ export const BackTop: FunctionComponent< [duration, onClick, scroll, scrollAnimation] ) - const styles = useMemo(() => { - return Object.keys(style || {}).length !== 0 - ? { - zIndex, - ...style, - } - : { - [rtl ? 'left' : 'right']: '10px', - bottom: '20px', - zIndex, - } - }, [rtl, style, zIndex]) - return ( -
} onClick={(e) => { goTop(e) }} > - {children || } -
+ {children && ( +
{ + goTop(e) + }} + > + {children} +
+ )} + ) } diff --git a/src/packages/backtop/demos/h5/demo3.tsx b/src/packages/backtop/demos/h5/demo3.tsx index a423c33f8c..7939d8d5f8 100644 --- a/src/packages/backtop/demos/h5/demo3.tsx +++ b/src/packages/backtop/demos/h5/demo3.tsx @@ -8,17 +8,9 @@ const Demo3 = () => { {new Array(24).fill(0).map((_, index) => { return 我是测试数据{index} })} - -
- -
顶部
-
+ + +
顶部
 ) diff --git a/src/packages/backtop/demos/h5/demo5.tsx b/src/packages/backtop/demos/h5/demo5.tsx index bfeb250a5d..1bdfcacdfc 100644 --- a/src/packages/backtop/demos/h5/demo5.tsx +++ b/src/packages/backtop/demos/h5/demo5.tsx @@ -7,7 +7,7 @@ const Demo5 = () => { console.log('触发返回顶部') } return ( -
+
{new Array(24).fill(0).map((_, index) => { return 我是测试数据{index} })} @@ -20,16 +20,8 @@ const Demo5 = () => { onClick={handleClick} target="target" > -
- -
顶部
-
+ +
顶部
) diff --git a/src/packages/backtop/demos/taro/demo1.tsx b/src/packages/backtop/demos/taro/demo1.tsx index 86a1f8d7ef..042f0da74f 100644 --- a/src/packages/backtop/demos/taro/demo1.tsx +++ b/src/packages/backtop/demos/taro/demo1.tsx @@ -1,33 +1,14 @@ import React from 'react' -import { View } from '@tarojs/components' import { BackTop, Cell } from '@nutui/nutui-react-taro' -import { Top } from '@nutui/icons-react-taro' const Demo1 = () => { return ( - + <> {new Array(24).fill(0).map((_, index) => { return 我是测试数据{index} })} - - - - 顶部 - - - + + ) } export default Demo1 diff --git a/src/packages/backtop/demos/taro/demo2.tsx b/src/packages/backtop/demos/taro/demo2.tsx index c1637fa61b..edafeeffe0 100644 --- a/src/packages/backtop/demos/taro/demo2.tsx +++ b/src/packages/backtop/demos/taro/demo2.tsx @@ -1,15 +1,14 @@ import React from 'react' -import { View } from '@tarojs/components' import { BackTop, Cell } from '@nutui/nutui-react-taro' const Demo2 = () => { return ( - + <> {new Array(24).fill(0).map((_, index) => { return 我是测试数据{index} })} - + ) } export default Demo2 diff --git a/src/packages/backtop/demos/taro/demo3.tsx b/src/packages/backtop/demos/taro/demo3.tsx index 559ff5fd0e..de1a181176 100644 --- a/src/packages/backtop/demos/taro/demo3.tsx +++ b/src/packages/backtop/demos/taro/demo3.tsx @@ -5,23 +5,15 @@ import { BackTop, Cell } from '@nutui/nutui-react-taro' const Demo3 = () => { return ( - + <> {new Array(24).fill(0).map((_, index) => { return 我是测试数据{index} })} - - - 顶部 - + + 顶部 - + ) } export default Demo3 diff --git a/src/packages/backtop/demos/taro/demo4.tsx b/src/packages/backtop/demos/taro/demo4.tsx index f02dcd988d..7d3a6d9263 100644 --- a/src/packages/backtop/demos/taro/demo4.tsx +++ b/src/packages/backtop/demos/taro/demo4.tsx @@ -1,41 +1,17 @@ import React from 'react' -import { View } from '@tarojs/components' import { BackTop, Cell } from '@nutui/nutui-react-taro' -import { Top } from '@nutui/icons-react-taro' const Demo4 = () => { const handleClick = () => { console.log('触发返回顶部') } - const demoStyle = { - height: 'auto', - minHeight: 'auto', - } return ( - + <> {new Array(24).fill(0).map((_, index) => { return 我是测试数据{index} })} - - - - 顶部 - - - + + ) } export default Demo4 diff --git a/src/packages/backtop/demos/taro/demo5.tsx b/src/packages/backtop/demos/taro/demo5.tsx index 59c528d2a3..abe99cb225 100644 --- a/src/packages/backtop/demos/taro/demo5.tsx +++ b/src/packages/backtop/demos/taro/demo5.tsx @@ -5,7 +5,6 @@ import React, { useRef, useState } from 'react' import Taro from '@tarojs/taro' import { ScrollView, View } from '@tarojs/components' import { BackTop, Cell } from '@nutui/nutui-react-taro' -import { Top } from '@nutui/icons-react-taro' import pxTransform from '@/utils/px-transform' import { harmony, rn } from '@/utils/platform-taro' @@ -51,17 +50,7 @@ const Demo5 = () => { sv.current.scrollToOffset({ offset: 0 }) } }} - > - - - - + /> ) } diff --git a/src/packages/hoverbutton/demos/taro/demo4.tsx b/src/packages/hoverbutton/demos/taro/demo4.tsx index ff73546357..9ce4b9a1e9 100644 --- a/src/packages/hoverbutton/demos/taro/demo4.tsx +++ b/src/packages/hoverbutton/demos/taro/demo4.tsx @@ -31,7 +31,6 @@ const App = () => { > 这个图层层级为 1000 - {/* */} ) diff --git a/src/packages/hoverbuttonitem/hoverbuttonitem.scss b/src/packages/hoverbuttonitem/hoverbuttonitem.scss index 5f9ad95c88..d33de14b34 100644 --- a/src/packages/hoverbuttonitem/hoverbuttonitem.scss +++ b/src/packages/hoverbuttonitem/hoverbuttonitem.scss @@ -1,8 +1,8 @@ .nut-hoverbutton-item { &-container { - width: 40px; - height: 40px; - border-radius: 20px; + width: $hoverbutton-item-size; + height: $hoverbutton-item-size; + border-radius: $hoverbutton-item-size; border: 1px solid $hoverbutton-item-border-color; background-color: $hoverbutton-item-background; diff --git a/src/styles/variables.scss b/src/styles/variables.scss index ee8dc9720c..fd10bc105f 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -960,12 +960,6 @@ $tour-content-bottom-btn-border-radius: var( 4px ) !default; -//backtop（✅） -$backtop-border-color: var( - --nutui-backtop-border-color, - $color-border -) !default; - // calendar（✅） $calendar-active-background-color: var( --nutui-calendar-active-background-color, @@ -1025,6 +1019,7 @@ $hoverbutton-position-right: var( --nutui-hoverbutton-position-right, $spacing-base ) !default; +$hoverbutton-item-size: var(--nutui-hoverbutton-item-size, 40px) !default; $hoverbutton-item-border-color: var( --nutui-hoverbutton-item-border-color, rgba(0, 0, 0, 0.12) From b4461f927d2e786097b044ad9ad2ce4b36d2e61b Mon Sep 17 00:00:00 2001 From: hanyuxinting Date: Tue, 17 Dec 2024 11:22:26 +0800 Subject: [PATCH 2/7] =?UTF-8?q?fix:=20=E9=B8=BF=E8=92=99=E4=B8=8B=E9=9C=B2?= =?UTF-8?q?=E5=87=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/backtop/backtop.scss | 3 +- src/packages/backtop/backtop.taro.tsx | 13 ------ src/packages/backtop/demo.taro.tsx | 29 +++++-------- src/packages/backtop/demos/taro/demo5.tsx | 52 ++++++----------------- 4 files changed, 25 insertions(+), 72 deletions(-) diff --git a/src/packages/backtop/backtop.scss b/src/packages/backtop/backtop.scss index 737befbe30..91341391b2 100644 --- a/src/packages/backtop/backtop.scss +++ b/src/packages/backtop/backtop.scss @@ -1,6 +1,5 @@ .nut-backtop { display: none; - position: fixed; &-rn { position: absolute; @@ -10,6 +9,8 @@ display: flex; align-items: center; justify-content: center; + width: $hoverbutton-item-size; + height: $hoverbutton-item-size; transition: all 0.2s ease-in-out; .nut-hoverbutton-item-container { display: flex; diff --git a/src/packages/backtop/backtop.taro.tsx b/src/packages/backtop/backtop.taro.tsx index 43b1cc4027..70c5b9bd7a 100644 --- a/src/packages/backtop/backtop.taro.tsx +++ b/src/packages/backtop/backtop.taro.tsx @@ -57,12 +57,10 @@ export const BackTop: FunctionComponent< } const classPrefix = 'nut-backtop' const [backTop, setBackTop] = useState(false) - const [isTouchStart, setTouchStart] = useState(false) const cls = classNames( classPrefix, { [`${classPrefix}-show`]: backTop, - // [`${classPrefix}-show-active`]: isNative && isTouchStart, [`${classPrefix}-rn`]: rn(), }, className @@ -74,14 +72,6 @@ export const BackTop: FunctionComponent< }) }, []) - const handleActiveStart = useCallback(() => { - isNative && setTouchStart(true) - }, []) - - const handleActiveEnd = useCallback(() => { - isNative && setTouchStart(false) - }, []) - const onScroll = useCallback( (res: PageScrollObject) => { const { scrollTop } = res @@ -118,9 +108,6 @@ export const BackTop: FunctionComponent< onClick={(e) => { goTop(e) }} - onTouchStart={handleActiveStart} - onTouchEnd={handleActiveEnd} - onTouchCancel={handleActiveEnd} > {children && ( { const [translated] = useTranslate({ @@ -26,24 +26,17 @@ const BackTopDemo = () => { return ( <> - {harmonyAndRn() ? ( - <> - -
- - - +
+ {harmony() ? ( + ) : ( - <> -
- - {translated.title} - - - + + {translated.title} + + )} ) diff --git a/src/packages/backtop/demos/taro/demo5.tsx b/src/packages/backtop/demos/taro/demo5.tsx index abe99cb225..85a3ed7277 100644 --- a/src/packages/backtop/demos/taro/demo5.tsx +++ b/src/packages/backtop/demos/taro/demo5.tsx @@ -1,57 +1,29 @@ /** * JDRN 端最佳实践 */ -import React, { useRef, useState } from 'react' +import React, { useState } from 'react' import Taro from '@tarojs/taro' import { ScrollView, View } from '@tarojs/components' import { BackTop, Cell } from '@nutui/nutui-react-taro' -import pxTransform from '@/utils/px-transform' -import { harmony, rn } from '@/utils/platform-taro' const Demo5 = () => { const [scrollRes, setScrollRes] = useState(null) - const sv = useRef(null) return ( // @TODO 待 taro 侧支持获取视窗尺寸后调整 - { + setScrollRes(res.detail) }} + className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`} + style={{ width: '100%', height: '100%' }} > - { - setScrollRes(res.detail) - }} - ref={sv} - // @TODO RN 端暂不支持 - // trapScroll={true} - className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`} - style={{ height: 'auto' }} - > - 基础用法 - {new Array(24).fill(0).map((_, index) => { - return 我是测试数据{index} - })} - - { - if (harmony()) { - if (!sv.current?.scroller?.scrollEdge) return - // @ts-ignore - sv.current.scroller.scrollEdge(Edge.Top) - } - if (rn()) { - if (!sv.current?.scrollToOffset) return - sv.current.scrollToOffset({ offset: 0 }) - } - }} - /> - + 基础用法 + {new Array(24).fill(0).map((_, index) => { + return 我是测试数据{index} + })} + + ) } export default Demo5 From c79fd17a452e9ba3bb970cd2a9d0816ac93ada4b Mon Sep 17 00:00:00 2001 From: hanyuxinting Date: Tue, 17 Dec 2024 11:37:41 +0800 Subject: [PATCH 3/7] test: fixed --- .../__snapshots__/backtop.spec.tsx.snap | 49 ++++++++++++------- 1 file changed, 30 insertions(+), 19 deletions(-) diff --git a/src/packages/backtop/__test__/__snapshots__/backtop.spec.tsx.snap b/src/packages/backtop/__test__/__snapshots__/backtop.spec.tsx.snap index e5d4163b07..deb73a77c5 100644 --- a/src/packages/backtop/__test__/__snapshots__/backtop.spec.tsx.snap +++ b/src/packages/backtop/__test__/__snapshots__/backtop.spec.tsx.snap @@ -3,33 +3,44 @@ exports[`backtop custom test 1`] = `
- - -
- 顶部 +
+ + + +
+ 顶部 +
+
+
`; From e6e0a206232fa9a6bca8d9083f6c4ec522e97e6a Mon Sep 17 00:00:00 2001 From: hanyuxinting Date: Tue, 17 Dec 2024 12:38:35 +0800 Subject: [PATCH 4/7] test: add tests --- .../__snapshots__/backtop.spec.tsx.snap | 36 +++++++-------- .../backtop/__test__/backtop.spec.tsx | 45 +++++++++++-------- src/packages/backtop/demo.tsx | 14 ++---- 3 files changed, 45 insertions(+), 50 deletions(-) diff --git a/src/packages/backtop/__test__/__snapshots__/backtop.spec.tsx.snap b/src/packages/backtop/__test__/__snapshots__/backtop.spec.tsx.snap index deb73a77c5..7111d44f28 100644 --- a/src/packages/backtop/__test__/__snapshots__/backtop.spec.tsx.snap +++ b/src/packages/backtop/__test__/__snapshots__/backtop.spec.tsx.snap @@ -12,29 +12,23 @@ exports[`backtop custom test 1`] = `
+ + +
- - - -
- 顶部 -
+ 顶部
diff --git a/src/packages/backtop/__test__/backtop.spec.tsx b/src/packages/backtop/__test__/backtop.spec.tsx index 0aec865738..8bf87baff5 100644 --- a/src/packages/backtop/__test__/backtop.spec.tsx +++ b/src/packages/backtop/__test__/backtop.spec.tsx @@ -2,7 +2,7 @@ import * as React from 'react' import '@testing-library/jest-dom' import { Top } from '@nutui/icons-react' -import { render, fireEvent } from '@testing-library/react' +import { render, fireEvent, waitFor, act } from '@testing-library/react' import BackTop from '@/packages/backtop' test('backtop props test', () => { @@ -37,31 +37,38 @@ test('backtop custom test', () => { }} onClick={handleClick} > -
- -
顶部
-
+ +
顶部
 ) expect(container.querySelector('.nut-backtop')).toHaveAttribute( 'style', 'z-index: 900; bottom: 110px; right: 10px;' ) - expect(container.querySelector('.backtop-demo')).toHaveAttribute( - 'style', - 'display: flex; flex-direction: column; align-items: center;' - ) - expect(container.querySelector('.nut-icon-Top')).toHaveClass( - 'nut-backtop-main' - ) + fireEvent.click(container) expect(handleClick).toBeCalled expect(container).toMatchSnapshot() }) + +test('scroll', async () => { + const { container } = render( +
+ {new Array(24).fill(0).map((_, index) => { + return
我是测试数据{index}
+ })} + +
+ ) + const track = container.querySelector('.backtop-wrapper') + if (track) { + track.scrollTop = 200 + act(() => { + track.dispatchEvent(new Event('scroll')) + }) + await waitFor(() => { + const element18 = container.querySelector('.backtop-button') + expect(element18).toHaveClass('nut-backtop-show') + }) + } +}) diff --git a/src/packages/backtop/demo.tsx b/src/packages/backtop/demo.tsx index 837e4acd69..8ca0e575ce 100644 --- a/src/packages/backtop/demo.tsx +++ b/src/packages/backtop/demo.tsx @@ -16,16 +16,10 @@ const BackTopDemo = () => { }) return ( - <> -
-

{translated.title}

- -
- +
+

{translated.title}

+ +
) } From 875e32370290973aeb4a2830cb56ad392210df4d Mon Sep 17 00:00:00 2001 From: hanyuxinting Date: Tue, 17 Dec 2024 16:59:47 +0800 Subject: [PATCH 5/7] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=20icon?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- migrate-from-v2.md | 7 +++---- .../backtop/__test__/backtop.spec.tsx | 4 ++-- src/packages/backtop/backtop.taro.tsx | 17 ++++++++-------- src/packages/backtop/backtop.tsx | 9 +++++---- src/packages/backtop/demo.tsx | 10 ++++++---- src/packages/backtop/demos/h5/demo1.tsx | 4 ++-- src/packages/backtop/demos/h5/demo2.tsx | 4 ++-- src/packages/backtop/demos/h5/demo3.tsx | 4 ++-- src/packages/backtop/demos/h5/demo4.tsx | 4 ++-- src/packages/backtop/demos/h5/demo5.tsx | 20 +++++++------------ src/packages/hoverbutton/hoverbutton.taro.tsx | 3 ++- 11 files changed, 42 insertions(+), 44 deletions(-) diff --git a/migrate-from-v2.md b/migrate-from-v2.md index ffcd44f21a..7d94e1c4b0 100644 --- a/migrate-from-v2.md +++ b/migrate-from-v2.md @@ -562,10 +562,9 @@ plugins: [ #### BackTop -- `elId` 重命名为 `target` -- 移除 `right`、`bottom`，通过 style 传入，增加支持 `left`、`top` -- `distance` 重命名为 `threshold` -- 移除 `isAnimation`，通过 `duration` 设置 0 实现无动画效果 +- 使用 `HoverButton` 重构 `BackTop` +- 新增 `icon` 字段，可直接修改图标 +- 继续支持自定义节点 #### Dialog diff --git a/src/packages/backtop/__test__/backtop.spec.tsx b/src/packages/backtop/__test__/backtop.spec.tsx index 8bf87baff5..12c027c3cd 100644 --- a/src/packages/backtop/__test__/backtop.spec.tsx +++ b/src/packages/backtop/__test__/backtop.spec.tsx @@ -45,7 +45,6 @@ test('backtop custom test', () => { 'style', 'z-index: 900; bottom: 110px; right: 10px;' ) - fireEvent.click(container) expect(handleClick).toBeCalled expect(container).toMatchSnapshot() @@ -61,14 +60,15 @@ test('scroll', async () => {
) const track = container.querySelector('.backtop-wrapper') + const element18 = container.querySelectorAll('.backtop-button')[0] if (track) { track.scrollTop = 200 act(() => { track.dispatchEvent(new Event('scroll')) }) await waitFor(() => { - const element18 = container.querySelector('.backtop-button') expect(element18).toHaveClass('nut-backtop-show') }) + fireEvent.click(element18 as Element) } }) diff --git a/src/packages/backtop/backtop.taro.tsx b/src/packages/backtop/backtop.taro.tsx index 70c5b9bd7a..91e709bf43 100644 --- a/src/packages/backtop/backtop.taro.tsx +++ b/src/packages/backtop/backtop.taro.tsx @@ -15,11 +15,13 @@ import { import { ITouchEvent, View } from '@tarojs/components' import classNames from 'classnames' import { Top } from '@nutui/icons-react-taro' -import { BasicComponent, ComponentDefaults } from '@/utils/typings' -import HoverButton from '@/packages/hoverbutton/index.taro' -import { harmonyAndRn, rn } from '@/utils/platform-taro' +import { ComponentDefaults } from '@/utils/typings' +import HoverButton, { + HoverButtonProps, +} from '@/packages/hoverbutton/index.taro' +import { rn } from '@/utils/platform-taro' -export interface BackTopProps extends BasicComponent { +export interface BackTopProps extends HoverButtonProps { threshold: number zIndex: number duration: number @@ -27,7 +29,7 @@ export interface BackTopProps extends BasicComponent { * 容器滚动时的回调参数，主要用于 rn、鸿蒙端 */ scrollRes?: PageScrollObject - onClick?: (event: React.MouseEvent | ITouchEvent) => void + // onClick?: (event: React.MouseEvent | ITouchEvent) => void } const defaultProps = { @@ -37,8 +39,6 @@ const defaultProps = { duration: 1000, } as BackTopProps -const isNative = harmonyAndRn() - export const BackTop: FunctionComponent< Partial & Omit, 'onClick'> > = (props) => { @@ -48,6 +48,7 @@ export const BackTop: FunctionComponent< zIndex, className, duration, + icon, style, scrollRes, onClick, @@ -104,7 +105,7 @@ export const BackTop: FunctionComponent< } + icon={!children && (icon || )} onClick={(e) => { goTop(e) }} diff --git a/src/packages/backtop/backtop.tsx b/src/packages/backtop/backtop.tsx index 3cb8a8967f..964d09ef0f 100644 --- a/src/packages/backtop/backtop.tsx +++ b/src/packages/backtop/backtop.tsx @@ -8,11 +8,11 @@ import React, { import type { MouseEvent } from 'react' import classNames from 'classnames' import { Top } from '@nutui/icons-react' -import { BasicComponent, ComponentDefaults } from '@/utils/typings' +import { ComponentDefaults } from '@/utils/typings' import requestAniFrame, { cancelRaf } from '@/utils/raf' -import HoverButton from '@/packages/hoverbutton/index' +import HoverButton, { HoverButtonProps } from '@/packages/hoverbutton/index' -export interface BackTopProps extends BasicComponent { +export interface BackTopProps extends HoverButtonProps { target: string threshold: number zIndex: number @@ -38,6 +38,7 @@ export const BackTop: FunctionComponent< zIndex, className, duration, + icon, style, onClick, } = { @@ -123,7 +124,7 @@ export const BackTop: FunctionComponent< } + icon={!children && (icon || )} onClick={(e) => { goTop(e) }} diff --git a/src/packages/backtop/demo.tsx b/src/packages/backtop/demo.tsx index 8ca0e575ce..3ce6a5a76d 100644 --- a/src/packages/backtop/demo.tsx +++ b/src/packages/backtop/demo.tsx @@ -16,10 +16,12 @@ const BackTopDemo = () => { }) return ( -
-

{translated.title}

- -
+ <> +
+

{translated.title}

+ +
+ ) } diff --git a/src/packages/backtop/demos/h5/demo1.tsx b/src/packages/backtop/demos/h5/demo1.tsx index df048d6255..02f195d174 100644 --- a/src/packages/backtop/demos/h5/demo1.tsx +++ b/src/packages/backtop/demos/h5/demo1.tsx @@ -3,12 +3,12 @@ import { BackTop, Cell } from '@nutui/nutui-react' const Demo1 = () => { return ( -
+ <> {new Array(24).fill(0).map((_, index) => { return 我是测试数据{index} })} -
+ ) } export default Demo1 diff --git a/src/packages/backtop/demos/h5/demo2.tsx b/src/packages/backtop/demos/h5/demo2.tsx index 9f73b520a9..fd0a71727a 100644 --- a/src/packages/backtop/demos/h5/demo2.tsx +++ b/src/packages/backtop/demos/h5/demo2.tsx @@ -3,12 +3,12 @@ import { BackTop, Cell } from '@nutui/nutui-react' const Demo2 = () => { return ( -
+ <> {new Array(24).fill(0).map((_, index) => { return 我是测试数据{index} })} -
+ ) } export default Demo2 diff --git a/src/packages/backtop/demos/h5/demo3.tsx b/src/packages/backtop/demos/h5/demo3.tsx index 7939d8d5f8..d516babff8 100644 --- a/src/packages/backtop/demos/h5/demo3.tsx +++ b/src/packages/backtop/demos/h5/demo3.tsx @@ -4,7 +4,7 @@ import { BackTop, Cell } from '@nutui/nutui-react' const Demo3 = () => { return ( -
+ <> {new Array(24).fill(0).map((_, index) => { return 我是测试数据{index} })} @@ -12,7 +12,7 @@ const Demo3 = () => {
顶部
-
+ ) } export default Demo3 diff --git a/src/packages/backtop/demos/h5/demo4.tsx b/src/packages/backtop/demos/h5/demo4.tsx index f26641211a..0377c9040d 100644 --- a/src/packages/backtop/demos/h5/demo4.tsx +++ b/src/packages/backtop/demos/h5/demo4.tsx @@ -3,11 +3,11 @@ import { BackTop, Cell } from '@nutui/nutui-react' const Demo4 = () => { return ( -
+
{new Array(24).fill(0).map((_, index) => { return 我是测试数据{index} })} - +
) } diff --git a/src/packages/backtop/demos/h5/demo5.tsx b/src/packages/backtop/demos/h5/demo5.tsx index 1bdfcacdfc..28a569a6c8 100644 --- a/src/packages/backtop/demos/h5/demo5.tsx +++ b/src/packages/backtop/demos/h5/demo5.tsx @@ -1,29 +1,23 @@ import React from 'react' import { BackTop, Cell } from '@nutui/nutui-react' -import { Top } from '@nutui/icons-react' const Demo5 = () => { const handleClick = () => { - console.log('触发返回顶部') + const ele = document.getElementsByClassName('backtop-button')[0] } return ( -
+ <> {new Array(24).fill(0).map((_, index) => { return 我是测试数据{index} })} { + handleClick() }} - onClick={handleClick} target="target" - > - -
顶部
- -
+ className="backtop-button" + /> + ) } export default Demo5 diff --git a/src/packages/hoverbutton/hoverbutton.taro.tsx b/src/packages/hoverbutton/hoverbutton.taro.tsx index 983cf02ada..bfd571a26b 100644 --- a/src/packages/hoverbutton/hoverbutton.taro.tsx +++ b/src/packages/hoverbutton/hoverbutton.taro.tsx @@ -1,6 +1,6 @@ import React, { FunctionComponent } from 'react' import classNames from 'classnames' -import { View } from '@tarojs/components' +import { ITouchEvent, View } from '@tarojs/components' import Taro from '@tarojs/taro' import { BasicComponent, ComponentDefaults } from '@/utils/typings' import { useRtl } from '@/packages/configprovider/index.taro' @@ -14,6 +14,7 @@ import { UI_BOTTOM_DISTANCE } from '@/packages/hoverbutton/utils' export interface HoverButtonProps extends BasicComponent, HoverButtonItemProps { zIndex: number tabbarHeight?: number + onClick?: (event: React.MouseEvent | ITouchEvent) => void } const defaultProps = { From 83883a44d3b789eac9ce08ac085fffce1a0fe03c Mon Sep 17 00:00:00 2001 From: hanyuxinting Date: Tue, 17 Dec 2024 17:20:12 +0800 Subject: [PATCH 6/7] fix: lint ts --- src/packages/backtop/backtop.taro.tsx | 4 ++-- src/packages/hoverbutton/hoverbutton.taro.tsx | 3 +-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/packages/backtop/backtop.taro.tsx b/src/packages/backtop/backtop.taro.tsx index 91e709bf43..6caea1359f 100644 --- a/src/packages/backtop/backtop.taro.tsx +++ b/src/packages/backtop/backtop.taro.tsx @@ -29,7 +29,7 @@ export interface BackTopProps extends HoverButtonProps { * 容器滚动时的回调参数，主要用于 rn、鸿蒙端 */ scrollRes?: PageScrollObject - // onClick?: (event: React.MouseEvent | ITouchEvent) => void + onClick?: (event: React.MouseEvent | ITouchEvent) => void } const defaultProps = { @@ -91,7 +91,7 @@ export const BackTop: FunctionComponent< // 返回顶部点击事件 const goTop = useCallback( - (e: React.MouseEvent | ITouchEvent) => { + (e: MouseEvent | ITouchEvent) => { onClick?.(e) pageScrollTo({ scrollTop: 0, diff --git a/src/packages/hoverbutton/hoverbutton.taro.tsx b/src/packages/hoverbutton/hoverbutton.taro.tsx index bfd571a26b..983cf02ada 100644 --- a/src/packages/hoverbutton/hoverbutton.taro.tsx +++ b/src/packages/hoverbutton/hoverbutton.taro.tsx @@ -1,6 +1,6 @@ import React, { FunctionComponent } from 'react' import classNames from 'classnames' -import { ITouchEvent, View } from '@tarojs/components' +import { View } from '@tarojs/components' import Taro from '@tarojs/taro' import { BasicComponent, ComponentDefaults } from '@/utils/typings' import { useRtl } from '@/packages/configprovider/index.taro' @@ -14,7 +14,6 @@ import { UI_BOTTOM_DISTANCE } from '@/packages/hoverbutton/utils' export interface HoverButtonProps extends BasicComponent, HoverButtonItemProps { zIndex: number tabbarHeight?: number - onClick?: (event: React.MouseEvent | ITouchEvent) => void } const defaultProps = { From 41de6eb05cef3ee65119658e7bd510f4b0495d75 Mon Sep 17 00:00:00 2001 From: oasis Date: Wed, 18 Dec 2024 17:44:01 +0800 Subject: [PATCH 7/7] test: update case --- src/packages/backtop/__test__/backtop.spec.tsx | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/src/packages/backtop/__test__/backtop.spec.tsx b/src/packages/backtop/__test__/backtop.spec.tsx index 12c027c3cd..c4e8169553 100644 --- a/src/packages/backtop/__test__/backtop.spec.tsx +++ b/src/packages/backtop/__test__/backtop.spec.tsx @@ -2,7 +2,7 @@ import * as React from 'react' import '@testing-library/jest-dom' import { Top } from '@nutui/icons-react' -import { render, fireEvent, waitFor, act } from '@testing-library/react' +import { act, fireEvent, render, waitFor } from '@testing-library/react' import BackTop from '@/packages/backtop' test('backtop props test', () => { @@ -52,22 +52,30 @@ test('backtop custom test', () => { test('scroll', async () => { const { container } = render( -
+
{new Array(24).fill(0).map((_, index) => { - return
我是测试数据{index}
+ return ( +
+ 我是测试数据{index} +
+ ) })}
) const track = container.querySelector('.backtop-wrapper') - const element18 = container.querySelectorAll('.backtop-button')[0] + const element18 = container.querySelectorAll( + '.nut-hoverbutton-item-container' + )[0] + const element19 = container.querySelectorAll('.nut-hoverbutton-container')[0] if (track) { + track.scrollTo = vi.fn() track.scrollTop = 200 act(() => { track.dispatchEvent(new Event('scroll')) }) await waitFor(() => { - expect(element18).toHaveClass('nut-backtop-show') + expect(element19).toHaveClass('nut-backtop-show') }) fireEvent.click(element18 as Element) }