diff options
author | 2019-04-12 01:47:40 +0300 | |
---|---|---|
committer | 2023-01-13 10:37:54 +0300 | |
commit | 91bc66f026fe253785172edf2082134cae9b9e5f (patch) | |
tree | 1b51585252160ac39de8e4d84cbbea547ad158d6 | |
parent | 13653494f4a89d2a833b19ec0f3dc912eac96f25 (diff) |
Header using hooks
Transformation still broken
-rw-r--r-- | vnext/src/components/Header.js | 65 |
1 files changed, 30 insertions, 35 deletions
diff --git a/vnext/src/components/Header.js b/vnext/src/components/Header.js index 282724b8..0c01446b 100644 --- a/vnext/src/components/Header.js +++ b/vnext/src/components/Header.js @@ -1,34 +1,32 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import ReactDOM from 'react-dom'; import PropTypes from 'prop-types'; const elClassHidden = 'header--hidden'; const header = document.getElementById('header'); +header.removeChild(document.getElementById('header_wrapper')); -export default class Header extends React.Component { - constructor(props) { - super(props); - this.dHeight = 0; - this.wHeight = 0; - this.wScrollCurrent = 0; - this.wScrollBefore = 0; - this.wScrollDiff = 0; - } - componentDidMount() { - header.removeChild(document.getElementById('header_wrapper')); +export default function Header({ children }) { + let dHeight = 0; + let wHeight = 0; + let wScrollCurrent = 0; + let wScrollBefore = 0; + let wScrollDiff = 0; + + useEffect(() => { window.addEventListener('scroll', () => (!window.requestAnimationFrame) - ? this.throttle(250, this.updateHeader) - : window.requestAnimationFrame(this.updateHeader), false); - } - throttle(delay, fn) { + ? throttle(250, updateHeader) + : window.requestAnimationFrame(updateHeader), false); + }, []); + let throttle = (delay, fn) => { var last, deferTimer; - return function() { + return function () { var context = this, args = arguments, now = +new Date; if (last && now < last + delay) { clearTimeout(deferTimer); deferTimer = setTimeout( - function() { + function () { last = now; fn.apply(context, args); }, @@ -38,22 +36,22 @@ export default class Header extends React.Component { fn.apply(context, args); } }; - } - updateHeader = () => { - this.dHeight = document.body.offsetHeight; - this.wHeight = window.innerHeight; - this.wScrollCurrent = window.pageYOffset; - this.wScrollDiff = this.wScrollBefore - this.wScrollCurrent; + }; + let updateHeader = () => { + dHeight = document.body.offsetHeight; + wHeight = window.innerHeight; + wScrollCurrent = window.pageYOffset; + wScrollDiff = wScrollBefore - wScrollCurrent; - if (this.wScrollCurrent <= 0) { + if (wScrollCurrent <= 0) { // scrolled to the very top; element sticks to the top header.classList.remove(elClassHidden); - } else if (this.wScrollDiff > 0 && header.classList.contains(elClassHidden)) { + } else if (wScrollDiff > 0 && header.classList.contains(elClassHidden)) { // scrolled up; element slides in header.classList.remove(elClassHidden); - } else if (this.wScrollDiff < 0) { + } else if (wScrollDiff < 0) { // scrolled down - if (this.wScrollCurrent + this.wHeight >= this.dHeight && header.classList.contains(elClassHidden)) { + if (wScrollCurrent + wHeight >= dHeight && header.classList.contains(elClassHidden)) { // scrolled to the very bottom; element slides in header.classList.remove(elClassHidden); } else { @@ -61,14 +59,11 @@ export default class Header extends React.Component { header.classList.add(elClassHidden); } } - this.wScrollBefore = this.wScrollCurrent; - } - render() { - return ReactDOM.createPortal(this.props.children, header); - } + wScrollBefore = wScrollCurrent; + }; + return ReactDOM.createPortal(children, header); } Header.propTypes = { - children: PropTypes.node, - style: PropTypes.object + children: PropTypes.node }; |