2017-04-17 17:14:17 +03:00
|
|
|
import React from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
2017-04-06 11:28:44 +03:00
|
|
|
import cn from 'classnames';
|
2016-05-15 14:36:13 +03:00
|
|
|
import { themr } from 'react-css-themr';
|
2017-01-26 20:05:32 +03:00
|
|
|
import { APP_BAR } from '../identifiers';
|
|
|
|
import InjectIconButton from '../button/IconButton';
|
2015-10-28 03:49:22 +03:00
|
|
|
|
2016-09-09 09:40:22 +03:00
|
|
|
const factory = (IconButton) => {
|
2016-08-25 10:14:35 +03:00
|
|
|
class AppBar extends React.Component {
|
|
|
|
static propTypes = {
|
|
|
|
children: PropTypes.node,
|
|
|
|
className: PropTypes.string,
|
|
|
|
fixed: PropTypes.bool,
|
|
|
|
flat: PropTypes.bool,
|
|
|
|
leftIcon: PropTypes.oneOfType([
|
|
|
|
PropTypes.string,
|
2017-01-26 20:05:32 +03:00
|
|
|
PropTypes.element,
|
2016-08-25 10:14:35 +03:00
|
|
|
]),
|
|
|
|
onLeftIconClick: PropTypes.func,
|
|
|
|
onRightIconClick: PropTypes.func,
|
|
|
|
rightIcon: PropTypes.oneOfType([
|
|
|
|
PropTypes.string,
|
2017-01-26 20:05:32 +03:00
|
|
|
PropTypes.element,
|
2016-08-25 10:14:35 +03:00
|
|
|
]),
|
|
|
|
scrollHide: PropTypes.bool,
|
|
|
|
theme: PropTypes.shape({
|
|
|
|
appBar: PropTypes.string,
|
2017-01-05 04:42:18 +03:00
|
|
|
inner: PropTypes.string,
|
2016-08-25 10:14:35 +03:00
|
|
|
fixed: PropTypes.string,
|
|
|
|
flat: PropTypes.string,
|
|
|
|
leftIcon: PropTypes.string,
|
|
|
|
rightIcon: PropTypes.string,
|
2016-12-19 22:39:07 +03:00
|
|
|
scrollHide: PropTypes.string,
|
2017-01-26 20:05:32 +03:00
|
|
|
title: PropTypes.string,
|
2016-08-25 10:14:35 +03:00
|
|
|
}),
|
2017-04-05 00:54:04 +03:00
|
|
|
title: PropTypes.oneOfType([
|
|
|
|
PropTypes.string,
|
|
|
|
PropTypes.element,
|
2017-04-05 00:55:27 +03:00
|
|
|
]),
|
2016-08-25 10:14:35 +03:00
|
|
|
};
|
2015-10-28 03:49:22 +03:00
|
|
|
|
2016-08-25 10:14:35 +03:00
|
|
|
static defaultProps = {
|
|
|
|
className: '',
|
|
|
|
fixed: false,
|
|
|
|
flat: false,
|
2017-01-26 20:05:32 +03:00
|
|
|
scrollHide: false,
|
2016-08-25 10:14:35 +03:00
|
|
|
};
|
2015-10-28 03:49:22 +03:00
|
|
|
|
2017-01-26 20:05:32 +03:00
|
|
|
state = { hidden: false, height: 0 };
|
2016-08-25 10:14:35 +03:00
|
|
|
|
2017-01-26 20:05:32 +03:00
|
|
|
componentDidMount() {
|
2016-10-07 15:40:28 +03:00
|
|
|
if (this.props.scrollHide) {
|
|
|
|
this.initializeScroll();
|
|
|
|
}
|
2017-04-05 00:55:27 +03:00
|
|
|
}
|
2016-10-07 15:40:28 +03:00
|
|
|
|
2017-01-26 20:05:32 +03:00
|
|
|
componentWillReceiveProps(nextProps) {
|
2016-10-07 15:40:28 +03:00
|
|
|
if (!this.props.scrollHide && nextProps.scrollHide) {
|
|
|
|
this.initializeScroll();
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.props.scrollHide && !nextProps.scrollHide) {
|
|
|
|
this.endScroll();
|
|
|
|
}
|
2017-04-05 00:55:27 +03:00
|
|
|
}
|
2016-08-25 10:14:35 +03:00
|
|
|
|
2017-01-26 20:05:32 +03:00
|
|
|
componentWillUnmount() {
|
2016-10-07 15:40:28 +03:00
|
|
|
if (this.props.scrollHide) {
|
|
|
|
this.endScroll();
|
|
|
|
}
|
2017-04-05 00:55:27 +03:00
|
|
|
}
|
2016-08-25 10:14:35 +03:00
|
|
|
|
2017-04-05 00:55:27 +03:00
|
|
|
initializeScroll() {
|
2016-10-07 15:40:28 +03:00
|
|
|
window.addEventListener('scroll', this.handleScroll);
|
|
|
|
const { height } = this.rootNode.getBoundingClientRect();
|
|
|
|
this.curScroll = window.scrollY;
|
2017-01-26 20:05:32 +03:00
|
|
|
this.setState({ height });
|
2017-04-05 00:55:27 +03:00
|
|
|
}
|
2016-10-07 15:40:28 +03:00
|
|
|
|
2017-04-05 00:55:27 +03:00
|
|
|
endScroll() {
|
2016-10-07 15:40:28 +03:00
|
|
|
window.removeEventListener('scroll', this.handleScroll);
|
2017-04-05 00:55:27 +03:00
|
|
|
}
|
2016-10-07 15:40:28 +03:00
|
|
|
|
2017-04-06 11:28:44 +03:00
|
|
|
handleScroll = () => {
|
2016-08-25 10:14:35 +03:00
|
|
|
const scrollDiff = this.curScroll - window.scrollY;
|
2017-01-26 20:05:32 +03:00
|
|
|
const hidden = scrollDiff < 0
|
|
|
|
&& window.scrollY !== undefined
|
|
|
|
&& window.scrollY > this.state.height;
|
|
|
|
this.setState({ hidden });
|
2016-08-25 10:14:35 +03:00
|
|
|
this.curScroll = window.scrollY;
|
2017-04-06 11:28:44 +03:00
|
|
|
};
|
2016-08-25 10:14:35 +03:00
|
|
|
|
2017-01-26 20:05:32 +03:00
|
|
|
render() {
|
|
|
|
const {
|
|
|
|
children,
|
|
|
|
leftIcon,
|
|
|
|
onLeftIconClick,
|
|
|
|
onRightIconClick,
|
|
|
|
rightIcon,
|
|
|
|
theme,
|
|
|
|
title,
|
2017-04-06 11:28:44 +03:00
|
|
|
} = this.props;
|
|
|
|
|
|
|
|
const className = cn(theme.appBar, {
|
2016-08-25 10:14:35 +03:00
|
|
|
[theme.fixed]: this.props.fixed,
|
|
|
|
[theme.flat]: this.props.flat,
|
2017-01-26 20:05:32 +03:00
|
|
|
[theme.scrollHide]: this.state.hidden,
|
2016-08-25 10:14:35 +03:00
|
|
|
}, this.props.className);
|
2016-09-03 13:23:22 +03:00
|
|
|
|
2017-04-06 11:28:44 +03:00
|
|
|
const renderedTitle = typeof title === 'string'
|
|
|
|
? <h1 className={cn(theme.title)}>{title}</h1>
|
|
|
|
: title;
|
|
|
|
|
|
|
|
const renderedLeftIcon = leftIcon && (
|
|
|
|
<IconButton
|
|
|
|
inverse
|
|
|
|
className={cn(theme.leftIcon)}
|
|
|
|
onClick={onLeftIconClick}
|
|
|
|
icon={leftIcon}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
|
|
|
|
const renderedRightIcon = rightIcon && (
|
|
|
|
<IconButton
|
|
|
|
inverse
|
|
|
|
className={cn(theme.rightIcon)}
|
|
|
|
onClick={onRightIconClick}
|
|
|
|
icon={rightIcon}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
|
2016-08-25 10:14:35 +03:00
|
|
|
return (
|
2016-10-07 15:40:28 +03:00
|
|
|
<header
|
|
|
|
className={className}
|
2017-01-26 20:05:32 +03:00
|
|
|
data-react-toolbox="app-bar"
|
|
|
|
ref={(node) => { this.rootNode = node; }}
|
2016-10-07 15:40:28 +03:00
|
|
|
>
|
2017-01-05 04:42:18 +03:00
|
|
|
<div className={theme.inner}>
|
2017-04-06 11:28:44 +03:00
|
|
|
{renderedLeftIcon}
|
|
|
|
{renderedTitle}
|
2017-01-05 04:42:18 +03:00
|
|
|
{children}
|
2017-04-06 11:28:44 +03:00
|
|
|
{renderedRightIcon}
|
2017-01-05 04:42:18 +03:00
|
|
|
</div>
|
2016-08-25 10:14:35 +03:00
|
|
|
</header>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
2015-10-28 03:49:22 +03:00
|
|
|
|
2016-09-03 13:23:22 +03:00
|
|
|
return AppBar;
|
2015-10-28 03:49:22 +03:00
|
|
|
};
|
|
|
|
|
2016-09-09 09:40:22 +03:00
|
|
|
const AppBar = factory(InjectIconButton);
|
|
|
|
export default themr(APP_BAR)(AppBar);
|
2016-09-03 13:23:22 +03:00
|
|
|
export { factory as appBarFactory };
|
2016-05-28 18:00:42 +03:00
|
|
|
export { AppBar };
|