Skip to content

Commit

Permalink
Re-added icon prop for appbar as well as added customization
Browse files Browse the repository at this point in the history
  • Loading branch information
mmrtnz committed Feb 27, 2015
1 parent 1eb36f0 commit 7253a4c
Showing 1 changed file with 34 additions and 14 deletions.
48 changes: 34 additions & 14 deletions src/js/app-bar.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,12 @@ var AppBar = React.createClass({
propTypes: {
onMenuIconButtonTouchTap: React.PropTypes.func,
showMenuIconButton: React.PropTypes.bool,
iconClassNameLeft: React.PropTypes.string,
iconElementLeft: React.PropTypes.element,
iconElementRight: React.PropTypes.element,
title : React.PropTypes.node,
zDepth: React.PropTypes.number
zDepth: React.PropTypes.number,

},

getDefaultProps: function() {
Expand All @@ -23,14 +27,20 @@ var AppBar = React.createClass({
}
},

componentDidMount: function() {
var warning = 'Properties iconClassNameLeft and iconElementLeft cannot be simultaneously ' +
'defined. Please use one or the other.';
if (this.props.iconElementLeft && this.props.iconClassNameLeft) console.warn(warning);
},

render: function() {
var {
onTouchTap,
...other
} = this.props;

var classes = this.getClasses('mui-app-bar'),
title, menuIconButton;
title, menuElementLeft, menuElementRight;

if (this.props.title) {
// If the title is a string, wrap in an h1 tag.
Expand All @@ -40,24 +50,34 @@ var AppBar = React.createClass({
this.props.title;
}




if (this.props.showMenuIconButton) {
menuIconButton = (
<IconButton
className="mui-app-bar-navigation-icon-button"
onTouchTap={this._onMenuIconButtonTouchTap}>
<NavigationMenu/>
</IconButton>
);
if (this.props.iconElementLeft) {
menuElementLeft = (
<div className="mui-app-bar-navigation-icon-button">
{this.props.iconElementLeft}
</div>
);
} else {
var child = (this.props.iconClassNameLeft) ? '' : <NavigationMenu/>;
menuElementLeft = (
<IconButton
className="mui-app-bar-navigation-icon-button"
iconClassName={this.props.iconClassNameLeft}
onTouchTap={this._onMenuIconButtonTouchTap}>
{child}
</IconButton>
);
}
}

menuElementRight = (this.props.children) ? this.props.children :
(this.props.iconElementRight) ? this.props.iconElementRight : '';

return (
<Paper rounded={false} className={classes} zDepth={this.props.zDepth}>
{menuIconButton}
{menuElementLeft}
{title}
{this.props.children}
{menuElementRight}
</Paper>
);
},
Expand Down

1 comment on commit 7253a4c

@mmrtnz
Copy link
Contributor Author

@mmrtnz mmrtnz commented on 7253a4c Feb 27, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The icon prop for app-bar has been restored. Added properties were given to app-bar as well. They include the following:

  • iconClassNameLeft
    • Our original icon property. This is the iconClassName for the IconButton used on the left side of the app-bar.
  • iconElementLeft
    • Overwrites the IconButton on the left of the app-bar with the React Element passed here.
  • iconElementRight
    • The React Element placed on the right side of the app-bar (could use children as an alternative).

If neither of these props are specified, a default IconButton with the menu icon is generated on the left side of the app-bar.

Fixes #367

Please sign in to comment.