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

Добавление открытия / закрытия модалки создания задачи (#78)

Browse Source 
* Добавить открытие\закрытие модалки создания задачи #63

написал каркас функции и рендеринга,
настроил открытие и закрытие модалки
This commit is contained in:
Max Nikitin
2021-01-28 11:45:29 +03:00
committed by GitHub
parent 4f389c47f5
commit c0b21882ce
10 changed files with 98 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintrc.json
View File

@ -97,6 +97,7 @@
"@typescript-eslint/explicit-module-boundary-types": "off",
"@typescript-eslint/no-unused-vars": "warn",
"@typescript-eslint/no-explicit-any": "off",
"@typescript-eslint/ban-types": "off",
"array-bracket-spacing": ["warn", "never"],
"block-spacing": ["warn", "never"],
"brace-style": ["warn", "1tbs", {"allowSingleLine": true}],

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

@ -10,19 +10,19 @@ 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';
import PopupList from '../popup-list';
const useStyles = makeStyles((theme: Theme) =>
createStyles({
iconRight: {
marginRight: theme.spacing(2),
marginRight: theme.spacing(2)
},
appBar: {
top: 'auto',
bottom: 0,
bottom: 0
},
grow: {
flexGrow: 1,
flexGrow: 1
},
fabButton: {
position: 'absolute',
@ -30,9 +30,9 @@ const useStyles = makeStyles((theme: Theme) =>
top: -30,
left: 0,
right: 0,
margin: '0 auto',
},
}),
margin: '0 auto'
}
})
);
type Props = {
@ -44,58 +44,37 @@ const BothMenu: React.FC<Props> = ({trigger}) => {
return (
<Slide appear={false} direction="up" in={!trigger}>
<AppBar
position="fixed"
color="primary"
className={classes.appBar}
>
<AppBar position="fixed" color="primary" className={classes.appBar}>
<Toolbar>
<IconButton
className={classes.iconRight}
edge="start"
color="inherit"
>
<IconButton className={classes.iconRight} edge="start" color="inherit">
<NavLink to={ROUTES.CHAOS_BOX}>
<MoveToInboxIcon />
</NavLink>
</IconButton>
<IconButton
edge="end"
color="inherit"
>
<IconButton edge="end" color="inherit">
<NavLink to={ROUTES.PROJECTS}>
<ListAltIcon />
</NavLink>
</IconButton>
<PopupList>
<Fab
color="secondary"
className={classes.fabButton}
>
<Fab color="secondary" className={classes.fabButton}>
<AddIcon />
</Fab>
</PopupList>
<div className={classes.grow} />
<IconButton
className={classes.iconRight}
edge="start"
color="inherit"
>
<IconButton className={classes.iconRight} edge="start" color="inherit">
<NavLink to={ROUTES.CALENDAR}>
<CalendarTodayIcon />
</NavLink>
</IconButton>
<ToggleMenu items={BOTH_MENU_LINKS}>
<IconButton
edge="end"
color="inherit"
>
<IconButton edge="end" color="inherit">
<MoreIcon />
</IconButton>
</ToggleMenu>
</Toolbar>
</AppBar>
</Slide >
</Slide>
);
};

20
src/app/components/create-task-modal/CreateTaskModal.tsx
View File

@ -1,4 +1,5 @@
import React, {FC, memo} from 'react';
import React, {FC, memo, useCallback} from 'react';
import {useHistory} from 'react-router-dom';
import {format} from 'date-fns';
import {useFormik} from 'formik';
import Dialog from '@material-ui/core/Dialog';
@ -7,6 +8,8 @@ import DialogContent from '@material-ui/core/DialogContent';
import DialogTitle from '@material-ui/core/DialogTitle';
import {Task} from '_types/common';
import {VIEW_DATE_TIME} from '_consts/common';
import {buildPath} from '_utils/buildPath';
import {PageType} from '_enums/common';
import {Button, TextField} from '@material-ui/core';
import {LABELS} from '../../consts';
@ -17,18 +20,23 @@ type Props = {
const now = format(new Date(), VIEW_DATE_TIME);
const CreateTaskModal: FC<Props> = ({isOpen}) => {
const history = useHistory();
const form = useFormik<Partial<Task>>({
initialValues: {
title: '',
body: '',
start_at: now,
end_at: '',
end_at: ''
},
onSubmit: () => {
// В аргументах приходят values. Ждем задачи со сторами для формы
},
}
});
const handleClose = useCallback(() => {
history.push(buildPath({pageType: PageType.Main}));
}, [history]);
return (
<Dialog open={isOpen}>
<form onSubmit={form.handleSubmit}>
@ -61,7 +69,7 @@ const CreateTaskModal: FC<Props> = ({isOpen}) => {
onChange={form.handleChange}
margin="dense"
InputLabelProps={{
shrink: true,
shrink: true
}}
fullWidth
/>
@ -73,13 +81,13 @@ const CreateTaskModal: FC<Props> = ({isOpen}) => {
onChange={form.handleChange}
margin="dense"
InputLabelProps={{
shrink: true,
shrink: true
}}
fullWidth
/>
</DialogContent>
<DialogActions>
<Button color="primary" type="button">
<Button onClick={handleClose} color="primary" type="button">
{LABELS.CANCEL}
</Button>
<Button color="primary" type="submit">

6
src/app/components/page/Page.tsx
View File

@ -23,9 +23,9 @@ const useStyles = makeStyles(() =>
container: {
height: '100hv',
display: 'flex',
flexDirection: 'column',
},
}),
flexDirection: 'column'
}
})
);
const Page: React.FC = () => {

26
src/app/components/popup-list-item/PopupListItem.tsx Normal file
View File

@ -0,0 +1,26 @@
import {ListItem, ListItemText} from '@material-ui/core';
import React, {memo, useCallback} from 'react';
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 history = useHistory();
const handleClick = useCallback(() => {
setOpen(false);
history.push(url);
}, [history, setOpen, url]);
return (
<ListItem button onClick={handleClick}>
<ListItemText primary={item} />
</ListItem>
);
};
export default memo(PopupListItem);

1
src/app/components/popup-list-item/index.ts Normal file
View File

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

15
src/app/components/popup-list/PopupList.tsx
View File

@ -1,10 +1,9 @@
import {Dialog, List, ListItem, ListItemText} from '@material-ui/core';
import {Dialog, List} from '@material-ui/core';
import React, {Fragment, memo, PropsWithChildren, useCallback} from 'react';
import {v4} from 'uuid';
import {MENU_ADDS} from '../../consts';
import PopupListItem from '../popup-list-item';
type Props = PropsWithChildren<{
}>;
type Props = PropsWithChildren<{}>;
const PopupList: React.FC<Props> = ({children}) => {
const [open, setOpen] = React.useState(false);
@ -22,15 +21,11 @@ const PopupList: React.FC<Props> = ({children}) => {
<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>
<PopupListItem item={item.text} url={item.url} setOpen={setOpen} key={item.id} />
))}
</List>
</Dialog>
<div onClick={handleClickOpen}>
{children}
</div>
<div onClick={handleClickOpen}>{children}</div>
</Fragment>
);
};

1
src/app/components/popup-list/index.ts
View File

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

27
src/app/consts.ts
View File

@ -1,4 +1,8 @@
import {v4} from 'uuid';
import {ROUTES} from '_consts/common';
import {PageType} from '../core/enums/common';
import {buildPath} from '../core/utils/buildPath';
import {AddMenu, ModalType} from './enums';
export const LABELS = {
SEACRH: 'Поиск',
@ -11,7 +15,7 @@ export const LABELS = {
TITLE: 'Заголовок',
DESCRIPTION: 'Описание',
START_AT: 'Начало',
END_AT: 'Окончание',
END_AT: 'Окончание'
} as const;
export const BOTH_MENU_LINKS = [
@ -29,4 +33,23 @@ export const BOTH_MENU_LINKS = [
}
];
export const MENU_ADDS = [LABELS.ADD_TASK, LABELS.ADD_FOLDER, LABELS.ADD_TAG];
export const MENU_ADDS = [
{
id: v4(),
text: LABELS.ADD_TASK,
type: AddMenu.AddTask,
url: buildPath({pageType: PageType.Main, query: {modal: ModalType.CreateTask}})
},
{
id: v4(),
text: LABELS.ADD_FOLDER,
type: AddMenu.AddFolder,
url: buildPath({pageType: PageType.Main, query: {modal: ModalType.CreateFolder}})
},
{
id: v4(),
text: LABELS.ADD_TAG,
type: AddMenu.AddTag,
url: buildPath({pageType: PageType.Main, query: {modal: ModalType.CreateTag}})
}
];

8
src/app/enums.ts
View File

@ -1,3 +1,11 @@
export enum ModalType {
CreateTask = 'createTask',
CreateFolder = 'createFolder',
CreateTag = 'createTag'
}
export enum AddMenu {
AddTask = 'addTask',
AddFolder = 'addFolder',
AddTag = 'addTag'
}