fix
parent
a16663d08d
commit
c7e4d249c6
|
@ -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: "/"
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
|
|
|
@ -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";
|
||||
|
||||
|
|
|
@ -0,0 +1,2 @@
|
|||
import Notification from "./Notification";
|
||||
export default Notification;
|
|
@ -0,0 +1,2 @@
|
|||
import PageTitle from "./PageTitle";
|
||||
export default PageTitle;
|
|
@ -0,0 +1,2 @@
|
|||
import Sidebar from "./Sidebar";
|
||||
export default Sidebar;
|
|
@ -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" },
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -0,0 +1,2 @@
|
|||
import Widget from "./Widget";
|
||||
export default Widget;
|
|
@ -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);
|
||||
};
|
||||
|
|
|
@ -0,0 +1 @@
|
|||
export { Badge, Typography, Button } from "./Wrappers";
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue