Work around mui#319

motiz88 · Mar 11, 2015 · 1fb9060 · 1fb9060
1 parent 52e7493
commit 1fb9060
Show file tree

Hide file tree

Showing 3 changed files with 157 additions and 128 deletions.
diff --git a/lib/js/tabs/tabs.js b/lib/js/tabs/tabs.js
@@ -5,75 +5,89 @@ var InkBar = require('../ink-bar');
 
 var Tabs = React.createClass({displayName: "Tabs",
 
-  propTypes: {
-    onActive: React.PropTypes.func
-  },
+    propTypes: {
+        onActive: React.PropTypes.func
+    },
 
-  getInitialState: function(){
-    return {
-      selectedIndex: 0
-    };
-  },
+    getInitialState: function() {
+        return {
+            selectedIndex: 0
+        };
+    },
 
-  getEvenWidth: function(){
-    return (
-      parseInt(window
-        .getComputedStyle(this.getDOMNode())
-        .getPropertyValue('width'), 10)
-    );
-  },
+    getEvenWidth: function() {
+        return (
+            parseInt(window
+                .getComputedStyle(this.getDOMNode())
+                .getPropertyValue('width'), 10)
+        );
+    },
 
-  componentDidMount: function(){
-    if(this.props.tabWidth) {
-      if(!(this.props.children.length * this.props.tabWidth > this.getEvenWidth())){
+    _handleResize: function() {
+        if (this.props.tabWidth) {
+            if (!(this.props.children.length * this.props.tabWidth > this.getEvenWidth())) {
+                this.setState({
+                    width: this.props.tabWidth,
+                    fixed: false
+                });
+                return;
+            }
+        }
         this.setState({
-          width: this.props.tabWidth,
-          fixed: false
+            width: this.getEvenWidth(),
+            fixed: true
         });
-        return;
-      }
-    }
-    this.setState({
-      width: this.getEvenWidth(),
-      fixed: true
-    });
-  },
+    },
 
-  handleTouchTap: function(tabIndex, tab){
-    if (this.props.onChange && this.state.selectedIndex !== tabIndex) {
-      this.props.onChange(tabIndex, tab);
-    }
+    componentDidMount: function() {
+        require('javascript-detect-element-resize');
+        window.addResizeListener(this.getDOMNode(), this._handleResize);
+        window.addEventListener('resize', this._handleResize);
+        this._handleResize();
+    },
 
-    this.setState({selectedIndex: tabIndex});
-    //default CB is _onActive. Can be updated in tab.jsx
-    if(tab.props.onActive) tab.props.onActive(tab);
-  },
+    componentWillUnmount: function() {
+        window.removeResizeListener(this.getDOMNode(), this._handleResize);
+        window.removeEventListener('resize', this._handleResize);
+    },
 
-  render: function(){
-    var _this = this;
-    var width = this.state.fixed ?
-      this.state.width/this.props.children.length :
-      this.props.tabWidth;
-    var left = width * this.state.selectedIndex || 0;
-    var currentTemplate;
-    var tabs = React.Children.map(this.props.children, function(tab, index){
-      if(tab.type.displayName === "Tab"){
-        if(_this.state.selectedIndex === index) currentTemplate = tab.props.children;
-         return React.addons.cloneWithProps(tab, {
-            key: index,
-            selected: _this.state.selectedIndex === index,
-            tabIndex: index,
-            width: width,
-            handleTouchTap: _this.handleTouchTap
-          })
-      } else {
-        var type = tab.type.displayName || tab.type;
-        throw "Tabs only accepts Tab Components as children. Found " + type + " as child number " + (index + 1) + " of Tabs";
-      }
-    });
+    handleTouchTap: function(tabIndex, tab) {
+        if (this.props.onChange && this.state.selectedIndex !== tabIndex) {
+            this.props.onChange(tabIndex, tab);
+        }
 
-    return (
-      React.createElement("div", {className: "mui-tabs-container"}, 
+        this.setState({
+            selectedIndex: tabIndex
+        });
+        //default CB is _onActive. Can be updated in tab.jsx
+        if (tab.props.onActive) tab.props.onActive(tab);
+    },
+
+    render: function() {
+        var _this = this;
+        var width = this.state.fixed ?
+            this.state.width / this.props.children.length :
+            this.props.tabWidth;
+        var left = width * this.state.selectedIndex || 0;
+        var currentTemplate;
+        var tabs = React.Children.map(this.props.children, function(tab, index) {
+            if (tab.type.displayName === "Tab") {
+                if (_this.state.selectedIndex === index) currentTemplate = tab.props.children;
+                return React.addons.cloneWithProps(tab, {
+                    key: index,
+                    selected: _this.state.selectedIndex === index,
+                    tabIndex: index,
+                    width: width,
+                    handleTouchTap: _this.handleTouchTap
+                })
+            } else {
+                var type = tab.type.displayName || tab.type;
+                throw "Tabs only accepts Tab Components as children. Found " + type + " as child number " + (index + 1) + " of Tabs";
+            }
+        });
+
+        return (
+            React.createElement("div", {className: "mui-tabs-container"}, 
         React.createElement("div", {className: "mui-tab-item-container"}, 
           tabs
         ), 
@@ -82,9 +96,9 @@ var Tabs = React.createClass({displayName: "Tabs",
           currentTemplate
         )
       )
-    )
-  },
+        )
+    },
 
 });
 
-module.exports = Tabs;
+module.exports = Tabs;
diff --git a/package.json b/package.json
@@ -29,8 +29,9 @@
   },
   "homepage": "http://material-ui.com/",
   "dependencies": {
-    "react-draggable2": "git+https://github.com/motiz88/react-draggable",
-    "react-classset": "0.0.2"
+    "javascript-detect-element-resize": "git://github.com/sdecima/javascript-detect-element-resize",
+    "react-classset": "0.0.2",
+    "react-draggable2": "git+https://github.com/motiz88/react-draggable"
   },
   "peerDependencies": {
     "react": "0.12.x",

diff --git a/src/js/tabs/tabs.jsx b/src/js/tabs/tabs.jsx
@@ -5,75 +5,89 @@ var InkBar = require('../ink-bar');
 
 var Tabs = React.createClass({
 
-  propTypes: {
-    onActive: React.PropTypes.func
-  },
+    propTypes: {
+        onActive: React.PropTypes.func
+    },
 
-  getInitialState: function(){
-    return {
-      selectedIndex: 0
-    };
-  },
+    getInitialState: function() {
+        return {
+            selectedIndex: 0
+        };
+    },
 
-  getEvenWidth: function(){
-    return (
-      parseInt(window
-        .getComputedStyle(this.getDOMNode())
-        .getPropertyValue('width'), 10)
-    );
-  },
+    getEvenWidth: function() {
+        return (
+            parseInt(window
+                .getComputedStyle(this.getDOMNode())
+                .getPropertyValue('width'), 10)
+        );
+    },
 
-  componentDidMount: function(){
-    if(this.props.tabWidth) {
-      if(!(this.props.children.length * this.props.tabWidth > this.getEvenWidth())){
+    _handleResize: function() {
+        if (this.props.tabWidth) {
+            if (!(this.props.children.length * this.props.tabWidth > this.getEvenWidth())) {
+                this.setState({
+                    width: this.props.tabWidth,
+                    fixed: false
+                });
+                return;
+            }
+        }
         this.setState({
-          width: this.props.tabWidth,
-          fixed: false
+            width: this.getEvenWidth(),
+            fixed: true
         });
-        return;
-      }
-    }
-    this.setState({
-      width: this.getEvenWidth(),
-      fixed: true
-    });
-  },
+    },
 
-  handleTouchTap: function(tabIndex, tab){
-    if (this.props.onChange && this.state.selectedIndex !== tabIndex) {
-      this.props.onChange(tabIndex, tab);
-    }
+    componentDidMount: function() {
+        require('javascript-detect-element-resize');
+        window.addResizeListener(this.getDOMNode(), this._handleResize);
+        window.addEventListener('resize', this._handleResize);
+        this._handleResize();
+    },
 
-    this.setState({selectedIndex: tabIndex});
-    //default CB is _onActive. Can be updated in tab.jsx
-    if(tab.props.onActive) tab.props.onActive(tab);
-  },
+    componentWillUnmount: function() {
+        window.removeResizeListener(this.getDOMNode(), this._handleResize);
+        window.removeEventListener('resize', this._handleResize);
+    },
 
-  render: function(){
-    var _this = this;
-    var width = this.state.fixed ?
-      this.state.width/this.props.children.length :
-      this.props.tabWidth;
-    var left = width * this.state.selectedIndex || 0;
-    var currentTemplate;
-    var tabs = React.Children.map(this.props.children, function(tab, index){
-      if(tab.type.displayName === "Tab"){
-        if(_this.state.selectedIndex === index) currentTemplate = tab.props.children;
-         return React.addons.cloneWithProps(tab, {
-            key: index,
-            selected: _this.state.selectedIndex === index,
-            tabIndex: index,
-            width: width,
-            handleTouchTap: _this.handleTouchTap
-          })
-      } else {
-        var type = tab.type.displayName || tab.type;
-        throw "Tabs only accepts Tab Components as children. Found " + type + " as child number " + (index + 1) + " of Tabs";
-      }
-    });
+    handleTouchTap: function(tabIndex, tab) {
+        if (this.props.onChange && this.state.selectedIndex !== tabIndex) {
+            this.props.onChange(tabIndex, tab);
+        }
 
-    return (
-      <div className="mui-tabs-container">
+        this.setState({
+            selectedIndex: tabIndex
+        });
+        //default CB is _onActive. Can be updated in tab.jsx
+        if (tab.props.onActive) tab.props.onActive(tab);
+    },
+
+    render: function() {
+        var _this = this;
+        var width = this.state.fixed ?
+            this.state.width / this.props.children.length :
+            this.props.tabWidth;
+        var left = width * this.state.selectedIndex || 0;
+        var currentTemplate;
+        var tabs = React.Children.map(this.props.children, function(tab, index) {
+            if (tab.type.displayName === "Tab") {
+                if (_this.state.selectedIndex === index) currentTemplate = tab.props.children;
+                return React.addons.cloneWithProps(tab, {
+                    key: index,
+                    selected: _this.state.selectedIndex === index,
+                    tabIndex: index,
+                    width: width,
+                    handleTouchTap: _this.handleTouchTap
+                })
+            } else {
+                var type = tab.type.displayName || tab.type;
+                throw "Tabs only accepts Tab Components as children. Found " + type + " as child number " + (index + 1) + " of Tabs";
+            }
+        });
+
+        return (
+            <div className="mui-tabs-container">
         <div className="mui-tab-item-container">
           {tabs}
         </div>
@@ -82,9 +96,9 @@ var Tabs = React.createClass({
           {currentTemplate}
         </TabTemplate>
       </div>
-    )
-  },
+        )
+    },
 
 });
 
-module.exports = Tabs;
+module.exports = Tabs;