Skip to content

Commit

Permalink
fix: Menu hide logic (#156)
Browse files Browse the repository at this point in the history
  • Loading branch information
RabbitDoge authored Jan 28, 2021
1 parent 34a5f45 commit 2bda8a0
Show file tree
Hide file tree
Showing 3 changed files with 31 additions and 11 deletions.
12 changes: 11 additions & 1 deletion .eslintrc
Original file line number Diff line number Diff line change
@@ -1,6 +1,16 @@
{
"extends": "@pancakeswap-libs/eslint-config-pancake",
"rules": {
"import/no-extraneous-dependencies": ["error", {"devDependencies": ["src/setupTests.[jt]s?(x)","src/testHelpers.[jt]s?(x)", "**/*.test.[jt]s?(x)", "rollup.config.js"]}]
"import/no-extraneous-dependencies": [
"error",
{
"devDependencies": [
"src/setupTests.[jt]s?(x)",
"src/testHelpers.[jt]s?(x)",
"**/*.test.[jt]s?(x)",
"rollup.config.js"
]
}
]
}
}
3 changes: 2 additions & 1 deletion src/components/Radio/index.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@ export const Default: React.FC = () => {
const [radioSm, setRadioSm] = useState("one");

const handleChange = (evt) => {
console.log("fired");
// eslint-disable-next-line
console.info("fired");
const { value } = evt.target;
setRadio(value);
};
Expand Down
27 changes: 18 additions & 9 deletions src/widgets/Menu/Menu.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useState, useEffect, useRef } from "react";
import styled from "styled-components";
import debounce from "lodash/debounce";
import throttle from "lodash/throttle";
import Overlay from "../../components/Overlay/Overlay";
import { useMatchBreakpoints } from "../../hooks";
import Logo from "./Logo";
Expand Down Expand Up @@ -78,20 +78,29 @@ const Menu: React.FC<NavProps> = ({
useEffect(() => {
const handleScroll = () => {
const currentOffset = window.pageYOffset;
if (currentOffset < refPrevOffset.current) {
// Has scroll up
const isBottomOfPage = window.document.body.clientHeight === currentOffset + window.innerHeight;
const isTopOfPage = currentOffset === 0;
// Always show the menu when user reach the top
if (isTopOfPage) {
setShowMenu(true);
} else {
// Has scroll down
setShowMenu(false);
}
// Avoid triggering anything at the bottom because of layout shift
else if (!isBottomOfPage) {
if (currentOffset < refPrevOffset.current) {
// Has scroll up
setShowMenu(true);
} else {
// Has scroll down
setShowMenu(false);
}
}
refPrevOffset.current = currentOffset;
};
const debouncedHandleScroll = debounce(handleScroll, 300, { leading: true, trailing: true });
const throttledHandleScroll = throttle(handleScroll, 200);

window.addEventListener("scroll", debouncedHandleScroll);
window.addEventListener("scroll", throttledHandleScroll);
return () => {
window.removeEventListener("scroll", debouncedHandleScroll);
window.removeEventListener("scroll", throttledHandleScroll);
};
}, []);

Expand Down

0 comments on commit 2bda8a0

Please sign in to comment.