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

Moved basic styling from App to Layout component, rewrote imports to speed up tree shaking

Browse Source
This commit is contained in:
Dmitriy Shishkov 2021-10-14 13:52:14 +03:00
parent c0f75633ae
commit 0694146544
No known key found for this signature in database
GPG Key ID: 14358F96FCDD8060
7 changed files with 64 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -7,7 +7,7 @@
</head>
<body>
<div id="root"></div>
<div id="root" style="height: 100vh"></div>
<script type="module" src="./src/index.tsx"></script>
</body>
</html>

2
src/AddTask.tsx
View File

@ -4,7 +4,7 @@ import SwipeableDrawer from "@mui/material/SwipeableDrawer";
import InputBase from "@mui/material/InputBase";
import TrapFocus from "@mui/material/Unstable_TrapFocus";
import Box from "@mui/material/Box";
import { Button } from "@mui/material";
import Button from "@mui/material/Button";
export const AddTask: React.FC = () => {
const [open, setOpen] = useState(true);

20
src/App.tsx
View File

@ -1,12 +1,10 @@
import React, { useMemo } from "react";
import CssBaseline from "@mui/material/CssBaseline";
import useMediaQuery from "@mui/material/useMediaQuery";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import React from "react";
import { Layout } from "./Layout";
import { TodoList } from "./TodoList";
import { AppBar } from "./AppBar";
import { TaskItemT } from "./types";
import { AddTask } from "./AddTask";
const tasks: TaskItemT[] = [
{ text: "test", done: false, id: 0 },
@ -14,22 +12,14 @@ const tasks: TaskItemT[] = [
];
export const App = () => {
const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
const theme = useMemo(
() =>
createTheme({ palette: { mode: prefersDarkMode ? "dark" : "light" } }),
[prefersDarkMode]
);
return (
<ThemeProvider theme={theme}>
<CssBaseline />
<>
<Layout
appBar={<AppBar />}
title="My tasks"
content={<TodoList tasks={tasks} />}
/>
</ThemeProvider>
<AddTask />
</>
);
};

6
src/AppBar.tsx
View File

@ -1,8 +1,8 @@
import { Fab, Box } from "@mui/material";
import Add from "@mui/icons-material/Add";
import React from "react";
/* TODO: create component for task adding */
import Box from "@mui/material/Box";
import Fab from "@mui/material/Fab";
import Add from "@mui/icons-material/Add";
export const AppBar: React.FC = () => (
<Box sx={{ width: "100%", justifyContent: "center", display: "flex" }}>

59
src/Layout.tsx
View File

@ -1,5 +1,13 @@
import { AppBar, Box, Toolbar, Typography, Checkbox } from "@mui/material";
import React, { ReactNode } from "react";
import React, { ReactNode, useMemo } from "react";
import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import Checkbox from "@mui/material/Checkbox";
import CssBaseline from "@mui/material/CssBaseline";
import useMediaQuery from "@mui/material/useMediaQuery";
import { createTheme, ThemeProvider } from "@mui/material/styles";
export type LayoutProps = {
appBar: ReactNode;
@ -7,21 +15,32 @@ export type LayoutProps = {
title: string;
};
export const Layout: React.FC<LayoutProps> = ({ appBar, content, title }) => (
<>
<Box sx={{ padding: (theme) => theme.spacing(2, 2, 10, 2) }}>
<Typography variant="h4" sx={{ paddingLeft: 2, marginBottom: 2 }}>
<Checkbox sx={{ visibility: "hidden" }} />
{title}
</Typography>
{content}
</Box>
<AppBar
position="fixed"
color="transparent"
sx={{ top: "auto", bottom: 0 }}
>
<Toolbar>{appBar}</Toolbar>
</AppBar>
</>
);
export const Layout: React.FC<LayoutProps> = ({ appBar, content, title }) => {
const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
const theme = useMemo(
() =>
createTheme({ palette: { mode: prefersDarkMode ? "dark" : "light" } }),
[prefersDarkMode]
);
return (
<ThemeProvider theme={theme}>
<CssBaseline />
<Box sx={{ padding: (theme) => theme.spacing(2, 2, 10, 2) }}>
<Typography variant="h4" sx={{ paddingLeft: 2, marginBottom: 2 }}>
<Checkbox sx={{ visibility: "hidden" }} />
{title}
</Typography>
{content}
</Box>
<AppBar
position="fixed"
color="transparent"
sx={{ top: "auto", bottom: 0 }}
>
<Toolbar>{appBar}</Toolbar>
</AppBar>
</ThemeProvider>
);
};

21
src/TodoItem.tsx
View File

@ -1,13 +1,13 @@
import {
Checkbox,
IconButton,
ListItem,
ListItemSecondaryAction,
ListItemText,
TextField,
} from "@mui/material";
import DeleteOutlined from "@mui/icons-material/DeleteOutlined";
import React, { useState } from "react";
import Checkbox from "@mui/material/Checkbox";
import IconButton from "@mui/material/IconButton";
import ListItem from "@mui/material/ListItem";
import ListItemSecondaryAction from "@mui/material/ListItemSecondaryAction";
import ListItemText from "@mui/material/ListItemText";
import TextField from "@mui/material/TextField";
import DeleteOutlined from "@mui/icons-material/DeleteOutlined";
import { TaskItemT } from "./types";
export type TodoItemProps = { task: TaskItemT };
@ -27,7 +27,8 @@ export const TodoItem: React.FC<TodoItemProps> = ({ task }) => {
value={text}
autoFocus={true}
onBlur={() => setEditing(false)}
></TextField>
multiline
/>
) : (
<ListItemText onClick={() => setEditing(true)} primary={text} />
)}

5
src/TodoList.tsx
View File

@ -1,5 +1,8 @@
import { List, Paper } from "@mui/material";
import React from "react";
import List from "@mui/material/List";
import Paper from "@mui/material/Paper";
import { TodoItem } from "./TodoItem";
import { TaskItemT } from "./types";