From f69ad2df0dc124d13267822fbee689339c7216e3 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sat, 17 Oct 2015 01:05:22 +0200
Subject: [PATCH] [Docs] Add an example of tabs with a slide effect

This a classical use case for tabs on android.
---
 docs/package.json                             |  2 +
 .../app/components/pages/components/tabs.jsx  | 40 ++++++++++++++++++-
 .../src/app/components/raw-code/tabs-code.txt | 19 +++++++++
 3 files changed, 59 insertions(+), 2 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index 32954df2addb47..48b765b16e6fc8 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -21,6 +21,8 @@
     "react-addons-transition-group": "^0.14.0",
     "react-addons-update": "^0.14.0",
     "react-dom": "^0.14.0",
+    "react-motion": "^0.3.1",
+    "react-swipeable-views": "^0.3.0",
     "react-tap-event-plugin": "^0.2.0"
   },
   "devDependencies": {
diff --git a/docs/src/app/components/pages/components/tabs.jsx b/docs/src/app/components/pages/components/tabs.jsx
index e9127f7b24fc3d..0dbbbfedee3ff1 100644
--- a/docs/src/app/components/pages/components/tabs.jsx
+++ b/docs/src/app/components/pages/components/tabs.jsx
@@ -4,14 +4,17 @@ let {IconButton, Slider, Styles, Tab, Tabs } = require('material-ui');
 let ComponentDoc = require('../../component-doc');
 let { Colors, Typography } = Styles;
 let Code = require('tabs-code');
-
+const SwipeableViews = require('react-swipeable-views');
 
 export default class TabsPage extends React.Component {
 
   constructor(props) {
     super(props);
     this._handleTabActive = this._handleTabActive.bind(this);
-    this.state = {tabsValue: 'a'};
+    this.state = {
+      tabsValue: 'a',
+      slideIndex: 0,
+    };
   }
 
   render(){
@@ -150,6 +153,9 @@ export default class TabsPage extends React.Component {
         position: 'relative',
         paddingLeft: padding,
       },
+      slide: {
+        padding: 10,
+      },
     };
 
     return (
@@ -227,11 +233,41 @@ export default class TabsPage extends React.Component {
                 </Tab>
               </Tabs>
           </div>
+          <br />
+          <Tabs onChange={this._handleChangeTabs.bind(this)} value={this.state.slideIndex + ''}>
+            <Tab label="Tab One" value="0" />
+            <Tab label="Tab Two" value="1" />
+            <Tab label="Tab Three" value="2" />
+          </Tabs>
+          <SwipeableViews index={this.state.slideIndex} onChangeIndex={this._handleChangeIndex.bind(this)}>
+            <div>
+              <h2 style={styles.headline}>Tabs with slide effect</h2>
+              Swipe to see the next slide.<br />
+            </div>
+            <div style={styles.slide}>
+              slide n°2
+            </div>
+            <div style={styles.slide}>
+              slide n°3
+            </div>
+          </SwipeableViews>
         </CodeExample>
       </ComponentDoc>
     );
   }
 
+  _handleChangeIndex(index) {
+    this.setState({
+      slideIndex: index,
+    });
+  }
+
+  _handleChangeTabs(value) {
+    this.setState({
+      slideIndex: parseInt(value, 10),
+    });
+  }
+
   _handleButtonClick() {
     this.setState({tabsValue: 'c'});
   }
diff --git a/docs/src/app/components/raw-code/tabs-code.txt b/docs/src/app/components/raw-code/tabs-code.txt
index 0a1ea791286b66..76543ed0ff5b1a 100644
--- a/docs/src/app/components/raw-code/tabs-code.txt
+++ b/docs/src/app/components/raw-code/tabs-code.txt
@@ -28,3 +28,22 @@
     (Tab content...)
   </Tab>
 </Tabs>
+
+// Tabs with slide effect
+<Tabs onChange={this._handleChangeTabs.bind(this)} value={this.state.slideIndex + ''}>
+  <Tab label="Tab One" value="0" />
+  <Tab label="Tab Two" value="1" />
+  <Tab label="Tab Three" value="2" />
+</Tabs>
+<SwipeableViews index={this.state.slideIndex} onChangeIndex={this._handleChangeIndex.bind(this)}>
+  <div>
+    <h2 style={styles.headline}>Tabs with slide effect</h2>
+    Swipe to see the next slide.<br />
+  </div>
+  <div style={styles.slide}>
+    slide n°2
+  </div>
+  <div style={styles.slide}>
+    slide n°3
+  </div>
+</SwipeableViews>