fix(Tab): extra align middle by default

alibaba-fusion · Jan 14, 2019 · 3f38491 · 3f38491
1 parent 6378cc0
commit 3f38491
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 3 deletions.
diff --git a/src/tab/main.scss b/src/tab/main.scss
@@ -230,6 +230,14 @@
 
     /* Shape: wrapped(top) */
     &-wrapped#{$tab-prefix}-top > #{$tab-prefix}-bar {
+        position: relative;
+        #{$tab-prefix}-nav-extra {
+            position: absolute;
+            top: 50%;
+            right: 0;
+            transform: translateY(-50%);
+        }
+
         #{$tab-prefix}-tab {
             margin-right: $tab-wrapped-tab-margin-right;
             @include tabs-tab-border(
@@ -260,6 +268,14 @@
 
     /* Shape: wrapped(bottom) */
     &-wrapped#{$tab-prefix}-bottom > #{$tab-prefix}-bar {
+        position: relative;
+        #{$tab-prefix}-nav-extra {
+            position: absolute;
+            top: 50%;
+            right: 0;
+            transform: translateY(-50%);
+        }
+
         #{$tab-prefix}-tab {
             margin-right: $tab-wrapped-tab-margin-right;
             @include tabs-tab-border( $tab-wrapped-bar-border, null, $tab-wrapped-tab-bottom-border-radius, $tab-wrapped-border-line-color-hover, $tab-wrapped-bg-color-selected, $tab-wrapped-border-line-color, $tab-wrapped-border-line-color, $tab-wrapped-border-line-color);
@@ -370,3 +386,5 @@
         }
     }
 }
+
+@import "./rtl.scss";
diff --git a/src/tab/rtl.scss b/src/tab/rtl.scss
@@ -0,0 +1,17 @@
+@import "../core/index-noreset.scss";
+
+#{$tab-prefix}[dir="rtl"] {
+    &#{$tab-prefix}-wrapped#{$tab-prefix}-top > #{$tab-prefix}-bar {
+        #{$tab-prefix}-nav-extra {
+            right: auto;
+            left: 0;
+        }
+    }
+
+    &#{$tab-prefix}-wrapped#{$tab-prefix}-bottom > #{$tab-prefix}-bar {
+        #{$tab-prefix}-nav-extra {
+            right: auto;
+            left: 0;
+        }
+    }
+}
diff --git a/src/tab/tab.jsx b/src/tab/tab.jsx
@@ -14,6 +14,7 @@ export default class Tab extends Component {
 
     static propTypes = {
         prefix: PropTypes.string,
+        rtl: PropTypes.bool,
         /**
          * 被激活的选项卡的 key, 赋值则tab为受控组件, 用户无法切换
          */
@@ -232,6 +233,7 @@ export default class Tab extends Component {
             className,
             onClose,
             children,
+            rtl,
             ...others
         } = this.props;
         const { activeKey } = this.state;
@@ -282,7 +284,7 @@ export default class Tab extends Component {
             tabChildren.reverse();
         }
 
-        return (<div className={classNames} {...obj.pickOthers(Tab.propTypes, others)}>
+        return (<div dir={rtl ? 'rtl' : undefined} className={classNames} {...obj.pickOthers(Tab.propTypes, others)}>
             {tabChildren}
         </div>);
     }

diff --git a/src/tab/tabs/nav.jsx b/src/tab/tabs/nav.jsx
@@ -10,7 +10,6 @@ import { events } from '../../util';
 import { triggerEvents, getOffsetLT, getOffsetWH, isTransformSupported } from './utils';
 
 const noop = () => {};
-const floatRight = { float: 'right', position: 'relative', zIndex: 1 };
 const { Popup } = Overlay;
 
 class Nav extends React.Component {
@@ -441,7 +440,7 @@ class Nav extends React.Component {
                 key: 'nav-extra',
             };
             if (tabPosition === 'top' || tabPosition === 'bottom') {
-                navChildren.unshift(<div {...extraProps} style={floatRight}>{extra}</div>);
+                navChildren.unshift(<div {...extraProps}>{extra}</div>);
             } else {
                 navChildren.push(<div {...extraProps}>{extra}</div>);
             }