Merge pull request #346 from gabdallah222/css-in-js

Transition from css to js for tabs/inkbar

src/js/ink-bar.jsx

@@ -1,25 +1,38 @@
 var React = require('react');
+var Transitions = require('./styles/mixins/transitions.js');
+var StylePropable = require('./mixins/style-propable.js');
+var Colors = require('./styles/colors.js')
+
 
 var InkBar = React.createClass({
 
   propTypes: {
     position: React.PropTypes.string
   },
 
+  mixins: [StylePropable],
+
   render: function() {
 
-    var styles = {
+    var styles = this.mergeAndPrefix({
       left: this.props.left,
-      width: this.props.width
-    }
+      width: this.props.width,
+      bottom: '0',
+      display: 'block',
+      backgroundColor: Colors.yellowA200,
+      height: '2px',
+      marginTop: '-2px',
+      position: 'relative',
+      transition: Transitions.easeOut('1s', 'left')
+    });
 
     return (
-      <div className='mui-ink-bar' style={styles}>
+      <div style={styles}>
         &nbsp;
       </div>
     );
   }
 
 });
 
-module.exports = InkBar;
+module.exports = InkBar;

src/js/tabs/tab.jsx

@@ -1,11 +1,11 @@
 var React = require('react');
-var Classable = require('../mixins/classable');
 var TabTemplate = require('./tabTemplate');
-
-
+var StylePropable = require('../mixins/style-propable.js');
+var Theme = require('../styles/theme.js');
+var Colors = require('../styles/colors.js')
 var Tab = React.createClass({
 
-  mixins: [Classable],
+  mixins: [StylePropable],
 
   propTypes: {
     handleTouchTap: React.PropTypes.func,
@@ -18,21 +18,29 @@ var Tab = React.createClass({
   },
 
   render: function(){
-    var styles = {
-      width: this.props.width
-    };
-
-    var classes = this.getClasses('mui-tab-item', {
-      'mui-tab-is-active': this.props.selected
+    var styles = this.mergeAndPrefix({
+      'display': 'inline-block',
+      'height': '100%',
+      'cursor': 'pointer',
+      'textAlign': 'center',
+      'lineHeight': '48px',
+      'color': Colors.white,
+      'opacity': '.6',
+      'fontSize': '14sp',
+      'fontWeight': '500',
+      'font': Theme.fontFamily,
+      'width': this.props.width
     });
 
+    if (this.props.selected) styles.opacity = '1';
+
     return (
-    <div className={classes} style={styles} onTouchTap={this.handleTouchTap} routeName={this.props.route}>
+    <div style={styles} onTouchTap={this.handleTouchTap} routeName={this.props.route}>
       {this.props.label}
     </div>
     )
   }
 
 });
 
-module.exports = Tab;
+module.exports = Tab;

src/js/tabs/tabTemplate.jsx

@@ -4,8 +4,15 @@ var TabTemplate = React.createClass({
 
   render: function(){
 
+    var styles = {
+      'display': 'block',
+      'width': '100%',
+      'position': 'relative',
+      'text-align': 'initial'
+    };
+
     return (
-      <div className='mui-tab-template'>
+      <div styles={styles}>
         {this.props.children}
       </div>
     );

src/js/tabs/tabs.jsx

@@ -2,41 +2,30 @@ var React = require('react/addons');
 var Tab = require('./tab');
 var TabTemplate = require('./tabTemplate');
 var InkBar = require('../ink-bar');
+var Transitions = require('../styles/mixins/transitions.js');
+var StylePropable = require('../mixins/style-propable.js');
+var Colors = require('../styles/colors.js')
+
 
 var Tabs = React.createClass({
 
+  mixins: [StylePropable],
+
   propTypes: {
-    onActive: React.PropTypes.func
+    onActive: React.PropTypes.func,
+    tabWidth: React.PropTypes.number
   },
 
   getInitialState: function(){
     return {
-      selectedIndex: 0
+      selectedIndex: 0,
+      fixed: true,
+      width: this.props.tabWidth || (100/this.props.children.length) + '%'
     };
   },
 
-  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())){
-        this.setState({
-          width: this.props.tabWidth,
-          fixed: false
-        });
-        return;
-      }
-    }
-    this.setState({
-      width: this.getEvenWidth(),
-      fixed: true
-    });
+  getLeft: function(){
+    return ((100/this.props.children.length) * this.state.selectedIndex) + '%'
   },
 
   handleTouchTap: function(tabIndex, tab){
@@ -47,11 +36,18 @@ var Tabs = React.createClass({
   },
 
   render: function(){
+    var tabItemContainerStyle = this.mergeStyles({
+      margin: '0',
+      padding: '0',
+      width: '100%',
+      height: '48px',
+      backgroundColor: Colors.cyan500,
+      whiteSpace: 'nowrap',
+      display: 'block'
+    }, this.props.tabItemContainerStyle);
     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 width = this.state.width;
+    var left = typeof(width) === 'number' ? width * this.state.selectedIndex : this.getLeft();
     var currentTemplate;
     var tabs = React.Children.map(this.props.children, function(tab, index){
       if(tab.type.displayName === "Tab"){
@@ -70,8 +66,8 @@ var Tabs = React.createClass({
     });
 
     return (
-      <div className="mui-tabs-container">
-        <div className="mui-tab-item-container">
+      <div style={{position: 'relative'}}>
+        <div style={tabItemContainerStyle}>
           {tabs}
         </div>
         <InkBar left={left} width={width}/>
@@ -84,4 +80,4 @@ var Tabs = React.createClass({
 
 });
 
-module.exports = Tabs;
+module.exports = Tabs;

src/less/components/components.less

@@ -9,13 +9,11 @@
 @import "flat-button.less";
 @import "floating-action-button.less";
 @import "icon-button.less";
-@import "ink-bar.less";
 @import "left-nav.less";
 @import "paper.less";
 @import "raised-button.less";
 @import "subheader.less";
 @import "table.less";
-@import "tabs.less";
 @import "text-field.less";
 @import "toolbar.less";
 @import "tooltip.less";