Update AppBar.js
parent
cd3fefc838
commit
4ef719ad32
|
@ -35,7 +35,7 @@ const factory = (IconButton) => {
|
|||
title: PropTypes.oneOfType([
|
||||
PropTypes.string,
|
||||
PropTypes.element,
|
||||
])
|
||||
]),
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
|
@ -51,7 +51,7 @@ const factory = (IconButton) => {
|
|||
if (this.props.scrollHide) {
|
||||
this.initializeScroll();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if (!this.props.scrollHide && nextProps.scrollHide) {
|
||||
|
@ -61,44 +61,46 @@ const factory = (IconButton) => {
|
|||
if (this.props.scrollHide && !nextProps.scrollHide) {
|
||||
this.endScroll();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
if (this.props.scrollHide) {
|
||||
this.endScroll();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
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 = () => {
|
||||
handleScroll() {
|
||||
const scrollDiff = this.curScroll - window.scrollY;
|
||||
const hidden = scrollDiff < 0
|
||||
&& window.scrollY !== undefined
|
||||
&& window.scrollY > this.state.height;
|
||||
this.setState({ hidden });
|
||||
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>
|
||||
)
|
||||
};
|
||||
}
|
||||
|
||||
renderTitle() {
|
||||
const { props } = this;
|
||||
const { title, theme } = props;
|
||||
if (!title) return undefined;
|
||||
|
||||
return typeof (title) === 'string'
|
||||
? <h1 className={classnames(theme.title)}>{title}</h1>
|
||||
: React.createElement(title, props);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { props, renderTitle } = this;
|
||||
const {
|
||||
children,
|
||||
leftIcon,
|
||||
|
@ -107,7 +109,7 @@ const factory = (IconButton) => {
|
|||
rightIcon,
|
||||
theme,
|
||||
title,
|
||||
} = this.props;
|
||||
} = props;
|
||||
const className = classnames(theme.appBar, {
|
||||
[theme.fixed]: this.props.fixed,
|
||||
[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`.|
|
||||
| `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.|
|
||||
|
|
Loading…
Reference in New Issue