feat(Backtop): refactor backtop using hoverbutton and v15 adaption (#2866)

* refactor: use hoverbutton

* fix: 鸿蒙下露出

* test: fixed

* test: add tests

* feat: 支持 icon

* fix: lint ts

* test: update case

---------

Co-authored-by: oasis <suanbanren@foxmail.com>

Author: xiaoyatong

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
 

src/config.json

@@ -274,6 +274,7 @@
           "tarodoc": true,
           "show": true,
           "taro": true,
+          "v15": true,
           "author": "vickyYe"
         },
         {

src/packages/backtop/__test__/__snapshots__/backtop.spec.tsx.snap

@@ -3,33 +3,38 @@
 exports[`backtop custom test 1`] = `
 <div>
   <div
-    class="nut-backtop custom-class"
+    class="nut-hoverbutton-container nut-backtop custom-class"
     style="z-index: 900; bottom: 110px; right: 10px;"
   >
     <div
-      class="backtop-demo"
-      style="display: flex; flex-direction: column; align-items: center;"
+      class="nut-hoverbutton"
     >
-      <svg
-        aria-labelledby="Top"
-        class="nut-icon nut-icon-Top nut-backtop-main"
-        role="presentation"
-        style="width: 12px; height: 12px;"
-        viewBox="0 0 1024 1024"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M128 0a42.67 42.67 0 1 0 0 85.33h768A42.67 42.67 0 1 0 896 0zm391.21 173.42a10.88 10.88 0 0 0-14.42 0L3.61 619.67a10.71 10.71 0 0 0 7.21 18.67h241.34v257.11c0 71 58.05 128.55 129.64 128.55h260.4c71.59 0 129.64-57.56 129.64-128.55V638.34h241.34a10.71 10.71 0 0 0 7.21-18.67zM338.6 895.45V552.64H208.21L512 282.15l303.77 270.49H685.42v342.83c0 23.64-19.37 42.84-43.22 42.83H381.8c-23.85 0-43.2-19.2-43.2-42.85"
-          fill="currentColor"
-          fill-opacity="0.9"
-        />
-      </svg>
       <div
-        style="font-size: 12px;"
+        class="nut-hoverbutton-item-container"
       >
-        顶部
+        <svg
+          aria-labelledby="Top"
+          class="nut-icon nut-icon-Top "
+          role="presentation"
+          viewBox="0 0 1024 1024"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M128 0a42.67 42.67 0 1 0 0 85.33h768A42.67 42.67 0 1 0 896 0zm391.21 173.42a10.88 10.88 0 0 0-14.42 0L3.61 619.67a10.71 10.71 0 0 0 7.21 18.67h241.34v257.11c0 71 58.05 128.55 129.64 128.55h260.4c71.59 0 129.64-57.56 129.64-128.55V638.34h241.34a10.71 10.71 0 0 0 7.21-18.67zM338.6 895.45V552.64H208.21L512 282.15l303.77 270.49H685.42v342.83c0 23.64-19.37 42.84-43.22 42.83H381.8c-23.85 0-43.2-19.2-43.2-42.85"
+            fill="currentColor"
+            fill-opacity="0.9"
+          />
+        </svg>
+        <div
+          style="font-size: 12px;"
+        >
+          顶部
+        </div>
       </div>
     </div>
+    <div
+      class="nut-safe-area nut-safe-area-position-bottom"
+    />
   </div>
 </div>
 `;

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}
     >
-      <div
-        className="backtop-demo"
-        style={{
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-        }}
-      >
-        <Top width="12px" height="12px" className="nut-backtop-main" />
-        <div style={{ fontSize: '12px' }}>顶部</div>
-      </div>
+      <Top />
+      <div style={{ fontSize: '12px' }}>顶部</div>
     </BackTop>
   )
   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(
+    <div id="target" style={{ height: '100px' }} className="backtop-wrapper">
+      {new Array(24).fill(0).map((_, index) => {
+        return (
+          <div key={index} style={{ height: 30 }}>
+            我是测试数据{index}
+          </div>
+        )
+      })}
+      <BackTop target="target" className="backtop-button" />
+    </div>
+  )
+  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)
+  }
+})

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;
+    }
   }
 }

src/packages/backtop/backtop.taro.tsx

@@ -2,7 +2,6 @@ import React, {
   FunctionComponent,
   useCallback,
   useState,
-  useMemo,
   useEffect,
   useRef,
 } from 'react'
@@ -13,23 +12,24 @@ 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
   /**
    * 容器滚动时的回调参数，主要用于 rn、鸿蒙端
    */
   scrollRes?: PageScrollObject
-  onClick?: (event: React.MouseEvent<Element, MouseEvent> | ITouchEvent) => void
+  onClick?: (event: React.MouseEvent<HTMLDivElement> | ITouchEvent) => void
 }
 
 const defaultProps = {
@@ -39,18 +39,16 @@ const defaultProps = {
   duration: 1000,
 } as BackTopProps
 
-const isNative = harmonyAndRn()
-
 export const BackTop: FunctionComponent<
   Partial<BackTopProps> & Omit<React.HTMLAttributes<HTMLDivElement>, '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<Element, MouseEvent> | ITouchEvent) => {
+    (e: MouseEvent<HTMLDivElement> | 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 (
-    <View
+    <HoverButton
       className={cls}
-      style={styles}
+      style={{ zIndex, ...style }}
+      icon={!children && (icon || <Top />)}
       onClick={(e) => {
         goTop(e)
       }}
-      onTouchStart={handleActiveStart}
-      onTouchEnd={handleActiveEnd}
-      onTouchCancel={handleActiveEnd}
     >
-      {children || <Top size={19} className="nut-backtop-main" />}
-    </View>
+      {children && (
+        <View
+          className="nut-hoverbutton-item-container"
+          onClick={(e) => {
+            goTop(e)
+          }}
+        >
+          {children}
+        </View>
+      )}
+    </HoverButton>
   )
 }