aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorGravatar Vitaly Takmazov2019-04-12 01:47:40 +0300
committerGravatar Vitaly Takmazov2023-01-13 10:37:54 +0300
commit91bc66f026fe253785172edf2082134cae9b9e5f (patch)
tree1b51585252160ac39de8e4d84cbbea547ad158d6
parent13653494f4a89d2a833b19ec0f3dc912eac96f25 (diff)
Header using hooks
Transformation still broken
-rw-r--r--vnext/src/components/Header.js65
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
};