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> </head>
<body> <body>
<div id="root"></div> <div id="root" style="height: 100vh"></div>
<script type="module" src="./src/index.tsx"></script> <script type="module" src="./src/index.tsx"></script>
</body> </body>
</html> </html>

2
src/AddTask.tsx
View File

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

20
src/App.tsx
View File

@ -1,12 +1,10 @@
import React, { useMemo } from "react"; import React from "react";
import CssBaseline from "@mui/material/CssBaseline";
import useMediaQuery from "@mui/material/useMediaQuery";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import { Layout } from "./Layout"; import { Layout } from "./Layout";
import { TodoList } from "./TodoList"; import { TodoList } from "./TodoList";
import { AppBar } from "./AppBar"; import { AppBar } from "./AppBar";
import { TaskItemT } from "./types"; import { TaskItemT } from "./types";
import { AddTask } from "./AddTask";
const tasks: TaskItemT[] = [ const tasks: TaskItemT[] = [
{ text: "test", done: false, id: 0 }, { text: "test", done: false, id: 0 },
@ -14,22 +12,14 @@ const tasks: TaskItemT[] = [
]; ];
export const App = () => { export const App = () => {
const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
const theme = useMemo(
() =>
createTheme({ palette: { mode: prefersDarkMode ? "dark" : "light" } }),
[prefersDarkMode]
);
return ( return (
<ThemeProvider theme={theme}> <>
<CssBaseline />
<Layout <Layout
appBar={<AppBar />} appBar={<AppBar />}
title="My tasks" title="My tasks"
content={<TodoList tasks={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"; 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 = () => ( export const AppBar: React.FC = () => (
<Box sx={{ width: "100%", justifyContent: "center", display: "flex" }}> <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, useMemo } from "react";
import React, { ReactNode } 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 = { export type LayoutProps = {
appBar: ReactNode; appBar: ReactNode;
@ -7,21 +15,32 @@ export type LayoutProps = {
title: string; title: string;
}; };
export const Layout: React.FC<LayoutProps> = ({ appBar, content, title }) => ( export const Layout: React.FC<LayoutProps> = ({ appBar, content, title }) => {
<> const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
<Box sx={{ padding: (theme) => theme.spacing(2, 2, 10, 2) }}>
<Typography variant="h4" sx={{ paddingLeft: 2, marginBottom: 2 }}> const theme = useMemo(
<Checkbox sx={{ visibility: "hidden" }} /> () =>
{title} createTheme({ palette: { mode: prefersDarkMode ? "dark" : "light" } }),
</Typography> [prefersDarkMode]
{content} );
</Box>
<AppBar return (
position="fixed" <ThemeProvider theme={theme}>
color="transparent" <CssBaseline />
sx={{ top: "auto", bottom: 0 }} <Box sx={{ padding: (theme) => theme.spacing(2, 2, 10, 2) }}>
> <Typography variant="h4" sx={{ paddingLeft: 2, marginBottom: 2 }}>
<Toolbar>{appBar}</Toolbar> <Checkbox sx={{ visibility: "hidden" }} />
</AppBar> {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 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"; import { TaskItemT } from "./types";
export type TodoItemProps = { task: TaskItemT }; export type TodoItemProps = { task: TaskItemT };
@ -27,7 +27,8 @@ export const TodoItem: React.FC<TodoItemProps> = ({ task }) => {
value={text} value={text}
autoFocus={true} autoFocus={true}
onBlur={() => setEditing(false)} onBlur={() => setEditing(false)}
></TextField> multiline
/>
) : ( ) : (
<ListItemText onClick={() => setEditing(true)} primary={text} /> <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 React from "react";
import List from "@mui/material/List";
import Paper from "@mui/material/Paper";
import { TodoItem } from "./TodoItem"; import { TodoItem } from "./TodoItem";
import { TaskItemT } from "./types"; import { TaskItemT } from "./types";