From 0694146544327accffbcc6365f4a8a50c4519ba3 Mon Sep 17 00:00:00 2001 From: dm1sh Date: Thu, 14 Oct 2021 13:52:14 +0300 Subject: [PATCH] Moved basic styling from App to Layout component, rewrote imports to speed up tree shaking --- index.html | 2 +- src/AddTask.tsx | 2 +- src/App.tsx | 20 ++++------------ src/AppBar.tsx | 6 ++--- src/Layout.tsx | 59 ++++++++++++++++++++++++++++++++---------------- src/TodoItem.tsx | 21 +++++++++-------- src/TodoList.tsx | 5 +++- 7 files changed, 64 insertions(+), 51 deletions(-) diff --git a/index.html b/index.html index 3c916f2..2a02b4f 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ -
+
diff --git a/src/AddTask.tsx b/src/AddTask.tsx index c6da261..f514345 100644 --- a/src/AddTask.tsx +++ b/src/AddTask.tsx @@ -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); diff --git a/src/App.tsx b/src/App.tsx index 1242f46..1592056 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -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 ( - - + <> } title="My tasks" content={} /> - + + ); }; diff --git a/src/AppBar.tsx b/src/AppBar.tsx index 454d029..4e490fc 100644 --- a/src/AppBar.tsx +++ b/src/AppBar.tsx @@ -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 = () => ( diff --git a/src/Layout.tsx b/src/Layout.tsx index ba15544..f91a965 100644 --- a/src/Layout.tsx +++ b/src/Layout.tsx @@ -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 = ({ appBar, content, title }) => ( - <> - theme.spacing(2, 2, 10, 2) }}> - - - {title} - - {content} - - - {appBar} - - -); +export const Layout: React.FC = ({ appBar, content, title }) => { + const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)"); + + const theme = useMemo( + () => + createTheme({ palette: { mode: prefersDarkMode ? "dark" : "light" } }), + [prefersDarkMode] + ); + + return ( + + + theme.spacing(2, 2, 10, 2) }}> + + + {title} + + {content} + + + {appBar} + + + ); +}; diff --git a/src/TodoItem.tsx b/src/TodoItem.tsx index 55330bb..20057f8 100644 --- a/src/TodoItem.tsx +++ b/src/TodoItem.tsx @@ -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 = ({ task }) => { value={text} autoFocus={true} onBlur={() => setEditing(false)} - > + multiline + /> ) : ( setEditing(true)} primary={text} /> )} diff --git a/src/TodoList.tsx b/src/TodoList.tsx index 550e0c3..2fa1cc4 100644 --- a/src/TodoList.tsx +++ b/src/TodoList.tsx @@ -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";