From 423da5baf0aeac7acffc83328a7c3731c2997b98 Mon Sep 17 00:00:00 2001 From: Vitaly Takmazov Date: Wed, 17 Apr 2019 17:18:50 +0300 Subject: Fix ESLint warnings react hooks linter fixes header! --- vnext/src/components/Header.js | 34 +++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) (limited to 'vnext/src/components/Header.js') diff --git a/vnext/src/components/Header.js b/vnext/src/components/Header.js index 0c01446b..48f89360 100644 --- a/vnext/src/components/Header.js +++ b/vnext/src/components/Header.js @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react'; +import React, { useEffect, useCallback, useRef } from 'react'; import ReactDOM from 'react-dom'; import PropTypes from 'prop-types'; @@ -8,17 +8,17 @@ const header = document.getElementById('header'); 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; + let dHeight = useRef(0); + let wHeight = useRef(0); + let wScrollCurrent = useRef(0); + let wScrollBefore = useRef(0); + let wScrollDiff = useRef(0); useEffect(() => { window.addEventListener('scroll', () => (!window.requestAnimationFrame) ? throttle(250, updateHeader) : window.requestAnimationFrame(updateHeader), false); - }, []); + }, [updateHeader]); let throttle = (delay, fn) => { var last, deferTimer; return function () { @@ -37,21 +37,21 @@ export default function Header({ children }) { } }; }; - let updateHeader = () => { - dHeight = document.body.offsetHeight; - wHeight = window.innerHeight; - wScrollCurrent = window.pageYOffset; - wScrollDiff = wScrollBefore - wScrollCurrent; + let updateHeader = useCallback(() => { + dHeight.current = document.body.offsetHeight; + wHeight.current = window.innerHeight; + wScrollCurrent.current = window.pageYOffset; + wScrollDiff.current = wScrollBefore.current - wScrollCurrent.current; - if (wScrollCurrent <= 0) { + if (wScrollCurrent.current <= 0) { // scrolled to the very top; element sticks to the top header.classList.remove(elClassHidden); } else if (wScrollDiff > 0 && header.classList.contains(elClassHidden)) { // scrolled up; element slides in header.classList.remove(elClassHidden); - } else if (wScrollDiff < 0) { + } else if (wScrollDiff.current < 0) { // scrolled down - if (wScrollCurrent + wHeight >= dHeight && header.classList.contains(elClassHidden)) { + if (wScrollCurrent.current + wHeight.current >= dHeight.current && header.classList.contains(elClassHidden)) { // scrolled to the very bottom; element slides in header.classList.remove(elClassHidden); } else { @@ -59,8 +59,8 @@ export default function Header({ children }) { header.classList.add(elClassHidden); } } - wScrollBefore = wScrollCurrent; - }; + wScrollBefore.current = wScrollCurrent.current; + }, []); return ReactDOM.createPortal(children, header); } -- cgit v1.2.3