modularize tabBar and tabContent

react-component · Aug 29, 2016 · 5a9b07b · 5a9b07b
1 parent d4a6724
commit 5a9b07b
Show file tree

Hide file tree

Showing 29 changed files with 742 additions and 730 deletions.
diff --git a/HISTORY.md b/HISTORY.md
@@ -1,6 +1,10 @@
 # History
 ----
 
+## 7.0.0 / 2016-08-29
+
+- modularize tabBar and tabContent
+
 ## 6.0.0 / 2016-08-20
 
 - support allowInkBar/allowScrollBar prop

diff --git a/assets/index.less b/assets/index.less
@@ -5,7 +5,6 @@
 @effect-duration: .3s;
 
 @import "index/common";
-@import "index/anim";
 @import "index/left";
 @import "index/right";
 @import "index/bottom";

diff --git a/assets/index/anim.less b/assets/index/anim.less
diff --git a/assets/index/bottom.less b/assets/index/bottom.less
@@ -1,6 +1,7 @@
 .@{tabs-prefix-cls} {
   &-bottom {
     border-top: 2px solid #f3f3f3;
+    overflow-x: hidden;
   }
 
   &-bottom &-bar {
@@ -19,9 +20,13 @@
   &-bottom &-nav-wrap {
     width: 100%;
   }
-
-  &-bottom &-content {
-    width: 100%;
+
+  &-bottom &-content-animated {
+    flex-direction: row;
+
+    .@{tabs-prefix-cls}-tabpane {
+      width: 100%;
+    }
   }
 
   &-bottom &-tab-next {
@@ -43,14 +48,14 @@
     margin-right: -2px;
     width: 32px;
     height: 100%;
-    top:0;
+    top: 0;
     text-align: center;
   }
 
   &-bottom &-ink-bar {
     height: 2px;
     top: 3px;
-    left:0;
+    left: 0;
   }
 
   &-bottom &-tab {

diff --git a/assets/index/common.less b/assets/index/common.less
@@ -20,24 +20,12 @@
     margin-top: -3px;
     background-color: #3fc7fa;
     transform-origin: 0 0;
-
-    &-transition-forward {
-      transition: right @effect-duration @easing-in-out,
-      left @effect-duration @easing-in-out @effect-duration * 0.3,
-      bottom @effect-duration @easing-in-out,
-      transform @effect-duration @easing-in-out @effect-duration * 0.3,
-      -webkit-transform @effect-duration @easing-in-out @effect-duration * 0.3,
-      top @effect-duration @easing-in-out @effect-duration * 0.3;
-    }
-
-    &-transition-backward {
-      transition: bottom @effect-duration @easing-in-out @effect-duration * 0.3,
-      right @effect-duration @easing-in-out @effect-duration * 0.3,
-      left @effect-duration @easing-in-out,
-      transform @effect-duration @easing-in-out @effect-duration * 0.3,
-      -webkit-transform @effect-duration @easing-in-out @effect-duration * 0.3,
-      top @effect-duration @easing-in-out;
-    }
+    transition: right @effect-duration @easing-in-out,
+    left @effect-duration @easing-in-out,
+    bottom @effect-duration @easing-in-out,
+    transform @effect-duration @easing-in-out,
+    -webkit-transform @effect-duration @easing-in-out,
+    top @effect-duration @easing-in-out;
   }
 
   &-tab-prev, &-tab-next {
@@ -135,12 +123,27 @@
     }
   }
 
-  &-tabpane-hidden {
-    display: none;
+  &-content {
+    zoom: 1;
+
+    .@{tabs-prefix-cls}-tabpane {
+      overflow: auto;
+    }
+  }
+
+  &-content-no-animated {
+    .@{tabs-prefix-cls}-tabpane-inactive {
+      display: none;
+    }
   }
 
-  &-content {
-    position: relative;
-    overflow: hidden;
+  &-content-animated {
+    transition: transform @effect-duration @easing-in-out;
+    display: flex;
+    will-change: transform;
+
+    .@{tabs-prefix-cls}-tabpane {
+      flex-shrink: 0;
+    }
   }
 }
diff --git a/assets/index/left.less b/assets/index/left.less
@@ -1,14 +1,18 @@
 .@{tabs-prefix-cls} {
   &-left {
     border-right: 2px solid #f3f3f3;
+    overflow-y: hidden;
   }
 
   &-left &-bar {
     float: left;
+    height:100%;
     margin-right: 10px;
     border-right: 1px solid #f3f3f3;
   }
-
+  &-left &-nav-container {
+    height:100%;
+  }
   &-left &-nav-container-scrolling {
     padding-top: 32px;
     padding-bottom: 32px;
@@ -18,8 +22,12 @@
     height: 100%;
   }
 
-  &-left &-content {
-    height: 100%;
+  &-left &-content-animated {
+    flex-direction: column;
+
+    .@{tabs-prefix-cls}-tabpane {
+      height: 100%;
+    }
   }
 
   &-left &-nav-scroll {

diff --git a/assets/index/right.less b/assets/index/right.less
@@ -1,14 +1,18 @@
 .@{tabs-prefix-cls} {
   &-right {
     border-left: 2px solid #f3f3f3;
+    overflow-y: hidden;
   }
 
   &-right &-bar {
     float: right;
+    height: 100%;
     margin-left: 10px;
     border-left: 1px solid #f3f3f3;
   }
-
+  &-right &-nav-container {
+    height:100%;
+  }
   &-right &-nav-container-scrolling {
     padding-top: 32px;
     padding-bottom: 32px;
@@ -53,8 +57,12 @@
     }
   }
 
-  &-right &-content {
-    height: 100%;
+  &-right &-content-animated {
+    flex-direction: column;
+
+    .@{tabs-prefix-cls}-tabpane {
+      height: 100%;
+    }
   }
 
   &-right &-ink-bar {

diff --git a/assets/index/top.less b/assets/index/top.less
@@ -1,6 +1,7 @@
 .@{tabs-prefix-cls} {
   &-top {
     border-bottom: 2px solid #f3f3f3;
+    overflow-x: hidden;
   }
 
   &-top &-bar {
@@ -20,8 +21,11 @@
     width: 100%;
   }
 
-  &-top &-content {
-    width: 100%;
+  &-top &-content-animated {
+    flex-direction: row;
+    .@{tabs-prefix-cls}-tabpane {
+      width: 100%;
+    }
   }
 
   &-top &-tab-next {

diff --git a/examples/activeKey.js b/examples/activeKey.js
@@ -4,6 +4,8 @@ import 'rc-tabs/assets/index.less';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Tabs, { TabPane } from 'rc-tabs';
+import TabContent from '../src/TabContent';
+import ScrollableInkTabBar from '../src/ScrollableInkTabBar';
 
 class PanelContent extends React.Component {
   constructor(props) {
@@ -63,10 +65,9 @@ const Component = React.createClass({
     return (<div>
       <h1>Simple Tabs</h1>
       <Tabs
-        allowScrollBar={false}
-        allowInkBar
+        renderTabBar={()=><ScrollableInkTabBar onTabClick={this.onTabClick}/>}
+        renderTabContent={()=><TabContent/>}
         activeKey={this.state.activeKey}
-        onTabClick={this.onTabClick}
         onChange={this.onChange}
       >
         <TabPane tab={`tab ${start}`} key="1">

diff --git a/examples/add.js b/examples/add.js
@@ -4,6 +4,8 @@ import 'rc-tabs/assets/index.less';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Tabs, { TabPane } from 'rc-tabs';
+import TabContent from '../src/TabContent';
+import ScrollableInkTabBar from '../src/ScrollableInkTabBar';
 
 let index = 1;
 
@@ -97,8 +99,6 @@ const Test = React.createClass({
   },
 
   render() {
-    const animation = 'slide-horizontal';
-
     const tabStyle = {
       width: 500,
     };
@@ -108,12 +108,12 @@ const Test = React.createClass({
 
       <div style={tabStyle}>
         <Tabs
-          animation={animation}
+          renderTabBar={()=><ScrollableInkTabBar tabBarExtraContent={
+            <button onClick={this.add}>+添加</button>
+          } />}
+          renderTabContent={()=><TabContent/>}
           activeKey={this.state.activeKey}
           onChange={this.onTabChange}
-          tabBarExtraContent={
-            <button onClick={this.add}>+添加</button>
-            }
         >
           {this.construct()}
         </Tabs>