Remove obsolete files
This commit is contained in:
dominik-zeglen
parent
97c3d06241
commit
ac0e8f03fc
3 changed files with 0 additions and 637 deletions
|
|
@ -1,369 +0,0 @@
|
|||
import configureIcon from "@assets/images/menu-configure-icon.svg";
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
import { User } from "@saleor/fragments/types/User";
|
||||
import useTheme from "@saleor/hooks/useTheme";
|
||||
import { sectionNames } from "@saleor/intl";
|
||||
import classNames from "classnames";
|
||||
import React from "react";
|
||||
import SVG from "react-inlinesvg";
|
||||
import { FormattedMessage, useIntl } from "react-intl";
|
||||
import { matchPath } from "react-router";
|
||||
|
||||
import {
|
||||
configurationMenuUrl,
|
||||
createConfigurationMenu
|
||||
} from "../../configuration";
|
||||
import { createHref } from "../../misc";
|
||||
import { orderDraftListUrl, orderListUrl } from "../../orders/urls";
|
||||
import MenuNested from "./MenuNested";
|
||||
import { IMenuItem } from "./menuStructure";
|
||||
|
||||
const useStyles = makeStyles(
|
||||
theme => ({
|
||||
menuIcon: {
|
||||
"& svg": {
|
||||
height: 32,
|
||||
width: 32
|
||||
},
|
||||
display: "inline-block",
|
||||
position: "relative",
|
||||
top: 8
|
||||
},
|
||||
menuIconDark: {
|
||||
"& path": {
|
||||
fill: theme.palette.common.white
|
||||
}
|
||||
},
|
||||
menuIconSmall: {
|
||||
left: -5
|
||||
},
|
||||
menuIsActive: {
|
||||
boxShadow: "0px 0px 12px 1px rgba(0,0,0,0.2)"
|
||||
},
|
||||
menuItemHover: {
|
||||
"& p": {
|
||||
fontSize: 14,
|
||||
transition: "color 0.5s ease, opacity 0.3s ease-out"
|
||||
},
|
||||
"& path": {
|
||||
transition: "fill 0.5s ease"
|
||||
},
|
||||
"&:hover": {
|
||||
"& p": {
|
||||
color: theme.palette.primary.main
|
||||
},
|
||||
"& path": {
|
||||
fill: theme.palette.primary.main
|
||||
},
|
||||
"&:before": {
|
||||
borderLeft: `solid 2px ${theme.palette.primary.main}`,
|
||||
content: "''",
|
||||
height: 33,
|
||||
left: -20,
|
||||
position: "absolute",
|
||||
top: 8
|
||||
},
|
||||
color: theme.palette.primary.main
|
||||
},
|
||||
cursor: "pointer",
|
||||
position: "relative"
|
||||
},
|
||||
menuList: {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
height: "100%",
|
||||
marginLeft: theme.spacing(4),
|
||||
marginTop: theme.spacing(2),
|
||||
paddingBottom: theme.spacing(3)
|
||||
},
|
||||
menuListItem: {
|
||||
alignItems: "center",
|
||||
display: "block",
|
||||
marginBottom: theme.spacing(5),
|
||||
paddingLeft: 0,
|
||||
textDecoration: "none",
|
||||
transition: theme.transitions.duration.standard + "ms"
|
||||
},
|
||||
menuListItemActive: {
|
||||
"& $menuListItemText": {
|
||||
color: theme.palette.primary.main
|
||||
},
|
||||
"& path": {
|
||||
color: theme.palette.primary.main,
|
||||
fill: theme.palette.primary.main
|
||||
}
|
||||
},
|
||||
menuListItemOpen: {
|
||||
"&:after": {
|
||||
borderBottom: `10px solid transparent`,
|
||||
borderLeft: `10px solid ${theme.palette.background.paper}`,
|
||||
borderTop: `10px solid transparent`,
|
||||
content: "''",
|
||||
height: 0,
|
||||
position: "absolute",
|
||||
right: -30,
|
||||
top: 15,
|
||||
width: 0
|
||||
},
|
||||
"&:before": {
|
||||
borderLeft: `solid 2px ${theme.palette.primary.main}`,
|
||||
content: "''",
|
||||
height: 33,
|
||||
left: -20,
|
||||
position: "absolute",
|
||||
top: 8
|
||||
},
|
||||
position: "relative"
|
||||
},
|
||||
menuListItemText: {
|
||||
"&:hover": {
|
||||
color: theme.palette.primary.main
|
||||
},
|
||||
bottom: 0,
|
||||
cursor: "pointer",
|
||||
fontSize: "1rem",
|
||||
fontWeight: 500,
|
||||
left: 30,
|
||||
opacity: 1,
|
||||
paddingLeft: 16,
|
||||
position: "absolute",
|
||||
textTransform: "uppercase",
|
||||
transition: "opacity 0.5s ease"
|
||||
},
|
||||
menuListItemTextHide: {
|
||||
bottom: 0,
|
||||
left: 30,
|
||||
opacity: 0,
|
||||
position: "absolute"
|
||||
},
|
||||
subMenu: {
|
||||
padding: "0 15px"
|
||||
},
|
||||
subMenuDrawer: {
|
||||
background: "#000",
|
||||
cursor: "pointer",
|
||||
height: "100vh",
|
||||
left: 0,
|
||||
opacity: 0.2,
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
width: 0,
|
||||
zIndex: -2
|
||||
},
|
||||
subMenuDrawerOpen: {
|
||||
width: `100vw`
|
||||
}
|
||||
}),
|
||||
{ name: "MenuList" }
|
||||
);
|
||||
|
||||
interface MenuListProps {
|
||||
className?: string;
|
||||
menuItems: IMenuItem[];
|
||||
isMenuSmall: boolean;
|
||||
location: string;
|
||||
user: User;
|
||||
renderConfigure: boolean;
|
||||
onMenuItemClick: (url: string, event: React.MouseEvent<any>) => void;
|
||||
}
|
||||
|
||||
export interface IActiveSubMenu {
|
||||
isActive: boolean;
|
||||
label: string | null;
|
||||
}
|
||||
|
||||
const MenuList: React.FC<MenuListProps> = props => {
|
||||
const {
|
||||
className,
|
||||
menuItems,
|
||||
isMenuSmall,
|
||||
location,
|
||||
user,
|
||||
renderConfigure,
|
||||
onMenuItemClick
|
||||
} = props;
|
||||
|
||||
const classes = useStyles(props);
|
||||
|
||||
const { isDark } = useTheme();
|
||||
const [activeSubMenu, setActiveSubMenu] = React.useState<IActiveSubMenu>({
|
||||
isActive: false,
|
||||
label: null
|
||||
});
|
||||
const intl = useIntl();
|
||||
|
||||
const configurationMenu = createConfigurationMenu(intl).map(menu => {
|
||||
menu.menuItems.map(item =>
|
||||
user.userPermissions.map(perm => perm.code).includes(item.permission)
|
||||
);
|
||||
});
|
||||
|
||||
const handleSubMenu = itemLabel => {
|
||||
setActiveSubMenu({
|
||||
isActive:
|
||||
itemLabel === activeSubMenu.label ? !activeSubMenu.isActive : true,
|
||||
label: itemLabel
|
||||
});
|
||||
};
|
||||
|
||||
const closeSubMenu = (menuItemUrl, event) => {
|
||||
setActiveSubMenu({
|
||||
isActive: false,
|
||||
label: null
|
||||
});
|
||||
if (menuItemUrl && event) {
|
||||
onMenuItemClick(menuItemUrl, event);
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames(className, {
|
||||
[classes.menuIsActive]: activeSubMenu.isActive
|
||||
})}
|
||||
data-test="mainMenu"
|
||||
>
|
||||
{/* FIXME: this .split("?")[0] looks gross */}
|
||||
{menuItems.map(menuItem => {
|
||||
const isActive = (menuItem: IMenuItem) =>
|
||||
location.split("?")[0] === orderDraftListUrl().split("?")[0] &&
|
||||
menuItem.url.split("?")[0] === orderListUrl().split("?")[0]
|
||||
? false
|
||||
: !!matchPath(location.split("?")[0], {
|
||||
exact: menuItem.url.split("?")[0] === "/",
|
||||
path: menuItem.url.split("?")[0]
|
||||
});
|
||||
|
||||
if (
|
||||
menuItem.permission &&
|
||||
!user.userPermissions
|
||||
.map(perm => perm.code)
|
||||
.includes(menuItem.permission)
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (!menuItem.url) {
|
||||
const isAnyChildActive = menuItem.children.reduce(
|
||||
(acc, child) => acc || isActive(child),
|
||||
false
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames(classes.menuListItem, {
|
||||
[classes.menuListItemActive]: isAnyChildActive
|
||||
})}
|
||||
key={menuItem.label}
|
||||
data-testid={menuItem.testingContextId}
|
||||
data-test="menuItemEntry"
|
||||
>
|
||||
<div
|
||||
className={classNames(classes.menuItemHover, {
|
||||
[classes.menuListItemOpen]:
|
||||
menuItem.ariaLabel === activeSubMenu.label &&
|
||||
activeSubMenu.isActive
|
||||
})}
|
||||
onClick={() => handleSubMenu(menuItem.ariaLabel)}
|
||||
>
|
||||
<SVG
|
||||
className={classNames(classes.menuIcon, {
|
||||
[classes.menuIconDark]: isDark,
|
||||
[classes.menuIconSmall]: !isMenuSmall
|
||||
})}
|
||||
src={menuItem.icon}
|
||||
/>
|
||||
<Typography
|
||||
aria-label={menuItem.ariaLabel}
|
||||
className={classNames(classes.menuListItemText, {
|
||||
[classes.menuListItemTextHide]: !isMenuSmall
|
||||
})}
|
||||
>
|
||||
{menuItem.label}
|
||||
</Typography>
|
||||
</div>
|
||||
<MenuNested
|
||||
activeItem={activeSubMenu}
|
||||
closeSubMenu={setActiveSubMenu}
|
||||
menuItem={menuItem}
|
||||
onMenuItemClick={onMenuItemClick}
|
||||
handleSubMenu={handleSubMenu}
|
||||
title={menuItem.label}
|
||||
icon={menuItem.icon}
|
||||
ariaLabel={menuItem.ariaLabel}
|
||||
/>
|
||||
<div
|
||||
onClick={event => closeSubMenu(null, event)}
|
||||
className={classNames(classes.subMenuDrawer, {
|
||||
[classes.subMenuDrawerOpen]: activeSubMenu.isActive
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<a
|
||||
className={classNames(classes.menuListItem, {
|
||||
[classes.menuListItemActive]: isActive(menuItem)
|
||||
})}
|
||||
href={createHref(menuItem.url)}
|
||||
onClick={event => closeSubMenu(menuItem.url, event)}
|
||||
key={menuItem.label}
|
||||
data-testid={menuItem.testingContextId}
|
||||
data-test="menuItemEntry"
|
||||
>
|
||||
<div className={classes.menuItemHover}>
|
||||
<SVG
|
||||
className={classNames(classes.menuIcon, {
|
||||
[classes.menuIconDark]: isDark,
|
||||
[classes.menuIconSmall]: !isMenuSmall
|
||||
})}
|
||||
src={menuItem.icon}
|
||||
/>
|
||||
<Typography
|
||||
aria-label={menuItem.ariaLabel}
|
||||
className={classNames(classes.menuListItemText, {
|
||||
[classes.menuListItemTextHide]: !isMenuSmall
|
||||
})}
|
||||
>
|
||||
{menuItem.label}
|
||||
</Typography>
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
{renderConfigure && configurationMenu.length > 0 && (
|
||||
<a
|
||||
className={classes.menuListItem}
|
||||
href={createHref(configurationMenuUrl)}
|
||||
onClick={event => closeSubMenu(configurationMenuUrl, event)}
|
||||
>
|
||||
<div className={classes.menuItemHover}>
|
||||
<SVG
|
||||
className={classNames(classes.menuIcon, {
|
||||
[classes.menuIconDark]: isDark,
|
||||
[classes.menuIconSmall]: !isMenuSmall
|
||||
})}
|
||||
src={configureIcon}
|
||||
/>
|
||||
<Typography
|
||||
aria-label="configuration"
|
||||
className={classNames(classes.menuListItemText, {
|
||||
[classes.menuListItemTextHide]: !isMenuSmall
|
||||
})}
|
||||
>
|
||||
<FormattedMessage {...sectionNames.configuration} />
|
||||
</Typography>
|
||||
</div>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
MenuList.displayName = "MenuList";
|
||||
export default MenuList;
|
||||
|
|
@ -1,194 +0,0 @@
|
|||
import menuArrowIcon from "@assets/images/menu-arrow-icon.svg";
|
||||
import Hidden from "@material-ui/core/Hidden";
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
import useTheme from "@saleor/hooks/useTheme";
|
||||
import { createHref } from "@saleor/misc";
|
||||
import classNames from "classnames";
|
||||
import React from "react";
|
||||
import SVG from "react-inlinesvg";
|
||||
|
||||
import { drawerNestedMenuWidth, drawerWidthExpandedMobile } from "./consts";
|
||||
import { IActiveSubMenu } from "./MenuList";
|
||||
import { IMenuItem } from "./menuStructure";
|
||||
|
||||
const useStyles = makeStyles(
|
||||
theme => ({
|
||||
menuListNested: {
|
||||
background: theme.palette.background.paper,
|
||||
height: "100vh",
|
||||
position: "absolute",
|
||||
right: 0,
|
||||
top: 0,
|
||||
transition: `right ${theme.transitions.duration.shorter}ms ease`,
|
||||
width: drawerNestedMenuWidth,
|
||||
zIndex: -1
|
||||
},
|
||||
menuListNestedClose: {
|
||||
"& svg": {
|
||||
fill: theme.palette.primary.main,
|
||||
left: 11,
|
||||
position: "relative",
|
||||
top: 1
|
||||
},
|
||||
border: `solid 1px #EAEAEA`,
|
||||
borderRadius: "100%",
|
||||
cursor: "pointer",
|
||||
height: 32,
|
||||
position: "absolute",
|
||||
right: 32,
|
||||
top: 35,
|
||||
transform: "rotate(180deg)",
|
||||
width: 32
|
||||
},
|
||||
menuListNestedCloseDark: {
|
||||
border: `solid 1px #252728`
|
||||
},
|
||||
menuListNestedHide: {
|
||||
opacity: 0
|
||||
},
|
||||
menuListNestedIcon: {
|
||||
"& path": {
|
||||
fill: "initial"
|
||||
},
|
||||
"& svg": { height: 32, position: "relative", top: 7, width: 32 }
|
||||
},
|
||||
menuListNestedIconDark: {
|
||||
"& path": {
|
||||
fill: theme.palette.common.white
|
||||
}
|
||||
},
|
||||
menuListNestedItem: {
|
||||
"&:hover": {
|
||||
"& p": {
|
||||
color: theme.palette.primary.main
|
||||
}
|
||||
},
|
||||
display: "block",
|
||||
marginBottom: theme.spacing(2),
|
||||
padding: "0px 30px",
|
||||
textDecoration: "none"
|
||||
},
|
||||
menuListNestedOpen: {
|
||||
[theme.breakpoints.down("sm")]: {
|
||||
right: 0,
|
||||
width: drawerWidthExpandedMobile,
|
||||
zIndex: 2
|
||||
},
|
||||
right: -drawerNestedMenuWidth,
|
||||
width: drawerNestedMenuWidth,
|
||||
zIndex: -1
|
||||
},
|
||||
subHeader: {
|
||||
borderBottom: "solid 1px #EAEAEA",
|
||||
margin: "30px",
|
||||
marginBottom: 39,
|
||||
paddingBottom: 22
|
||||
},
|
||||
subHeaderDark: {
|
||||
borderBottom: "solid 1px #252728"
|
||||
},
|
||||
subHeaderTitle: {
|
||||
[theme.breakpoints.up("md")]: {
|
||||
paddingLeft: 0
|
||||
},
|
||||
display: "inline",
|
||||
paddingLeft: 10
|
||||
}
|
||||
}),
|
||||
{ name: "MenuNested" }
|
||||
);
|
||||
|
||||
export interface MenuNestedProps {
|
||||
activeItem: IActiveSubMenu;
|
||||
ariaLabel: string;
|
||||
closeSubMenu: ({ isActive, label }: IActiveSubMenu) => void;
|
||||
icon: string;
|
||||
menuItem: IMenuItem;
|
||||
title: string;
|
||||
handleSubMenu: (itemLabel: string) => void;
|
||||
onMenuItemClick: (url: string, event: React.MouseEvent<any>) => void;
|
||||
}
|
||||
|
||||
const MenuNested: React.FC<MenuNestedProps> = props => {
|
||||
const {
|
||||
activeItem,
|
||||
ariaLabel,
|
||||
|
||||
closeSubMenu,
|
||||
icon,
|
||||
menuItem,
|
||||
onMenuItemClick,
|
||||
title
|
||||
} = props;
|
||||
const classes = useStyles(props);
|
||||
|
||||
const menuItems = menuItem.children;
|
||||
const { isDark } = useTheme();
|
||||
const closeMenu = (menuItemUrl, event) => {
|
||||
onMenuItemClick(menuItemUrl, event);
|
||||
closeSubMenu({
|
||||
isActive: false,
|
||||
label: null
|
||||
});
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={classNames(classes.menuListNested, {
|
||||
[classes.menuListNestedOpen]:
|
||||
activeItem.label === ariaLabel && activeItem.isActive
|
||||
})}
|
||||
>
|
||||
<Typography
|
||||
className={classNames(classes.subHeader, {
|
||||
[classes.subHeaderDark]: isDark
|
||||
})}
|
||||
variant="h5"
|
||||
>
|
||||
<Hidden mdUp>
|
||||
<SVG
|
||||
className={classNames(classes.menuListNestedIcon, {
|
||||
[classes.menuListNestedIconDark]: isDark
|
||||
})}
|
||||
src={icon}
|
||||
/>
|
||||
</Hidden>
|
||||
<div className={classes.subHeaderTitle}>{title}</div>
|
||||
<Hidden mdUp>
|
||||
<div
|
||||
className={classNames(classes.menuListNestedClose, {
|
||||
[classes.menuListNestedCloseDark]: isDark
|
||||
})}
|
||||
data-test={ariaLabel}
|
||||
onClick={() =>
|
||||
closeSubMenu({
|
||||
isActive: false,
|
||||
label: null
|
||||
})
|
||||
}
|
||||
>
|
||||
<SVG src={menuArrowIcon} />
|
||||
</div>
|
||||
</Hidden>
|
||||
</Typography>
|
||||
{menuItems.map(item => (
|
||||
<a
|
||||
className={classNames(classes.menuListNestedItem)}
|
||||
href={createHref(item.url)}
|
||||
data-test={ariaLabel}
|
||||
onClick={event => closeMenu(item.url, event)}
|
||||
key={item.label}
|
||||
>
|
||||
<Typography aria-label={item.ariaLabel}>{item.label}</Typography>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
MenuNested.displayName = "MenuNested";
|
||||
export default MenuNested;
|
||||
|
|
@ -1,74 +0,0 @@
|
|||
import Drawer from "@material-ui/core/Drawer";
|
||||
import Hidden from "@material-ui/core/Hidden";
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
import React from "react";
|
||||
|
||||
import {
|
||||
drawerWidth,
|
||||
drawerWidthExpanded,
|
||||
drawerWidthExpandedMobile
|
||||
} from "./consts";
|
||||
|
||||
const useStyles = makeStyles(
|
||||
theme => ({
|
||||
drawerDesktop: {
|
||||
backgroundColor: theme.palette.background.paper,
|
||||
border: "none",
|
||||
height: "100vh",
|
||||
overflow: "visible",
|
||||
padding: 0,
|
||||
position: "fixed" as "fixed",
|
||||
transition: "width 0.3s ease",
|
||||
width: drawerWidthExpanded
|
||||
},
|
||||
drawerDesktopSmall: {
|
||||
overflow: "visible",
|
||||
transition: "width 0.2s ease",
|
||||
width: drawerWidth
|
||||
},
|
||||
drawerMobile: {
|
||||
width: drawerWidthExpandedMobile
|
||||
}
|
||||
}),
|
||||
{ name: "ResponsiveDrawer" }
|
||||
);
|
||||
|
||||
interface ResponsiveDrawerProps {
|
||||
children?: React.ReactNode;
|
||||
open: boolean;
|
||||
small: boolean;
|
||||
onClose?();
|
||||
}
|
||||
|
||||
const ResponsiveDrawer: React.FC<ResponsiveDrawerProps> = props => {
|
||||
const { children, onClose, open, small } = props;
|
||||
|
||||
const classes = useStyles(props);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Hidden smDown>
|
||||
<Drawer
|
||||
variant="persistent"
|
||||
open
|
||||
classes={{
|
||||
paper: small ? classes.drawerDesktop : classes.drawerDesktopSmall
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</Drawer>
|
||||
</Hidden>
|
||||
<Hidden mdUp>
|
||||
<Drawer
|
||||
variant="temporary"
|
||||
onClose={onClose}
|
||||
open={open}
|
||||
classes={{ paper: classes.drawerMobile }}
|
||||
>
|
||||
{children}
|
||||
</Drawer>
|
||||
</Hidden>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default ResponsiveDrawer;
|
||||
Loading…
Reference in a new issue