Изменение способа открытия модалки выбора создания (#80)

Изменение способа открытия модалки выбора создания
This commit is contained in:
Max Nikitin
2021-02-04 11:49:28 +03:00
committed by GitHub
parent 01087b7f79
commit 38d70b3f39
3 changed files with 20 additions and 13 deletions

View File

@ -5,16 +5,14 @@ import {useHistory} from 'react-router-dom';
type PopupListItemProps = { type PopupListItemProps = {
item: string; item: string;
url: string; url: string;
setOpen: (isOpen: boolean) => void;
}; };
const PopupListItem: React.FC<PopupListItemProps> = ({item, url, setOpen}) => { const PopupListItem: React.FC<PopupListItemProps> = ({item, url}) => {
const history = useHistory(); const history = useHistory();
const handleClick = useCallback(() => { const handleClick = useCallback(() => {
setOpen(false);
history.push(url); history.push(url);
}, [history, setOpen, url]); }, [history, url]);
return ( return (
<ListItem button onClick={handleClick}> <ListItem button onClick={handleClick}>

View File

@ -1,27 +1,35 @@
import {Dialog, List} from '@material-ui/core'; import {Dialog, List} from '@material-ui/core';
import React, {Fragment, memo, PropsWithChildren, useCallback} from 'react'; import React, {Fragment, memo, PropsWithChildren, useCallback, useMemo} from 'react';
import {useHistory} from 'react-router-dom';
import {PageType} from '_enums/common';
import {buildPath} from '_utils/buildPath';
import {useQuery} from '_hooks/useQuery';
import {ModalType} from '../../../app/enums';
import {MENU_ADDS} from '../../consts'; import {MENU_ADDS} from '../../consts';
import PopupListItem from '../popup-list-item'; import PopupListItem from '../popup-list-item';
import {queryParsers} from '../../../app/utils';
type Props = PropsWithChildren<{}>; type Props = PropsWithChildren<{}>;
const PopupList: React.FC<Props> = ({children}) => { const PopupList: React.FC<Props> = ({children}) => {
const [open, setOpen] = React.useState(false); const {modal} = useQuery(queryParsers);
const isPopupListOpen = useMemo(() => modal === ModalType.CreateModal, [modal]);
const history = useHistory();
const handleClickOpen = useCallback(() => { const handleClickOpen = useCallback(() => {
setOpen(true); history.push(buildPath({pageType: PageType.Main, query: {modal: ModalType.CreateModal}}));
}, [setOpen]); }, [history]);
const handleClose = useCallback(() => { const handleClose = useCallback(() => {
setOpen(false); history.push(buildPath({pageType: PageType.Main}));
}, [setOpen]); }, [history]);
return ( return (
<Fragment> <Fragment>
<Dialog onClose={handleClose} aria-labelledby="simple-dialog-title" open={open}> <Dialog onClose={handleClose} aria-labelledby="simple-dialog-title" open={isPopupListOpen}>
<List> <List>
{MENU_ADDS.map(item => ( {MENU_ADDS.map(item => (
<PopupListItem item={item.text} url={item.url} setOpen={setOpen} key={item.id} /> <PopupListItem item={item.text} url={item.url} key={item.id} />
))} ))}
</List> </List>
</Dialog> </Dialog>

View File

@ -1,7 +1,8 @@
export enum ModalType { export enum ModalType {
CreateTask = 'createTask', CreateTask = 'createTask',
CreateFolder = 'createFolder', CreateFolder = 'createFolder',
CreateTag = 'createTag' CreateTag = 'createTag',
CreateModal = 'addModal'
} }
export enum AddMenu { export enum AddMenu {