Add possibility to render component as AppBar title
parent
3dde4c4cda
commit
cd3fefc838
|
@ -32,7 +32,10 @@ const factory = (IconButton) => {
|
||||||
scrollHide: PropTypes.string,
|
scrollHide: PropTypes.string,
|
||||||
title: PropTypes.string,
|
title: PropTypes.string,
|
||||||
}),
|
}),
|
||||||
title: PropTypes.node,
|
title: PropTypes.oneOfType([
|
||||||
|
PropTypes.string,
|
||||||
|
PropTypes.element,
|
||||||
|
])
|
||||||
};
|
};
|
||||||
|
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
|
@ -48,7 +51,7 @@ const factory = (IconButton) => {
|
||||||
if (this.props.scrollHide) {
|
if (this.props.scrollHide) {
|
||||||
this.initializeScroll();
|
this.initializeScroll();
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
componentWillReceiveProps(nextProps) {
|
componentWillReceiveProps(nextProps) {
|
||||||
if (!this.props.scrollHide && nextProps.scrollHide) {
|
if (!this.props.scrollHide && nextProps.scrollHide) {
|
||||||
|
@ -58,13 +61,13 @@ const factory = (IconButton) => {
|
||||||
if (this.props.scrollHide && !nextProps.scrollHide) {
|
if (this.props.scrollHide && !nextProps.scrollHide) {
|
||||||
this.endScroll();
|
this.endScroll();
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
componentWillUnmount() {
|
componentWillUnmount() {
|
||||||
if (this.props.scrollHide) {
|
if (this.props.scrollHide) {
|
||||||
this.endScroll();
|
this.endScroll();
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
initializeScroll = () => {
|
initializeScroll = () => {
|
||||||
window.addEventListener('scroll', this.handleScroll);
|
window.addEventListener('scroll', this.handleScroll);
|
||||||
|
@ -85,6 +88,15 @@ const factory = (IconButton) => {
|
||||||
this.setState({ hidden });
|
this.setState({ hidden });
|
||||||
this.curScroll = window.scrollY;
|
this.curScroll = window.scrollY;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
renderTitle = () => {
|
||||||
|
const {title} = this.props
|
||||||
|
if (!title) return;
|
||||||
|
if (typeof(title) === 'function') return title;
|
||||||
|
return (
|
||||||
|
<h1 className={classnames(theme.title)}>{title}</h1>
|
||||||
|
)
|
||||||
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const {
|
const {
|
||||||
|
@ -116,7 +128,7 @@ const factory = (IconButton) => {
|
||||||
icon={leftIcon}
|
icon={leftIcon}
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
{title && <h1 className={classnames(theme.title)}>{title}</h1>}
|
{renderTitle(title)}
|
||||||
{children}
|
{children}
|
||||||
{rightIcon && <IconButton
|
{rightIcon && <IconButton
|
||||||
inverse
|
inverse
|
||||||
|
|
Loading…
Reference in New Issue