[app-bar] allow to add children to app-bar, tabs for instance

tingi · May 31, 2015 · ef2012c · ef2012c
1 parent 3fbe820
commit ef2012c
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 14 deletions.
diff --git a/src/app-bar.jsx b/src/app-bar.jsx
@@ -61,7 +61,7 @@ var AppBar = React.createClass({
         margin: 0,
         paddingTop: 0,
         letterSpacing: 0,
-        fontSize: '24px',
+        fontSize: 24,
         fontWeight: Typography.fontWeightNormal,
         color: themeVariables.textColor,
         lineHeight: themeVariables.height + 'px'
@@ -85,7 +85,9 @@ var AppBar = React.createClass({
   render: function() {
     var styles = this.getStyles();
 
-    var title, menuElementLeft, menuElementRight;
+    var title;
+    var menuElementLeft;
+    var menuElementRight;
     var iconRightStyle = this.mergeAndPrefix(styles.iconButton.style, {
       float: 'right',
       marginRight: -16,
@@ -147,16 +149,21 @@ var AppBar = React.createClass({
           {menuElementLeft}
           {title}
           {menuElementRight}
+          {this.props.children}
       </Paper>
     );
   },
 
-  _onLeftIconButtonTouchTap: function(e) {
-    if (this.props.onLeftIconButtonTouchTap) this.props.onLeftIconButtonTouchTap(e);
+  _onLeftIconButtonTouchTap: function(event) {
+    if (this.props.onLeftIconButtonTouchTap) {
+      this.props.onLeftIconButtonTouchTap(event);
+    }
   },
 
-  _onRightIconButtonTouchTap: function(e) {
-    if (this.props.onRightIconButtonTouchTap) this.props.onRightIconButtonTouchTap(e);
+  _onRightIconButtonTouchTap: function(event) {
+    if (this.props.onRightIconButtonTouchTap) {
+      this.props.onRightIconButtonTouchTap(event);
+    }
   }
 
 });

diff --git a/src/app-canvas.jsx b/src/app-canvas.jsx
@@ -1,7 +1,7 @@
 var React = require('react');
 
 var AppCanvas = React.createClass({
-  
+
   contextTypes: {
     muiTheme: React.PropTypes.object
   },
@@ -18,19 +18,18 @@ var AppCanvas = React.createClass({
       WebkitFontSmoothing: 'antialiased'
     };
 
-    var stylesAppBar = {
-      position: 'fixed', 
-      height: this.context.muiTheme.component.appBar.height
-    };
-
     var newChildren = React.Children.map(this.props.children, function(currentChild) {
       if (!currentChild) { // If undefined, skip it
         return;
       }
 
       switch (currentChild.type.displayName) {
-        case 'AppBar' : 
-          return React.cloneElement(currentChild, {style: stylesAppBar});
+        case 'AppBar' :
+          return React.cloneElement(currentChild, {
+            style: {
+              position: 'fixed',
+            }
+          });
         default:
           return currentChild;
       }