Implemented rtl layout support (#230)

* Implemented rtl layout support

* update readme

* added rtl test and snapshot

* fixed issues mentioned by zombieJ

* fixed issues mentioned by zombieJ

* fix lint errors and added rtl tests

* update tests

* update test

* update tests

* update tests

* change global rtl style to prefixed class

* pass direction to tabbars from parent

* update snapshots

* added comment on getDeltaByKey

* clean up

* fix utils.js issue

README.md

@@ -1,4 +1,5 @@
 # rc-tabs
+
 ---
 
 React Tabs
@@ -39,39 +40,38 @@ online example: http://react-component.github.io/tabs/
 
 ### Keyboard
 
-* left and up: switch to previous tab
-* right and down: switch to next tab
+- left and up: switch to previous tab
+- right and down: switch to next tab
 
 ## Usage
 
 ```js
-import Tabs, { TabPane } from 'rc-tabs';
-import TabContent from 'rc-tabs/lib/TabContent';
-import ScrollableInkTabBar from 'rc-tabs/lib/ScrollableInkTabBar';
-
-var callback = function(key){
+import Tabs, { TabPane } from "rc-tabs";
+import TabContent from "rc-tabs/lib/TabContent";
+import ScrollableInkTabBar from "rc-tabs/lib/ScrollableInkTabBar";
 
-}
+var callback = function(key) {};
 
 React.render(
-  (
-    <Tabs
-      defaultActiveKey="2"
-      onChange={callback}
-      renderTabBar={()=><ScrollableInkTabBar />}
-      renderTabContent={()=><TabContent />}
-    >
-      <TabPane tab='tab 1' key="1">first</TabPane>
-      <TabPane tab='tab 2' key="2">second</TabPane>
-      <TabPane tab='tab 3' key="3">third</TabPane>
-    </Tabs>
-  ),
-  document.getElementById('t2'));
+  <Tabs defaultActiveKey="2" onChange={callback} renderTabBar={() => <ScrollableInkTabBar />} renderTabContent={() => <TabContent />}>
+    <TabPane tab="tab 1" key="1">
+      first
+    </TabPane>
+    <TabPane tab="tab 2" key="2">
+      second
+    </TabPane>
+    <TabPane tab="tab 3" key="3">
+      third
+    </TabPane>
+  </Tabs>,
+  document.getElementById("t2")
+);
 ```
+
 ### Usage of navWrapper() function
 
 navWrapper() prop allows to wrap tabs bar in a component to provide additional features.  
-Eg with react-sortablejs to make tabs sortable by DnD : 
+Eg with react-sortablejs to make tabs sortable by DnD :
 
 ```js
 import Sortable from 'react-sortablejs';
@@ -149,6 +149,12 @@ navWrapper={(content) => <Sortable>{content}</Sortable>}
           <th>rc-tabs</th>
           <td>prefix class name, use to custom style</td>
       </tr>
+      <tr>
+          <td>direction</td>
+          <td>String</td>
+          <th>ltr</th>
+          <td>Layout direction of tabs component, it supports RTL direction too.</td>
+      </tr>
     </tbody>
 </table>
 
@@ -306,9 +312,9 @@ scrollable tab bar, in addition to tab bar props, extra props:
 
 scrollable tab bar with ink indicator, same with tab bar and ink bar and scrollable bar props.
 
-| name | type | default | description |
-|------|------|---------|-------------|
-| children | (node) => node | - | Customize tab bar node |
+| name     | type           | default | description            |
+| -------- | -------------- | ------- | ---------------------- |
+| children | (node) => node | -       | Customize tab bar node |
 
 ### lib/SwipeableInkTabBar (Use for Mobile)
 

assets/index/bottom.less

@@ -56,12 +56,23 @@
     }
   }
 
+  &-bottom&-rtl &-tab-next {
+    left: 2px;
+    right:auto;
+  }
+
   &-bottom &-tab-prev {
     left: 0;
     &-icon:before {
       content: "<";
     }
   }
+
+  &-bottom&-rtl &-tab-prev {
+    right: 0;
+    left:auto;
+  }
+
 
   &-bottom &-tab-prev, &-bottom &-tab-next {
     margin-right: -2px;
@@ -77,12 +88,22 @@
     left: 0;
   }
 
+  &-bottom&-rtl &-ink-bar {
+    right: 0;
+    left:auto;
+  }
+
   &-bottom &-tab {
     float: left;
     height: 100%;
     margin-right: 30px;
   }
 
+  &-bottom&-rtl &-tab {
+    float: right;
+    margin-left: 30px;
+    margin-right: 0;
+  }
   &-bottom &-tabpane-inactive {
     height: 0;
     overflow: visible;

assets/index/common.less

@@ -83,7 +83,6 @@
     list-style: none;
     display: inline-block;
     transform-origin: 0 0;
-
     &-animated {
       transition: transform 0.5s @easing-in-out;
     }
@@ -97,6 +96,10 @@
       clear: both;
     }
   }
+
+  &-rtl &-nav {
+    float: right;
+  }
 
   &-tab {
     box-sizing: border-box;
@@ -159,4 +162,7 @@
   &-content-no-animated &-tabpane-inactive {
     display: none;
   }
+  &-rtl{
+    direction: rtl;
+  }
 }

assets/index/top.less

@@ -56,13 +56,23 @@
     }
   }
 
+  &-top&-rtl &-tab-next {
+    left: 2px;
+    right:auto;
+  }
+
   &-top &-tab-prev {
     left: 0;
     &-icon:before {
       content: "<";
     }
   }
 
+  &-top&-rtl &-tab-prev {
+    right: 0;
+    left:auto;
+  }
+
   &-top &-tab-prev, &-top &-tab-next {
     margin-right: -2px;
     width: 0;
@@ -85,12 +95,23 @@
     left: 0;
   }
 
+  &-top&-rtl &-ink-bar {
+    right: 0;
+    left:auto;
+  }
+
   &-top &-tab {
     float: left;
     height: 100%;
     margin-right: 30px;
   }
 
+  &-top&-rtl &-tab {
+    float: right;
+    margin-left: 30px;
+    margin-right: 0;
+  }
+
   &-top &-tabpane-inactive {
     height: 0;
     overflow: visible;

examples/rtl.html

@@ -0,0 +1 @@
+placeholder