vigdorov/free-your-brain
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Добавлено всплывающее меню с переходами (#45)

Browse Source 
* Добавлено всплывающее меню с переходами

* Исправлены косяки моего труда

* Исправлены косяки моего труда-часть вторая

* Исправлены косяки моего труда-часть третья
This commit is contained in:
Вигдорова Алина
2021-01-06 00:23:56 +03:00
committed by GitHub
parent 6dcd9f6a3c
commit c669504137
4 changed files with 120 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
src/app/components/both-menu/BothMenu.tsx
View File

@ -1,4 +1,5 @@
import {AppBar, createStyles, Fab, IconButton, makeStyles, Theme, Toolbar} from '@material-ui/core'; import {AppBar, createStyles, Fab, IconButton, makeStyles, Theme, Toolbar} from '@material-ui/core';
import Slide from '@material-ui/core/Slide';
import React, {memo} from 'react'; import React, {memo} from 'react';
import MoreIcon from '@material-ui/icons/MoreVert'; import MoreIcon from '@material-ui/icons/MoreVert';
import AddIcon from '@material-ui/icons/Add'; import AddIcon from '@material-ui/icons/Add';
@ -7,6 +8,8 @@ import CalendarTodayIcon from '@material-ui/icons/CalendarToday';
import ListAltIcon from '@material-ui/icons/ListAlt'; import ListAltIcon from '@material-ui/icons/ListAlt';
import {NavLink} from 'react-router-dom'; import {NavLink} from 'react-router-dom';
import {ROUTES} from '_consts/common'; import {ROUTES} from '_consts/common';
import ToggleMenu from '../toggle-menu';
import {BOTH_MENU_LINKS} from '../../consts';
const useStyles = makeStyles((theme: Theme) => const useStyles = makeStyles((theme: Theme) =>
createStyles({ createStyles({
@ -39,53 +42,57 @@ const BothMenu: React.FC<Props> = ({trigger}) => {
const classes = useStyles(); const classes = useStyles();
return ( return (
<AppBar <Slide appear={false} direction="up" in={!trigger}>
position="fixed" <AppBar
color="primary" position="fixed"
className={classes.appBar} color="primary"
> className={classes.appBar}
<Toolbar> >
<IconButton <Toolbar>
className={classes.iconRight} <IconButton
edge="start" className={classes.iconRight}
color="inherit" edge="start"
> color="inherit"
<NavLink to={ROUTES.CHAOS_BOX}> >
<MoveToInboxIcon /> <NavLink to={ROUTES.CHAOS_BOX}>
</NavLink> <MoveToInboxIcon />
</IconButton> </NavLink>
<IconButton </IconButton>
edge="end" <IconButton
color="inherit" edge="end"
> color="inherit"
<NavLink to={ROUTES.PROJECTS}> >
<ListAltIcon /> <NavLink to={ROUTES.PROJECTS}>
</NavLink> <ListAltIcon />
</IconButton> </NavLink>
<Fab </IconButton>
color="secondary" <Fab
className={classes.fabButton} color="secondary"
> className={classes.fabButton}
<AddIcon /> >
</Fab> <AddIcon />
<div className={classes.grow} /> </Fab>
<IconButton <div className={classes.grow} />
className={classes.iconRight} <IconButton
edge="start" className={classes.iconRight}
color="inherit" edge="start"
> color="inherit"
<NavLink to={ROUTES.CALENDAR}> >
<CalendarTodayIcon /> <NavLink to={ROUTES.CALENDAR}>
</NavLink> <CalendarTodayIcon />
</IconButton> </NavLink>
<IconButton </IconButton>
edge="end" <ToggleMenu items={BOTH_MENU_LINKS}>
color="inherit" <IconButton
> edge="end"
<MoreIcon /> color="inherit"
</IconButton> >
</Toolbar> <MoreIcon />
</AppBar> </IconButton>
</ToggleMenu>
</Toolbar>
</AppBar>
</Slide>
); );
}; };

48
src/app/components/toggle-menu/ToggleMenu.tsx Normal file
View File

@ -0,0 +1,48 @@
import React, {Fragment, memo, PropsWithChildren, useCallback, useMemo, useState} from 'react';
import {v4} from 'uuid';
import {Menu, MenuItem} from '@material-ui/core';
import {NavLink} from 'react-router-dom';
type Props = PropsWithChildren<{
items: {
url: string,
name: string
}[],
}>;
const ToggleMenu: React.FC<Props> = ({items, children}) => {
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
const handleClick = useCallback((event: React.MouseEvent<HTMLDivElement>) => {
setAnchorEl(event.currentTarget);
}, [setAnchorEl]);
const handleClose = useCallback(() => {
setAnchorEl(null);
}, [setAnchorEl]);
const isOpenMenu = useMemo(() => Boolean(anchorEl), [anchorEl]);
return (
<Fragment>
<Menu
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={isOpenMenu}
onClose={handleClose}
>
{items.map(item => (
<NavLink to={item.url} key={v4()}>
<MenuItem onClick={handleClose}>{item.name}</MenuItem>
</NavLink>)
)}
</Menu>
<div onClick={handleClick}>
{children}
</div>
</Fragment>
);
};
export default memo(ToggleMenu);

1
src/app/components/toggle-menu/index.ts Normal file
View File

@ -0,0 +1 @@
export {default} from './ToggleMenu';

17
src/app/consts.ts
View File

@ -1,3 +1,20 @@
import {ROUTES} from '_consts/common';
export const LABELS = { export const LABELS = {
SEACRH: 'Поиск', SEACRH: 'Поиск',
} as const; } as const;
export const BOTH_MENU_LINKS = [
{
name: 'Tags',
url: ROUTES.TAGS
},
{
name: 'Settings',
url: ROUTES.SETTINGS
},
{
name: 'Information',
url: ROUTES.INFORMATION
}
];