Update AppBar.js
parent
cd3fefc838
commit
4ef719ad32
|
@ -35,7 +35,7 @@ const factory = (IconButton) => {
|
||||||
title: PropTypes.oneOfType([
|
title: PropTypes.oneOfType([
|
||||||
PropTypes.string,
|
PropTypes.string,
|
||||||
PropTypes.element,
|
PropTypes.element,
|
||||||
])
|
]),
|
||||||
};
|
};
|
||||||
|
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
|
@ -51,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) {
|
||||||
|
@ -61,44 +61,46 @@ 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);
|
||||||
const { height } = this.rootNode.getBoundingClientRect();
|
const { height } = this.rootNode.getBoundingClientRect();
|
||||||
this.curScroll = window.scrollY;
|
this.curScroll = window.scrollY;
|
||||||
this.setState({ height });
|
this.setState({ height });
|
||||||
};
|
}
|
||||||
|
|
||||||
endScroll = () => {
|
endScroll() {
|
||||||
window.removeEventListener('scroll', this.handleScroll);
|
window.removeEventListener('scroll', this.handleScroll);
|
||||||
};
|
}
|
||||||
|
|
||||||
handleScroll = () => {
|
handleScroll() {
|
||||||
const scrollDiff = this.curScroll - window.scrollY;
|
const scrollDiff = this.curScroll - window.scrollY;
|
||||||
const hidden = scrollDiff < 0
|
const hidden = scrollDiff < 0
|
||||||
&& window.scrollY !== undefined
|
&& window.scrollY !== undefined
|
||||||
&& window.scrollY > this.state.height;
|
&& window.scrollY > this.state.height;
|
||||||
this.setState({ hidden });
|
this.setState({ hidden });
|
||||||
this.curScroll = window.scrollY;
|
this.curScroll = window.scrollY;
|
||||||
};
|
}
|
||||||
|
|
||||||
renderTitle = () => {
|
renderTitle() {
|
||||||
const {title} = this.props
|
const { props } = this;
|
||||||
if (!title) return;
|
const { title, theme } = props;
|
||||||
if (typeof(title) === 'function') return title;
|
if (!title) return undefined;
|
||||||
return (
|
|
||||||
<h1 className={classnames(theme.title)}>{title}</h1>
|
return typeof (title) === 'string'
|
||||||
)
|
? <h1 className={classnames(theme.title)}>{title}</h1>
|
||||||
};
|
: React.createElement(title, props);
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
const { props, renderTitle } = this;
|
||||||
const {
|
const {
|
||||||
children,
|
children,
|
||||||
leftIcon,
|
leftIcon,
|
||||||
|
@ -107,7 +109,7 @@ const factory = (IconButton) => {
|
||||||
rightIcon,
|
rightIcon,
|
||||||
theme,
|
theme,
|
||||||
title,
|
title,
|
||||||
} = this.props;
|
} = props;
|
||||||
const className = classnames(theme.appBar, {
|
const className = classnames(theme.appBar, {
|
||||||
[theme.fixed]: this.props.fixed,
|
[theme.fixed]: this.props.fixed,
|
||||||
[theme.flat]: this.props.flat,
|
[theme.flat]: this.props.flat,
|
||||||
|
|
|
@ -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`.|
|
| `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.|
|
| `flat` | `Bool` | `false` | If true, the AppBar doesn't show a shadow.|
|
||||||
| `theme` | `Object` | `null` | Classnames object defining the component style.|
|
| `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.|
|
| `leftIcon` | `String|Element` | `null` | Left icon.|
|
||||||
| `onLeftIconClick` | `Function` | `null` | Called on left icon click event.|
|
| `onLeftIconClick` | `Function` | `null` | Called on left icon click event.|
|
||||||
| `rightIcon` | `String|Element` | `null` | Right icon.|
|
| `rightIcon` | `String|Element` | `null` | Right icon.|
|
||||||
|
|
Loading…
Reference in New Issue