Header using hooks

Transformation still broken

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
 };