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' + ?