Добавление диалогового окна по клику на + (#59)

src/app/components/both-menu/BothMenu.tsx

@@ -10,6 +10,7 @@ import {NavLink} from 'react-router-dom';
 import {ROUTES} from '_consts/common';
 import ToggleMenu from '../toggle-menu';
 import {BOTH_MENU_LINKS} from '../../consts';
+import PopupList from '../popup-list/PopupList';
 
 const useStyles = makeStyles((theme: Theme) =>
     createStyles({
@@ -31,6 +32,9 @@ const useStyles = makeStyles((theme: Theme) =>
             right: 0,
             margin: '0 auto',
         },
+        addButton: {
+            paddingTop: '5px'
+        },
     }),
 );
 
@@ -70,7 +74,9 @@ const BothMenu: React.FC<Props> = ({trigger}) => {
                         color="secondary"
                         className={classes.fabButton}
                     >
-                        <AddIcon />
+                        <PopupList>
+                            <AddIcon className={classes.addButton} />
+                        </PopupList>
                     </Fab>
                     <div className={classes.grow} />
                     <IconButton

src/app/components/popup-list/PopupList.tsx

@@ -0,0 +1,38 @@
+import {Dialog, List, ListItem, ListItemText} from '@material-ui/core';
+import React, {Fragment, memo, PropsWithChildren, useCallback} from 'react';
+import {v4} from 'uuid';
+import {MENU_ADDS} from '../../consts';
+
+type Props = PropsWithChildren<{
+}>;
+
+const PopupList: React.FC<Props> = ({children}) => {
+    const [open, setOpen] = React.useState(false);
+
+    const handleClickOpen = useCallback(() => {
+        setOpen(true);
+    }, [setOpen]);
+
+    const handleClose = useCallback(() => {
+        setOpen(false);
+    }, [setOpen]);
+
+    return (
+        <Fragment>
+            <Dialog onClose={handleClose} aria-labelledby="simple-dialog-title" open={open}>
+                <List>
+                    {MENU_ADDS.map(item => (
+                        <ListItem button onClick={handleClose} key={v4()}>
+                            <ListItemText primary={item} />
+                        </ListItem>
+                    ))}
+                </List>
+            </Dialog>
+            <div onClick={handleClickOpen}>
+                {children}
+            </div>
+        </Fragment>
+    );
+};
+
+export default memo(PopupList);

src/app/consts.ts

@@ -2,6 +2,9 @@ import {ROUTES} from '_consts/common';
 
 export const LABELS = {
     SEACRH: 'Поиск',
+    ADD_TASK: 'Добавить задачу',
+    ADD_FOLDER: 'Добавить папку',
+    ADD_TAG: 'Добавить тег',
 } as const;
 
 export const BOTH_MENU_LINKS = [
@@ -18,3 +21,5 @@ export const BOTH_MENU_LINKS = [
         url: ROUTES.INFORMATION
     }
 ];
+
+export const MENU_ADDS = [LABELS.ADD_TASK, LABELS.ADD_FOLDER, LABELS.ADD_TAG];