Изменение способа открытия модалки выбора создания (#80)
Изменение способа открытия модалки выбора создания
This commit is contained in:
@ -5,16 +5,14 @@ import {useHistory} from 'react-router-dom';
|
||||
type PopupListItemProps = {
|
||||
item: 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 handleClick = useCallback(() => {
|
||||
setOpen(false);
|
||||
history.push(url);
|
||||
}, [history, setOpen, url]);
|
||||
}, [history, url]);
|
||||
|
||||
return (
|
||||
<ListItem button onClick={handleClick}>
|
||||
|
||||
@ -1,27 +1,35 @@
|
||||
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 PopupListItem from '../popup-list-item';
|
||||
import {queryParsers} from '../../../app/utils';
|
||||
|
||||
type Props = PropsWithChildren<{}>;
|
||||
|
||||
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(() => {
|
||||
setOpen(true);
|
||||
}, [setOpen]);
|
||||
history.push(buildPath({pageType: PageType.Main, query: {modal: ModalType.CreateModal}}));
|
||||
}, [history]);
|
||||
|
||||
const handleClose = useCallback(() => {
|
||||
setOpen(false);
|
||||
}, [setOpen]);
|
||||
history.push(buildPath({pageType: PageType.Main}));
|
||||
}, [history]);
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<Dialog onClose={handleClose} aria-labelledby="simple-dialog-title" open={open}>
|
||||
<Dialog onClose={handleClose} aria-labelledby="simple-dialog-title" open={isPopupListOpen}>
|
||||
<List>
|
||||
{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>
|
||||
</Dialog>
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
export enum ModalType {
|
||||
CreateTask = 'createTask',
|
||||
CreateFolder = 'createFolder',
|
||||
CreateTag = 'createTag'
|
||||
CreateTag = 'createTag',
|
||||
CreateModal = 'addModal'
|
||||
}
|
||||
|
||||
export enum AddMenu {
|
||||
|
||||
Reference in New Issue
Block a user