Mirrors/tachiyomi-extensions-inspector
2
0
Fork 0
mirror of https://github.com/tachiyomiorg/tachiyomi-extensions-inspector.git synced 2024-12-25 00:01:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

drawer hide on click outside of it

Browse Source
This commit is contained in:
Aria Moradi 2021-03-23 04:28:23 +04:30
parent bf908c4d17
commit 85ec2ed367
1 changed files with 87 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
webUI/react/src/components/ReaderNavBar.tsx
View File

@ -24,6 +24,7 @@ import ListItemText from '@material-ui/core/ListItemText';
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
import Collapse from '@material-ui/core/Collapse'; import Collapse from '@material-ui/core/Collapse';
import Button from '@material-ui/core/Button'; import Button from '@material-ui/core/Button';
import ClickAwayListener from '@material-ui/core/ClickAwayListener';
import DarkTheme from '../context/DarkTheme'; import DarkTheme from '../context/DarkTheme';
import NavBarContext from '../context/NavbarContext'; import NavBarContext from '../context/NavbarContext';
@ -162,6 +163,7 @@ export default function ReaderNavBar(props: IProps) {
} = props; } = props;
const [drawerOpen, setDrawerOpen] = useState(false || settings.staticNav); const [drawerOpen, setDrawerOpen] = useState(false || settings.staticNav);
const [drawerVisible, setDrawerVisible] = useState(false || settings.staticNav);
const [hideOpenButton, setHideOpenButton] = useState(false); const [hideOpenButton, setHideOpenButton] = useState(false);
const [prevScrollPos, setPrevScrollPos] = useState(0); const [prevScrollPos, setPrevScrollPos] = useState(0);
const [settingsCollapseOpen, setSettingsCollapseOpen] = useState(false); const [settingsCollapseOpen, setSettingsCollapseOpen] = useState(false);
@ -180,14 +182,6 @@ export default function ReaderNavBar(props: IProps) {
} }
}; };
useEffect(() => {
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
};
}, [handleScroll]);// handleScroll changes on every render
useEffect(() => { useEffect(() => {
window.addEventListener('scroll', handleScroll); window.addEventListener('scroll', handleScroll);
@ -200,12 +194,23 @@ export default function ReaderNavBar(props: IProps) {
return () => { return () => {
rootEl.classList.remove(classes.AppRootElment); rootEl.classList.remove(classes.AppRootElment);
mainContainer.classList.remove(classes.AppMainContainer); mainContainer.classList.remove(classes.AppMainContainer);
window.removeEventListener('scroll', handleScroll);
}; };
}, [handleScroll]);// handleScroll changes on every render }, [handleScroll]);// handleScroll changes on every render
return ( return (
<> <>
<Slide direction="right" in={drawerOpen} timeout={200} appear={false}> <ClickAwayListener onClickAway={() => (drawerVisible && setDrawerOpen(false))}>
<Slide
direction="right"
in={drawerOpen}
timeout={200}
appear={false}
mountOnEnter
unmountOnExit
onEntered={() => setDrawerVisible(true)}
onExited={() => setDrawerVisible(false)}
>
<div className={classes.root}> <div className={classes.root}>
<header> <header>
<IconButton <IconButton
@ -321,6 +326,7 @@ export default function ReaderNavBar(props: IProps) {
</div> </div>
</div> </div>
</Slide> </Slide>
</ClickAwayListener>
<Zoom in={!drawerOpen}> <Zoom in={!drawerOpen}>
<Fade in={!hideOpenButton}> <Fade in={!hideOpenButton}>
<IconButton <IconButton