fix(Tab): calculate use wrapper width instead of navbar width (#1385)

* fix(Tab): calculate use wrapper width instead of navbar width
alibaba-fusion · Nov 27, 2019 · ed9bf9a · ed9bf9a
1 parent e6e6171
commit ed9bf9a
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 9 deletions.
diff --git a/docs/tab/index.md b/docs/tab/index.md
@@ -47,7 +47,7 @@ Fusion 提供了三级选项卡，分别用于不同的场景。
 | navClassName        | 导航条的自定义样式类                                                                                                                                                                                                          | String        | -        |
 | contentStyle        | 内容区容器的自定义样式                                                                                                                                                                                                         | Object        | -        |
 | contentClassName    | 内容区容器的自定义样式类                                                                                                                                                                                                        | String        | -        |
-| extra               | 导航栏附加内容                                                                                                                                                                                                             | ReactNode     | -        |
+| extra               | 导航栏附加内容, 请确保只在有限选项卡的情况下才使用附加内容, 该功能在选项卡溢出时会和溢出导航的按钮冲突。| ReactNode | -        |
 | onClick             | 点击单个选项卡时触发的回调<br><br>**签名**:<br>Function() => void                                                                                                                                                                  | Function      | () => {} |
 | onChange            | 选项卡发生切换时的事件回调<br><br>**签名**:<br>Function(key: String/Number) => void<br>**参数**:<br>_key_: {String/Number} 改变后的 key                                                                                                  | Function      | () => {} |
 | onClose             | 选项卡被关闭时的事件回调<br><br>**签名**:<br>Function(key: String/Number) => void<br>**参数**:<br>_key_: {String/Number} 关闭的选项卡的 key                                                                                                | Function      | () => {} |

diff --git a/src/tab/tabs/nav.jsx b/src/tab/tabs/nav.jsx
@@ -229,12 +229,11 @@ class Nav extends React.Component {
         // TEMP: 这里会受 Animate 影响，re-render 过程中 this.nav 实际上指向的是上次的 tabList 元素，建议暂时关闭 animation 解决
         const navWH = getOffsetWH(this.nav, tabPosition);
         const wrapperWH = getOffsetWH(this.wrapper, tabPosition);
-        const navbarWH = getOffsetWH(this.navbar, tabPosition);
         const minOffset = wrapperWH - navWH;
 
         let next;
         let prev;
-        if (minOffset >= 0 || navWH <= navbarWH) {
+        if (minOffset >= 0 || navWH <= wrapperWH) {
             next = false;
             prev = false;
             this.setOffset(0, false); // no need to check slide again since this call is invoked from inside setSlideBtn
@@ -248,6 +247,7 @@ class Nav extends React.Component {
             prev = true;
             next = true;
         }
+
         if ((prev || next) !== this.state.showBtn) {
             this.setState({
                 showBtn: prev || next,
@@ -661,12 +661,7 @@ class Nav extends React.Component {
             }
         }
 
-        const navbarCls = classnames(
-            {
-                [`${prefix}tabs-bar`]: true,
-            },
-            className
-        );
+        const navbarCls = classnames(`${prefix}tabs-bar`, className);
 
         return (
             <div