dm1sh/toodo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Made addTask component showing functional

Browse Source
This commit is contained in:
Dmitriy Shishkov 2021-10-17 17:52:07 +03:00
parent 91fb0d873a
commit 3edf5edaec
No known key found for this signature in database
GPG Key ID: 14358F96FCDD8060
2 changed files with 36 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/AddTask.tsx
View File

@ -1,4 +1,4 @@
import React, { useState } from "react"; import React from "react";
import SwipeableDrawer from "@mui/material/SwipeableDrawer"; import SwipeableDrawer from "@mui/material/SwipeableDrawer";
import InputBase from "@mui/material/InputBase"; import InputBase from "@mui/material/InputBase";
@ -6,11 +6,15 @@ import TrapFocus from "@mui/material/Unstable_TrapFocus";
import Box from "@mui/material/Box"; import Box from "@mui/material/Box";
import Button from "@mui/material/Button"; import Button from "@mui/material/Button";
export const AddTask: React.FC = () => { import { useAppDispatch, useAppSelector } from "../hooks";
const [open, setOpen] = useState(true); import {
open as openAction,
close as closeAction,
} from "../store/slices/uiState";
const onOpen = () => setOpen(true); export const AddTask: React.FC = () => {
const onClose = () => setOpen(false); const open = useAppSelector((state) => state.uiState.addBarOpen);
const dispatch = useAppDispatch();
return ( return (
<TrapFocus open={open}> <TrapFocus open={open}>
@ -24,8 +28,8 @@ export const AddTask: React.FC = () => {
}} }}
anchor="bottom" anchor="bottom"
open={open} open={open}
onOpen={onOpen} onOpen={() => dispatch(openAction())}
onClose={onClose} onClose={() => dispatch(closeAction())}
> >
<Box <Box
sx={{ sx={{

42
src/components/AppBar.tsx
View File

@ -4,20 +4,28 @@ import Box from "@mui/material/Box";
import Fab from "@mui/material/Fab"; import Fab from "@mui/material/Fab";
import Add from "@mui/icons-material/Add"; import Add from "@mui/icons-material/Add";
export const AppBar: React.FC = () => ( import { useAppDispatch } from "../hooks";
<Box sx={{ width: "100%", justifyContent: "center", display: "flex" }}> import { open } from "../store/slices/uiState";
<Fab
variant="extended" export const AppBar: React.FC = () => {
color="primary" const dispatch = useAppDispatch();
aria-label="add"
sx={{ return (
position: "relative", <Box sx={{ width: "100%", justifyContent: "center", display: "flex" }}>
zIndex: 1, <Fab
top: -30, variant="extended"
}} color="primary"
> aria-label="add"
<Add sx={{ marginRight: 1 }} /> sx={{
Add a new task position: "relative",
</Fab> zIndex: 1,
</Box> top: -30,
); }}
onClick={() => dispatch(open())}
>
<Add sx={{ marginRight: 1 }} />
Add a new task
</Fab>
</Box>
);
};