master
Tudor Stanciu 2021-07-04 14:16:25 +03:00
parent a16663d08d
commit c7e4d249c6
11 changed files with 68 additions and 47 deletions

View File

@ -2,7 +2,7 @@ import React from "react";
import { HashRouter, Route, Switch, Redirect } from "react-router-dom";
// components
import Layout from "./Layout";
import Layout from "./Layout/Layout";
// pages
import Error from "../pages/error";
@ -37,7 +37,7 @@ export default function App() {
return (
<Route
{...rest}
render={props =>
render={(props) =>
isAuthenticated ? (
React.createElement(component, props)
) : (
@ -45,8 +45,8 @@ export default function App() {
to={{
pathname: "/login",
state: {
from: props.location,
},
from: props.location
}
}}
/>
)
@ -59,11 +59,11 @@ export default function App() {
return (
<Route
{...rest}
render={props =>
render={(props) =>
isAuthenticated ? (
<Redirect
to={{
pathname: "/",
pathname: "/"
}}
/>
) : (

View File

@ -2,7 +2,7 @@ import React from "react";
import { withRouter } from "react-router-dom";
// components
import Header from "../Header";
import Header from "../Header/Header";
import Sidebar from "../Sidebar";
import Content from "./Content";

View File

@ -0,0 +1,2 @@
import Notification from "./Notification";
export default Notification;

View File

@ -0,0 +1,2 @@
import PageTitle from "./PageTitle";
export default PageTitle;

View File

@ -0,0 +1,2 @@
import Sidebar from "./Sidebar";
export default Sidebar;

View File

@ -24,7 +24,7 @@ const menu = [
{
id: 1,
label: "Resources",
link: "/app/typography",
link: "/app/resources",
icon: <ImageIcon />
},
@ -33,13 +33,13 @@ const menu = [
{
id: 4,
label: "Admin",
link: "/app/typography",
link: "/app/admin",
icon: <BuildIcon />
},
{
id: 5,
label: "Settings",
link: "/app/typography",
link: "/app/settings",
icon: <SettingsIcon />,
children: [
{
@ -53,7 +53,7 @@ const menu = [
{
id: 6,
label: "Health",
link: "/app/typography",
link: "/app/health",
icon: <NetworkCheckIcon />
},
{ id: 7, type: "divider" },

View File

@ -4,7 +4,7 @@ import {
IconButton,
Menu,
MenuItem,
Typography,
Typography
} from "@material-ui/core";
import { MoreVert as MoreIcon } from "@material-ui/icons";
import classnames from "classnames";
@ -32,14 +32,21 @@ export default function Widget({
var [isMoreMenuOpen, setMoreMenuOpen] = useState(false);
return (
<div className={classes.widgetWrapper} style={style && {...style}}>
<Paper className={classes.paper} classes={{ root: classnames(classes.widgetRoot, {
[classes.noWidgetShadow]: noWidgetShadow
}) }}>
<div className={classnames(classes.widgetHeader, {
[classes.noPadding]: noHeaderPadding,
[headerClass]: headerClass
})}>
<div className={classes.widgetWrapper} style={style && { ...style }}>
<Paper
className={classes.paper}
classes={{
root: classnames(classes.widgetRoot, {
[classes.noWidgetShadow]: noWidgetShadow
})
}}
>
<div
className={classnames(classes.widgetHeader, {
[classes.noPadding]: noHeaderPadding,
[headerClass]: headerClass
})}
>
{header ? (
header
) : (
@ -65,7 +72,7 @@ export default function Widget({
<div
className={classnames(classes.widgetBody, {
[classes.noPadding]: noBodyPadding,
[bodyClass]: bodyClass,
[bodyClass]: bodyClass
})}
>
{children}

View File

@ -0,0 +1,2 @@
import Widget from "./Widget";
export default Widget;

View File

@ -3,18 +3,18 @@ import {
withStyles,
Badge as BadgeBase,
Typography as TypographyBase,
Button as ButtonBase,
Button as ButtonBase
} from "@material-ui/core";
import { useTheme, makeStyles } from "@material-ui/styles";
import classnames from "classnames";
// styles
var useStyles = makeStyles(theme => ({
var useStyles = makeStyles((theme) => ({
badge: {
fontWeight: 600,
height: 16,
minWidth: 16,
},
minWidth: 16
}
}));
function Badge({ children, colorBrightness, color, ...props }) {
@ -22,16 +22,16 @@ function Badge({ children, colorBrightness, color, ...props }) {
var theme = useTheme();
var Styled = createStyled({
badge: {
backgroundColor: getColor(color, theme, colorBrightness),
},
backgroundColor: getColor(color, theme, colorBrightness)
}
});
return (
<Styled>
{styledProps => (
{(styledProps) => (
<BadgeBase
classes={{
badge: classnames(classes.badge, styledProps.classes.badge),
badge: classnames(classes.badge, styledProps.classes.badge)
}}
{...props}
>
@ -57,7 +57,7 @@ function Typography({
style={{
color: getColor(color, theme, colorBrightness),
fontWeight: getFontWeight(weight),
fontSize: getFontSize(size, props.variant, theme),
fontSize: getFontSize(size, props.variant, theme)
}}
{...props}
>
@ -71,7 +71,7 @@ function Button({ children, color, className, ...props }) {
var Styled = createStyled({
root: {
color: getColor(color, theme),
color: getColor(color, theme)
},
contained: {
backgroundColor: getColor(color, theme),
@ -79,20 +79,20 @@ function Button({ children, color, className, ...props }) {
color: `${color ? "white" : theme.palette.text.primary} !important`,
"&:hover": {
backgroundColor: getColor(color, theme, "light"),
boxShadow: theme.customShadows.widgetWide,
boxShadow: theme.customShadows.widgetWide
},
"&:active": {
boxShadow: theme.customShadows.widgetWide,
},
boxShadow: theme.customShadows.widgetWide
}
},
outlined: {
color: getColor(color, theme),
borderColor: getColor(color, theme),
borderColor: getColor(color, theme)
},
select: {
backgroundColor: theme.palette.primary.main,
color: "#fff",
},
color: "#fff"
}
});
return (
@ -102,14 +102,14 @@ function Button({ children, color, className, ...props }) {
classes={{
contained: classes.contained,
root: classes.root,
outlined: classes.outlined,
outlined: classes.outlined
}}
{...props}
className={classnames(
{
[classes.select]: props.select,
[classes.select]: props.select
},
className,
className
)}
>
{children}
@ -172,7 +172,7 @@ function getFontSize(size, variant = "", theme) {
}
function createStyled(styles, options) {
var Styled = function(props) {
var Styled = function (props) {
const { children, ...other } = props;
return children(other);
};

View File

@ -0,0 +1 @@
export { Badge, Typography, Button } from "./Wrappers";

View File

@ -28,14 +28,14 @@ const datatableData = [
["Anna Siranush", "Example Inc.", "Yonkers", "NY"],
["Avram Sylva", "Example Inc.", "Hartford", "CT"],
["Serafima Babatunde", "Example Inc.", "Tampa", "FL"],
["Gaston Festus", "Example Inc.", "Tampa", "FL"],
["Gaston Festus", "Example Inc.", "Tampa", "FL"]
];
const useStyles = makeStyles(theme => ({
const useStyles = makeStyles((theme) => ({
tableOverflow: {
overflow: 'auto'
overflow: "auto"
}
}))
}));
export default function Tables() {
const classes = useStyles();
@ -49,12 +49,17 @@ export default function Tables() {
data={datatableData}
columns={["Name", "Company", "City", "State"]}
options={{
filterType: "checkbox",
filterType: "checkbox"
}}
/>
</Grid>
<Grid item xs={12}>
<Widget title="Material-UI Table" upperTitle noBodyPadding bodyClass={classes.tableOverflow}>
<Widget
title="Material-UI Table"
upperTitle
noBodyPadding
bodyClass={classes.tableOverflow}
>
<Table data={mock.table} />
</Widget>
</Grid>