feat(tabs): add scrollPosition API (#2954)

* feat(tabs): add scrollPosition API * chore(tabs): remove console.log
Tencent · Jun 8, 2024 · e1992e1 · e1992e1
1 parent 3b786da
commit e1992e1
Show file tree

Hide file tree

Showing 8 changed files with 250 additions and 17 deletions.
diff --git a/src/tabs/TabNav.tsx b/src/tabs/TabNav.tsx
@@ -33,6 +33,7 @@ const TabNav: React.FC<TabNavProps> = (props) => {
     theme,
     addable,
     onAdd,
+    scrollPosition = 'auto',
     size = 'medium',
     disabled = false,
     onRemove = noop,
@@ -107,7 +108,7 @@ const TabNav: React.FC<TabNavProps> = (props) => {
         rightOperations: rightOperationsRef.current,
       },
       scrollLeft,
-      'auto',
+      scrollPosition,
     );
     setOffset(offset);
   };
@@ -120,7 +121,7 @@ const TabNav: React.FC<TabNavProps> = (props) => {
 
     return () => clearTimeout(timeout);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [activeTab, maxScrollLeft]);
+  }, [activeTab, maxScrollLeft, scrollPosition]);
 
   // 左右滑动按钮的展示状态
   useEffect(() => {

diff --git a/src/tabs/_example/combination.jsx b/src/tabs/_example/combination.jsx
@@ -5,6 +5,7 @@ const { TabPanel } = Tabs;
 
 export default function AddTabs() {
   const [theme, setTheme] = useState('normal');
+  const [scrollPosition, setScrollPosition] = useState('auto');
   const panels = Array.from({ length: 20 }).map((item, index) => ({
     value: index + 1,
     label: `选项卡${index + 1}`,
@@ -15,8 +16,21 @@ export default function AddTabs() {
         <Radio.Button value="normal">常规型</Radio.Button>
         <Radio.Button value="card">卡片型</Radio.Button>
       </Radio.Group>
+      <Radio.Group variant="default-filled" defaultValue="auto" onChange={setScrollPosition}>
+        <Radio.Button value="auto">Auto</Radio.Button>
+        <Radio.Button value="start">Start</Radio.Button>
+        <Radio.Button value="center">Center</Radio.Button>
+        <Radio.Button value="end">End</Radio.Button>
+      </Radio.Group>
 
-      <Tabs placement={'top'} size={'medium'} disabled={false} theme={theme} defaultValue={1}>
+      <Tabs
+        placement={'top'}
+        size={'medium'}
+        disabled={false}
+        theme={theme}
+        scrollPosition={scrollPosition}
+        defaultValue={1}
+      >
         {panels.map(({ value, label }) => (
           <TabPanel key={value} value={value} label={label}>
             <div className="tabs-content" style={{ margin: 20 }}>

diff --git a/src/tabs/defaultProps.ts b/src/tabs/defaultProps.ts
@@ -2,14 +2,22 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
-import { TdTabPanelProps, TdTabsProps } from './type';
-
-export const tabPanelDefaultProps: TdTabPanelProps = { destroyOnHide: true, removable: false };
+import { TdTabsProps, TdTabPanelProps } from './type';
 
 export const tabsDefaultProps: TdTabsProps = {
   addable: false,
+  disabled: false,
   dragSort: false,
   placement: 'top',
+  scrollPosition: 'auto',
   size: 'medium',
   theme: 'normal',
 };
+
+export const tabPanelDefaultProps: TdTabPanelProps = {
+  destroyOnHide: true,
+  disabled: false,
+  draggable: true,
+  lazy: false,
+  removable: false,
+};
diff --git a/src/tabs/tabs.en-US.md b/src/tabs/tabs.en-US.md
@@ -6,32 +6,36 @@
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-className | String | - | 类名 | N
-style | Object | - | 样式，Typescript：`React.CSSProperties` | N
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
 action | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 addable | Boolean | false | \- | N
 disabled | Boolean | false | \- | N
 dragSort | Boolean | false | \- | N
 list | Array | - | Typescript：`Array<TdTabPanelProps>` | N
-placement | String | top | options：left/top/bottom/right | N
-size | String | medium | options：medium/large | N
-theme | String | normal | options：normal/card | N
+placement | String | top | options: left/top/bottom/right | N
+scrollPosition | String | auto | The final position where the tab item stops scrolling after being selected.。options: auto/start/center/end | N
+size | String | medium | options: medium/large | N
+theme | String | normal | options: normal/card | N
 value | String / Number | - | Typescript：`TabValue` `type TabValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tabs/type.ts) | N
 defaultValue | String / Number | - | uncontrolled property。Typescript：`TabValue` `type TabValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tabs/type.ts) | N
 onAdd | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
 onChange | Function |  | Typescript：`(value: TabValue) => void`<br/> | N
 onDragSort | Function |  | Typescript：`(context: TabsDragSortContext) => void`<br/>trigger on drag sort。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tabs/type.ts)。<br/>`interface TabsDragSortContext { currentIndex: number; current: TabValue; targetIndex: number; target: TabValue }`<br/> | N
 onRemove | Function |  | Typescript：`(options: { value: TabValue; index: number; e: MouseEvent }) => void`<br/> | N
 
+
 ### TabPanel Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-className | String | - | 类名 | N
-style | Object | - | 样式，Typescript：`React.CSSProperties` | N
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
 destroyOnHide | Boolean | true | \- | N
 disabled | Boolean | false | \- | N
+draggable | Boolean | true | \- | N
 label | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+lazy | Boolean | false | Enable tab lazy loading | N
 panel | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 removable | Boolean | false | \- | N
 value | String / Number | - | Typescript：`TabValue` | N

diff --git a/src/tabs/tabs.md b/src/tabs/tabs.md
@@ -1,9 +1,10 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Tabs Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
@@ -13,6 +14,7 @@ disabled | Boolean | false | 是否禁用选项卡 | N
 dragSort | Boolean | false | 是否开启拖拽调整顺序 | N
 list | Array | - | 选项卡列表。TS 类型：`Array<TdTabPanelProps>` | N
 placement | String | top | 选项卡位置。可选项：left/top/bottom/right | N
+scrollPosition | String | auto | Tab较多的时候，选中滑块滚动最终停留的位置。可选项：auto/start/center/end | N
 size | String | medium | 组件尺寸。可选项：medium/large | N
 theme | String | normal | 选项卡风格，包含 默认风格 和 卡片风格两种。可选项：normal/card | N
 value | String / Number | - | 激活的选项卡值。TS 类型：`TabValue` `type TabValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tabs/type.ts) | N
@@ -22,15 +24,18 @@ onChange | Function |  | TS 类型：`(value: TabValue) => void`<br/>激活的
 onDragSort | Function |  | TS 类型：`(context: TabsDragSortContext) => void`<br/>拖拽排序时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tabs/type.ts)。<br/>`interface TabsDragSortContext { currentIndex: number; current: TabValue; targetIndex: number; target: TabValue }`<br/> | N
 onRemove | Function |  | TS 类型：`(options: { value: TabValue; index: number; e: MouseEvent }) => void`<br/>删除选项卡时触发 | N
 
+
 ### TabPanel Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
 destroyOnHide | Boolean | true | 选项卡内容隐藏时是否销毁 | N
 disabled | Boolean | false | 是否禁用当前选项卡 | N
+draggable | Boolean | true | 选项卡组件开启允许拖动排序时，当前选项卡是否允许拖动 | N
 label | TNode | - | 选项卡名称，可自定义选项卡导航内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+lazy | Boolean | false | 是否启用选项卡懒加载 | N
 panel | TNode | - | 用于自定义选项卡面板内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 removable | Boolean | false | 当前选项卡是否允许移除 | N
 value | String / Number | - | 选项卡的值，唯一标识。TS 类型：`TabValue` | N

diff --git a/src/tabs/type.ts b/src/tabs/type.ts
@@ -36,6 +36,11 @@ export interface TdTabsProps {
    * @default top
    */
   placement?: 'left' | 'top' | 'bottom' | 'right';
+  /**
+   * Tab较多的时候，选中滑块滚动最终停留的位置
+   * @default auto
+   */
+  scrollPosition?: 'auto' | 'start' | 'center' | 'end';
   /**
    * 组件尺寸
    * @default medium
@@ -83,10 +88,20 @@ export interface TdTabPanelProps {
    * @default false
    */
   disabled?: boolean;
+  /**
+   * 选项卡组件开启允许拖动排序时，当前选项卡是否允许拖动
+   * @default true
+   */
+  draggable?: boolean;
   /**
    * 选项卡名称，可自定义选项卡导航内容
    */
   label?: TNode;
+  /**
+   * 是否启用选项卡懒加载
+   * @default false
+   */
+  lazy?: boolean;
   /**
    * 用于自定义选项卡面板内容
    */