feat(back-top): dom结构对齐小程序端 (#430)

* feat(back-top): dom结构对齐小程序端 * feat(back-top): api功能对齐mobile vue * feat(back-top): 官网示例代码&&演示示例对齐新视觉稿 * feat(back-top): 用tsx写demo * feat(back-top): dom结构对齐小程序端 * feat(back-top): api功能对齐mobile vue * feat(back-top): 官网示例代码&&演示示例对齐新视觉稿 * feat(back-top): 用tsx写demo * test: update csr and ssr snap * chore: update _common * test: update csr snap --------- Co-authored-by: anlyyao <[email protected]> Co-authored-by: 黎伟杰 <[email protected]>
Tencent · Aug 7, 2024 · fcd05b7 · fcd05b7
1 parent c873dc4
commit fcd05b7
Show file tree

Hide file tree

Showing 15 changed files with 424 additions and 115 deletions.
diff --git a/site/mobile/mobile.config.js b/site/mobile/mobile.config.js
@@ -110,7 +110,7 @@ export default {
     {
       title: 'BackTop 返回顶部',
       name: 'back-top',
-      component: () => import('tdesign-mobile-react/back-top/_example/index.jsx'),
+      component: () => import('tdesign-mobile-react/back-top/_example/index.tsx'),
     },
     {
       title: 'Checkbox 多选框',

diff --git a/src/_common b/src/_common
diff --git a/src/back-top/Backtop.tsx b/src/back-top/Backtop.tsx
@@ -18,10 +18,11 @@ export const defaultProps = {
   target: (() => window) as any,
   text: '',
   theme: 'round' as ThemeList,
+  visibilityHeight: 200,
 };
 
 const BackTop: React.FC<BackTopProps> = (props) => {
-  const { fixed, icon, target, text, theme } = props;
+  const { fixed, icon, target, text, theme, onToTop, visibilityHeight, container } = props;
 
   const [show, { setTrue, setFalse }] = useBoolean(false);
 
@@ -33,7 +34,16 @@ const BackTop: React.FC<BackTopProps> = (props) => {
 
   const name = `${classPrefix}-back-top`;
 
-  const scroll = useScroll(document);
+  const getContainer = (container: Function) => {
+    if (typeof container === 'function') {
+      return container();
+    }
+    return document.documentElement;
+  };
+  const containerDom = useRef<HTMLElement>(null);
+  containerDom.current = getContainer(container);
+
+  const scroll = useScroll(typeof container === 'function' ? containerDom.current : document);
 
   useMount(() => {
     smoothscroll.polyfill();
@@ -44,31 +54,31 @@ const BackTop: React.FC<BackTopProps> = (props) => {
   const targetHeight = isWindow(backTopDom.current) ? 0 : backTopDom.current?.offsetTop || 0;
 
   useEffect(() => {
-    // 当滚动条滚动到超过锚点二分之一个屏幕后，显示回到顶部按钮
-    const screenHeight = window.innerHeight;
-    if (scroll?.top > screenHeight / 2 + targetHeight) {
+    // 当滚动条滚动到 设置滚动高度时，显示回到顶部按钮
+    if (scroll?.top >= visibilityHeight) {
       setTrue();
     } else {
       setFalse();
     }
-  }, [scroll, setTrue, setFalse, targetHeight]);
+  }, [scroll, setTrue, setFalse, visibilityHeight]);
 
-  const onClick = () => document.documentElement.scrollTo({ top: targetHeight, behavior: 'smooth' });
+  const onClick = () => {
+    containerDom.current.scrollTo({ top: 0 + targetHeight, behavior: 'smooth' });
+    onToTop?.();
+  };
 
   return withNativeProps(
     props,
     <div
       className={classNames(`${name}`, `${name}--${theme}`, {
-        [`${classPrefix}-is-fixed`]: fixed,
-        'back-top-hidden': !show,
-        'back-top-show': show,
+        [`${name}--fixed`]: fixed,
       })}
-      style={{ zIndex: 99999 }}
+      style={{ zIndex: 99999, opacity: show ? 1 : 0 }}
       onClick={onClick}
     >
       {isString(icon) ? <Icon className={`${name}__icon`} name={icon} /> : icon}
       {text && (
-        <div className={classNames(`${name}__text`)} style={{ width: 'auto', minWidth: 12, maxWidth: 24 }}>
+        <div className={classNames(`${name}__text--${theme}`)} style={{ width: 'auto', minWidth: 12, maxWidth: 24 }}>
           {text}
         </div>
       )}

diff --git a/src/back-top/_example/base.tsx b/src/back-top/_example/base.tsx
@@ -0,0 +1,42 @@
+import React, { useState, useCallback } from 'react';
+import { BackTop, Button } from 'tdesign-mobile-react';
+import './style/index.less';
+
+export default function Base({ visible, onClose, container }) {
+  const [theme, setTheme] = useState({
+    theme: 'round',
+    text: '顶部',
+  });
+
+  // 切换主题
+  const onClick = useCallback(
+    (theme, text) => {
+      setTheme({
+        theme,
+        text,
+      });
+      onClose();
+      const containerElement = container();
+      containerElement.scrollTop = 1200;
+    },
+    [onClose, container],
+  );
+
+  function handleToTop() {
+    console.log('handleToTop');
+  }
+
+  return (
+    <>
+      {visible ? <BackTop text={theme.text} theme={theme.theme} onToTop={handleToTop} container={container} /> : null}
+      <div className="button-group">
+        <Button className="button" variant="outline" theme="primary" onClick={() => onClick('round', '顶部')}>
+          圆形返回顶部
+        </Button>
+        <Button className="button" variant="outline" theme="primary" onClick={() => onClick('half-round', '返回顶部')}>
+          半圆形返回顶部
+        </Button>
+      </div>
+    </>
+  );
+}
diff --git a/src/back-top/_example/half-round.jsx b/src/back-top/_example/half-round.jsx
diff --git a/src/back-top/_example/index.jsx → src/back-top/_example/index.tsx b/src/back-top/_example/index.jsx → src/back-top/_example/index.tsx
@@ -1,23 +1,16 @@
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { Skeleton } from 'tdesign-mobile-react';
 import TDemoHeader from '../../../site/mobile/components/DemoHeader';
 import TDemoBlock from '../../../site/mobile/components/DemoBlock';
 import './style/index.less';
-import RoundDemo from './round';
-import HalfRoundDemo from './half-round';
+import BaseDemo from './base';
 
 export default function Base() {
   const [visible, setVisible] = useState(false);
-  const [visible1, setVisible1] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
 
   const onClose = () => {
     setVisible(true);
-    setVisible1(false);
-  };
-
-  const onClose1 = () => {
-    setVisible(false);
-    setVisible1(true);
   };
 
   const rowCols = [
@@ -33,20 +26,17 @@ export default function Base() {
   ];
 
   return (
-    <div className="tdesign-mobile-react-demo">
+    <div ref={containerRef} className="tdesign-mobile-react-demo">
       <TDemoHeader
         title="BackTop 返回顶部"
         summary="当页面过长往下滑动是会出现返回顶部的便捷操作，帮助用户快速回到页面顶部"
       />
-      <TDemoBlock title="01 类型" summary="圆型返回顶部">
-        <RoundDemo visible={visible} onClose={onClose} />
-      </TDemoBlock>
-      <TDemoBlock summary="半圆型返回顶部">
-        <HalfRoundDemo visible={visible1} onClose={onClose1} />
+      <TDemoBlock title="形状" summary="">
+        <BaseDemo visible={visible} onClose={onClose} container={() => containerRef.current} />
       </TDemoBlock>
 
       <div className="group">
-        {Array.from(Array(4), (item, key) => (
+        {Array.from(Array(6), (_, key) => (
           <div className="item" key={key}>
             <Skeleton theme="text" rowCol={rowCols} />
           </div>

diff --git a/src/back-top/_example/round.jsx b/src/back-top/_example/round.jsx
diff --git a/src/back-top/_example/style/index.less b/src/back-top/_example/style/index.less
@@ -1,5 +1,7 @@
 .tdesign-mobile-react-demo {
   background: #fff;
+  overflow: auto;
+  height: 100vh;
 
   .button-group {
     display: flex;

diff --git a/src/back-top/back-top.en-US.md b/src/back-top/back-top.en-US.md
@@ -0,0 +1,19 @@
+:: BASE_DOC ::
+
+## API
+
+
+### BackTop Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
+container | Function | - | Typescript：`() => HTMLElement` | N
+fixed | Boolean | true | \- | N
+icon | TNode | true | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+target | Function | - | Typescript：`() => HTMLElement` | N
+text | String | '' | \- | N
+theme | String | round | options: round/half-round/round-dark/half-round-dark | N
+visibilityHeight | Number | 200 | \- | N
+onToTop | Function |  | Typescript：`() => void`<br/> | N
diff --git a/src/back-top/back-top.md b/src/back-top/back-top.md
@@ -4,12 +4,15 @@
 
 ### BackTop Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
+container | Function | - | 滚动的容器。TS 类型：`() => HTMLElement` | N
 fixed | Boolean | true | 是否绝对定位固定到屏幕右下方 | N
-icon | TNode | 'backtop' | 图标。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
-target | Object | () => window | 定位滚动到指定对象。TS 类型：`() => HTMLElement` | N
+icon | TNode | true | 图标。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+target | Function | - | 定位滚动到指定对象。TS 类型：`() => HTMLElement` | N
 text | String | '' | 文案 | N
 theme | String | round | 预设的样式类型。可选项：round/half-round/round-dark/half-round-dark | N
+visibilityHeight | Number | 200 | 滚动高度达到此参数值才出现 | N
+onToTop | Function |  | TS 类型：`() => void`<br/>点击触发 | N
diff --git a/src/back-top/defaultProps.ts b/src/back-top/defaultProps.ts
@@ -0,0 +1,13 @@
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdBackTopProps } from './type';
+
+export const backTopDefaultProps: TdBackTopProps = {
+  fixed: true,
+  icon: true,
+  text: '',
+  theme: 'round',
+  visibilityHeight: 200,
+};
diff --git a/src/back-top/style/index.js b/src/back-top/style/index.js
@@ -1 +1 @@
-import '../../_common/style/mobile/components/back-top/_index.less';
+import '../../_common/style/mobile/components/back-top/v2/_index.less';
diff --git a/src/back-top/type.ts b/src/back-top/type.ts
@@ -7,19 +7,22 @@
 import { TNode } from '../common';
 
 export interface TdBackTopProps {
+  /**
+   * 滚动的容器
+   */
+  container?: () => HTMLElement;
   /**
    * 是否绝对定位固定到屏幕右下方
    * @default true
    */
   fixed?: boolean;
   /**
    * 图标
-   * @default 'backtop'
+   * @default true
    */
   icon?: TNode;
   /**
    * 定位滚动到指定对象
-   * @default () => window
    */
   target?: () => HTMLElement;
   /**
@@ -32,4 +35,13 @@ export interface TdBackTopProps {
    * @default round
    */
   theme?: 'round' | 'half-round' | 'round-dark' | 'half-round-dark';
+  /**
+   * 滚动高度达到此参数值才出现
+   * @default 200
+   */
+  visibilityHeight?: number;
+  /**
+   * 点击触发
+   */
+  onToTop?: () => void;
 }
+23 −0		docs/mobile/api/back-top.en-US.md
+1 −1		docs/mobile/api/back-top.md
+23 −0		docs/mobile/api/cell.en-US.md
+7 −11		docs/mobile/api/cell.md
+24 −0		docs/mobile/api/sticky.en-US.md
+5 −2		docs/mobile/api/sticky.md
+1 −0		docs/web/api/range-input.en-US.md
+1 −0		docs/web/api/range-input.md
+3 −0		js/global-config/locale/ar_KW.ts
+3 −0		js/global-config/locale/en_US.ts
+3 −0		js/global-config/locale/it_IT.ts
+3 −0		js/global-config/locale/ja_JP.ts
+3 −0		js/global-config/locale/ko_KR.ts
+3 −0		js/global-config/locale/ru_RU.ts
+3 −0		js/global-config/locale/zh_CN.ts
+3 −0		js/global-config/locale/zh_TW.ts
+4 −1		js/tree-v1/tree-node.ts
+2 −2		style/mobile/components/_index.less
+5 −0		style/mobile/components/notice-bar/v2/_index.less
+0 −1		style/web/components/dropdown/_index.less
+22 −6		style/web/components/range-input/_index.less
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		import '../../_common/style/mobile/components/back-top/_index.less';
		import '../../_common/style/mobile/components/back-top/v2/_index.less';