diff --git a/components/app_bar/AppBar.js b/components/app_bar/AppBar.js index 6e6aec44..85e90c6e 100644 --- a/components/app_bar/AppBar.js +++ b/components/app_bar/AppBar.js @@ -1,5 +1,5 @@ import React, { PropTypes } from 'react'; -import classnames from 'classnames'; +import cn from 'classnames'; import { themr } from 'react-css-themr'; import { APP_BAR } from '../identifiers'; import InjectIconButton from '../button/IconButton'; @@ -32,7 +32,10 @@ const factory = (IconButton) => { scrollHide: PropTypes.string, title: PropTypes.string, }), - title: PropTypes.node, + title: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.element, + ]), }; static defaultProps = { @@ -66,16 +69,16 @@ const factory = (IconButton) => { } } - initializeScroll = () => { + initializeScroll() { window.addEventListener('scroll', this.handleScroll); const { height } = this.rootNode.getBoundingClientRect(); this.curScroll = window.scrollY; this.setState({ height }); - }; + } - endScroll = () => { + endScroll() { window.removeEventListener('scroll', this.handleScroll); - }; + } handleScroll = () => { const scrollDiff = this.curScroll - window.scrollY; @@ -96,12 +99,35 @@ const factory = (IconButton) => { theme, title, } = this.props; - const className = classnames(theme.appBar, { + + const className = cn(theme.appBar, { [theme.fixed]: this.props.fixed, [theme.flat]: this.props.flat, [theme.scrollHide]: this.state.hidden, }, this.props.className); + const renderedTitle = typeof title === 'string' + ?

{title}

+ : title; + + const renderedLeftIcon = leftIcon && ( + + ); + + const renderedRightIcon = rightIcon && ( + + ); + return (
{ ref={(node) => { this.rootNode = node; }} >
- {leftIcon && - } - {title &&

{title}

} + {renderedLeftIcon} + {renderedTitle} {children} - {rightIcon && - } + {renderedRightIcon}
); diff --git a/components/app_bar/readme.md b/components/app_bar/readme.md index 0ecf083e..1070cfe3 100644 --- a/components/app_bar/readme.md +++ b/components/app_bar/readme.md @@ -36,7 +36,7 @@ The `AppBar` component provides properties for the common use cases of `title`, | `fixed` | `Bool` | `false` | Determine if the bar should have position `fixed` or `relative`.| | `flat` | `Bool` | `false` | If true, the AppBar doesn't show a shadow.| | `theme` | `Object` | `null` | Classnames object defining the component style.| -| `title` | `Element` | `null` | Title used for the appbar.| +| `title` | `String|Element` | `null` | Title used for the appbar.| | `leftIcon` | `String|Element` | `null` | Left icon.| | `onLeftIconClick` | `Function` | `null` | Called on left icon click event.| | `rightIcon` | `String|Element` | `null` | Right icon.|