prettier fix

master
Tudor Stanciu 2021-07-04 01:47:50 +03:00
parent 95d27176c2
commit 134b9b3f9d
4 changed files with 171 additions and 110 deletions

View File

@ -2,5 +2,5 @@
"tabWidth": 2,
"singleQuote": false,
"semi": true,
"trailingComma": "all"
"trailingComma": "none"
}

View File

@ -15,7 +15,7 @@ import {
Person as AccountIcon,
Search as SearchIcon,
Send as SendIcon,
MenuOpen as MenuOpenIcon,
MenuOpen as MenuOpenIcon
} from "@material-ui/icons";
import classNames from "classnames";
@ -31,7 +31,7 @@ import UserAvatar from "../UserAvatar/UserAvatar";
import {
useLayoutState,
useLayoutDispatch,
toggleSidebar,
toggleSidebar
} from "../../context/LayoutContext";
import { useUserDispatch, signOut } from "../../context/UserContext";
@ -41,29 +41,29 @@ const messages = [
variant: "warning",
name: "Jane Hew",
message: "Hey! How is it going?",
time: "9:32",
time: "9:32"
},
{
id: 1,
variant: "success",
name: "Lloyd Brown",
message: "Check out my new Dashboard",
time: "9:18",
time: "9:18"
},
{
id: 2,
variant: "primary",
name: "Mark Winstein",
message: "I want rearrange the appointment",
time: "9:15",
time: "9:15"
},
{
id: 3,
variant: "secondary",
name: "Liana Dutti",
message: "Good news from sale department",
time: "9:09",
},
time: "9:09"
}
];
const notifications = [
@ -72,20 +72,20 @@ const notifications = [
id: 1,
color: "success",
type: "info",
message: "What is the best way to get ...",
message: "What is the best way to get ..."
},
{
id: 2,
color: "secondary",
type: "notification",
message: "This is just a simple notification",
message: "This is just a simple notification"
},
{
id: 3,
color: "primary",
type: "e-commerce",
message: "12 new orders has arrived today",
},
message: "12 new orders has arrived today"
}
];
export default function Header(props) {
@ -112,25 +112,19 @@ export default function Header(props) {
onClick={() => toggleSidebar(layoutDispatch)}
className={classNames(
classes.headerMenuButtonSandwich,
classes.headerMenuButtonCollapse,
classes.headerMenuButtonCollapse
)}
>
{layoutState.isSidebarOpened ? (
<MenuOpenIcon
classes={{
root: classNames(
classes.headerIcon,
classes.headerIconCollapse,
),
root: classNames(classes.headerIcon, classes.headerIconCollapse)
}}
/>
) : (
<MenuIcon
classes={{
root: classNames(
classes.headerIcon,
classes.headerIconCollapse,
),
root: classNames(classes.headerIcon, classes.headerIconCollapse)
}}
/>
)}
@ -141,12 +135,12 @@ export default function Header(props) {
<div className={classes.grow} />
<div
className={classNames(classes.search, {
[classes.searchFocused]: isSearchOpen,
[classes.searchFocused]: isSearchOpen
})}
>
<div
className={classNames(classes.searchIcon, {
[classes.searchIconOpened]: isSearchOpen,
[classes.searchIconOpened]: isSearchOpen
})}
onClick={() => setSearchOpen(!isSearchOpen)}
>
@ -156,7 +150,7 @@ export default function Header(props) {
placeholder="Search…"
classes={{
root: classes.inputRoot,
input: classes.inputInput,
input: classes.inputInput
}}
/>
</div>
@ -164,7 +158,7 @@ export default function Header(props) {
color="inherit"
aria-haspopup="true"
aria-controls="mail-menu"
onClick={e => {
onClick={(e) => {
setNotificationsMenu(e.currentTarget);
setIsNotificationsUnread(false);
}}
@ -181,7 +175,7 @@ export default function Header(props) {
color="inherit"
aria-haspopup="true"
aria-controls="mail-menu"
onClick={e => {
onClick={(e) => {
setMailMenu(e.currentTarget);
setIsMailsUnread(false);
}}
@ -199,7 +193,7 @@ export default function Header(props) {
color="inherit"
className={classes.headerMenuButton}
aria-controls="profile-menu"
onClick={e => setProfileMenu(e.currentTarget)}
onClick={(e) => setProfileMenu(e.currentTarget)}
>
<AccountIcon classes={{ root: classes.headerIcon }} />
</IconButton>
@ -225,7 +219,7 @@ export default function Header(props) {
{messages.length} New Messages
</Typography>
</div>
{messages.map(message => (
{messages.map((message) => (
<MenuItem key={message.id} className={classes.messageNotification}>
<div className={classes.messageNotificationSide}>
<UserAvatar color={message.variant} name={message.name} />
@ -236,7 +230,7 @@ export default function Header(props) {
<div
className={classNames(
classes.messageNotificationSide,
classes.messageNotificationBodySide,
classes.messageNotificationBodySide
)}
>
<Typography weight="medium" gutterBottom>
@ -266,7 +260,7 @@ export default function Header(props) {
className={classes.headerMenu}
disableAutoFocusItem
>
{notifications.map(notification => (
{notifications.map((notification) => (
<MenuItem
key={notification.id}
onClick={() => setNotificationsMenu(null)}
@ -301,7 +295,7 @@ export default function Header(props) {
<MenuItem
className={classNames(
classes.profileMenuItem,
classes.headerMenuItem,
classes.headerMenuItem
)}
>
<AccountIcon className={classes.profileMenuIcon} /> Profile
@ -309,7 +303,7 @@ export default function Header(props) {
<MenuItem
className={classNames(
classes.profileMenuItem,
classes.headerMenuItem,
classes.headerMenuItem
)}
>
<AccountIcon className={classes.profileMenuIcon} /> Tasks
@ -317,7 +311,7 @@ export default function Header(props) {
<MenuItem
className={classNames(
classes.profileMenuItem,
classes.headerMenuItem,
classes.headerMenuItem
)}
>
<AccountIcon className={classes.profileMenuIcon} /> Messages

View File

@ -9,7 +9,7 @@ import {
QuestionAnswer as SupportIcon,
LibraryBooks as LibraryIcon,
HelpOutline as FAQIcon,
ArrowBack as ArrowBackIcon,
ArrowBack as ArrowBackIcon
} from "@material-ui/icons";
import { useTheme } from "@material-ui/styles";
import { withRouter } from "react-router-dom";
@ -26,7 +26,7 @@ import Dot from "./components/Dot";
import {
useLayoutState,
useLayoutDispatch,
toggleSidebar,
toggleSidebar
} from "../../context/LayoutContext";
const structure = [
@ -35,14 +35,14 @@ const structure = [
id: 1,
label: "Typography",
link: "/app/typography",
icon: <TypographyIcon />,
icon: <TypographyIcon />
},
{ id: 2, label: "Tables", link: "/app/tables", icon: <TableIcon /> },
{
id: 3,
label: "Notifications",
link: "/app/notifications",
icon: <NotificationsIcon />,
icon: <NotificationsIcon />
},
{
id: 4,
@ -52,34 +52,49 @@ const structure = [
children: [
{ label: "Icons", link: "/app/ui/icons" },
{ label: "Charts", link: "/app/ui/charts" },
{ label: "Maps", link: "/app/ui/maps" },
],
{ label: "Maps", link: "/app/ui/maps" }
]
},
{ id: 5, type: "divider" },
{ id: 6, type: "title", label: "HELP" },
{ id: 7, label: "Library", link: "https://flatlogic.com/templates", icon: <LibraryIcon /> },
{ id: 8, label: "Support", link: "https://flatlogic.com/forum", icon: <SupportIcon /> },
{ id: 9, label: "FAQ", link: "https://flatlogic.com/forum", icon: <FAQIcon /> },
{
id: 7,
label: "Library",
link: "https://flatlogic.com/templates",
icon: <LibraryIcon />
},
{
id: 8,
label: "Support",
link: "https://flatlogic.com/forum",
icon: <SupportIcon />
},
{
id: 9,
label: "FAQ",
link: "https://flatlogic.com/forum",
icon: <FAQIcon />
},
{ id: 10, type: "divider" },
{ id: 11, type: "title", label: "PROJECTS" },
{
id: 12,
label: "My recent",
link: "",
icon: <Dot size="small" color="warning" />,
icon: <Dot size="small" color="warning" />
},
{
id: 13,
label: "Starred",
link: "",
icon: <Dot size="small" color="primary" />,
icon: <Dot size="small" color="primary" />
},
{
id: 14,
label: "Background",
link: "",
icon: <Dot size="small" color="secondary" />,
},
icon: <Dot size="small" color="secondary" />
}
];
function Sidebar({ location }) {
@ -93,7 +108,7 @@ function Sidebar({ location }) {
// local
var [isPermanent, setPermanent] = useState(true);
useEffect(function() {
useEffect(function () {
window.addEventListener("resize", handleWindowWidthChange);
handleWindowWidthChange();
return function cleanup() {
@ -106,13 +121,13 @@ function Sidebar({ location }) {
variant={isPermanent ? "permanent" : "temporary"}
className={classNames(classes.drawer, {
[classes.drawerOpen]: isSidebarOpened,
[classes.drawerClose]: !isSidebarOpened,
[classes.drawerClose]: !isSidebarOpened
})}
classes={{
paper: classNames({
[classes.drawerOpen]: isSidebarOpened,
[classes.drawerClose]: !isSidebarOpened,
}),
[classes.drawerClose]: !isSidebarOpened
})
}}
open={isSidebarOpened}
>
@ -121,13 +136,13 @@ function Sidebar({ location }) {
<IconButton onClick={() => toggleSidebar(layoutDispatch)}>
<ArrowBackIcon
classes={{
root: classNames(classes.headerIcon, classes.headerIconCollapse),
root: classNames(classes.headerIcon, classes.headerIconCollapse)
}}
/>
</IconButton>
</div>
<List className={classes.sidebarList}>
{structure.map(link => (
{structure.map((link) => (
<SidebarLink
key={link.id}
location={location}

View File

@ -1,9 +1,5 @@
import React from 'react';
import {
Drawer,
IconButton,
List,
withStyles } from "@material-ui/core";
import React from "react";
import { Drawer, IconButton, List, withStyles } from "@material-ui/core";
import {
Home as HomeIcon,
NotificationsNone as NotificationsIcon,
@ -13,126 +9,182 @@ import {
QuestionAnswer as SupportIcon,
LibraryBooks as LibraryIcon,
HelpOutline as FAQIcon,
ArrowBack as ArrowBackIcon,
ArrowBack as ArrowBackIcon
} from "@material-ui/icons";
import classNames from 'classnames';
import classNames from "classnames";
import SidebarLink from './components/SidebarLink/SidebarLinkContainer';
import Dot from './components/Dot';
import SidebarLink from "./components/SidebarLink/SidebarLinkContainer";
import Dot from "./components/Dot";
const structure = [
{ id: 0, label: 'Dashboard', link: '/app/dashboard', icon: <HomeIcon /> },
{ id: 1, label: 'Typography', link: '/app/typography', icon: <TypographyIcon /> },
{ id: 2, label: 'Tables', link: '/app/tables', icon: <TableIcon /> },
{ id: 3, label: 'Notifications', link: '/app/notifications', icon: <NotificationsIcon />},
{ id: 0, label: "Dashboard", link: "/app/dashboard", icon: <HomeIcon /> },
{
id: 1,
label: "Typography",
link: "/app/typography",
icon: <TypographyIcon />
},
{ id: 2, label: "Tables", link: "/app/tables", icon: <TableIcon /> },
{
id: 3,
label: "Notifications",
link: "/app/notifications",
icon: <NotificationsIcon />
},
{
id: 4,
label: 'UI Elements',
link: '/app/ui',
label: "UI Elements",
link: "/app/ui",
icon: <UIElementsIcon />,
children: [
{ label: 'Icons', link: '/app/ui/icons' },
{ label: 'Charts', link: '/app/ui/charts' },
{ label: 'Maps', link: '/app/ui/maps' },
],
{ label: "Icons", link: "/app/ui/icons" },
{ label: "Charts", link: "/app/ui/charts" },
{ label: "Maps", link: "/app/ui/maps" }
]
},
{ id: 5, type: 'divider' },
{ id: 6, type: 'title', label: 'HELP' },
{ id: 7, label: 'Library', link: 'https://flatlogic.com/templates', icon: <LibraryIcon /> },
{ id: 8, label: 'Support', link: 'https://flatlogic.com/forum/', icon: <SupportIcon /> },
{ id: 9, label: 'FAQ', link: 'https://flatlogic.com/forum/', icon: <FAQIcon />},
{ id: 10, type: 'divider' },
{ id: 11, type: 'title', label: 'PROJECTS' },
{ id: 12, label: 'My recent', link: '', icon: <Dot size="small" color="secondary" /> },
{ id: 13, label: 'Starred', link: '', icon: <Dot size="small" color="primary" /> },
{ id: 14, label: 'Background', link: '', icon: <Dot size="small" color="secondary" /> },
{ id: 5, type: "divider" },
{ id: 6, type: "title", label: "HELP" },
{
id: 7,
label: "Library",
link: "https://flatlogic.com/templates",
icon: <LibraryIcon />
},
{
id: 8,
label: "Support",
link: "https://flatlogic.com/forum/",
icon: <SupportIcon />
},
{
id: 9,
label: "FAQ",
link: "https://flatlogic.com/forum/",
icon: <FAQIcon />
},
{ id: 10, type: "divider" },
{ id: 11, type: "title", label: "PROJECTS" },
{
id: 12,
label: "My recent",
link: "",
icon: <Dot size="small" color="secondary" />
},
{
id: 13,
label: "Starred",
link: "",
icon: <Dot size="small" color="primary" />
},
{
id: 14,
label: "Background",
link: "",
icon: <Dot size="small" color="secondary" />
}
];
const SidebarView = ({ classes, theme, toggleSidebar, isSidebarOpened, isPermanent, location }) => {
const SidebarView = ({
classes,
theme,
toggleSidebar,
isSidebarOpened,
isPermanent,
location
}) => {
return (
<Drawer
variant={isPermanent ? 'permanent' : 'temporary'}
variant={isPermanent ? "permanent" : "temporary"}
className={classNames(classes.drawer, {
[classes.drawerOpen]: isSidebarOpened,
[classes.drawerClose]: !isSidebarOpened,
[classes.drawerClose]: !isSidebarOpened
})}
classes={{
paper: classNames(classes.drawer, {
[classes.drawerOpen]: isSidebarOpened,
[classes.drawerClose]: !isSidebarOpened,
}),
[classes.drawerClose]: !isSidebarOpened
})
}}
open={isSidebarOpened}
>
<div className={classes.mobileBackButton}>
<IconButton
onClick={toggleSidebar}
>
<ArrowBackIcon classes={{ root: classNames(classes.headerIcon, classes.headerIconCollapse) }} />
<IconButton onClick={toggleSidebar}>
<ArrowBackIcon
classes={{
root: classNames(classes.headerIcon, classes.headerIconCollapse)
}}
/>
</IconButton>
</div>
<List className={classes.sidebarList}>
{structure.map(link => <SidebarLink key={link.id} location={location} isSidebarOpened={isSidebarOpened} {...link} />)}
{structure.map((link) => (
<SidebarLink
key={link.id}
location={location}
isSidebarOpened={isSidebarOpened}
{...link}
/>
))}
</List>
</Drawer>
);
}
};
const drawerWidth = 240;
const styles = theme => ({
const styles = (theme) => ({
menuButton: {
marginLeft: 12,
marginRight: 36,
marginRight: 36
},
hide: {
display: 'none',
display: "none"
},
drawer: {
width: drawerWidth,
flexShrink: 0,
whiteSpace: 'nowrap',
whiteSpace: "nowrap",
top: theme.spacing.unit * 8,
[theme.breakpoints.down("sm")]: {
top: 0,
top: 0
}
},
drawerOpen: {
width: drawerWidth,
transition: theme.transitions.create('width', {
transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
duration: theme.transitions.duration.enteringScreen
})
},
drawerClose: {
transition: theme.transitions.create('width', {
transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
duration: theme.transitions.duration.leavingScreen
}),
overflowX: 'hidden',
overflowX: "hidden",
width: theme.spacing.unit * 7 + 40,
[theme.breakpoints.down("sm")]: {
width: drawerWidth,
width: drawerWidth
}
},
toolbar: {
...theme.mixins.toolbar,
[theme.breakpoints.down("sm")]: {
display: 'none',
display: "none"
}
},
content: {
flexGrow: 1,
padding: theme.spacing.unit * 3,
padding: theme.spacing.unit * 3
},
mobileBackButton: {
marginTop: theme.spacing.unit * .5,
marginTop: theme.spacing.unit * 0.5,
marginLeft: theme.spacing.unit * 3,
[theme.breakpoints.only("sm")]: {
marginTop: theme.spacing.unit * .625,
marginTop: theme.spacing.unit * 0.625
},
[theme.breakpoints.up("md")]: {
display: 'none',
display: "none"
}
}
});