diff options
Diffstat (limited to 'vnext/src/components/Header.js')
-rw-r--r-- | vnext/src/components/Header.js | 27 |
1 files changed, 16 insertions, 11 deletions
diff --git a/vnext/src/components/Header.js b/vnext/src/components/Header.js index fd1c1705..43935f4c 100644 --- a/vnext/src/components/Header.js +++ b/vnext/src/components/Header.js @@ -1,6 +1,7 @@ import React from 'react'; +import PropTypes from 'prop-types'; -const elClassHidden = 'header--hidden' +const elClassHidden = 'header--hidden'; const elClassBackground = 'header--background'; export default class Header extends React.Component { @@ -11,7 +12,7 @@ export default class Header extends React.Component { this.wScrollCurrent = 0; this.wScrollBefore = 0; this.wScrollDiff = 0; - this.header = React.createRef() + this.header = React.createRef(); } componentDidMount() { const header = this.header.current; @@ -23,21 +24,21 @@ export default class Header extends React.Component { if (this.wScrollCurrent <= 0) { // scrolled to the very top; element sticks to the top - header.classList.remove(elClassHidden) - header.classList.remove(elClassBackground) + header.classList.remove(elClassHidden); + header.classList.remove(elClassBackground); } else if (this.wScrollDiff > 0 && header.classList.contains(elClassHidden)) { // scrolled up; element slides in - header.classList.remove(elClassHidden) - header.classList.add(elClassBackground) + header.classList.remove(elClassHidden); + header.classList.add(elClassBackground); } else if (this.wScrollDiff < 0) { // scrolled down if (this.wScrollCurrent + this.wHeight >= this.dHeight && header.classList.contains(elClassHidden)) { // scrolled to the very bottom; element slides in - header.classList.remove(elClassHidden) - header.classList.add(elClassBackground) + header.classList.remove(elClassHidden); + header.classList.add(elClassBackground); } else { // scrolled down; element slides out - header.classList.add(elClassHidden) + header.classList.add(elClassHidden); } } this.wScrollBefore = this.wScrollCurrent; @@ -60,8 +61,12 @@ export default class Header extends React.Component { fn.apply(context, args); } }; - }; + } render() { return (<header ref={this.header}>{this.props.children}</header>); } -}
\ No newline at end of file +} + +Header.propTypes = { + children: PropTypes.node +}; |