@douyinfe/semi-ui 2.58.0 → 2.58.1

package/lib/cjs/tabs/TabBar.d.ts

@@ -30,11 +30,14 @@ declare class TabBar extends React.Component<TabBarProps, TabBarState> {
     };
     constructor(props: TabBarProps);
     componentDidMount(): void;
+    componentDidUpdate(prevProps: any): void;
     renderIcon(icon: ReactNode): ReactNode;
     renderExtra(): ReactNode;
     handleItemClick: (itemKey: string, e: MouseEvent<Element>) => void;
     handleKeyDown: (event: React.KeyboardEvent, itemKey: string, closable: boolean) => void;
     renderTabItem: (panel: PlainTab) => ReactNode;
+    scrollTabItemIntoViewByKey: (key: string, logicalPosition?: ScrollLogicalPosition) => void;
+    scrollActiveTabItemIntoView: (logicalPosition?: ScrollLogicalPosition) => void;
     renderTabComponents: (list: Array<PlainTab>) => Array<ReactNode>;
     handleArrowClick: (items: Array<OverflowItem>, pos: 'start' | 'end') => void;
     renderCollapse: (items: Array<OverflowItem>, icon: ReactNode, pos: 'start' | 'end') => ReactNode;

package/lib/cjs/tabs/TabBar.js

@@ -29,18 +29,11 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
 };
 class TabBar extends _react.default.Component {
   constructor(props) {
+    var _this;
     super(props);
+    _this = this;
     this.handleItemClick = (itemKey, e) => {
       this.props.onTabClick(itemKey, e);
-      if (this.props.collapsible) {
-        const key = this._getItemKey(itemKey);
-        const tabItem = document.querySelector(`[data-uuid="${this.state.uuid}"] .${_constants.cssClasses.TABS_TAB}[data-scrollkey="${key}"]`);
-        tabItem.scrollIntoView({
-          behavior: 'smooth',
-          block: 'nearest',
-          inline: 'nearest'
-        });
-      }
     };
     this.handleKeyDown = (event, itemKey, closable) => {
       this.props.handleKeyDown(event, itemKey, closable);
@@ -65,6 +58,19 @@ class TabBar extends _react.default.Component {
         onClick: this.handleItemClick
       }));
     };
+    this.scrollTabItemIntoViewByKey = function (key) {
+      let logicalPosition = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'nearest';
+      const tabItem = document.querySelector(`[data-uuid="${_this.state.uuid}"] .${_constants.cssClasses.TABS_TAB}[data-scrollkey="${key}"]`);
+      tabItem === null || tabItem === void 0 ? void 0 : tabItem.scrollIntoView({
+        behavior: 'smooth',
+        block: logicalPosition,
+        inline: logicalPosition
+      });
+    };
+    this.scrollActiveTabItemIntoView = logicalPosition => {
+      const key = this._getItemKey(this.props.activeKey);
+      this.scrollTabItemIntoViewByKey(key, logicalPosition);
+    };
     this.renderTabComponents = list => list.map(panel => this.renderTabItem(panel));
     this.handleArrowClick = (items, pos) => {
       const lastItem = pos === 'start' ? items.pop() : items.shift();
@@ -72,12 +78,7 @@ class TabBar extends _react.default.Component {
         return;
       }
       const key = this._getItemKey(lastItem.itemKey);
-      const tabItem = document.querySelector(`[data-uuid="${this.state.uuid}"] .${_constants.cssClasses.TABS_TAB}[data-scrollkey="${key}"]`);
-      tabItem.scrollIntoView({
-        behavior: 'smooth',
-        block: 'nearest',
-        inline: 'nearest'
-      });
+      this.scrollTabItemIntoViewByKey(key);
     };
     this.renderCollapse = (items, icon, pos) => {
       if ((0, _isEmpty2.default)(items)) {
@@ -227,6 +228,13 @@ class TabBar extends _react.default.Component {
       uuid: (0, _uuid.getUuidv4)()
     });
   }
+  componentDidUpdate(prevProps) {
+    if (prevProps.activeKey !== this.props.activeKey) {
+      if (this.props.collapsible) {
+        this.scrollActiveTabItemIntoView();
+      }
+    }
+  }
   renderIcon(icon) {
     return /*#__PURE__*/_react.default.createElement("span", null, icon);
   }

package/lib/es/tabs/TabBar.d.ts

@@ -30,11 +30,14 @@ declare class TabBar extends React.Component<TabBarProps, TabBarState> {
     };
     constructor(props: TabBarProps);
     componentDidMount(): void;
+    componentDidUpdate(prevProps: any): void;
     renderIcon(icon: ReactNode): ReactNode;
     renderExtra(): ReactNode;
     handleItemClick: (itemKey: string, e: MouseEvent<Element>) => void;
     handleKeyDown: (event: React.KeyboardEvent, itemKey: string, closable: boolean) => void;
     renderTabItem: (panel: PlainTab) => ReactNode;
+    scrollTabItemIntoViewByKey: (key: string, logicalPosition?: ScrollLogicalPosition) => void;
+    scrollActiveTabItemIntoView: (logicalPosition?: ScrollLogicalPosition) => void;
     renderTabComponents: (list: Array<PlainTab>) => Array<ReactNode>;
     handleArrowClick: (items: Array<OverflowItem>, pos: 'start' | 'end') => void;
     renderCollapse: (items: Array<OverflowItem>, icon: ReactNode, pos: 'start' | 'end') => ReactNode;

package/lib/es/tabs/TabBar.js

@@ -22,18 +22,11 @@ import TabItem from './TabItem';
 import LocaleConsumer from "../locale/localeConsumer";
 class TabBar extends React.Component {
   constructor(props) {
+    var _this;
     super(props);
+    _this = this;
     this.handleItemClick = (itemKey, e) => {
       this.props.onTabClick(itemKey, e);
-      if (this.props.collapsible) {
-        const key = this._getItemKey(itemKey);
-        const tabItem = document.querySelector(`[data-uuid="${this.state.uuid}"] .${cssClasses.TABS_TAB}[data-scrollkey="${key}"]`);
-        tabItem.scrollIntoView({
-          behavior: 'smooth',
-          block: 'nearest',
-          inline: 'nearest'
-        });
-      }
     };
     this.handleKeyDown = (event, itemKey, closable) => {
       this.props.handleKeyDown(event, itemKey, closable);
@@ -58,6 +51,19 @@ class TabBar extends React.Component {
         onClick: this.handleItemClick
       }));
     };
+    this.scrollTabItemIntoViewByKey = function (key) {
+      let logicalPosition = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'nearest';
+      const tabItem = document.querySelector(`[data-uuid="${_this.state.uuid}"] .${cssClasses.TABS_TAB}[data-scrollkey="${key}"]`);
+      tabItem === null || tabItem === void 0 ? void 0 : tabItem.scrollIntoView({
+        behavior: 'smooth',
+        block: logicalPosition,
+        inline: logicalPosition
+      });
+    };
+    this.scrollActiveTabItemIntoView = logicalPosition => {
+      const key = this._getItemKey(this.props.activeKey);
+      this.scrollTabItemIntoViewByKey(key, logicalPosition);
+    };
     this.renderTabComponents = list => list.map(panel => this.renderTabItem(panel));
     this.handleArrowClick = (items, pos) => {
       const lastItem = pos === 'start' ? items.pop() : items.shift();
@@ -65,12 +71,7 @@ class TabBar extends React.Component {
         return;
       }
       const key = this._getItemKey(lastItem.itemKey);
-      const tabItem = document.querySelector(`[data-uuid="${this.state.uuid}"] .${cssClasses.TABS_TAB}[data-scrollkey="${key}"]`);
-      tabItem.scrollIntoView({
-        behavior: 'smooth',
-        block: 'nearest',
-        inline: 'nearest'
-      });
+      this.scrollTabItemIntoViewByKey(key);
     };
     this.renderCollapse = (items, icon, pos) => {
       if (_isEmpty(items)) {
@@ -220,6 +221,13 @@ class TabBar extends React.Component {
       uuid: getUuidv4()
     });
   }
+  componentDidUpdate(prevProps) {
+    if (prevProps.activeKey !== this.props.activeKey) {
+      if (this.props.collapsible) {
+        this.scrollActiveTabItemIntoView();
+      }
+    }
+  }
   renderIcon(icon) {
     return /*#__PURE__*/React.createElement("span", null, icon);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.58.0",
+    "version": "2.58.1",
     "description": "A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -20,12 +20,12 @@
         "@dnd-kit/core": "^6.0.8",
         "@dnd-kit/sortable": "^7.0.2",
         "@dnd-kit/utilities": "^3.2.1",
-        "@douyinfe/semi-animation": "2.58.0",
-        "@douyinfe/semi-animation-react": "2.58.0",
-        "@douyinfe/semi-foundation": "2.58.0",
-        "@douyinfe/semi-icons": "2.58.0",
-        "@douyinfe/semi-illustrations": "2.58.0",
-        "@douyinfe/semi-theme-default": "2.58.0",
+        "@douyinfe/semi-animation": "2.58.1",
+        "@douyinfe/semi-animation-react": "2.58.1",
+        "@douyinfe/semi-foundation": "2.58.1",
+        "@douyinfe/semi-icons": "2.58.1",
+        "@douyinfe/semi-illustrations": "2.58.1",
+        "@douyinfe/semi-theme-default": "2.58.1",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
@@ -75,7 +75,7 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "71f716ee06be81190ed3d28de4e61542ad0b62d3",
+    "gitHead": "1e48bf7b71e78f49b188ff82c5ab61884a6ec0ab",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",