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/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/__test__/__snapshots__/backtop.spec.tsx.snap b/src/packages/backtop/__test__/__snapshots__/backtop.spec.tsx.snap index e5d4163b07..7111d44f28 100644 --- a/src/packages/backtop/__test__/__snapshots__/backtop.spec.tsx.snap +++ b/src/packages/backtop/__test__/__snapshots__/backtop.spec.tsx.snap @@ -3,33 +3,38 @@ 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..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 } from '@testing-library/react' +import { act, fireEvent, render, waitFor } from '@testing-library/react' import BackTop from '@/packages/backtop' test('backtop props test', () => { @@ -37,31 +37,46 @@ 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') + 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(element19).toHaveClass('nut-backtop-show') + }) + fireEvent.click(element18 as Element) + } +}) diff --git a/src/packages/backtop/backtop.scss b/src/packages/backtop/backtop.scss index 685e3b5089..91341391b2 100644 --- a/src/packages/backtop/backtop.scss +++ b/src/packages/backtop/backtop.scss @@ -1,31 +1,22 @@ .nut-backtop { display: none; - position: fixed; &-rn { position: absolute; } &-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 { + width: $hoverbutton-item-size; + height: $hoverbutton-item-size; 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..6caea1359f 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,15 +12,16 @@ 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 { BasicComponent, ComponentDefaults } from '@/utils/typings' -import { useRtl } from '@/packages/configprovider/index.taro' -import { harmonyAndRn, rn } from '@/utils/platform-taro' -import pxTransform from '@/utils/px-transform' +import { Top } from '@nutui/icons-react-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 @@ -29,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 = { @@ -39,18 +39,16 @@ const defaultProps = { duration: 1000, } as BackTopProps -const isNative = harmonyAndRn() - export const BackTop: FunctionComponent< Partial & Omit, 'onClick'> > = (props) => { - const rtl = useRtl() const { children, threshold, zIndex, className, duration, + icon, style, scrollRes, onClick, @@ -60,12 +58,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 @@ -77,14 +73,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 @@ -103,7 +91,7 @@ export const BackTop: FunctionComponent< // 返回顶部点击事件 const goTop = useCallback( - (e: React.MouseEvent | ITouchEvent) => { + (e: MouseEvent | ITouchEvent) => { onClick?.(e) pageScrollTo({ scrollTop: 0, @@ -113,32 +101,26 @@ 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) }} - onTouchStart={handleActiveStart} - 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..964d09ef0f 100644 --- a/src/packages/backtop/backtop.tsx +++ b/src/packages/backtop/backtop.tsx @@ -4,16 +4,15 @@ import React, { useState, useRef, useCallback, - useMemo, } from 'react' import type { MouseEvent } from 'react' -import { Top } from '@nutui/icons-react' import classNames from 'classnames' -import { BasicComponent, ComponentDefaults } from '@/utils/typings' +import { Top } from '@nutui/icons-react' +import { ComponentDefaults } from '@/utils/typings' import requestAniFrame, { cancelRaf } from '@/utils/raf' -import { useRtl } from '@/packages/configprovider' +import HoverButton, { HoverButtonProps } from '@/packages/hoverbutton/index' -export interface BackTopProps extends BasicComponent { +export interface BackTopProps extends HoverButtonProps { target: string threshold: number zIndex: number @@ -32,7 +31,6 @@ const defaultProps = { export const BackTop: FunctionComponent< Partial & Omit, 'onClick'> > = (props) => { - const rtl = useRtl() const { children, target, @@ -40,6 +38,7 @@ export const BackTop: FunctionComponent< zIndex, className, duration, + icon, style, onClick, } = { @@ -121,29 +120,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/demo.taro.tsx b/src/packages/backtop/demo.taro.tsx index ae980ec231..f1e42dbb61 100644 --- a/src/packages/backtop/demo.taro.tsx +++ b/src/packages/backtop/demo.taro.tsx @@ -5,7 +5,7 @@ import { useTranslate } from '@/sites/assets/locale/taro' import Header from '@/sites/components/header' import Demo1 from './demos/taro/demo1' import Demo5 from './demos/taro/demo5' -import { harmonyAndRn } from '@/utils/platform-taro' +import { harmony } from '@/utils/platform-taro' const BackTopDemo = () => { const [translated] = useTranslate({ @@ -26,24 +26,17 @@ const BackTopDemo = () => { return ( <> - {harmonyAndRn() ? ( - <> - -
- - - +
+ {harmony() ? ( + ) : ( - <> -
- - {translated.title} - - - + + {translated.title} + + )} ) diff --git a/src/packages/backtop/demo.tsx b/src/packages/backtop/demo.tsx index 837e4acd69..3ce6a5a76d 100644 --- a/src/packages/backtop/demo.tsx +++ b/src/packages/backtop/demo.tsx @@ -17,11 +17,7 @@ const BackTopDemo = () => { return ( <> -
+

{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 a423c33f8c..d516babff8 100644 --- a/src/packages/backtop/demos/h5/demo3.tsx +++ b/src/packages/backtop/demos/h5/demo3.tsx @@ -4,23 +4,15 @@ import { BackTop, Cell } from '@nutui/nutui-react' const Demo3 = () => { return ( -
+ <> {new Array(24).fill(0).map((_, index) => { return 我是测试数据{index} })} - -
- -
顶部
-
+ + +
顶部
 -
+ ) } 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 bfeb250a5d..28a569a6c8 100644 --- a/src/packages/backtop/demos/h5/demo5.tsx +++ b/src/packages/backtop/demos/h5/demo5.tsx @@ -1,37 +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/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..85a3ed7277 100644 --- a/src/packages/backtop/demos/taro/demo5.tsx +++ b/src/packages/backtop/demos/taro/demo5.tsx @@ -1,68 +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 { Top } from '@nutui/icons-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 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)