Merge branch 'develop' into refactor_cell

refactor(cell): update-snapshot

.github/workflows/pr-comment-ci.yml

@@ -87,20 +87,80 @@ jobs:
     steps:
       - uses: actions/checkout@v4
         with:
+          fetch-depth: 0
           token: ${{ secrets.PERSONAL_TOKEN }}
       - name: gh checkout pr
         env:
           GH_TOKEN: ${{ secrets.PERSONAL_TOKEN }}
         run: gh pr checkout ${{ github.event.issue.number }} --recurse-submodules
+      - name: merge develop
+        run: |
+          git config --local user.email "github-actions[bot]@users.noreply.github.com"
+          git config --local user.name "github-actions[bot]"
+          git merge develop --no-commit || true
+      - name: check conflicts
+        run: |
+          git status
+          conflict_count=$(git status | grep -c 'both modified:') || true
+          working_tree_clean=$(git status | grep -c 'nothing to commit, working tree clean') || true
+          csr_snap_conflict=$(git status | grep 'both modified:' | grep -c 'csr.test.jsx.snap') || true
+          ssr_snap_conflict=$(git status | grep 'both modified:' | grep -c 'ssr.test.jsx.snap') || true
+          common_conflict=$(git status | grep 'both modified:' | grep -c '_common') || true
+          conflicts_sum=$((csr_snap_conflict + ssr_snap_conflict + common_conflict))
+          echo "conflict_count: $conflict_count"
+          echo "working_tree_clean: $working_tree_clean"
+          echo "csr_snap_conflict: $csr_snap_conflict"
+          echo "ssr_snap_conflict: $ssr_snap_conflict"
+          echo "common_conflict: $common_conflict"
+          echo "conflicts_sum: $conflicts_sum"
+
+          if [ "$working_tree_clean" -eq "1" ]; then
+              echo "nothing to commit, working tree clean"
+              exit 0
+          fi
+
+          if [ "$conflict_count" -gt "0" ]&&[ "$conflicts_sum" -eq "0" ]; then
+              echo "Unknown conflict "
+              git status
+              exit 1
+          fi
+
+          if [ "$csr_snap_conflict" -eq "1" ];then
+              git checkout --theirs test/snap/__snapshots__/csr.test.jsx.snap
+              git add test/snap/__snapshots__/csr.test.jsx.snap
+              echo "resolve conflict csr.test.jsx.snap"
+          fi
+
+          if [ "$ssr_snap_conflict" -eq "1" ];then
+              git checkout --theirs test/snap/__snapshots__/ssr.test.jsx.snap
+              git add test/snap/__snapshots__/ssr.test.jsx.snap
+              echo "resolve conflict ssr.test.jsx.snap"
+          fi
+
+          if [ "$common_conflict" -eq "1" ];then
+              git checkout --theirs src/_common
+              git add src/_common
+              echo "resolve conflict _common"
+          fi
+
+          git status
+          git commit -am "chore: merge develop"
+
       - uses: actions/setup-node@v4
         with:
           node-version: 18
       - run: npm install
       - run: npm run test:update
       - name: Commit Snapshot
         run: |
-          git add .
-          git config --local user.email "github-actions[bot]@users.noreply.github.com"
-          git config --local user.name "github-actions[bot]"
-          git commit -m "chore: update snapshot"
-          git push
+          working_tree_clean=$(git status | grep -c 'nothing to commit, working tree clean') || true
+          if [ "$working_tree_clean" -eq "0" ]; then
+            git add .
+            git commit -m "chore: update snapshot"
+          fi
+      - name: git push
+        run: |
+          branch_ahead=$(git status | grep -c 'Your branch is ahead of') || true
+          if [ "$branch_ahead" -eq "1" ]; then
+            git push
+          fi

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 多选框',

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>
       )}

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

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>

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;

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

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