mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-17 12:50:43 +00:00
SPRINT-18: checkpoint commit of deletion of lots of things, updated typescript version in package.json
This commit is contained in:
Tim Chamberlain
@ -191,7 +191,7 @@ material-dashboard-2-pro-react-ts
|
||||
│ │ └── widgets
|
||||
│ ├── types
|
||||
│ ├── App.tsx
|
||||
│ ├── index.tsx
|
||||
│ ├── BaseLayout.tsx
|
||||
│ ├── page.routes.tsx
|
||||
│ └── routes.tsx
|
||||
├── .eslintignore
|
||||
|
||||
543
package-lock.json
generated
543
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -116,7 +116,7 @@
|
||||
"eslint-plugin-jsx-a11y": "6.5.1",
|
||||
"eslint-plugin-react": "7.28.0",
|
||||
"eslint-plugin-react-hooks": "4.3.0",
|
||||
"typescript": "^4.7.3"
|
||||
"typescript": "4.9.4"
|
||||
},
|
||||
"main": "qqq-frontend-material-dashboard.js",
|
||||
"module": "lib/qqq-frontend-material-dashboard.js",
|
||||
|
||||
@ -1,89 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import Avatar from "@mui/material/Avatar";
|
||||
import { styled, Theme } from "@mui/material/styles";
|
||||
|
||||
export default styled(Avatar)(({ theme, ownerState }: { theme?: Theme | any; ownerState: any }) => {
|
||||
const { palette, functions, typography, boxShadows } = theme;
|
||||
const { shadow, bgColor, size } = ownerState;
|
||||
|
||||
const { gradients, transparent, white } = palette;
|
||||
const { pxToRem, linearGradient } = functions;
|
||||
const { size: fontSize, fontWeightRegular } = typography;
|
||||
|
||||
// backgroundImage value
|
||||
const backgroundValue =
|
||||
bgColor === "transparent"
|
||||
? transparent.main
|
||||
: linearGradient(gradients[bgColor].main, gradients[bgColor].state);
|
||||
|
||||
// size value
|
||||
let sizeValue;
|
||||
|
||||
switch (size) {
|
||||
case "xs":
|
||||
sizeValue = {
|
||||
width: pxToRem(24),
|
||||
height: pxToRem(24),
|
||||
fontSize: fontSize.xs,
|
||||
};
|
||||
break;
|
||||
case "sm":
|
||||
sizeValue = {
|
||||
width: pxToRem(36),
|
||||
height: pxToRem(36),
|
||||
fontSize: fontSize.sm,
|
||||
};
|
||||
break;
|
||||
case "lg":
|
||||
sizeValue = {
|
||||
width: pxToRem(58),
|
||||
height: pxToRem(58),
|
||||
fontSize: fontSize.sm,
|
||||
};
|
||||
break;
|
||||
case "xl":
|
||||
sizeValue = {
|
||||
width: pxToRem(74),
|
||||
height: pxToRem(74),
|
||||
fontSize: fontSize.md,
|
||||
};
|
||||
break;
|
||||
case "xxl":
|
||||
sizeValue = {
|
||||
width: pxToRem(110),
|
||||
height: pxToRem(110),
|
||||
fontSize: fontSize.md,
|
||||
};
|
||||
break;
|
||||
default: {
|
||||
sizeValue = {
|
||||
width: pxToRem(48),
|
||||
height: pxToRem(48),
|
||||
fontSize: fontSize.md,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
background: backgroundValue,
|
||||
color: white.main,
|
||||
fontWeight: fontWeightRegular,
|
||||
boxShadow: boxShadows[shadow],
|
||||
...sizeValue,
|
||||
};
|
||||
});
|
||||
@ -1,52 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { FC, forwardRef } from "react";
|
||||
|
||||
// @mui material components
|
||||
import { AvatarProps } from "@mui/material";
|
||||
|
||||
// Custom styles for MDAvatar
|
||||
import MDAvatarRoot from "components/MDAvatar/MDAvatarRoot";
|
||||
|
||||
// declare props types for MDAvatar
|
||||
interface Props extends AvatarProps {
|
||||
bgColor?:
|
||||
| "transparent"
|
||||
| "primary"
|
||||
| "secondary"
|
||||
| "info"
|
||||
| "success"
|
||||
| "warning"
|
||||
| "error"
|
||||
| "light"
|
||||
| "dark";
|
||||
size?: "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
|
||||
shadow?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "inset";
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
const MDAvatar: FC<Props> = forwardRef(({ bgColor, size, shadow, ...rest }, ref) => (
|
||||
<MDAvatarRoot ref={ref} ownerState={{ shadow, bgColor, size }} {...rest} />
|
||||
));
|
||||
|
||||
// Declaring default props for MDAvatar
|
||||
MDAvatar.defaultProps = {
|
||||
bgColor: "transparent",
|
||||
size: "md",
|
||||
shadow: "none",
|
||||
};
|
||||
|
||||
export default MDAvatar;
|
||||
@ -1,134 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import Badge from "@mui/material/Badge";
|
||||
import { styled, Theme } from "@mui/material/styles";
|
||||
|
||||
export default styled(Badge)(({ theme, ownerState }: { theme?: Theme; ownerState: any }) => {
|
||||
const { palette, typography, borders, functions } = theme;
|
||||
const { color, circular, border, size, indicator, variant, container, children } = ownerState;
|
||||
|
||||
const { white, dark, gradients, badgeColors } = palette;
|
||||
const { size: fontSize, fontWeightBold } = typography;
|
||||
const { borderRadius, borderWidth } = borders;
|
||||
const { pxToRem, linearGradient } = functions;
|
||||
|
||||
// padding values
|
||||
const paddings: { [key: string]: string } = {
|
||||
xs: "0.45em 0.775em",
|
||||
sm: "0.55em 0.9em",
|
||||
md: "0.65em 1em",
|
||||
lg: "0.85em 1.375em",
|
||||
};
|
||||
|
||||
// fontSize value
|
||||
const fontSizeValue = size === "xs" ? fontSize.xxs : fontSize.xs;
|
||||
|
||||
// border value
|
||||
const borderValue = border ? `${borderWidth[3]} solid ${white.main}` : "none";
|
||||
|
||||
// borderRadius value
|
||||
const borderRadiusValue = circular ? borderRadius.section : borderRadius.md;
|
||||
|
||||
// styles for the badge with indicator={true}
|
||||
const indicatorStyles = (sizeProp: string) => {
|
||||
let widthValue = pxToRem(20);
|
||||
let heightValue = pxToRem(20);
|
||||
|
||||
if (sizeProp === "medium") {
|
||||
widthValue = pxToRem(24);
|
||||
heightValue = pxToRem(24);
|
||||
} else if (sizeProp === "large") {
|
||||
widthValue = pxToRem(32);
|
||||
heightValue = pxToRem(32);
|
||||
}
|
||||
|
||||
return {
|
||||
width: widthValue,
|
||||
height: heightValue,
|
||||
display: "grid",
|
||||
placeItems: "center",
|
||||
textAlign: "center",
|
||||
borderRadius: "50%",
|
||||
padding: 0,
|
||||
border: borderValue,
|
||||
};
|
||||
};
|
||||
|
||||
// styles for the badge with variant="gradient"
|
||||
const gradientStyles = (colorProp: string) => {
|
||||
const backgroundValue = gradients[colorProp]
|
||||
? linearGradient(gradients[colorProp].main, gradients[colorProp].state)
|
||||
: linearGradient(gradients.info.main, gradients.info.state);
|
||||
const colorValue = colorProp === "light" ? dark.main : white.main;
|
||||
|
||||
return {
|
||||
background: backgroundValue,
|
||||
color: colorValue,
|
||||
};
|
||||
};
|
||||
|
||||
// styles for the badge with variant="contained"
|
||||
const containedStyles = (colorProp: string) => {
|
||||
const backgroundValue = badgeColors[colorProp]
|
||||
? badgeColors[colorProp].background
|
||||
: badgeColors.info.background;
|
||||
let colorValue = badgeColors[colorProp] ? badgeColors[colorProp].text : badgeColors.info.text;
|
||||
|
||||
if (colorProp === "light") {
|
||||
colorValue = dark.main;
|
||||
}
|
||||
return {
|
||||
background: backgroundValue,
|
||||
color: colorValue,
|
||||
};
|
||||
};
|
||||
|
||||
// styles for the badge with no children and container={false}
|
||||
const standAloneStyles = () => ({
|
||||
position: "static",
|
||||
marginLeft: pxToRem(8),
|
||||
transform: "none",
|
||||
fontSize: pxToRem(9),
|
||||
});
|
||||
|
||||
// styles for the badge with container={true}
|
||||
const containerStyles = () => ({
|
||||
position: "relative",
|
||||
transform: "none",
|
||||
});
|
||||
|
||||
return {
|
||||
"& .MuiBadge-badge": {
|
||||
height: "auto",
|
||||
padding: paddings[size] || paddings.xs,
|
||||
fontSize: fontSizeValue,
|
||||
fontWeight: fontWeightBold,
|
||||
textTransform: "uppercase",
|
||||
lineHeight: 1,
|
||||
textAlign: "center",
|
||||
whiteSpace: "nowrap",
|
||||
verticalAlign: "baseline",
|
||||
border: borderValue,
|
||||
borderRadius: borderRadiusValue,
|
||||
...(indicator && indicatorStyles(size)),
|
||||
...(variant === "gradient" && gradientStyles(color)),
|
||||
...(variant === "contained" && containedStyles(color)),
|
||||
...(!children && !container && standAloneStyles()),
|
||||
...(container && containerStyles()),
|
||||
},
|
||||
};
|
||||
});
|
||||
@ -1,62 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { FC, ReactNode, forwardRef } from "react";
|
||||
|
||||
// @mui material components
|
||||
import { BadgeProps } from "@mui/material";
|
||||
|
||||
// Custom styles for the MDBadge
|
||||
import MDBadgeRoot from "components/MDBadge/MDBadgeRoot";
|
||||
|
||||
// declaring props types for MDBadge
|
||||
interface Props extends Omit<BadgeProps, "color" | "variant"> {
|
||||
color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
|
||||
variant?: "gradient" | "contained";
|
||||
size?: "xs" | "sm" | "md" | "lg";
|
||||
circular?: boolean;
|
||||
indicator?: boolean;
|
||||
border?: boolean;
|
||||
children?: ReactNode;
|
||||
container?: boolean;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
const MDBadge: FC<Props | any> = forwardRef(
|
||||
({ color, variant, size, circular, indicator, border, container, children, ...rest }, ref) => (
|
||||
<MDBadgeRoot
|
||||
{...rest}
|
||||
ownerState={{ color, variant, size, circular, indicator, border, container, children }}
|
||||
ref={ref}
|
||||
color="default"
|
||||
>
|
||||
{children}
|
||||
</MDBadgeRoot>
|
||||
)
|
||||
);
|
||||
|
||||
// declaring default props for MDBadge
|
||||
MDBadge.defaultProps = {
|
||||
color: "info",
|
||||
variant: "gradient",
|
||||
size: "sm",
|
||||
circular: false,
|
||||
indicator: false,
|
||||
border: false,
|
||||
container: false,
|
||||
children: false,
|
||||
};
|
||||
|
||||
export default MDBadge;
|
||||
@ -1,107 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { FC, forwardRef } from "react";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// declaring props types for MDBadgeDot
|
||||
interface Props {
|
||||
variant?: "gradient" | "contained";
|
||||
color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
|
||||
size?: "xs" | "sm" | "md" | "lg";
|
||||
badgeContent: string;
|
||||
font?:
|
||||
| {
|
||||
color: string;
|
||||
weight: string;
|
||||
}
|
||||
| any;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
const MDBadgeDot: FC<Props> = forwardRef(
|
||||
({ variant, color, size, badgeContent, font = {}, ...rest }, ref) => {
|
||||
let finalSize;
|
||||
let fontSize: any;
|
||||
let padding;
|
||||
|
||||
if (size === "sm") {
|
||||
finalSize = "0.5rem";
|
||||
fontSize = "caption";
|
||||
padding = "0.45em 0.775em";
|
||||
} else if (size === "lg") {
|
||||
finalSize = "0.625rem";
|
||||
fontSize = "body2";
|
||||
padding = "0.85em 1.375em";
|
||||
} else if (size === "md") {
|
||||
finalSize = "0.5rem";
|
||||
fontSize = "button";
|
||||
padding = "0.65em 1em";
|
||||
} else {
|
||||
finalSize = "0.375rem";
|
||||
fontSize = "caption";
|
||||
padding = "0.45em 0.775em";
|
||||
}
|
||||
|
||||
const validColors = [
|
||||
"primary",
|
||||
"secondary",
|
||||
"info",
|
||||
"success",
|
||||
"warning",
|
||||
"error",
|
||||
"light",
|
||||
"dark",
|
||||
];
|
||||
|
||||
const validColorIndex = validColors.findIndex((el) => el === color);
|
||||
|
||||
return (
|
||||
<MDBox ref={ref} display="flex" alignItems="center" p={padding} {...rest}>
|
||||
<MDBox
|
||||
component="i"
|
||||
display="inline-block"
|
||||
width={finalSize}
|
||||
height={finalSize}
|
||||
borderRadius="50%"
|
||||
bgColor={validColors[validColorIndex]}
|
||||
variant={variant}
|
||||
mr={1}
|
||||
/>
|
||||
<MDTypography
|
||||
variant={fontSize}
|
||||
fontWeight={font.weight ? font.weight : "regular"}
|
||||
color={font.color ? font.color : "dark"}
|
||||
sx={{ lineHeight: 0 }}
|
||||
>
|
||||
{badgeContent}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
// Declaring default props for MDBadgeDot
|
||||
MDBadgeDot.defaultProps = {
|
||||
variant: "contained",
|
||||
color: "info",
|
||||
size: "xs",
|
||||
font: {},
|
||||
};
|
||||
|
||||
export default MDBadgeDot;
|
||||
@ -1,122 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import Box from "@mui/material/Box";
|
||||
import { styled, Theme } from "@mui/material/styles";
|
||||
|
||||
export default styled(Box)(({ theme, ownerState }: { theme?: Theme | any; ownerState: any }) => {
|
||||
const { palette, functions, borders, boxShadows } = theme;
|
||||
const { variant, bgColor, color, opacity, borderRadius, shadow, coloredShadow } = ownerState;
|
||||
|
||||
const { gradients, grey, white } = palette;
|
||||
const { linearGradient } = functions;
|
||||
const { borderRadius: radius } = borders;
|
||||
const { colored } = boxShadows;
|
||||
|
||||
const greyColors: { [key: string]: string } = {
|
||||
"grey-100": grey[100],
|
||||
"grey-200": grey[200],
|
||||
"grey-300": grey[300],
|
||||
"grey-400": grey[400],
|
||||
"grey-500": grey[500],
|
||||
"grey-600": grey[600],
|
||||
"grey-700": grey[700],
|
||||
"grey-800": grey[800],
|
||||
"grey-900": grey[900],
|
||||
};
|
||||
|
||||
const validGradients = [
|
||||
"primary",
|
||||
"secondary",
|
||||
"info",
|
||||
"success",
|
||||
"warning",
|
||||
"error",
|
||||
"dark",
|
||||
"light",
|
||||
];
|
||||
|
||||
const validColors = [
|
||||
"transparent",
|
||||
"white",
|
||||
"black",
|
||||
"primary",
|
||||
"secondary",
|
||||
"info",
|
||||
"success",
|
||||
"warning",
|
||||
"error",
|
||||
"light",
|
||||
"dark",
|
||||
"text",
|
||||
"grey-100",
|
||||
"grey-200",
|
||||
"grey-300",
|
||||
"grey-400",
|
||||
"grey-500",
|
||||
"grey-600",
|
||||
"grey-700",
|
||||
"grey-800",
|
||||
"grey-900",
|
||||
];
|
||||
|
||||
const validBorderRadius = ["xs", "sm", "md", "lg", "xl", "xxl", "section"];
|
||||
const validBoxShadows = ["xs", "sm", "md", "lg", "xl", "xxl", "inset"];
|
||||
|
||||
// background value
|
||||
let backgroundValue = bgColor;
|
||||
|
||||
if (variant === "gradient") {
|
||||
backgroundValue = validGradients.find((el) => el === bgColor)
|
||||
? linearGradient(gradients[bgColor].main, gradients[bgColor].state)
|
||||
: white.main;
|
||||
} else if (validColors.find((el) => el === bgColor)) {
|
||||
backgroundValue = palette[bgColor] ? palette[bgColor].main : greyColors[bgColor];
|
||||
} else {
|
||||
backgroundValue = bgColor;
|
||||
}
|
||||
|
||||
// color value
|
||||
let colorValue = color;
|
||||
|
||||
if (validColors.find((el) => el === color)) {
|
||||
colorValue = palette[color] ? palette[color].main : greyColors[color];
|
||||
}
|
||||
|
||||
// borderRadius value
|
||||
let borderRadiusValue = borderRadius;
|
||||
|
||||
if (validBorderRadius.find((el) => el === borderRadius)) {
|
||||
borderRadiusValue = radius[borderRadius];
|
||||
}
|
||||
|
||||
// boxShadow value
|
||||
let boxShadowValue = "none";
|
||||
|
||||
if (validBoxShadows.find((el) => el === shadow)) {
|
||||
boxShadowValue = boxShadows[shadow];
|
||||
} else if (coloredShadow) {
|
||||
boxShadowValue = colored[coloredShadow] ? colored[coloredShadow] : "none";
|
||||
}
|
||||
|
||||
return {
|
||||
opacity,
|
||||
background: backgroundValue,
|
||||
color: colorValue,
|
||||
borderRadius: borderRadiusValue,
|
||||
boxShadow: boxShadowValue,
|
||||
};
|
||||
});
|
||||
@ -1,57 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { forwardRef, FC } from "react";
|
||||
|
||||
// @mui material components
|
||||
import { BoxProps } from "@mui/material";
|
||||
|
||||
// Custom styles for MDBox
|
||||
import MDBoxRoot from "components/MDBox/MDBoxRoot";
|
||||
|
||||
// declaring props types for MDBox
|
||||
interface Props extends BoxProps {
|
||||
variant?: "contained" | "gradient";
|
||||
bgColor?: string;
|
||||
color?: string;
|
||||
opacity?: number;
|
||||
borderRadius?: string;
|
||||
shadow?: string;
|
||||
coloredShadow?: string;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
const MDBox: FC<Props> = forwardRef(
|
||||
({ variant, bgColor, color, opacity, borderRadius, shadow, coloredShadow, ...rest }, ref) => (
|
||||
<MDBoxRoot
|
||||
{...rest}
|
||||
ref={ref}
|
||||
ownerState={{ variant, bgColor, color, opacity, borderRadius, shadow, coloredShadow }}
|
||||
/>
|
||||
)
|
||||
);
|
||||
|
||||
// Declaring default props for MDBox
|
||||
MDBox.defaultProps = {
|
||||
variant: "contained",
|
||||
bgColor: "transparent",
|
||||
color: "dark",
|
||||
opacity: 1,
|
||||
borderRadius: "none",
|
||||
shadow: "none",
|
||||
coloredShadow: "none",
|
||||
};
|
||||
|
||||
export default MDBox;
|
||||
@ -1,283 +0,0 @@
|
||||
/* eslint-disable prefer-destructuring */
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import Button from "@mui/material/Button";
|
||||
import { styled, Theme } from "@mui/material/styles";
|
||||
|
||||
export default styled(Button)(({ theme, ownerState }: { theme?: Theme | any; ownerState: any }) => {
|
||||
const { palette, functions, borders, boxShadows } = theme;
|
||||
const { color, variant, size, circular, iconOnly, darkMode } = ownerState;
|
||||
|
||||
const { white, text, transparent, gradients, grey } = palette;
|
||||
const { boxShadow, linearGradient, pxToRem, rgba } = functions;
|
||||
const { borderRadius } = borders;
|
||||
const { colored } = boxShadows;
|
||||
|
||||
// styles for the button with variant="contained"
|
||||
const containedStyles = () => {
|
||||
// background color value
|
||||
const backgroundValue = palette[color] ? palette[color].main : white.main;
|
||||
|
||||
// backgroundColor value when button is focused
|
||||
const focusedBackgroundValue = palette[color] ? palette[color].focus : white.focus;
|
||||
|
||||
// boxShadow value
|
||||
const boxShadowValue = colored[color]
|
||||
? `${boxShadow([0, 3], [3, 0], palette[color].main, 0.15)}, ${boxShadow(
|
||||
[0, 3],
|
||||
[1, -2],
|
||||
palette[color].main,
|
||||
0.2
|
||||
)}, ${boxShadow([0, 1], [5, 0], palette[color].main, 0.15)}`
|
||||
: "none";
|
||||
|
||||
// boxShadow value when button is hovered
|
||||
const hoveredBoxShadowValue = colored[color]
|
||||
? `${boxShadow([0, 14], [26, -12], palette[color].main, 0.4)}, ${boxShadow(
|
||||
[0, 4],
|
||||
[23, 0],
|
||||
palette[color].main,
|
||||
0.15
|
||||
)}, ${boxShadow([0, 8], [10, -5], palette[color].main, 0.2)}`
|
||||
: "none";
|
||||
|
||||
// color value
|
||||
let colorValue = white.main;
|
||||
|
||||
if (!darkMode && (color === "white" || color === "light" || !palette[color])) {
|
||||
colorValue = text.main;
|
||||
} else if (darkMode && (color === "white" || color === "light" || !palette[color])) {
|
||||
colorValue = grey[600];
|
||||
}
|
||||
|
||||
// color value when button is focused
|
||||
let focusedColorValue = white.main;
|
||||
|
||||
if (color === "white") {
|
||||
focusedColorValue = text.main;
|
||||
} else if (color === "primary" || color === "error" || color === "dark") {
|
||||
focusedColorValue = white.main;
|
||||
}
|
||||
|
||||
return {
|
||||
background: backgroundValue,
|
||||
color: colorValue,
|
||||
boxShadow: boxShadowValue,
|
||||
|
||||
"&:hover": {
|
||||
backgroundColor: backgroundValue,
|
||||
color: colorValue,
|
||||
boxShadow: hoveredBoxShadowValue,
|
||||
},
|
||||
|
||||
"&:focus:not(:hover)": {
|
||||
backgroundColor: focusedBackgroundValue,
|
||||
color: colorValue,
|
||||
boxShadow: palette[color]
|
||||
? boxShadow([0, 0], [0, 3.2], palette[color].main, 0.5)
|
||||
: boxShadow([0, 0], [0, 3.2], white.main, 0.5),
|
||||
},
|
||||
|
||||
"&:disabled": {
|
||||
backgroundColor: backgroundValue,
|
||||
color: focusedColorValue,
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
// styles for the button with variant="outlined"
|
||||
const outlinedStyles = () => {
|
||||
// background color value
|
||||
const backgroundValue = color === "white" ? rgba(white.main, 0.1) : transparent.main;
|
||||
|
||||
// color value
|
||||
const colorValue = palette[color] ? palette[color].main : white.main;
|
||||
|
||||
// boxShadow value
|
||||
const boxShadowValue = palette[color]
|
||||
? boxShadow([0, 0], [0, 3.2], palette[color].main, 0.5)
|
||||
: boxShadow([0, 0], [0, 3.2], white.main, 0.5);
|
||||
|
||||
// border color value
|
||||
let borderColorValue = palette[color] ? palette[color].main : rgba(white.main, 0.75);
|
||||
|
||||
if (color === "white") {
|
||||
borderColorValue = rgba(white.main, 0.75);
|
||||
}
|
||||
|
||||
return {
|
||||
background: backgroundValue,
|
||||
color: colorValue,
|
||||
border: `${pxToRem(1)} solid ${borderColorValue}`,
|
||||
|
||||
"&:hover": {
|
||||
background: transparent.main,
|
||||
color: colorValue,
|
||||
borderColor: colorValue,
|
||||
opacity: 0.85,
|
||||
},
|
||||
|
||||
"&:focus:not(:hover)": {
|
||||
background: transparent.main,
|
||||
color: colorValue,
|
||||
boxShadow: boxShadowValue,
|
||||
},
|
||||
|
||||
"&:active:not(:hover)": {
|
||||
backgroundColor: colorValue,
|
||||
color: white.main,
|
||||
opacity: 0.85,
|
||||
},
|
||||
|
||||
"&:disabled": {
|
||||
color: colorValue,
|
||||
borderColor: colorValue,
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
// styles for the button with variant="gradient"
|
||||
const gradientStyles = () => {
|
||||
// background value
|
||||
const backgroundValue =
|
||||
color === "white" || !gradients[color]
|
||||
? white.main
|
||||
: linearGradient(gradients[color].main, gradients[color].state);
|
||||
|
||||
// boxShadow value
|
||||
const boxShadowValue = colored[color]
|
||||
? `${boxShadow([0, 3], [3, 0], palette[color].main, 0.15)}, ${boxShadow(
|
||||
[0, 3],
|
||||
[1, -2],
|
||||
palette[color].main,
|
||||
0.2
|
||||
)}, ${boxShadow([0, 1], [5, 0], palette[color].main, 0.15)}`
|
||||
: "none";
|
||||
|
||||
// boxShadow value when button is hovered
|
||||
const hoveredBoxShadowValue = colored[color]
|
||||
? `${boxShadow([0, 14], [26, -12], palette[color].main, 0.4)}, ${boxShadow(
|
||||
[0, 4],
|
||||
[23, 0],
|
||||
palette[color].main,
|
||||
0.15
|
||||
)}, ${boxShadow([0, 8], [10, -5], palette[color].main, 0.2)}`
|
||||
: "none";
|
||||
|
||||
// color value
|
||||
let colorValue = white.main;
|
||||
|
||||
if (color === "white") {
|
||||
colorValue = text.main;
|
||||
} else if (color === "light") {
|
||||
colorValue = gradients.dark.state;
|
||||
}
|
||||
|
||||
return {
|
||||
background: backgroundValue,
|
||||
color: colorValue,
|
||||
boxShadow: boxShadowValue,
|
||||
|
||||
"&:hover": {
|
||||
boxShadow: hoveredBoxShadowValue,
|
||||
color: colorValue,
|
||||
},
|
||||
|
||||
"&:focus:not(:hover)": {
|
||||
boxShadow: boxShadowValue,
|
||||
color: colorValue,
|
||||
},
|
||||
|
||||
"&:disabled": {
|
||||
background: backgroundValue,
|
||||
color: colorValue,
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
// styles for the button with variant="text"
|
||||
const textStyles = () => {
|
||||
// color value
|
||||
const colorValue = palette[color] ? palette[color].main : white.main;
|
||||
|
||||
// color value when button is focused
|
||||
const focusedColorValue = palette[color] ? palette[color].focus : white.focus;
|
||||
|
||||
return {
|
||||
color: colorValue,
|
||||
|
||||
"&:hover": {
|
||||
color: focusedColorValue,
|
||||
},
|
||||
|
||||
"&:focus:not(:hover)": {
|
||||
color: focusedColorValue,
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
// styles for the button with circular={true}
|
||||
const circularStyles = () => ({
|
||||
borderRadius: borderRadius.section,
|
||||
});
|
||||
|
||||
// styles for the button with iconOnly={true}
|
||||
const iconOnlyStyles = () => {
|
||||
// width, height, minWidth and minHeight values
|
||||
let sizeValue = pxToRem(38);
|
||||
|
||||
if (size === "small") {
|
||||
sizeValue = pxToRem(25.4);
|
||||
} else if (size === "large") {
|
||||
sizeValue = pxToRem(52);
|
||||
}
|
||||
|
||||
// padding value
|
||||
let paddingValue = `${pxToRem(11)} ${pxToRem(11)} ${pxToRem(10)}`;
|
||||
|
||||
if (size === "small") {
|
||||
paddingValue = pxToRem(4.5);
|
||||
} else if (size === "large") {
|
||||
paddingValue = pxToRem(16);
|
||||
}
|
||||
|
||||
return {
|
||||
width: sizeValue,
|
||||
minWidth: sizeValue,
|
||||
height: sizeValue,
|
||||
minHeight: sizeValue,
|
||||
padding: paddingValue,
|
||||
|
||||
"& .material-icons": {
|
||||
marginTop: 0,
|
||||
},
|
||||
|
||||
"&:hover, &:focus, &:active": {
|
||||
transform: "none",
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
return {
|
||||
...(variant === "contained" && containedStyles()),
|
||||
...(variant === "outlined" && outlinedStyles()),
|
||||
...(variant === "gradient" && gradientStyles()),
|
||||
...(variant === "text" && textStyles()),
|
||||
...(circular && circularStyles()),
|
||||
...(iconOnly && iconOnlyStyles()),
|
||||
};
|
||||
});
|
||||
@ -1,74 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/soft-ui-dashboard-pro-react
|
||||
* Copyright 2021 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { FC, ReactNode, forwardRef } from "react";
|
||||
|
||||
// @mui material components
|
||||
import { ButtonProps } from "@mui/material";
|
||||
|
||||
// Custom styles for MDButton
|
||||
import MDButtonRoot from "components/MDButton/MDButtonRoot";
|
||||
|
||||
// Material Dashboard 2 PRO React TS contexts
|
||||
import { useMaterialUIController } from "context";
|
||||
|
||||
// Declaring props types for MDButton
|
||||
export interface Props extends Omit<ButtonProps, "color" | "variant"> {
|
||||
color?:
|
||||
| "white"
|
||||
| "primary"
|
||||
| "secondary"
|
||||
| "info"
|
||||
| "success"
|
||||
| "warning"
|
||||
| "error"
|
||||
| "light"
|
||||
| "dark"
|
||||
| "default";
|
||||
variant?: "text" | "contained" | "outlined" | "gradient";
|
||||
size?: "small" | "medium" | "large";
|
||||
circular?: boolean;
|
||||
iconOnly?: boolean;
|
||||
children?: ReactNode;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
const MDButton: FC<Props> = forwardRef(
|
||||
({ color, variant, size, circular, iconOnly, children, ...rest }, ref) => {
|
||||
const [controller] = useMaterialUIController();
|
||||
const { darkMode } = controller;
|
||||
|
||||
return (
|
||||
<MDButtonRoot
|
||||
{...rest}
|
||||
ref={ref}
|
||||
ownerState={{ color, variant, size, circular, iconOnly, darkMode }}
|
||||
>
|
||||
{children}
|
||||
</MDButtonRoot>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
// Declaring default props for MDButton
|
||||
MDButton.defaultProps = {
|
||||
color: "white",
|
||||
variant: "contained",
|
||||
size: "medium",
|
||||
circular: false,
|
||||
iconOnly: false,
|
||||
};
|
||||
|
||||
export default MDButton;
|
||||
@ -1,48 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// react-flatpickr components
|
||||
import Flatpickr from "react-flatpickr";
|
||||
|
||||
// react-flatpickr styles
|
||||
import "flatpickr/dist/flatpickr.css";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDInput from "components/MDInput";
|
||||
|
||||
// types
|
||||
interface Props {
|
||||
input?: {
|
||||
[key: string]: any;
|
||||
};
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
function MDDatePicker({ input, ...rest }: Props): JSX.Element {
|
||||
return (
|
||||
<Flatpickr
|
||||
{...rest}
|
||||
render={({ defaultValue }: any, ref: any) => (
|
||||
<MDInput {...input} defaultValue={defaultValue} inputRef={ref} />
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
MDDatePicker.defaultProps = {
|
||||
input: {},
|
||||
};
|
||||
|
||||
export default MDDatePicker;
|
||||
@ -1,73 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import { styled, Theme } from "@mui/material/styles";
|
||||
|
||||
export default styled("form")(({ theme, ownerState }: { theme?: Theme | any; ownerState: any }) => {
|
||||
const { palette, typography, borders, functions } = theme;
|
||||
const { darkMode } = ownerState;
|
||||
|
||||
const { text, white, dark, inputBorderColor, transparent } = palette;
|
||||
const { size } = typography;
|
||||
const { borderRadius, borderWidth } = borders;
|
||||
const { rgba } = functions;
|
||||
|
||||
return {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
border: `${borderWidth[1]} solid ${inputBorderColor} !important`,
|
||||
borderRadius: borderRadius.md,
|
||||
|
||||
"&.dropzone": {
|
||||
background: `${transparent.main} !important`,
|
||||
},
|
||||
|
||||
"& .dz-default": {
|
||||
margin: "0 auto !important",
|
||||
},
|
||||
|
||||
"& .dz-default .dz-button": {
|
||||
color: `${text.main} !important`,
|
||||
fontSize: `${size.sm} !important`,
|
||||
},
|
||||
|
||||
"& .dz-preview.dz-image-preview": {
|
||||
background: `${transparent.main} !important`,
|
||||
},
|
||||
|
||||
"& .dz-preview .dz-details": {
|
||||
color: `${dark.main} !important`,
|
||||
opacity: "1 !important",
|
||||
|
||||
"& .dz-size span, & .dz-filename span": {
|
||||
backgroundColor: `${rgba(white.main, 0.7)} !important`,
|
||||
},
|
||||
},
|
||||
|
||||
"& .dz-error-message": {
|
||||
display: "none !important",
|
||||
},
|
||||
|
||||
"& .dz-remove": {
|
||||
color: `${darkMode ? white.main : dark.main} !important`,
|
||||
textDecoration: "none",
|
||||
|
||||
"&:hover, &:focus": {
|
||||
textDecoration: "none !important",
|
||||
},
|
||||
},
|
||||
};
|
||||
});
|
||||
@ -1,76 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { useEffect, useRef } from "react";
|
||||
|
||||
// Dropzone components
|
||||
import Dropzone from "dropzone";
|
||||
|
||||
// Dropzone styles
|
||||
import "dropzone/dist/dropzone.css";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
|
||||
// Custom styles for the MDDropzone
|
||||
import MDDropzoneRoot from "components/MDDropzone/MDDropzoneRoot";
|
||||
|
||||
// Material Dashboard 2 PRO React context
|
||||
import { useMaterialUIController } from "context";
|
||||
|
||||
// Declaring props types for MDDropzone
|
||||
interface Props {
|
||||
options: {
|
||||
[key: string | number]: any;
|
||||
};
|
||||
}
|
||||
|
||||
function MDDropzone({ options }: Props): JSX.Element {
|
||||
const [controller] = useMaterialUIController();
|
||||
const { darkMode } = controller;
|
||||
|
||||
const dropzoneRef = useRef<HTMLFormElement | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
Dropzone.autoDiscover = false;
|
||||
|
||||
function createDropzone() {
|
||||
return new Dropzone(dropzoneRef.current, { ...options });
|
||||
}
|
||||
|
||||
function removeDropzone() {
|
||||
if (Dropzone.instances.length > 0) Dropzone.instances.forEach((dz: any) => dz.destroy());
|
||||
}
|
||||
|
||||
createDropzone();
|
||||
|
||||
return () => removeDropzone();
|
||||
}, [options]);
|
||||
|
||||
return (
|
||||
<MDDropzoneRoot
|
||||
action="/file-upload"
|
||||
ref={dropzoneRef}
|
||||
className="form-control dropzone"
|
||||
ownerState={{ darkMode }}
|
||||
>
|
||||
<MDBox className="fallback" bgColor="transparent">
|
||||
<input name="file" type="file" multiple />
|
||||
</MDBox>
|
||||
</MDDropzoneRoot>
|
||||
);
|
||||
}
|
||||
|
||||
export default MDDropzone;
|
||||
@ -1,54 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import { styled, Theme } from "@mui/material/styles";
|
||||
|
||||
export default styled("div")(({ theme, ownerState }: { theme?: Theme | any; ownerState: any }) => {
|
||||
const { palette, borders, typography } = theme;
|
||||
const { darkMode } = ownerState;
|
||||
|
||||
const { borderRadius } = borders;
|
||||
const { size } = typography;
|
||||
const { text, white, dark } = palette;
|
||||
|
||||
return {
|
||||
"& .ql-toolbar": {
|
||||
borderRadius: `${borderRadius.md} ${borderRadius.md} 0 0`,
|
||||
|
||||
"& .ql-picker, & .ql-stroke": {
|
||||
stroke: `${darkMode ? white.main : dark.main} !important`,
|
||||
color: `${darkMode ? white.main : dark.main} !important`,
|
||||
},
|
||||
},
|
||||
|
||||
"& .ql-container": {
|
||||
borderRadius: `0 0 ${borderRadius.md} ${borderRadius.md}`,
|
||||
},
|
||||
|
||||
"& .ql-editor": {
|
||||
color: darkMode ? white.main : text.main,
|
||||
|
||||
"& p": {
|
||||
fontSize: size.md,
|
||||
color: darkMode ? white.main : text.main,
|
||||
},
|
||||
|
||||
"& ul li": {
|
||||
color: darkMode ? white.main : text.main,
|
||||
},
|
||||
},
|
||||
};
|
||||
});
|
||||
@ -1,44 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// react-quill components
|
||||
import ReactQuill from "react-quill";
|
||||
|
||||
// react-quill styles
|
||||
import "react-quill/dist/quill.snow.css";
|
||||
|
||||
// Custom styles for the MDEditor
|
||||
import MDEditorRoot from "components/MDEditor/MDEditorRoot";
|
||||
|
||||
// Material Dashboard 2 PRO React context
|
||||
import { useMaterialUIController } from "context";
|
||||
|
||||
// declaring types for the MDEditor
|
||||
interface Props {
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
function MDEditor(props: Props): JSX.Element {
|
||||
const [controller] = useMaterialUIController();
|
||||
const { darkMode } = controller;
|
||||
|
||||
return (
|
||||
<MDEditorRoot ownerState={{ darkMode }}>
|
||||
<ReactQuill theme="snow" {...props} />
|
||||
</MDEditorRoot>
|
||||
);
|
||||
}
|
||||
|
||||
export default MDEditor;
|
||||
@ -1,71 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import TextField from "@mui/material/TextField";
|
||||
import { styled, Theme } from "@mui/material/styles";
|
||||
|
||||
export default styled(TextField)(({ theme, ownerState }: { theme?: Theme; ownerState: any }) => {
|
||||
const { palette, functions } = theme;
|
||||
const { error, success, disabled } = ownerState;
|
||||
|
||||
const { grey, transparent, error: colorError, success: colorSuccess } = palette;
|
||||
const { pxToRem } = functions;
|
||||
|
||||
// styles for the input with error={true}
|
||||
const errorStyles = () => ({
|
||||
backgroundImage:
|
||||
"url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23F44335' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3E%3Ccircle cx='6' cy='8.2' r='.6' fill='%23F44335' stroke='none'/%3E%3C/svg%3E\")",
|
||||
backgroundRepeat: "no-repeat",
|
||||
backgroundPosition: `right ${pxToRem(12)} center`,
|
||||
backgroundSize: `${pxToRem(16)} ${pxToRem(16)}`,
|
||||
|
||||
"& .Mui-focused": {
|
||||
"& .MuiOutlinedInput-notchedOutline, &:after": {
|
||||
borderColor: colorError.main,
|
||||
},
|
||||
},
|
||||
|
||||
"& .MuiInputLabel-root.Mui-focused": {
|
||||
color: colorError.main,
|
||||
},
|
||||
});
|
||||
|
||||
// styles for the input with success={true}
|
||||
const successStyles = () => ({
|
||||
backgroundImage:
|
||||
"url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath fill='%234CAF50' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E\")",
|
||||
backgroundRepeat: "no-repeat",
|
||||
backgroundPosition: `right ${pxToRem(12)} center`,
|
||||
backgroundSize: `${pxToRem(16)} ${pxToRem(16)}`,
|
||||
|
||||
"& .Mui-focused": {
|
||||
"& .MuiOutlinedInput-notchedOutline, &:after": {
|
||||
borderColor: colorSuccess.main,
|
||||
},
|
||||
},
|
||||
|
||||
"& .MuiInputLabel-root.Mui-focused": {
|
||||
color: colorSuccess.main,
|
||||
},
|
||||
});
|
||||
|
||||
return {
|
||||
backgroundColor: disabled ? `${grey[200]} !important` : transparent.main,
|
||||
pointerEvents: disabled ? "none" : "auto",
|
||||
...(error && errorStyles()),
|
||||
...(success && successStyles()),
|
||||
};
|
||||
});
|
||||
@ -1,43 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { FC, forwardRef } from "react";
|
||||
|
||||
// @mui material components
|
||||
import { OutlinedTextFieldProps, StandardTextFieldProps } from "@mui/material";
|
||||
|
||||
// Custom styles for MDInput
|
||||
import MDInputRoot from "components/MDInput/MDInputRoot";
|
||||
|
||||
// Declaring props types for MDInput
|
||||
interface Props extends Omit<OutlinedTextFieldProps | StandardTextFieldProps, "variant"> {
|
||||
variant?: "standard" | "outlined";
|
||||
error?: boolean;
|
||||
success?: boolean;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
const MDInput: FC<Props | any> = forwardRef(({ error, success, disabled, ...rest }, ref) => (
|
||||
<MDInputRoot {...rest} ref={ref} ownerState={{ error, success, disabled }} />
|
||||
));
|
||||
|
||||
// Declaring default props for MDInput
|
||||
MDInput.defaultProps = {
|
||||
error: false,
|
||||
success: false,
|
||||
disabled: false,
|
||||
};
|
||||
|
||||
export default MDInput;
|
||||
@ -1,63 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import { styled, Theme } from "@mui/material/styles";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDButton from "components/MDButton";
|
||||
|
||||
// @ts-ignore
|
||||
export default styled(MDButton)(({ theme, ownerState }: { theme?: Theme; ownerState: any }) => {
|
||||
const { borders, functions, typography, palette } = theme;
|
||||
const { variant, paginationSize, active } = ownerState;
|
||||
|
||||
const { borderColor } = borders;
|
||||
const { pxToRem } = functions;
|
||||
const { fontWeightRegular, size: fontSize } = typography;
|
||||
const { light } = palette;
|
||||
|
||||
// width, height, minWidth and minHeight values
|
||||
let sizeValue = pxToRem(36);
|
||||
|
||||
if (paginationSize === "small") {
|
||||
sizeValue = pxToRem(30);
|
||||
} else if (paginationSize === "large") {
|
||||
sizeValue = pxToRem(46);
|
||||
}
|
||||
|
||||
return {
|
||||
borderColor,
|
||||
margin: `0 ${pxToRem(2)}`,
|
||||
pointerEvents: active ? "none" : "auto",
|
||||
fontWeight: fontWeightRegular,
|
||||
fontSize: fontSize.sm,
|
||||
width: sizeValue,
|
||||
minWidth: sizeValue,
|
||||
height: sizeValue,
|
||||
minHeight: sizeValue,
|
||||
|
||||
"&:hover, &:focus, &:active": {
|
||||
transform: "none",
|
||||
boxShadow: (variant !== "gradient" || variant !== "contained") && "none !important",
|
||||
opacity: "1 !important",
|
||||
},
|
||||
|
||||
"&:hover": {
|
||||
backgroundColor: light.main,
|
||||
borderColor,
|
||||
},
|
||||
};
|
||||
});
|
||||
@ -1,99 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { ReactNode, FC, forwardRef, createContext, useContext, useMemo } from "react";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
|
||||
// Custom styles for MDPagination
|
||||
import MDPaginationItemRoot from "components/MDPagination/MDPaginationItemRoot";
|
||||
|
||||
// The Pagination main context
|
||||
const Context = createContext<any>(null);
|
||||
|
||||
// Declare props types for MDPagination
|
||||
interface Props {
|
||||
item?: boolean;
|
||||
variant?: "gradient" | "contained";
|
||||
color?:
|
||||
| "white"
|
||||
| "primary"
|
||||
| "secondary"
|
||||
| "info"
|
||||
| "success"
|
||||
| "warning"
|
||||
| "error"
|
||||
| "light"
|
||||
| "dark";
|
||||
size?: "small" | "medium" | "large";
|
||||
active?: boolean;
|
||||
children: ReactNode;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
const MDPagination: FC<Props | any> = forwardRef(
|
||||
({ item, variant, color, size, active, children, ...rest }, ref) => {
|
||||
const context: any = useContext(Context);
|
||||
const paginationSize = context ? context.size : undefined;
|
||||
|
||||
const providerValue = useMemo(
|
||||
() => ({
|
||||
variant,
|
||||
color,
|
||||
size,
|
||||
}),
|
||||
[variant, color, size]
|
||||
);
|
||||
|
||||
return (
|
||||
<Context.Provider value={providerValue}>
|
||||
{item ? (
|
||||
<MDPaginationItemRoot
|
||||
{...rest}
|
||||
ref={ref}
|
||||
variant={active ? context.variant : "outlined"}
|
||||
color={active ? context.color : "secondary"}
|
||||
iconOnly
|
||||
circular
|
||||
ownerState={{ variant, active, paginationSize }}
|
||||
>
|
||||
{children}
|
||||
</MDPaginationItemRoot>
|
||||
) : (
|
||||
<MDBox
|
||||
display="flex"
|
||||
justifyContent="flex-end"
|
||||
alignItems="center"
|
||||
sx={{ listStyle: "none" }}
|
||||
>
|
||||
{children}
|
||||
</MDBox>
|
||||
)}
|
||||
</Context.Provider>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
// Declaring default props for MDPagination
|
||||
MDPagination.defaultProps = {
|
||||
item: false,
|
||||
variant: "gradient",
|
||||
color: "info",
|
||||
size: "medium",
|
||||
active: false,
|
||||
};
|
||||
|
||||
export default MDPagination;
|
||||
@ -1,47 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import { styled, Theme } from "@mui/material/styles";
|
||||
import LinearProgress from "@mui/material/LinearProgress";
|
||||
|
||||
export default styled(LinearProgress)(
|
||||
({ theme, ownerState }: { theme?: Theme | any; ownerState: any }) => {
|
||||
const { palette, functions } = theme;
|
||||
const { color, value, variant } = ownerState;
|
||||
|
||||
const { text, gradients } = palette;
|
||||
const { linearGradient } = functions;
|
||||
|
||||
// background value
|
||||
let backgroundValue;
|
||||
|
||||
if (variant === "gradient") {
|
||||
backgroundValue = gradients[color]
|
||||
? linearGradient(gradients[color].main, gradients[color].state)
|
||||
: linearGradient(gradients.info.main, gradients.info.state);
|
||||
} else {
|
||||
backgroundValue = palette[color] ? palette[color].main : palette.info.main;
|
||||
}
|
||||
|
||||
return {
|
||||
"& .MuiLinearProgress-bar": {
|
||||
background: backgroundValue,
|
||||
width: `${value}%`,
|
||||
color: text.main,
|
||||
},
|
||||
};
|
||||
}
|
||||
);
|
||||
@ -1,58 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { FC, forwardRef } from "react";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// Custom styles for MDProgress
|
||||
import MDProgressRoot from "components/MDProgress/MDProgressRoot";
|
||||
|
||||
// Delcare props types for MDProgress
|
||||
interface Props {
|
||||
variant?: "contained" | "gradient";
|
||||
color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
|
||||
value: number;
|
||||
label?: boolean;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
const MDProgress: FC<Props> = forwardRef(({ variant, color, value, label, ...rest }, ref) => (
|
||||
<>
|
||||
{label && (
|
||||
<MDTypography variant="button" fontWeight="medium" color="text">
|
||||
{value}%
|
||||
</MDTypography>
|
||||
)}
|
||||
<MDProgressRoot
|
||||
{...rest}
|
||||
ref={ref}
|
||||
variant="determinate"
|
||||
value={value}
|
||||
ownerState={{ color, value, variant }}
|
||||
/>
|
||||
</>
|
||||
));
|
||||
|
||||
// Declaring default props for MDProgress
|
||||
MDProgress.defaultProps = {
|
||||
variant: "contained",
|
||||
color: "info",
|
||||
value: 0,
|
||||
label: false,
|
||||
};
|
||||
|
||||
export default MDProgress;
|
||||
@ -1,47 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import Icon from "@mui/material/Icon";
|
||||
import { styled, Theme } from "@mui/material/styles";
|
||||
|
||||
export default styled(Icon)(({ theme, ownerState }: { theme?: Theme; ownerState: any }) => {
|
||||
const { palette, functions, typography } = theme;
|
||||
const { color, bgWhite } = ownerState;
|
||||
|
||||
const { white, transparent, gradients } = palette;
|
||||
const { pxToRem, linearGradient } = functions;
|
||||
const { size } = typography;
|
||||
|
||||
// backgroundImage value
|
||||
let backgroundImageValue;
|
||||
|
||||
if (bgWhite) {
|
||||
backgroundImageValue = gradients[color]
|
||||
? linearGradient(gradients[color].main, gradients[color].state)
|
||||
: linearGradient(gradients.info.main, gradients.info.state);
|
||||
} else if (color === "light") {
|
||||
backgroundImageValue = linearGradient(gradients.dark.main, gradients.dark.state);
|
||||
}
|
||||
|
||||
return {
|
||||
backgroundImage: backgroundImageValue,
|
||||
WebkitTextFillColor: bgWhite || color === "light" ? transparent.main : white.main,
|
||||
WebkitBackgroundClip: "text",
|
||||
marginRight: pxToRem(8),
|
||||
fontSize: size.lg,
|
||||
transform: `translateY(${pxToRem(-2)})`,
|
||||
};
|
||||
});
|
||||
@ -1,177 +0,0 @@
|
||||
/* eslint-disable react/default-props-match-prop-types */
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { ReactNode } from "react";
|
||||
|
||||
// @mui material components
|
||||
import Snackbar from "@mui/material/Snackbar";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
import Icon from "@mui/material/Icon";
|
||||
import Divider from "@mui/material/Divider";
|
||||
import Fade from "@mui/material/Fade";
|
||||
import { SnackbarProps } from "@mui/material";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// Custom styles for the MDSnackbar
|
||||
import MDSnackbarIconRoot from "components/MDSnackbar/MDSnackbarIconRoot";
|
||||
|
||||
// Material Dashboard 2 PRO React context
|
||||
import { useMaterialUIController } from "context";
|
||||
|
||||
// Declaring props types for MDSnackbar
|
||||
interface Props extends SnackbarProps {
|
||||
color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark" | "light";
|
||||
icon: ReactNode;
|
||||
title: string;
|
||||
dateTime: string;
|
||||
content: string;
|
||||
close: () => void;
|
||||
bgWhite?: boolean;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
function MDSnackbar({
|
||||
color,
|
||||
icon,
|
||||
title,
|
||||
dateTime,
|
||||
content,
|
||||
close,
|
||||
bgWhite,
|
||||
...rest
|
||||
}: Props): JSX.Element {
|
||||
const [controller] = useMaterialUIController();
|
||||
const { darkMode } = controller;
|
||||
|
||||
let titleColor: any;
|
||||
let dateTimeColor: any;
|
||||
let dividerColor: any;
|
||||
|
||||
if (bgWhite) {
|
||||
titleColor = color;
|
||||
dateTimeColor = "dark";
|
||||
dividerColor = false;
|
||||
} else if (color === "light") {
|
||||
titleColor = darkMode ? "inherit" : "dark";
|
||||
dateTimeColor = darkMode ? "inherit" : "text";
|
||||
dividerColor = false;
|
||||
} else {
|
||||
titleColor = "white";
|
||||
dateTimeColor = "white";
|
||||
dividerColor = true;
|
||||
}
|
||||
|
||||
return (
|
||||
<Snackbar
|
||||
TransitionComponent={Fade}
|
||||
autoHideDuration={5000}
|
||||
anchorOrigin={{
|
||||
vertical: "bottom",
|
||||
horizontal: "right",
|
||||
}}
|
||||
{...rest}
|
||||
action={
|
||||
<IconButton size="small" aria-label="close" color="inherit" onClick={close}>
|
||||
<Icon fontSize="small">close</Icon>
|
||||
</IconButton>
|
||||
}
|
||||
>
|
||||
<MDBox
|
||||
variant={bgWhite ? "contained" : "gradient"}
|
||||
bgColor={bgWhite ? "white" : color}
|
||||
minWidth="21.875rem"
|
||||
maxWidth="100%"
|
||||
shadow="md"
|
||||
borderRadius="md"
|
||||
p={1}
|
||||
sx={{
|
||||
backgroundColor: ({ palette }: { palette: any }) =>
|
||||
darkMode ? palette.background.card : palette[color] || palette.white.main,
|
||||
}}
|
||||
>
|
||||
<MDBox
|
||||
display="flex"
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
color="dark"
|
||||
p={1.5}
|
||||
>
|
||||
<MDBox display="flex" alignItems="center" lineHeight={0}>
|
||||
<MDSnackbarIconRoot fontSize="small" ownerState={{ color, bgWhite }}>
|
||||
{icon}
|
||||
</MDSnackbarIconRoot>
|
||||
<MDTypography
|
||||
variant="button"
|
||||
fontWeight="medium"
|
||||
color={titleColor}
|
||||
textGradient={bgWhite}
|
||||
>
|
||||
{title}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox display="flex" alignItems="center" lineHeight={0}>
|
||||
<MDTypography variant="caption" color={dateTimeColor}>
|
||||
{dateTime}
|
||||
</MDTypography>
|
||||
<Icon
|
||||
sx={{
|
||||
color: ({ palette: { dark, white } }) =>
|
||||
(bgWhite && !darkMode) || color === "light" ? dark.main : white.main,
|
||||
fontWeight: ({ typography: { fontWeightBold } }) => fontWeightBold,
|
||||
cursor: "pointer",
|
||||
marginLeft: 2,
|
||||
transform: "translateY(-1px)",
|
||||
}}
|
||||
onClick={close}
|
||||
>
|
||||
close
|
||||
</Icon>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
<Divider sx={{ margin: 0 }} light={dividerColor} />
|
||||
<MDBox
|
||||
p={1.5}
|
||||
sx={{
|
||||
fontSize: ({ typography: { size } }) => size.sm,
|
||||
color: ({ palette }: { palette: any }) => {
|
||||
let colorValue =
|
||||
bgWhite || color === "light" ? palette.text.main : palette.white.main;
|
||||
|
||||
if (darkMode) {
|
||||
colorValue = color === "light" ? "inherit" : palette.white.main;
|
||||
}
|
||||
|
||||
return colorValue;
|
||||
},
|
||||
}}
|
||||
>
|
||||
{content}
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</Snackbar>
|
||||
);
|
||||
}
|
||||
|
||||
// Setting default values for the props of MDSnackbar
|
||||
MDSnackbar.defaultProps = {
|
||||
bgWhite: false,
|
||||
color: "info",
|
||||
};
|
||||
|
||||
export default MDSnackbar;
|
||||
@ -1,91 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import { Button } from "@mui/material";
|
||||
import { styled, Theme } from "@mui/material/styles";
|
||||
|
||||
export default styled(Button)(({ theme, ownerState }: { theme?: Theme; ownerState: any }) => {
|
||||
const { palette, functions } = theme;
|
||||
const { color, size, iconOnly, circular } = ownerState;
|
||||
|
||||
const { white, socialMediaColors } = palette;
|
||||
const { pxToRem } = functions;
|
||||
|
||||
// backgroundColor value
|
||||
const backgroundColorValue = socialMediaColors[color]
|
||||
? socialMediaColors[color].main
|
||||
: socialMediaColors.facebook.main;
|
||||
|
||||
// styles for the button with circular={true}
|
||||
const circularStyles = () => ({
|
||||
borderRadius: "50%",
|
||||
});
|
||||
|
||||
// styles for the button with iconOnly={true}
|
||||
const iconOnlyStyles = () => {
|
||||
// width, height, minWidth and minHeight values
|
||||
let sizeValue = pxToRem(38);
|
||||
|
||||
if (size === "small") {
|
||||
sizeValue = pxToRem(25.4);
|
||||
} else if (size === "large") {
|
||||
sizeValue = pxToRem(52);
|
||||
}
|
||||
|
||||
// padding value
|
||||
let paddingValue = `${pxToRem(11)} ${pxToRem(11)} ${pxToRem(10)}`;
|
||||
|
||||
if (size === "small") {
|
||||
paddingValue = pxToRem(4.5);
|
||||
} else if (size === "large") {
|
||||
paddingValue = pxToRem(16);
|
||||
}
|
||||
|
||||
return {
|
||||
width: sizeValue,
|
||||
minWidth: sizeValue,
|
||||
height: sizeValue,
|
||||
minHeight: sizeValue,
|
||||
padding: paddingValue,
|
||||
};
|
||||
};
|
||||
|
||||
return {
|
||||
backgroundColor: backgroundColorValue,
|
||||
color: white.main,
|
||||
boxShadow: "none",
|
||||
|
||||
"&:hover": {
|
||||
backgroundColor: backgroundColorValue,
|
||||
boxShadow: "none",
|
||||
},
|
||||
|
||||
"&:focus:not(:hover)": {
|
||||
backgroundColor: socialMediaColors[color]
|
||||
? socialMediaColors[color].dark
|
||||
: socialMediaColors.facebook.dark,
|
||||
boxShadow: "none",
|
||||
},
|
||||
|
||||
"&:disabled": {
|
||||
backgroundColor: backgroundColorValue,
|
||||
color: white.main,
|
||||
},
|
||||
|
||||
...(circular && circularStyles()),
|
||||
...(iconOnly && iconOnlyStyles()),
|
||||
};
|
||||
});
|
||||
@ -1,69 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { FC, ReactNode, forwardRef } from "react";
|
||||
|
||||
// @mui material components
|
||||
import { ButtonProps } from "@mui/material";
|
||||
|
||||
// Custom styles for MDSocialButton
|
||||
import MDSocialButtonRoot from "components/MDSocialButton/MDSocialButtonRoot";
|
||||
|
||||
// Declaring props types for MDButton
|
||||
interface Props extends Omit<ButtonProps, "color" | "variant"> {
|
||||
color?:
|
||||
| "facebook"
|
||||
| "twitter"
|
||||
| "instagram"
|
||||
| "linkedin"
|
||||
| "pinterest"
|
||||
| "youtube"
|
||||
| "github"
|
||||
| "vimeo"
|
||||
| "slack"
|
||||
| "dribbble"
|
||||
| "reddit"
|
||||
| "tumblr";
|
||||
size?: "small" | "medium" | "large";
|
||||
circular?: boolean;
|
||||
iconOnly?: boolean;
|
||||
children?: ReactNode;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
const MDSocialButton: FC<Props> = forwardRef(
|
||||
({ color, size, iconOnly, circular, children, ...rest }, ref) => (
|
||||
<MDSocialButtonRoot
|
||||
{...rest}
|
||||
ref={ref}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
size={size}
|
||||
ownerState={{ color, size, iconOnly, circular }}
|
||||
>
|
||||
{children}
|
||||
</MDSocialButtonRoot>
|
||||
)
|
||||
);
|
||||
|
||||
// Setting default values for the props of MDSocialButton
|
||||
MDSocialButton.defaultProps = {
|
||||
size: "medium",
|
||||
color: "facebook",
|
||||
iconOnly: false,
|
||||
circular: false,
|
||||
};
|
||||
|
||||
export default MDSocialButton;
|
||||
@ -1,66 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import Typography from "@mui/material/Typography";
|
||||
import { styled } from "@mui/material/styles";
|
||||
|
||||
export default styled(Typography)(({ theme, ownerState }: any): any => {
|
||||
const { palette, typography, functions }: any = theme;
|
||||
const { color, textTransform, verticalAlign, fontWeight, opacity, textGradient, darkMode } =
|
||||
ownerState;
|
||||
|
||||
const { gradients, transparent, white } = palette;
|
||||
const { fontWeightLight, fontWeightRegular, fontWeightMedium, fontWeightBold } = typography;
|
||||
const { linearGradient } = functions;
|
||||
|
||||
// fontWeight styles
|
||||
const fontWeights: { [key: string]: number } = {
|
||||
light: fontWeightLight,
|
||||
regular: fontWeightRegular,
|
||||
medium: fontWeightMedium,
|
||||
bold: fontWeightBold,
|
||||
};
|
||||
|
||||
// styles for the typography with textGradient={true}
|
||||
const gradientStyles = () => ({
|
||||
backgroundImage:
|
||||
color !== "inherit" && color !== "text" && color !== "white" && gradients[color]
|
||||
? linearGradient(gradients[color].main, gradients[color].state)
|
||||
: linearGradient(gradients.dark.main, gradients.dark.state),
|
||||
display: "inline-block",
|
||||
WebkitBackgroundClip: "text",
|
||||
WebkitTextFillColor: transparent.main,
|
||||
position: "relative",
|
||||
zIndex: 1,
|
||||
});
|
||||
|
||||
// color value
|
||||
let colorValue = color === "inherit" || !palette[color] ? "inherit" : palette[color].main;
|
||||
|
||||
if (darkMode && (color === "inherit" || !palette[color])) {
|
||||
colorValue = "inherit";
|
||||
} else if (darkMode && color === "dark") colorValue = white.main;
|
||||
|
||||
return {
|
||||
opacity,
|
||||
textTransform,
|
||||
verticalAlign,
|
||||
textDecoration: "none",
|
||||
color: colorValue,
|
||||
fontWeight: fontWeights[fontWeight] && fontWeights[fontWeight],
|
||||
...(textGradient && gradientStyles()),
|
||||
};
|
||||
});
|
||||
@ -1,97 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { FC, ReactNode, forwardRef } from "react";
|
||||
|
||||
// @mui material components
|
||||
import { TypographyProps } from "@mui/material";
|
||||
|
||||
// Custom styles for MDTypography
|
||||
import MDTypographyRoot from "components/MDTypography/MDTypographyRoot";
|
||||
|
||||
// Material Dashboard 2 PRO React TS contexts
|
||||
import { useMaterialUIController } from "context";
|
||||
|
||||
// Declaring props types for MDTypography
|
||||
interface Props extends TypographyProps {
|
||||
color?:
|
||||
| "inherit"
|
||||
| "primary"
|
||||
| "secondary"
|
||||
| "info"
|
||||
| "success"
|
||||
| "warning"
|
||||
| "error"
|
||||
| "light"
|
||||
| "dark"
|
||||
| "text"
|
||||
| "white";
|
||||
fontWeight?: "light" | "regular" | "medium" | "bold" | undefined;
|
||||
textTransform?: "none" | "capitalize" | "uppercase" | "lowercase";
|
||||
verticalAlign?:
|
||||
| "unset"
|
||||
| "baseline"
|
||||
| "sub"
|
||||
| "super"
|
||||
| "text-top"
|
||||
| "text-bottom"
|
||||
| "middle"
|
||||
| "top"
|
||||
| "bottom";
|
||||
textGradient?: boolean;
|
||||
children: ReactNode;
|
||||
opacity?: number;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
const MDTypography: FC<Props | any> = forwardRef(
|
||||
(
|
||||
{ color, fontWeight, textTransform, verticalAlign, textGradient, opacity, children, ...rest },
|
||||
ref
|
||||
) => {
|
||||
const [controller] = useMaterialUIController();
|
||||
const { darkMode } = controller;
|
||||
|
||||
return (
|
||||
<MDTypographyRoot
|
||||
{...rest}
|
||||
ref={ref}
|
||||
ownerState={{
|
||||
color,
|
||||
textTransform,
|
||||
verticalAlign,
|
||||
fontWeight,
|
||||
opacity,
|
||||
textGradient,
|
||||
darkMode,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</MDTypographyRoot>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
// Declaring default props for MDTypography
|
||||
MDTypography.defaultProps = {
|
||||
color: "dark",
|
||||
fontWeight: undefined,
|
||||
textTransform: "none",
|
||||
verticalAlign: "unset",
|
||||
textGradient: false,
|
||||
opacity: 1,
|
||||
};
|
||||
|
||||
export default MDTypography;
|
||||
@ -1,104 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { ReactNode } from "react";
|
||||
|
||||
// react-router-dom components
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
// @mui material components
|
||||
import { Breadcrumbs as MuiBreadcrumbs } from "@mui/material";
|
||||
import Icon from "@mui/material/Icon";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// Declaring props types for the Breadcrumbs
|
||||
interface Props {
|
||||
icon: ReactNode;
|
||||
title: string;
|
||||
route: string | string[];
|
||||
light?: boolean;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
function Breadcrumbs({ icon, title, route, light }: Props): JSX.Element {
|
||||
const routes: string[] | any = route.slice(0, -1);
|
||||
|
||||
return (
|
||||
<MDBox mr={{ xs: 0, xl: 8 }}>
|
||||
<MuiBreadcrumbs
|
||||
sx={{
|
||||
"& .MuiBreadcrumbs-separator": {
|
||||
color: ({ palette: { white, grey } }) => (light ? white.main : grey[600]),
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Link to="/">
|
||||
<MDTypography
|
||||
component="span"
|
||||
variant="body2"
|
||||
color={light ? "white" : "dark"}
|
||||
opacity={light ? 0.8 : 0.5}
|
||||
sx={{ lineHeight: 0 }}
|
||||
>
|
||||
<Icon>{icon}</Icon>
|
||||
</MDTypography>
|
||||
</Link>
|
||||
{routes.map((el: string) => (
|
||||
<Link to={`/${el}`} key={el}>
|
||||
<MDTypography
|
||||
component="span"
|
||||
variant="button"
|
||||
fontWeight="regular"
|
||||
textTransform="capitalize"
|
||||
color={light ? "white" : "dark"}
|
||||
opacity={light ? 0.8 : 0.5}
|
||||
sx={{ lineHeight: 0 }}
|
||||
>
|
||||
{el}
|
||||
</MDTypography>
|
||||
</Link>
|
||||
))}
|
||||
<MDTypography
|
||||
variant="button"
|
||||
fontWeight="regular"
|
||||
textTransform="capitalize"
|
||||
color={light ? "white" : "dark"}
|
||||
sx={{ lineHeight: 0 }}
|
||||
>
|
||||
{title.replace("-", " ")}
|
||||
</MDTypography>
|
||||
</MuiBreadcrumbs>
|
||||
<MDTypography
|
||||
fontWeight="bold"
|
||||
textTransform="capitalize"
|
||||
variant="h6"
|
||||
color={light ? "white" : "dark"}
|
||||
noWrap
|
||||
>
|
||||
{title.replace("-", " ").replace("_", " ")}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
);
|
||||
}
|
||||
|
||||
// Declaring default props for Breadcrumbs
|
||||
Breadcrumbs.defaultProps = {
|
||||
light: false,
|
||||
};
|
||||
|
||||
export default Breadcrumbs;
|
||||
@ -1,142 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// react-routers components
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
import Divider from "@mui/material/Divider";
|
||||
import Tooltip from "@mui/material/Tooltip";
|
||||
import Icon from "@mui/material/Icon";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// Material Dashboard 2 PRO React TS Base Styles
|
||||
import colors from "assets/theme/base/colors";
|
||||
import typography from "assets/theme/base/typography";
|
||||
|
||||
// Declaring props types for ProfileInfoCard
|
||||
interface Props {
|
||||
title: string;
|
||||
description: string;
|
||||
info: {
|
||||
[key: string]: string;
|
||||
};
|
||||
social: {
|
||||
[key: string]: any;
|
||||
}[];
|
||||
action: {
|
||||
route: string;
|
||||
tooltip: string;
|
||||
};
|
||||
shadow?: boolean;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
function ProfileInfoCard({ title, description, info, social, action, shadow }: Props): JSX.Element {
|
||||
const labels: string[] = [];
|
||||
const values: string[] = [];
|
||||
const { socialMediaColors } = colors;
|
||||
const { size } = typography;
|
||||
|
||||
// Convert this form `objectKey` of the object key in to this `object key`
|
||||
Object.keys(info).forEach((el) => {
|
||||
if (el.match(/[A-Z\s]+/)) {
|
||||
const uppercaseLetter = Array.from(el).find((i) => i.match(/[A-Z]+/));
|
||||
const newElement = el.replace(uppercaseLetter, ` ${uppercaseLetter.toLowerCase()}`);
|
||||
|
||||
labels.push(newElement);
|
||||
} else {
|
||||
labels.push(el);
|
||||
}
|
||||
});
|
||||
|
||||
// Push the object values into the values array
|
||||
Object.values(info).forEach((el) => values.push(el));
|
||||
|
||||
// Render the card info items
|
||||
const renderItems = labels.map((label, key) => (
|
||||
<MDBox key={label} display="flex" py={1} pr={2}>
|
||||
<MDTypography variant="button" fontWeight="bold" textTransform="capitalize">
|
||||
{label}:
|
||||
</MDTypography>
|
||||
<MDTypography variant="button" fontWeight="regular" color="text">
|
||||
{values[key]}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
));
|
||||
|
||||
// Render the card social media icons
|
||||
const renderSocial = social.map(({ link, icon, color }) => (
|
||||
<MDBox
|
||||
key={color}
|
||||
component="a"
|
||||
href={link}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
fontSize={size.lg}
|
||||
color={socialMediaColors[color].main}
|
||||
pr={1}
|
||||
pl={0.5}
|
||||
lineHeight={1}
|
||||
>
|
||||
{icon}
|
||||
</MDBox>
|
||||
));
|
||||
|
||||
return (
|
||||
<Card sx={{ height: "100%", boxShadow: !shadow && "none" }}>
|
||||
<MDBox display="flex" justifyContent="space-between" alignItems="center" pt={2} px={2}>
|
||||
<MDTypography variant="h6" fontWeight="medium" textTransform="capitalize">
|
||||
{title}
|
||||
</MDTypography>
|
||||
<MDTypography component={Link} to={action.route} variant="body2" color="secondary">
|
||||
<Tooltip title={action.tooltip} placement="top">
|
||||
<Icon>edit</Icon>
|
||||
</Tooltip>
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox p={2}>
|
||||
<MDBox mb={2} lineHeight={1}>
|
||||
<MDTypography variant="button" color="text" fontWeight="light">
|
||||
{description}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox opacity={0.3}>
|
||||
<Divider />
|
||||
</MDBox>
|
||||
<MDBox>
|
||||
{renderItems}
|
||||
<MDBox display="flex" py={1} pr={2}>
|
||||
<MDTypography variant="button" fontWeight="bold" textTransform="capitalize">
|
||||
social:
|
||||
</MDTypography>
|
||||
{renderSocial}
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// Declaring default props for ProfileInfoCard
|
||||
ProfileInfoCard.defaultProps = {
|
||||
shadow: true,
|
||||
};
|
||||
|
||||
export default ProfileInfoCard;
|
||||
@ -1,184 +0,0 @@
|
||||
/*
|
||||
* QQQ - Low-code Application Framework for Engineers.
|
||||
* Copyright (C) 2021-2022. Kingsrook, LLC
|
||||
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
|
||||
* contact@kingsrook.com
|
||||
* https://github.com/Kingsrook/
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as
|
||||
* published by the Free Software Foundation, either version 3 of the
|
||||
* License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
// react-router-dom components
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
import CardMedia from "@mui/material/CardMedia";
|
||||
import Tooltip from "@mui/material/Tooltip";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import MDButton from "components/MDButton";
|
||||
import MDAvatar from "components/MDAvatar";
|
||||
|
||||
// Declaring props types for DefaultProjectCard
|
||||
interface Props {
|
||||
image: string;
|
||||
label: string;
|
||||
title: string;
|
||||
description: string;
|
||||
action: {
|
||||
type: "external" | "internal";
|
||||
route: string;
|
||||
color:
|
||||
| "primary"
|
||||
| "secondary"
|
||||
| "info"
|
||||
| "success"
|
||||
| "warning"
|
||||
| "error"
|
||||
| "light"
|
||||
| "dark"
|
||||
| "white";
|
||||
label: string;
|
||||
};
|
||||
authors?: {
|
||||
image: string;
|
||||
name: string;
|
||||
}[];
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
function DefaultProjectCard({
|
||||
image,
|
||||
label,
|
||||
title,
|
||||
description,
|
||||
action,
|
||||
authors,
|
||||
}: Props): JSX.Element {
|
||||
const renderAuthors = authors.map(({ image: media, name }) => (
|
||||
<Tooltip key={name} title={name} placement="bottom">
|
||||
<MDAvatar
|
||||
src={media}
|
||||
alt={name}
|
||||
size="xs"
|
||||
sx={({ borders: { borderWidth }, palette: { white } }) => ({
|
||||
border: `${borderWidth[2]} solid ${white.main}`,
|
||||
cursor: "pointer",
|
||||
position: "relative",
|
||||
ml: -1.25,
|
||||
|
||||
"&:hover, &:focus": {
|
||||
zIndex: "10",
|
||||
},
|
||||
})}
|
||||
/>
|
||||
</Tooltip>
|
||||
));
|
||||
|
||||
return (
|
||||
<Card
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
backgroundColor: "transparent",
|
||||
boxShadow: "none",
|
||||
overflow: "visible",
|
||||
}}
|
||||
>
|
||||
<MDBox position="relative" width="100.25%" shadow="xl" borderRadius="xl">
|
||||
<CardMedia
|
||||
src={image}
|
||||
component="img"
|
||||
title={title}
|
||||
sx={{
|
||||
maxWidth: "100%",
|
||||
margin: 0,
|
||||
boxShadow: ({ boxShadows: { md } }) => md,
|
||||
objectFit: "cover",
|
||||
objectPosition: "center",
|
||||
}}
|
||||
/>
|
||||
</MDBox>
|
||||
<MDBox mt={1} mx={0.5}>
|
||||
<MDTypography variant="button" fontWeight="regular" color="text" textTransform="capitalize">
|
||||
{label}
|
||||
</MDTypography>
|
||||
<MDBox mb={1}>
|
||||
{action.type === "internal" ? (
|
||||
<MDTypography
|
||||
component={Link}
|
||||
to={action.route}
|
||||
variant="h5"
|
||||
textTransform="capitalize"
|
||||
>
|
||||
{title}
|
||||
</MDTypography>
|
||||
) : (
|
||||
<MDTypography
|
||||
component="a"
|
||||
href={action.route}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
variant="h5"
|
||||
textTransform="capitalize"
|
||||
>
|
||||
{title}
|
||||
</MDTypography>
|
||||
)}
|
||||
</MDBox>
|
||||
<MDBox mb={3} lineHeight={0}>
|
||||
<MDTypography variant="button" fontWeight="light" color="text">
|
||||
{description}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox display="flex" justifyContent="space-between" alignItems="center">
|
||||
{action.type === "internal" ? (
|
||||
<MDButton
|
||||
component={Link}
|
||||
to={action.route}
|
||||
variant="outlined"
|
||||
size="small"
|
||||
color={action.color}
|
||||
>
|
||||
{action.label}
|
||||
</MDButton>
|
||||
) : (
|
||||
<MDButton
|
||||
component="a"
|
||||
href={action.route}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
variant="outlined"
|
||||
size="small"
|
||||
color={action.color}
|
||||
>
|
||||
{action.label}
|
||||
</MDButton>
|
||||
)}
|
||||
<MDBox display="flex">{renderAuthors}</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// Declaring default props for DefaultProjectCard
|
||||
DefaultProjectCard.defaultProps = {
|
||||
authors: [],
|
||||
};
|
||||
|
||||
export default DefaultProjectCard;
|
||||
@ -1,60 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import Drawer from "@mui/material/Drawer";
|
||||
import { styled, Theme } from "@mui/material/styles";
|
||||
|
||||
export default styled(Drawer)(({ theme, ownerState }: { theme?: Theme; ownerState: any }) => {
|
||||
const { boxShadows, functions, transitions } = theme;
|
||||
const { openConfigurator } = ownerState;
|
||||
|
||||
const configuratorWidth = 360;
|
||||
const { lg } = boxShadows;
|
||||
const { pxToRem } = functions;
|
||||
|
||||
// drawer styles when openConfigurator={true}
|
||||
const drawerOpenStyles = () => ({
|
||||
width: configuratorWidth,
|
||||
left: "initial",
|
||||
right: 0,
|
||||
transition: transitions.create("right", {
|
||||
easing: transitions.easing.sharp,
|
||||
duration: transitions.duration.short,
|
||||
}),
|
||||
});
|
||||
|
||||
// drawer styles when openConfigurator={false}
|
||||
const drawerCloseStyles = () => ({
|
||||
left: "initial",
|
||||
right: pxToRem(-350),
|
||||
transition: transitions.create("all", {
|
||||
easing: transitions.easing.sharp,
|
||||
duration: transitions.duration.short,
|
||||
}),
|
||||
});
|
||||
|
||||
return {
|
||||
"& .MuiDrawer-paper": {
|
||||
height: "100vh",
|
||||
margin: 0,
|
||||
padding: `0 ${pxToRem(10)}`,
|
||||
borderRadius: 0,
|
||||
boxShadow: lg,
|
||||
overflowY: "auto",
|
||||
...(openConfigurator ? drawerOpenStyles() : drawerCloseStyles()),
|
||||
},
|
||||
};
|
||||
});
|
||||
@ -1,392 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
// react-github-btn
|
||||
import GitHubButton from "react-github-btn";
|
||||
|
||||
// @mui material components
|
||||
import Divider from "@mui/material/Divider";
|
||||
import Switch from "@mui/material/Switch";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
import Link from "@mui/material/Link";
|
||||
import Icon from "@mui/material/Icon";
|
||||
import { Theme } from "@mui/material/styles";
|
||||
|
||||
// @mui icons
|
||||
import TwitterIcon from "@mui/icons-material/Twitter";
|
||||
import FacebookIcon from "@mui/icons-material/Facebook";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import MDButton from "components/MDButton";
|
||||
|
||||
// Custom styles for the Configurator
|
||||
import ConfiguratorRoot from "examples/Configurator/ConfiguratorRoot";
|
||||
|
||||
// Material Dashboard 2 PRO React context
|
||||
import {
|
||||
useMaterialUIController,
|
||||
setOpenConfigurator,
|
||||
setTransparentSidenav,
|
||||
setWhiteSidenav,
|
||||
setMiniSidenav,
|
||||
setFixedNavbar,
|
||||
setSidenavColor,
|
||||
setDarkMode,
|
||||
} from "context";
|
||||
|
||||
function Configurator(): JSX.Element {
|
||||
const [controller, dispatch] = useMaterialUIController();
|
||||
const {
|
||||
openConfigurator,
|
||||
miniSidenav,
|
||||
fixedNavbar,
|
||||
sidenavColor,
|
||||
transparentSidenav,
|
||||
whiteSidenav,
|
||||
darkMode,
|
||||
} = controller;
|
||||
const [disabled, setDisabled] = useState<boolean>(false);
|
||||
const sidenavColors: (
|
||||
| "primary"
|
||||
| "secondary"
|
||||
| "info"
|
||||
| "success"
|
||||
| "warning"
|
||||
| "error"
|
||||
| "light"
|
||||
| "dark"
|
||||
)[] = ["primary", "dark", "info", "success", "warning", "error"];
|
||||
|
||||
// Use the useEffect hook to change the button state for the sidenav type based on window size.
|
||||
useEffect(() => {
|
||||
// A function that sets the disabled state of the buttons for the sidenav type.
|
||||
function handleDisabled() {
|
||||
return window.innerWidth > 1200 ? setDisabled(false) : setDisabled(true);
|
||||
}
|
||||
|
||||
// The event listener that's calling the handleDisabled function when resizing the window.
|
||||
window.addEventListener("resize", handleDisabled);
|
||||
|
||||
// Call the handleDisabled function to set the state with the initial value.
|
||||
handleDisabled();
|
||||
|
||||
// Remove event listener on cleanup
|
||||
return () => window.removeEventListener("resize", handleDisabled);
|
||||
}, []);
|
||||
|
||||
const handleCloseConfigurator = () => setOpenConfigurator(dispatch, false);
|
||||
const handleTransparentSidenav = () => {
|
||||
setTransparentSidenav(dispatch, true);
|
||||
setWhiteSidenav(dispatch, false);
|
||||
};
|
||||
const handleWhiteSidenav = () => {
|
||||
setWhiteSidenav(dispatch, true);
|
||||
setTransparentSidenav(dispatch, false);
|
||||
};
|
||||
const handleDarkSidenav = () => {
|
||||
setWhiteSidenav(dispatch, false);
|
||||
setTransparentSidenav(dispatch, false);
|
||||
};
|
||||
const handleMiniSidenav = () => setMiniSidenav(dispatch, !miniSidenav);
|
||||
const handleFixedNavbar = () => setFixedNavbar(dispatch, !fixedNavbar);
|
||||
const handleDarkMode = () => setDarkMode(dispatch, !darkMode);
|
||||
|
||||
// sidenav type buttons styles
|
||||
const sidenavTypeButtonsStyles = ({
|
||||
functions: { pxToRem },
|
||||
palette: { white, dark, background },
|
||||
borders: { borderWidth },
|
||||
}: Theme | any) => ({
|
||||
height: pxToRem(39),
|
||||
background: darkMode ? background.sidenav : white.main,
|
||||
color: darkMode ? white.main : dark.main,
|
||||
border: `${borderWidth[1]} solid ${darkMode ? white.main : dark.main}`,
|
||||
|
||||
"&:hover, &:focus, &:focus:not(:hover)": {
|
||||
background: darkMode ? background.sidenav : white.main,
|
||||
color: darkMode ? white.main : dark.main,
|
||||
border: `${borderWidth[1]} solid ${darkMode ? white.main : dark.main}`,
|
||||
},
|
||||
});
|
||||
|
||||
// sidenav type active button styles
|
||||
const sidenavTypeActiveButtonStyles = ({
|
||||
functions: { pxToRem, linearGradient },
|
||||
palette: { white, gradients, background },
|
||||
}: Theme | any) => ({
|
||||
height: pxToRem(39),
|
||||
background: darkMode ? white.main : linearGradient(gradients.dark.main, gradients.dark.state),
|
||||
color: darkMode ? background.sidenav : white.main,
|
||||
|
||||
"&:hover, &:focus, &:focus:not(:hover)": {
|
||||
background: darkMode ? white.main : linearGradient(gradients.dark.main, gradients.dark.state),
|
||||
color: darkMode ? background.sidenav : white.main,
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<ConfiguratorRoot variant="permanent" ownerState={{ openConfigurator }}>
|
||||
<MDBox
|
||||
display="flex"
|
||||
justifyContent="space-between"
|
||||
alignItems="baseline"
|
||||
pt={4}
|
||||
pb={0.5}
|
||||
px={3}
|
||||
>
|
||||
<MDBox>
|
||||
<MDTypography variant="h5">Material UI Configurator</MDTypography>
|
||||
<MDTypography variant="body2" color="text">
|
||||
See our dashboard options.
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
|
||||
<Icon
|
||||
sx={({ typography: { size }, palette: { dark, white } }) => ({
|
||||
fontSize: `${size.lg} !important`,
|
||||
color: darkMode ? white.main : dark.main,
|
||||
stroke: "currentColor",
|
||||
strokeWidth: "2px",
|
||||
cursor: "pointer",
|
||||
transform: "translateY(5px)",
|
||||
})}
|
||||
onClick={handleCloseConfigurator}
|
||||
>
|
||||
close
|
||||
</Icon>
|
||||
</MDBox>
|
||||
|
||||
<Divider />
|
||||
|
||||
<MDBox pt={0.5} pb={3} px={3}>
|
||||
<MDBox>
|
||||
<MDTypography variant="h6">Sidenav Colors</MDTypography>
|
||||
|
||||
<MDBox mb={0.5}>
|
||||
{sidenavColors.map((color) => (
|
||||
<IconButton
|
||||
key={color}
|
||||
sx={({
|
||||
borders: { borderWidth },
|
||||
palette: { white, dark, background },
|
||||
transitions,
|
||||
}: Theme | any) => ({
|
||||
width: "24px",
|
||||
height: "24px",
|
||||
padding: 0,
|
||||
border: `${borderWidth[1]} solid ${darkMode ? background.sidenav : white.main}`,
|
||||
borderColor: () => {
|
||||
let borderColorValue = sidenavColor === color && dark.main;
|
||||
|
||||
if (darkMode && sidenavColor === color) {
|
||||
borderColorValue = white.main;
|
||||
}
|
||||
|
||||
return borderColorValue;
|
||||
},
|
||||
transition: transitions.create("border-color", {
|
||||
easing: transitions.easing.sharp,
|
||||
duration: transitions.duration.shorter,
|
||||
}),
|
||||
backgroundImage: ({ functions: { linearGradient }, palette: { gradients } }) =>
|
||||
linearGradient(gradients[color].main, gradients[color].state),
|
||||
|
||||
"&:not(:last-child)": {
|
||||
mr: 1,
|
||||
},
|
||||
|
||||
"&:hover, &:focus, &:active": {
|
||||
borderColor: darkMode ? white.main : dark.main,
|
||||
},
|
||||
})}
|
||||
onClick={() => setSidenavColor(dispatch, color)}
|
||||
/>
|
||||
))}
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
|
||||
<MDBox mt={3} lineHeight={1}>
|
||||
<MDTypography variant="h6">Sidenav Type</MDTypography>
|
||||
<MDTypography variant="button" color="text">
|
||||
Choose between different sidenav types.
|
||||
</MDTypography>
|
||||
|
||||
<MDBox
|
||||
sx={{
|
||||
display: "flex",
|
||||
mt: 2,
|
||||
mr: 1,
|
||||
}}
|
||||
>
|
||||
<MDButton
|
||||
color="dark"
|
||||
variant="gradient"
|
||||
onClick={handleDarkSidenav}
|
||||
disabled={disabled}
|
||||
fullWidth
|
||||
sx={
|
||||
!transparentSidenav && !whiteSidenav
|
||||
? sidenavTypeActiveButtonStyles
|
||||
: sidenavTypeButtonsStyles
|
||||
}
|
||||
>
|
||||
Dark
|
||||
</MDButton>
|
||||
<MDBox sx={{ mx: 1, width: "8rem", minWidth: "8rem" }}>
|
||||
<MDButton
|
||||
color="dark"
|
||||
variant="gradient"
|
||||
onClick={handleTransparentSidenav}
|
||||
disabled={disabled}
|
||||
fullWidth
|
||||
sx={
|
||||
transparentSidenav && !whiteSidenav
|
||||
? sidenavTypeActiveButtonStyles
|
||||
: sidenavTypeButtonsStyles
|
||||
}
|
||||
>
|
||||
Transparent
|
||||
</MDButton>
|
||||
</MDBox>
|
||||
<MDButton
|
||||
color="dark"
|
||||
variant="gradient"
|
||||
onClick={handleWhiteSidenav}
|
||||
disabled={disabled}
|
||||
fullWidth
|
||||
sx={
|
||||
whiteSidenav && !transparentSidenav
|
||||
? sidenavTypeActiveButtonStyles
|
||||
: sidenavTypeButtonsStyles
|
||||
}
|
||||
>
|
||||
White
|
||||
</MDButton>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
<MDBox
|
||||
display="flex"
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
mt={3}
|
||||
lineHeight={1}
|
||||
>
|
||||
<MDTypography variant="h6">Navbar Fixed</MDTypography>
|
||||
|
||||
<Switch checked={fixedNavbar} onChange={handleFixedNavbar} />
|
||||
</MDBox>
|
||||
<Divider />
|
||||
<MDBox display="flex" justifyContent="space-between" alignItems="center" lineHeight={1}>
|
||||
<MDTypography variant="h6">Sidenav Mini</MDTypography>
|
||||
|
||||
<Switch checked={miniSidenav} onChange={handleMiniSidenav} />
|
||||
</MDBox>
|
||||
<Divider />
|
||||
<MDBox display="flex" justifyContent="space-between" alignItems="center" lineHeight={1}>
|
||||
<MDTypography variant="h6">Light / Dark</MDTypography>
|
||||
|
||||
<Switch checked={darkMode} onChange={handleDarkMode} />
|
||||
</MDBox>
|
||||
<Divider />
|
||||
<MDBox mt={3} mb={2}>
|
||||
<MDBox mb={2}>
|
||||
<MDButton
|
||||
component={Link}
|
||||
href="https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
color="info"
|
||||
variant="gradient"
|
||||
fullWidth
|
||||
>
|
||||
buy now
|
||||
</MDButton>
|
||||
</MDBox>
|
||||
<MDBox mb={2}>
|
||||
<MDButton
|
||||
component={Link}
|
||||
href="https://www.creative-tim.com/product/material-dashboard-pro-react"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
color="dark"
|
||||
variant="gradient"
|
||||
fullWidth
|
||||
>
|
||||
buy javascript version
|
||||
</MDButton>
|
||||
</MDBox>
|
||||
<MDButton
|
||||
component={Link}
|
||||
href="https://www.creative-tim.com/learning-lab/react/quick-start/material-dashboard/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
color={darkMode ? "light" : "dark"}
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
>
|
||||
view documentation
|
||||
</MDButton>
|
||||
</MDBox>
|
||||
<MDBox display="flex" justifyContent="center">
|
||||
<GitHubButton
|
||||
href="https://github.com/creativetimofficial/ct-material-dashboard-pro-react"
|
||||
data-icon="octicon-star"
|
||||
data-size="large"
|
||||
data-show-count="true"
|
||||
aria-label="Star creativetimofficial/ct-material-dashboard-pro-react on GitHub"
|
||||
>
|
||||
Star
|
||||
</GitHubButton>
|
||||
</MDBox>
|
||||
<MDBox mt={2} textAlign="center">
|
||||
<MDBox mb={0.5}>
|
||||
<MDTypography variant="h6">Thank you for sharing!</MDTypography>
|
||||
</MDBox>
|
||||
|
||||
<MDBox display="flex" justifyContent="center">
|
||||
<MDBox mr={1.5}>
|
||||
<MDButton
|
||||
component={Link}
|
||||
href="//twitter.com/intent/tweet?text=Check%20Material%20Dashboard%202%20PRO%20React%20made%20by%20%40CreativeTim%20%23webdesign%20%23dashboard%20%23react%20%mui&url=https%3A%2F%2Fwww.creative-tim.com%2Fproduct%2Fmaterial-dashboard-2-pro-react-ts"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
color="dark"
|
||||
>
|
||||
<TwitterIcon />
|
||||
Tweet
|
||||
</MDButton>
|
||||
</MDBox>
|
||||
<MDButton
|
||||
component={Link}
|
||||
href="https://www.facebook.com/sharer/sharer.php?u=https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
color="dark"
|
||||
>
|
||||
<FacebookIcon />
|
||||
Share
|
||||
</MDButton>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</ConfiguratorRoot>
|
||||
);
|
||||
}
|
||||
|
||||
export default Configurator;
|
||||
@ -1,121 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import Link from "@mui/material/Link";
|
||||
import Icon from "@mui/material/Icon";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// Material Dashboard 2 PRO React TS Base Styles
|
||||
import typography from "assets/theme/base/typography";
|
||||
|
||||
// Declaring props types for Footer
|
||||
interface Props {
|
||||
company?: {
|
||||
href: string;
|
||||
name: string;
|
||||
};
|
||||
links?: {
|
||||
href: string;
|
||||
name: string;
|
||||
}[];
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
function Footer({ company, links }: Props): JSX.Element {
|
||||
const { href, name } = company;
|
||||
const { size } = typography;
|
||||
|
||||
const renderLinks = () =>
|
||||
links.map((link) => (
|
||||
<MDBox key={link.name} component="li" px={2} lineHeight={1}>
|
||||
<Link href={link.href} target="_blank">
|
||||
<MDTypography variant="button" fontWeight="regular" color="text">
|
||||
{link.name}
|
||||
</MDTypography>
|
||||
</Link>
|
||||
</MDBox>
|
||||
));
|
||||
|
||||
return (
|
||||
<MDBox
|
||||
width="100%"
|
||||
display="flex"
|
||||
flexDirection={{ xs: "column", lg: "row" }}
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
px={1.5}
|
||||
>
|
||||
<MDBox
|
||||
display="flex"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
flexWrap="wrap"
|
||||
color="text"
|
||||
fontSize={size.sm}
|
||||
px={1.5}
|
||||
>
|
||||
© {new Date().getFullYear()}, made with
|
||||
<MDBox fontSize={size.md} color="text" mb={-0.5} mx={0.25}>
|
||||
<Icon color="inherit" fontSize="inherit">
|
||||
favorite
|
||||
</Icon>
|
||||
</MDBox>
|
||||
by
|
||||
<Link href={href} target="_blank">
|
||||
<MDTypography variant="button" fontWeight="medium">
|
||||
{name}
|
||||
</MDTypography>
|
||||
</Link>
|
||||
for a better web.
|
||||
</MDBox>
|
||||
<MDBox
|
||||
component="ul"
|
||||
sx={({ breakpoints }) => ({
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
listStyle: "none",
|
||||
mt: 3,
|
||||
mb: 0,
|
||||
p: 0,
|
||||
|
||||
[breakpoints.up("lg")]: {
|
||||
mt: 0,
|
||||
},
|
||||
})}
|
||||
>
|
||||
{renderLinks()}
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
);
|
||||
}
|
||||
|
||||
// Declaring default props for Footer
|
||||
Footer.defaultProps = {
|
||||
company: { href: "https://www.creative-tim.com/", name: "Creative Tim" },
|
||||
links: [
|
||||
{ href: "https://www.creative-tim.com/", name: "Creative Tim" },
|
||||
{ href: "https://www.creative-tim.com/presentation", name: "About Us" },
|
||||
{ href: "https://www.creative-tim.com/blog", name: "Blog" },
|
||||
{ href: "https://www.creative-tim.com/license", name: "License" },
|
||||
],
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
@ -1,50 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { forwardRef, FC, ReactNode } from "react";
|
||||
|
||||
// @mui material components
|
||||
import MenuItem from "@mui/material/MenuItem";
|
||||
import Link from "@mui/material/Link";
|
||||
import { MenuItemProps } from "@mui/material";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// custom styles for the NotificationItem
|
||||
import menuItem from "examples/Items/NotificationItem/styles";
|
||||
|
||||
// Declaring props types for NotificationItem
|
||||
interface Props extends MenuItemProps {
|
||||
icon: ReactNode;
|
||||
title: string;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
const NotificationItem: FC<Props> = forwardRef(({ icon, title, ...rest }, ref) => (
|
||||
<MenuItem {...rest} ref={ref} sx={(theme) => menuItem(theme)}>
|
||||
<MDBox component={Link} py={0.5} display="flex" alignItems="center" lineHeight={1}>
|
||||
<MDTypography variant="body1" color="secondary" lineHeight={0.75}>
|
||||
{icon}
|
||||
</MDTypography>
|
||||
<MDTypography variant="button" fontWeight="regular" sx={{ ml: 1 }}>
|
||||
{title}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MenuItem>
|
||||
));
|
||||
|
||||
export default NotificationItem;
|
||||
@ -1,39 +0,0 @@
|
||||
// @mui material components
|
||||
import { Theme } from "@mui/material/styles";
|
||||
|
||||
function menuItem(theme: Theme) {
|
||||
const { palette, borders, transitions } = theme;
|
||||
|
||||
const { secondary, light, dark } = palette;
|
||||
const { borderRadius } = borders;
|
||||
|
||||
return {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
width: "100%",
|
||||
color: secondary.main,
|
||||
borderRadius: borderRadius.md,
|
||||
transition: transitions.create("background-color", {
|
||||
easing: transitions.easing.easeInOut,
|
||||
duration: transitions.duration.standard,
|
||||
}),
|
||||
|
||||
"& *": {
|
||||
transition: "color 100ms linear",
|
||||
},
|
||||
|
||||
"&:not(:last-child)": {
|
||||
mb: 1,
|
||||
},
|
||||
|
||||
"&:hover": {
|
||||
backgroundColor: light.main,
|
||||
|
||||
"& *": {
|
||||
color: dark.main,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default menuItem;
|
||||
@ -1,56 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { useEffect, ReactNode, useReducer, useState } from "react";
|
||||
|
||||
// react-router-dom components
|
||||
import { useLocation } from "react-router-dom";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
|
||||
// Material Dashboard 2 PRO React context
|
||||
import { useMaterialUIController, setLayout } from "context";
|
||||
|
||||
function DashboardLayout({ children }: { children: ReactNode }): JSX.Element {
|
||||
const [controller, dispatch] = useMaterialUIController();
|
||||
const { miniSidenav } = controller;
|
||||
const { pathname } = useLocation();
|
||||
|
||||
useEffect(() => {
|
||||
setLayout(dispatch, "dashboard");
|
||||
}, [pathname]);
|
||||
|
||||
return (
|
||||
<MDBox
|
||||
sx={({ breakpoints, transitions, functions: { pxToRem } }) => ({
|
||||
p: 3,
|
||||
position: "relative",
|
||||
|
||||
[breakpoints.up("xl")]: {
|
||||
marginLeft: miniSidenav ? pxToRem(120) : pxToRem(274),
|
||||
transition: transitions.create(["margin-left", "margin-right"], {
|
||||
easing: transitions.easing.easeInOut,
|
||||
duration: transitions.duration.standard,
|
||||
}),
|
||||
},
|
||||
})}
|
||||
>
|
||||
{children}
|
||||
</MDBox>
|
||||
);
|
||||
}
|
||||
|
||||
export default DashboardLayout;
|
||||
@ -1,102 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// react-routers components
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import MDAvatar from "components/MDAvatar";
|
||||
import MDButton from "components/MDButton";
|
||||
|
||||
// Declaring props types for ProfilesList
|
||||
interface Props {
|
||||
title: string;
|
||||
profiles: {
|
||||
image: string;
|
||||
name: string;
|
||||
description: string;
|
||||
action: {
|
||||
type: "external" | "internal";
|
||||
route: string;
|
||||
color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
|
||||
label: string;
|
||||
};
|
||||
}[];
|
||||
shadow?: boolean;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
function ProfilesList({ title, profiles, shadow }: Props): JSX.Element {
|
||||
const renderProfiles = profiles.map(({ image, name, description, action }) => (
|
||||
<MDBox key={name} component="li" display="flex" alignItems="center" py={1} mb={1}>
|
||||
<MDBox mr={2}>
|
||||
<MDAvatar src={image} alt="something here" shadow="md" />
|
||||
</MDBox>
|
||||
<MDBox display="flex" flexDirection="column" alignItems="flex-start" justifyContent="center">
|
||||
<MDTypography variant="button" fontWeight="medium">
|
||||
{name}
|
||||
</MDTypography>
|
||||
<MDTypography variant="caption" color="text">
|
||||
{description}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox ml="auto">
|
||||
{action.type === "internal" ? (
|
||||
<MDButton component={Link} to={action.route} variant="text" color="info">
|
||||
{action.label}
|
||||
</MDButton>
|
||||
) : (
|
||||
<MDButton
|
||||
component="a"
|
||||
href={action.route}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
variant="text"
|
||||
color={action.color}
|
||||
>
|
||||
{action.label}
|
||||
</MDButton>
|
||||
)}
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
));
|
||||
|
||||
return (
|
||||
<Card sx={{ height: "100%", boxShadow: !shadow && "none" }}>
|
||||
<MDBox pt={2} px={2}>
|
||||
<MDTypography variant="h6" fontWeight="medium" textTransform="capitalize">
|
||||
{title}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox p={2}>
|
||||
<MDBox component="ul" display="flex" flexDirection="column" p={0} m={0}>
|
||||
{renderProfiles}
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// Declaring defualt props for ProfilesList
|
||||
ProfilesList.defaultProps = {
|
||||
shadow: true,
|
||||
};
|
||||
|
||||
export default ProfilesList;
|
||||
@ -1,212 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
// react-router components
|
||||
import { useLocation, Link } from "react-router-dom";
|
||||
|
||||
// @material-ui core components
|
||||
import AppBar from "@mui/material/AppBar";
|
||||
import Toolbar from "@mui/material/Toolbar";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
import Menu from "@mui/material/Menu";
|
||||
import Icon from "@mui/material/Icon";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDInput from "components/MDInput";
|
||||
import MDBadge from "components/MDBadge";
|
||||
|
||||
// Material Dashboard 2 PRO React TS examples components
|
||||
import Breadcrumbs from "examples/Breadcrumbs";
|
||||
import NotificationItem from "examples/Items/NotificationItem";
|
||||
|
||||
// Custom styles for DashboardNavbar
|
||||
import {
|
||||
navbar,
|
||||
navbarContainer,
|
||||
navbarRow,
|
||||
navbarIconButton,
|
||||
navbarDesktopMenu,
|
||||
navbarMobileMenu,
|
||||
} from "examples/Navbars/DashboardNavbar/styles";
|
||||
|
||||
// Material Dashboard 2 PRO React context
|
||||
import {
|
||||
useMaterialUIController,
|
||||
setTransparentNavbar,
|
||||
setMiniSidenav,
|
||||
setOpenConfigurator,
|
||||
} from "context";
|
||||
|
||||
// Declaring prop types for DashboardNavbar
|
||||
interface Props {
|
||||
absolute?: boolean;
|
||||
light?: boolean;
|
||||
isMini?: boolean;
|
||||
}
|
||||
|
||||
function DashboardNavbar({ absolute, light, isMini }: Props): JSX.Element {
|
||||
const [navbarType, setNavbarType] = useState<
|
||||
"fixed" | "absolute" | "relative" | "static" | "sticky"
|
||||
>();
|
||||
const [controller, dispatch] = useMaterialUIController();
|
||||
const { miniSidenav, transparentNavbar, fixedNavbar, openConfigurator, darkMode } = controller;
|
||||
const [openMenu, setOpenMenu] = useState<any>(false);
|
||||
const route = useLocation().pathname.split("/").slice(1);
|
||||
|
||||
useEffect(() => {
|
||||
// Setting the navbar type
|
||||
if (fixedNavbar) {
|
||||
setNavbarType("sticky");
|
||||
} else {
|
||||
setNavbarType("static");
|
||||
}
|
||||
|
||||
// A function that sets the transparent state of the navbar.
|
||||
function handleTransparentNavbar() {
|
||||
setTransparentNavbar(dispatch, (fixedNavbar && window.scrollY === 0) || !fixedNavbar);
|
||||
}
|
||||
|
||||
/**
|
||||
The event listener that's calling the handleTransparentNavbar function when
|
||||
scrolling the window.
|
||||
*/
|
||||
window.addEventListener("scroll", handleTransparentNavbar);
|
||||
|
||||
// Call the handleTransparentNavbar function to set the state with the initial value.
|
||||
handleTransparentNavbar();
|
||||
|
||||
// Remove event listener on cleanup
|
||||
return () => window.removeEventListener("scroll", handleTransparentNavbar);
|
||||
}, [dispatch, fixedNavbar]);
|
||||
|
||||
const handleMiniSidenav = () => setMiniSidenav(dispatch, !miniSidenav);
|
||||
const handleConfiguratorOpen = () => setOpenConfigurator(dispatch, !openConfigurator);
|
||||
const handleOpenMenu = (event: any) => setOpenMenu(event.currentTarget);
|
||||
const handleCloseMenu = () => setOpenMenu(false);
|
||||
|
||||
// Render the notifications menu
|
||||
const renderMenu = () => (
|
||||
<Menu
|
||||
anchorEl={openMenu}
|
||||
anchorReference={null}
|
||||
anchorOrigin={{
|
||||
vertical: "bottom",
|
||||
horizontal: "left",
|
||||
}}
|
||||
open={Boolean(openMenu)}
|
||||
onClose={handleCloseMenu}
|
||||
sx={{ mt: 2 }}
|
||||
>
|
||||
<NotificationItem icon={<Icon>email</Icon>} title="Check new messages" />
|
||||
<NotificationItem icon={<Icon>podcasts</Icon>} title="Manage Podcast sessions" />
|
||||
<NotificationItem icon={<Icon>shopping_cart</Icon>} title="Payment successfully completed" />
|
||||
</Menu>
|
||||
);
|
||||
|
||||
// Styles for the navbar icons
|
||||
const iconsStyle = ({
|
||||
palette: { dark, white, text },
|
||||
functions: { rgba },
|
||||
}: {
|
||||
palette: any;
|
||||
functions: any;
|
||||
}) => ({
|
||||
color: () => {
|
||||
let colorValue = light || darkMode ? white.main : dark.main;
|
||||
|
||||
if (transparentNavbar && !light) {
|
||||
colorValue = darkMode ? rgba(text.main, 0.6) : text.main;
|
||||
}
|
||||
|
||||
return colorValue;
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<AppBar
|
||||
position={absolute ? "absolute" : navbarType}
|
||||
color="inherit"
|
||||
sx={(theme) => navbar(theme, { transparentNavbar, absolute, light, darkMode })}
|
||||
>
|
||||
<Toolbar sx={navbarContainer}>
|
||||
<MDBox color="inherit" mb={{ xs: 1, md: 0 }} sx={(theme) => navbarRow(theme, { isMini })}>
|
||||
<Breadcrumbs icon="home" title={route[route.length - 1]} route={route} light={light} />
|
||||
<IconButton sx={navbarDesktopMenu} onClick={handleMiniSidenav} size="small" disableRipple>
|
||||
<Icon fontSize="medium" sx={iconsStyle}>
|
||||
{miniSidenav ? "menu_open" : "menu"}
|
||||
</Icon>
|
||||
</IconButton>
|
||||
</MDBox>
|
||||
{isMini ? null : (
|
||||
<MDBox sx={(theme) => navbarRow(theme, { isMini })}>
|
||||
<MDBox pr={1}>
|
||||
<MDInput label="Search here" />
|
||||
</MDBox>
|
||||
<MDBox color={light ? "white" : "inherit"}>
|
||||
<Link to="/authentication/sign-in/basic">
|
||||
<IconButton sx={navbarIconButton} size="small" disableRipple>
|
||||
<Icon sx={iconsStyle}>account_circle</Icon>
|
||||
</IconButton>
|
||||
</Link>
|
||||
<IconButton
|
||||
size="small"
|
||||
disableRipple
|
||||
color="inherit"
|
||||
sx={navbarMobileMenu}
|
||||
onClick={handleMiniSidenav}
|
||||
>
|
||||
<Icon sx={iconsStyle} fontSize="medium">
|
||||
{miniSidenav ? "menu_open" : "menu"}
|
||||
</Icon>
|
||||
</IconButton>
|
||||
<IconButton
|
||||
size="small"
|
||||
disableRipple
|
||||
color="inherit"
|
||||
sx={navbarIconButton}
|
||||
onClick={handleConfiguratorOpen}
|
||||
>
|
||||
<Icon sx={iconsStyle}>settings</Icon>
|
||||
</IconButton>
|
||||
<IconButton
|
||||
size="small"
|
||||
color="inherit"
|
||||
sx={navbarIconButton}
|
||||
onClick={handleOpenMenu}
|
||||
>
|
||||
<MDBadge badgeContent={9} color="error" size="xs" circular>
|
||||
<Icon sx={iconsStyle}>notifications</Icon>
|
||||
</MDBadge>
|
||||
</IconButton>
|
||||
{renderMenu()}
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
)}
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
);
|
||||
}
|
||||
|
||||
// Declaring default props for DashboardNavbar
|
||||
DashboardNavbar.defaultProps = {
|
||||
absolute: false,
|
||||
light: false,
|
||||
isMini: false,
|
||||
};
|
||||
|
||||
export default DashboardNavbar;
|
||||
@ -1,154 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import { Theme } from "@mui/material/styles";
|
||||
|
||||
function navbar(theme: Theme | any, ownerState: any) {
|
||||
const { palette, boxShadows, functions, transitions, breakpoints, borders } = theme;
|
||||
const { transparentNavbar, absolute, light, darkMode } = ownerState;
|
||||
|
||||
const { dark, white, text, transparent, background } = palette;
|
||||
const { navbarBoxShadow } = boxShadows;
|
||||
const { rgba, pxToRem } = functions;
|
||||
const { borderRadius } = borders;
|
||||
|
||||
return {
|
||||
boxShadow: transparentNavbar || absolute ? "none" : navbarBoxShadow,
|
||||
backdropFilter: transparentNavbar || absolute ? "none" : `saturate(200%) blur(${pxToRem(30)})`,
|
||||
backgroundColor:
|
||||
transparentNavbar || absolute
|
||||
? `${transparent.main} !important`
|
||||
: rgba(darkMode ? background.default : white.main, 0.8),
|
||||
|
||||
color: () => {
|
||||
let color;
|
||||
|
||||
if (light) {
|
||||
color = white.main;
|
||||
} else if (transparentNavbar) {
|
||||
color = text.main;
|
||||
} else {
|
||||
color = dark.main;
|
||||
}
|
||||
|
||||
return color;
|
||||
},
|
||||
top: absolute ? 0 : pxToRem(12),
|
||||
minHeight: pxToRem(75),
|
||||
display: "grid",
|
||||
alignItems: "center",
|
||||
borderRadius: borderRadius.xl,
|
||||
paddingTop: pxToRem(8),
|
||||
paddingBottom: pxToRem(8),
|
||||
paddingRight: absolute ? pxToRem(8) : 0,
|
||||
paddingLeft: absolute ? pxToRem(16) : 0,
|
||||
|
||||
"& > *": {
|
||||
transition: transitions.create("all", {
|
||||
easing: transitions.easing.easeInOut,
|
||||
duration: transitions.duration.standard,
|
||||
}),
|
||||
},
|
||||
|
||||
"& .MuiToolbar-root": {
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
|
||||
[breakpoints.up("sm")]: {
|
||||
minHeight: "auto",
|
||||
padding: `${pxToRem(4)} ${pxToRem(16)}`,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
const navbarContainer = ({ breakpoints }: Theme): any => ({
|
||||
flexDirection: "column",
|
||||
alignItems: "flex-start",
|
||||
justifyContent: "space-between",
|
||||
pt: 0.5,
|
||||
pb: 0.5,
|
||||
|
||||
[breakpoints.up("md")]: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
paddingTop: "0",
|
||||
paddingBottom: "0",
|
||||
},
|
||||
});
|
||||
|
||||
const navbarRow = ({ breakpoints }: Theme, { isMini }: any) => ({
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
width: "100%",
|
||||
|
||||
[breakpoints.up("md")]: {
|
||||
justifyContent: isMini ? "space-between" : "stretch",
|
||||
width: isMini ? "100%" : "max-content",
|
||||
},
|
||||
|
||||
[breakpoints.up("xl")]: {
|
||||
justifyContent: "stretch !important",
|
||||
width: "max-content !important",
|
||||
},
|
||||
});
|
||||
|
||||
const navbarIconButton = ({ typography: { size }, breakpoints }: Theme) => ({
|
||||
px: 1,
|
||||
|
||||
"& .material-icons, .material-icons-round": {
|
||||
fontSize: `${size.xl} !important`,
|
||||
},
|
||||
|
||||
"& .MuiTypography-root": {
|
||||
display: "none",
|
||||
|
||||
[breakpoints.up("sm")]: {
|
||||
display: "inline-block",
|
||||
lineHeight: 1.2,
|
||||
ml: 0.5,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const navbarDesktopMenu = ({ breakpoints }: Theme) => ({
|
||||
display: "none !important",
|
||||
cursor: "pointer",
|
||||
|
||||
[breakpoints.up("xl")]: {
|
||||
display: "inline-block !important",
|
||||
},
|
||||
});
|
||||
|
||||
const navbarMobileMenu = ({ breakpoints }: Theme) => ({
|
||||
display: "inline-block",
|
||||
lineHeight: 0,
|
||||
|
||||
[breakpoints.up("xl")]: {
|
||||
display: "none",
|
||||
},
|
||||
});
|
||||
|
||||
export {
|
||||
navbar,
|
||||
navbarContainer,
|
||||
navbarRow,
|
||||
navbarIconButton,
|
||||
navbarDesktopMenu,
|
||||
navbarMobileMenu,
|
||||
};
|
||||
@ -1,39 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import { Theme } from "@mui/material/styles";
|
||||
|
||||
export default function sidenavLogoLabel(theme: Theme, ownerState: any) {
|
||||
const { functions, transitions, typography, breakpoints } = theme;
|
||||
const { miniSidenav } = ownerState;
|
||||
|
||||
const { pxToRem } = functions;
|
||||
const { fontWeightMedium } = typography;
|
||||
|
||||
return {
|
||||
ml: 0.5,
|
||||
fontWeight: fontWeightMedium,
|
||||
wordSpacing: pxToRem(-1),
|
||||
transition: transitions.create("opacity", {
|
||||
easing: transitions.easing.easeInOut,
|
||||
duration: transitions.duration.standard,
|
||||
}),
|
||||
|
||||
[breakpoints.up("xl")]: {
|
||||
opacity: miniSidenav ? 0 : 1,
|
||||
},
|
||||
};
|
||||
}
|
||||
@ -1,170 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import { Theme } from "@mui/material/styles";
|
||||
|
||||
function collapseItem(theme: Theme, ownerState: any) {
|
||||
const { palette, transitions, breakpoints, boxShadows, borders, functions } = theme;
|
||||
const { active, transparentSidenav, whiteSidenav, darkMode } = ownerState;
|
||||
|
||||
const { white, transparent, dark, grey } = palette;
|
||||
const { md } = boxShadows;
|
||||
const { borderRadius } = borders;
|
||||
const { pxToRem, rgba } = functions;
|
||||
|
||||
return {
|
||||
background: () => {
|
||||
let backgroundValue;
|
||||
|
||||
if (transparentSidenav && darkMode) {
|
||||
backgroundValue = active ? rgba(white.main, 0.2) : transparent.main;
|
||||
} else if (transparentSidenav && !darkMode) {
|
||||
backgroundValue = active ? grey[300] : transparent.main;
|
||||
} else if (whiteSidenav) {
|
||||
backgroundValue = active ? grey[200] : transparent.main;
|
||||
} else {
|
||||
backgroundValue = active ? rgba(white.main, 0.2) : transparent.main;
|
||||
}
|
||||
|
||||
return backgroundValue;
|
||||
},
|
||||
color: (transparentSidenav && !darkMode) || whiteSidenav ? dark.main : white.main,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
width: "100%",
|
||||
padding: `${pxToRem(8)} ${pxToRem(16)}`,
|
||||
margin: `${pxToRem(1.5)} ${pxToRem(16)}`,
|
||||
borderRadius: borderRadius.md,
|
||||
cursor: "pointer",
|
||||
userSelect: "none",
|
||||
whiteSpace: "nowrap",
|
||||
boxShadow: active && !whiteSidenav && !darkMode && !transparentSidenav ? md : "none",
|
||||
[breakpoints.up("xl")]: {
|
||||
transition: transitions.create(["box-shadow", "background-color"], {
|
||||
easing: transitions.easing.easeInOut,
|
||||
duration: transitions.duration.shorter,
|
||||
}),
|
||||
},
|
||||
|
||||
"&:hover, &:focus": {
|
||||
backgroundColor:
|
||||
transparentSidenav && !darkMode
|
||||
? grey[300]
|
||||
: rgba(whiteSidenav ? grey[400] : white.main, 0.2),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function collapseIconBox(theme: Theme, ownerState: any) {
|
||||
const { palette, transitions, borders, functions } = theme;
|
||||
const { transparentSidenav, whiteSidenav, darkMode } = ownerState;
|
||||
|
||||
const { white, dark } = palette;
|
||||
const { borderRadius } = borders;
|
||||
const { pxToRem } = functions;
|
||||
|
||||
return {
|
||||
minWidth: pxToRem(32),
|
||||
minHeight: pxToRem(32),
|
||||
color: (transparentSidenav && !darkMode) || whiteSidenav ? dark.main : white.main,
|
||||
borderRadius: borderRadius.md,
|
||||
display: "grid",
|
||||
placeItems: "center",
|
||||
transition: transitions.create("margin", {
|
||||
easing: transitions.easing.easeInOut,
|
||||
duration: transitions.duration.standard,
|
||||
}),
|
||||
|
||||
"& svg, svg g": {
|
||||
color: transparentSidenav || whiteSidenav ? dark.main : white.main,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
const collapseIcon = ({ palette: { white, gradients } }: Theme, { active }: any) => ({
|
||||
color: active ? white.main : gradients.dark.state,
|
||||
});
|
||||
|
||||
function collapseText(theme: any, ownerState: any) {
|
||||
const { typography, transitions, breakpoints, functions } = theme;
|
||||
const { miniSidenav, transparentSidenav, active } = ownerState;
|
||||
|
||||
const { size, fontWeightRegular, fontWeightLight } = typography;
|
||||
const { pxToRem } = functions;
|
||||
|
||||
return {
|
||||
marginLeft: pxToRem(10),
|
||||
|
||||
[breakpoints.up("xl")]: {
|
||||
opacity: miniSidenav || (miniSidenav && transparentSidenav) ? 0 : 1,
|
||||
maxWidth: miniSidenav || (miniSidenav && transparentSidenav) ? 0 : "100%",
|
||||
marginLeft: miniSidenav || (miniSidenav && transparentSidenav) ? 0 : pxToRem(10),
|
||||
transition: transitions.create(["opacity", "margin"], {
|
||||
easing: transitions.easing.easeInOut,
|
||||
duration: transitions.duration.standard,
|
||||
}),
|
||||
},
|
||||
|
||||
"& span": {
|
||||
fontWeight: active ? fontWeightRegular : fontWeightLight,
|
||||
fontSize: size.sm,
|
||||
lineHeight: 0,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function collapseArrow(theme: Theme, ownerState: any) {
|
||||
const { palette, typography, transitions, breakpoints, functions } = theme;
|
||||
const { noCollapse, transparentSidenav, whiteSidenav, miniSidenav, open, active, darkMode } =
|
||||
ownerState;
|
||||
|
||||
const { white, dark } = palette;
|
||||
const { size } = typography;
|
||||
const { pxToRem, rgba } = functions;
|
||||
|
||||
return {
|
||||
fontSize: `${size.lg} !important`,
|
||||
fontWeight: 700,
|
||||
marginBottom: pxToRem(-1),
|
||||
transform: open ? "rotate(0)" : "rotate(-180deg)",
|
||||
color: () => {
|
||||
let colorValue;
|
||||
|
||||
if (transparentSidenav && darkMode) {
|
||||
colorValue = open || active ? white.main : rgba(white.main, 0.25);
|
||||
} else if (transparentSidenav || whiteSidenav) {
|
||||
colorValue = open || active ? dark.main : rgba(dark.main, 0.25);
|
||||
} else {
|
||||
colorValue = open || active ? white.main : rgba(white.main, 0.5);
|
||||
}
|
||||
|
||||
return colorValue;
|
||||
},
|
||||
transition: transitions.create(["color", "transform", "opacity"], {
|
||||
easing: transitions.easing.easeInOut,
|
||||
duration: transitions.duration.shorter,
|
||||
}),
|
||||
|
||||
[breakpoints.up("xl")]: {
|
||||
display:
|
||||
noCollapse || (transparentSidenav && miniSidenav) || miniSidenav
|
||||
? "none !important"
|
||||
: "block !important",
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export { collapseItem, collapseIconBox, collapseIcon, collapseText, collapseArrow };
|
||||
@ -1,160 +0,0 @@
|
||||
/* eslint-disable prefer-destructuring */
|
||||
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import { Theme } from "@mui/material/styles";
|
||||
|
||||
function item(theme: Theme | any, ownerState: any) {
|
||||
const { palette, borders, functions, transitions } = theme;
|
||||
const { active, color, transparentSidenav, whiteSidenav, darkMode } = ownerState;
|
||||
|
||||
const { transparent, white, grey } = palette;
|
||||
const { borderRadius } = borders;
|
||||
const { rgba } = functions;
|
||||
|
||||
return {
|
||||
pl: 3,
|
||||
mt: 0.375,
|
||||
mb: 0.3,
|
||||
width: "100%",
|
||||
borderRadius: borderRadius.md,
|
||||
cursor: "pointer",
|
||||
backgroundColor: () => {
|
||||
let backgroundValue = transparent.main;
|
||||
|
||||
if (
|
||||
(active === "isParent" && !transparentSidenav && !whiteSidenav) ||
|
||||
(active === "isParent" && transparentSidenav && darkMode)
|
||||
) {
|
||||
backgroundValue = rgba(white.main, 0.2);
|
||||
} else if (active === "isParent" && transparentSidenav) {
|
||||
backgroundValue = grey[300];
|
||||
} else if (active === "isParent" && whiteSidenav) {
|
||||
backgroundValue = grey[200];
|
||||
} else if (active) {
|
||||
backgroundValue = palette[color].main;
|
||||
}
|
||||
|
||||
return backgroundValue;
|
||||
},
|
||||
transition: transitions.create("background-color", {
|
||||
easing: transitions.easing.easeInOut,
|
||||
duration: transitions.duration.shorter,
|
||||
}),
|
||||
|
||||
"&:hover, &:focus": {
|
||||
backgroundColor:
|
||||
!active &&
|
||||
rgba((transparentSidenav && !darkMode) || whiteSidenav ? grey[400] : white.main, 0.2),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function itemContent(theme: Theme, ownerState: any) {
|
||||
const { palette, typography, transitions, functions } = theme;
|
||||
const { miniSidenav, name, active, transparentSidenav, whiteSidenav, darkMode } = ownerState;
|
||||
|
||||
const { white, dark } = palette;
|
||||
const { size, fontWeightRegular, fontWeightLight } = typography;
|
||||
const { pxToRem } = functions;
|
||||
|
||||
return {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
width: "100%",
|
||||
padding: `${pxToRem(12)} ${pxToRem(16)}`,
|
||||
marginLeft: pxToRem(18),
|
||||
userSelect: "none",
|
||||
position: "relative",
|
||||
|
||||
"& span": {
|
||||
color:
|
||||
((transparentSidenav && !darkMode) || whiteSidenav) && (active === "isParent" || !active)
|
||||
? dark.main
|
||||
: white.main,
|
||||
fontWeight: active ? fontWeightRegular : fontWeightLight,
|
||||
fontSize: size.sm,
|
||||
opacity: miniSidenav ? 0 : 1,
|
||||
transition: transitions.create(["opacity", "color"], {
|
||||
easing: transitions.easing.easeInOut,
|
||||
duration: transitions.duration.standard,
|
||||
}),
|
||||
},
|
||||
|
||||
"&::before": {
|
||||
content: `"${name[0]}"`,
|
||||
color:
|
||||
((transparentSidenav && !darkMode) || whiteSidenav) && (active === "isParent" || !active)
|
||||
? dark.main
|
||||
: white.main,
|
||||
fontWeight: fontWeightRegular,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
position: "absolute",
|
||||
top: "50%",
|
||||
transform: "translateY(-50%)",
|
||||
left: pxToRem(-15),
|
||||
opacity: 1,
|
||||
borderRadius: "50%",
|
||||
fontSize: size.sm,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function itemArrow(theme: Theme, ownerState: any) {
|
||||
const { palette, typography, transitions, breakpoints, functions } = theme;
|
||||
const { noCollapse, transparentSidenav, whiteSidenav, miniSidenav, open, active, darkMode } =
|
||||
ownerState;
|
||||
|
||||
const { white, dark } = palette;
|
||||
const { size } = typography;
|
||||
const { pxToRem, rgba } = functions;
|
||||
|
||||
return {
|
||||
fontSize: `${size.lg} !important`,
|
||||
fontWeight: 700,
|
||||
marginBottom: pxToRem(-1),
|
||||
transform: open ? "rotate(0)" : "rotate(-180deg)",
|
||||
color: () => {
|
||||
let colorValue;
|
||||
|
||||
if (transparentSidenav && darkMode) {
|
||||
colorValue = open || active ? white.main : rgba(white.main, 0.25);
|
||||
} else if (transparentSidenav || whiteSidenav) {
|
||||
colorValue = open || active ? dark.main : rgba(dark.main, 0.25);
|
||||
} else {
|
||||
colorValue = open || active ? white.main : rgba(white.main, 0.5);
|
||||
}
|
||||
|
||||
return colorValue;
|
||||
},
|
||||
transition: transitions.create(["color", "transform", "opacity"], {
|
||||
easing: transitions.easing.easeInOut,
|
||||
duration: transitions.duration.shorter,
|
||||
}),
|
||||
|
||||
[breakpoints.up("xl")]: {
|
||||
display:
|
||||
noCollapse || (transparentSidenav && miniSidenav) || miniSidenav
|
||||
? "none !important"
|
||||
: "block !important",
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export { item, itemContent, itemArrow };
|
||||
@ -20,15 +20,16 @@
|
||||
*/
|
||||
|
||||
import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
|
||||
import {Map} from "@mui/icons-material";
|
||||
import {Typography} from "@mui/material";
|
||||
import Box from "@mui/material/Box";
|
||||
import Button from "@mui/material/Button";
|
||||
import Card from "@mui/material/Card";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import TextField from "@mui/material/TextField";
|
||||
import React, {useEffect, useState} from "react";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import React, {useState} from "react";
|
||||
import MDBox from "qqq/components/Temporary/MDBox";
|
||||
import MDTypography from "qqq/components/Temporary/MDTypography";
|
||||
import QClient from "qqq/utils/QClient";
|
||||
import QValueUtils from "qqq/utils/QValueUtils";
|
||||
|
||||
@ -75,6 +76,7 @@ function ScriptTestForm({scriptDefinition, tableName, fieldName, recordId, code}
|
||||
|
||||
const testScript = () =>
|
||||
{
|
||||
// @ts-ignore
|
||||
const inputValues = new Map<string, any>();
|
||||
if (scriptDefinition.testInputFields)
|
||||
{
|
||||
|
||||
@ -25,15 +25,15 @@ import Link from "@mui/material/Link";
|
||||
import List from "@mui/material/List";
|
||||
import {ReactNode, useEffect, useReducer, useState} from "react";
|
||||
import {NavLink, useLocation} from "react-router-dom";
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import {setMiniSidenav, setTransparentSidenav, setWhiteSidenav, useMaterialUIController,} from "context";
|
||||
import sidenavLogoLabel from "examples/Sidenav/styles/sidenav";
|
||||
import AuthenticationButton from "qqq/components/Buttons/AuthenticationButton";
|
||||
import SidenavCollapse from "qqq/components/Sidenav/SidenavCollapse";
|
||||
import SidenavItem from "qqq/components/Sidenav/SidenavItem";
|
||||
import SidenavList from "qqq/components/Sidenav/SidenavList";
|
||||
import SidenavRoot from "qqq/components/Sidenav/SidenavRoot";
|
||||
import sidenavLogoLabel from "qqq/components/Sidenav/styles/sidenav";
|
||||
import MDTypography from "qqq/components/Temporary/MDTypography";
|
||||
import MDBox from "../Temporary/MDBox";
|
||||
|
||||
interface Props
|
||||
{
|
||||
|
||||
@ -14,7 +14,7 @@ Coded by www.creative-tim.com
|
||||
*/
|
||||
|
||||
import {ReactNode} from "react";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import MDTypography from "qqq/components/Temporary/MDTypography";
|
||||
|
||||
function DefaultCell({children}: { children: ReactNode }): JSX.Element
|
||||
{
|
||||
|
||||
@ -1,84 +0,0 @@
|
||||
/* QQQ - Low-code Application Framework for Engineers.
|
||||
* Copyright (C) 2021-2022. Kingsrook, LLC
|
||||
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
|
||||
* contact@kingsrook.com
|
||||
* https://github.com/Kingsrook/
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as
|
||||
* published by the Free Software Foundation, either version 3 of the
|
||||
* License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import Card from "@mui/material/Card";
|
||||
import Divider from "@mui/material/Divider";
|
||||
import Icon from "@mui/material/Icon";
|
||||
import {ReactNode} from "react";
|
||||
import MDBox from "qqq/components/Temporary/MDBox";
|
||||
import MDTypography from "qqq/components/Temporary/MDTypography";
|
||||
|
||||
interface Props {
|
||||
color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark";
|
||||
icon: ReactNode;
|
||||
title: string;
|
||||
description?: string;
|
||||
value?: string | number;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
function DefaultInfoCard({color, icon, title, description, value}: Props): JSX.Element
|
||||
{
|
||||
return (
|
||||
<Card>
|
||||
<MDBox p={2} mx={3} display="flex" justifyContent="center">
|
||||
<MDBox
|
||||
display="grid"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
bgColor={color}
|
||||
color="white"
|
||||
width="4rem"
|
||||
height="4rem"
|
||||
shadow="md"
|
||||
borderRadius="lg"
|
||||
variant="gradient"
|
||||
>
|
||||
<Icon>{icon}</Icon>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
<MDBox pb={2} px={2} textAlign="center" lineHeight={1.25}>
|
||||
<MDTypography variant="h6" fontWeight="medium" textTransform="capitalize">
|
||||
{title}
|
||||
</MDTypography>
|
||||
{description && (
|
||||
<MDTypography variant="caption" color="text" fontWeight="regular">
|
||||
{description}
|
||||
</MDTypography>
|
||||
)}
|
||||
{description && !value ? null : <Divider />}
|
||||
{value && (
|
||||
<MDTypography variant="h5" fontWeight="medium">
|
||||
{value}
|
||||
</MDTypography>
|
||||
)}
|
||||
</MDBox>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// Declaring default props for DefaultInfoCard
|
||||
DefaultInfoCard.defaultProps = {
|
||||
color: "info",
|
||||
value: "",
|
||||
description: "",
|
||||
};
|
||||
|
||||
export default DefaultInfoCard;
|
||||
@ -1,147 +0,0 @@
|
||||
/*
|
||||
* QQQ - Low-code Application Framework for Engineers.
|
||||
* Copyright (C) 2021-2022. Kingsrook, LLC
|
||||
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
|
||||
* contact@kingsrook.com
|
||||
* https://github.com/Kingsrook/
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as
|
||||
* published by the Free Software Foundation, either version 3 of the
|
||||
* License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import Badge from "@mui/material/Badge";
|
||||
import {styled, Theme} from "@mui/material/styles";
|
||||
|
||||
export default styled(Badge)(({theme, ownerState}: { theme?: Theme; ownerState: any }) =>
|
||||
{
|
||||
const {palette, typography, borders, functions} = theme;
|
||||
const {color, circular, border, size, indicator, variant, container, children} = ownerState;
|
||||
|
||||
const {white, dark, gradients, badgeColors} = palette;
|
||||
const {size: fontSize, fontWeightBold} = typography;
|
||||
const {borderRadius, borderWidth} = borders;
|
||||
const {pxToRem, linearGradient} = functions;
|
||||
|
||||
// padding values
|
||||
const paddings: { [key: string]: string } = {
|
||||
xs: "0.45em 0.775em",
|
||||
sm: "0.55em 0.9em",
|
||||
md: "0.65em 1em",
|
||||
lg: "0.85em 1.375em",
|
||||
};
|
||||
|
||||
// fontSize value
|
||||
const fontSizeValue = size === "xs" ? fontSize.xxs : fontSize.xs;
|
||||
|
||||
// border value
|
||||
const borderValue = border ? `${borderWidth[3]} solid ${white.main}` : "none";
|
||||
|
||||
// borderRadius value
|
||||
const borderRadiusValue = circular ? borderRadius.section : borderRadius.md;
|
||||
|
||||
// styles for the badge with indicator={true}
|
||||
const indicatorStyles = (sizeProp: string) =>
|
||||
{
|
||||
let widthValue = pxToRem(20);
|
||||
let heightValue = pxToRem(20);
|
||||
|
||||
if (sizeProp === "medium")
|
||||
{
|
||||
widthValue = pxToRem(24);
|
||||
heightValue = pxToRem(24);
|
||||
}
|
||||
else if (sizeProp === "large")
|
||||
{
|
||||
widthValue = pxToRem(32);
|
||||
heightValue = pxToRem(32);
|
||||
}
|
||||
|
||||
return {
|
||||
width: widthValue,
|
||||
height: heightValue,
|
||||
display: "grid",
|
||||
placeItems: "center",
|
||||
textAlign: "center",
|
||||
borderRadius: "50%",
|
||||
padding: 0,
|
||||
border: borderValue,
|
||||
};
|
||||
};
|
||||
|
||||
// styles for the badge with variant="gradient"
|
||||
const gradientStyles = (colorProp: string) =>
|
||||
{
|
||||
const backgroundValue = gradients[colorProp]
|
||||
? linearGradient(gradients[colorProp].main, gradients[colorProp].state)
|
||||
: linearGradient(gradients.info.main, gradients.info.state);
|
||||
const colorValue = colorProp === "light" ? dark.main : white.main;
|
||||
|
||||
return {
|
||||
background: backgroundValue,
|
||||
color: colorValue,
|
||||
};
|
||||
};
|
||||
|
||||
// styles for the badge with variant="contained"
|
||||
const containedStyles = (colorProp: string) =>
|
||||
{
|
||||
const backgroundValue = badgeColors[colorProp]
|
||||
? badgeColors[colorProp].background
|
||||
: badgeColors.info.background;
|
||||
let colorValue = badgeColors[colorProp] ? badgeColors[colorProp].text : badgeColors.info.text;
|
||||
|
||||
if (colorProp === "light")
|
||||
{
|
||||
colorValue = dark.main;
|
||||
}
|
||||
return {
|
||||
background: backgroundValue,
|
||||
color: colorValue,
|
||||
};
|
||||
};
|
||||
|
||||
// styles for the badge with no children and container={false}
|
||||
const standAloneStyles = () => ({
|
||||
position: "static",
|
||||
marginLeft: pxToRem(8),
|
||||
transform: "none",
|
||||
fontSize: pxToRem(9),
|
||||
});
|
||||
|
||||
// styles for the badge with container={true}
|
||||
const containerStyles = () => ({
|
||||
position: "relative",
|
||||
transform: "none",
|
||||
});
|
||||
|
||||
return {
|
||||
"& .MuiBadge-badge": {
|
||||
height: "auto",
|
||||
padding: paddings[size] || paddings.xs,
|
||||
fontSize: fontSizeValue,
|
||||
fontWeight: fontWeightBold,
|
||||
textTransform: "uppercase",
|
||||
lineHeight: 1,
|
||||
textAlign: "center",
|
||||
whiteSpace: "nowrap",
|
||||
verticalAlign: "baseline",
|
||||
border: borderValue,
|
||||
borderRadius: borderRadiusValue,
|
||||
...(indicator && indicatorStyles(size)),
|
||||
...(variant === "gradient" && gradientStyles(color)),
|
||||
...(variant === "contained" && containedStyles(color)),
|
||||
...(!children && !container && standAloneStyles()),
|
||||
...(container && containerStyles()),
|
||||
},
|
||||
};
|
||||
});
|
||||
@ -1,63 +0,0 @@
|
||||
/*
|
||||
* QQQ - Low-code Application Framework for Engineers.
|
||||
* Copyright (C) 2021-2022. Kingsrook, LLC
|
||||
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
|
||||
* contact@kingsrook.com
|
||||
* https://github.com/Kingsrook/
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as
|
||||
* published by the Free Software Foundation, either version 3 of the
|
||||
* License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import {BadgeProps} from "@mui/material";
|
||||
import {FC, ReactNode, forwardRef} from "react";
|
||||
import MDBadgeRoot from "qqq/components/Temporary/MDBadge/MDBadgeRoot";
|
||||
|
||||
interface Props extends Omit<BadgeProps, "color" | "variant"> {
|
||||
color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
|
||||
variant?: "gradient" | "contained";
|
||||
size?: "xs" | "sm" | "md" | "lg";
|
||||
circular?: boolean;
|
||||
indicator?: boolean;
|
||||
border?: boolean;
|
||||
children?: ReactNode;
|
||||
container?: boolean;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
const MDBadge: FC<Props | any> = forwardRef(
|
||||
({color, variant, size, circular, indicator, border, container, children, ...rest}, ref) => (
|
||||
<MDBadgeRoot
|
||||
{...rest}
|
||||
ownerState={{color, variant, size, circular, indicator, border, container, children}}
|
||||
ref={ref}
|
||||
color="default"
|
||||
>
|
||||
{children}
|
||||
</MDBadgeRoot>
|
||||
)
|
||||
);
|
||||
|
||||
// declaring default props for MDBadge
|
||||
MDBadge.defaultProps = {
|
||||
color: "info",
|
||||
variant: "gradient",
|
||||
size: "sm",
|
||||
circular: false,
|
||||
indicator: false,
|
||||
border: false,
|
||||
container: false,
|
||||
children: false,
|
||||
};
|
||||
|
||||
export default MDBadge;
|
||||
@ -19,8 +19,8 @@
|
||||
*/
|
||||
|
||||
import {FC, forwardRef} from "react";
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import MDBox from "qqq/components/Temporary/MDBox";
|
||||
import MDTypography from "qqq/components/Temporary/MDTypography";
|
||||
|
||||
// declaring props types for MDBadgeDot
|
||||
interface Props
|
||||
|
||||
@ -22,8 +22,9 @@
|
||||
import LinearProgress from "@mui/material/LinearProgress";
|
||||
import {styled, Theme} from "@mui/material/styles";
|
||||
|
||||
// @ts-ignore
|
||||
export default styled(LinearProgress)(
|
||||
({theme, ownerState}: { theme?: Theme | any; ownerState: any }) =>
|
||||
({theme, ownerState}: { theme?: Theme | any; ownerState: any }) =>
|
||||
{
|
||||
const {palette, functions} = theme;
|
||||
const {color, value, variant} = ownerState;
|
||||
@ -34,13 +35,13 @@ export default styled(LinearProgress)(
|
||||
// background value
|
||||
let backgroundValue;
|
||||
|
||||
if (variant === "gradient")
|
||||
if (variant === "gradient")
|
||||
{
|
||||
backgroundValue = gradients[color]
|
||||
? linearGradient(gradients[color].main, gradients[color].state)
|
||||
: linearGradient(gradients.info.main, gradients.info.state);
|
||||
}
|
||||
else
|
||||
else
|
||||
{
|
||||
backgroundValue = palette[color] ? palette[color].main : palette.info.main;
|
||||
}
|
||||
|
||||
@ -20,8 +20,8 @@
|
||||
*/
|
||||
|
||||
import {FC, forwardRef} from "react";
|
||||
import MDProgressRoot from "components/MDProgress/MDProgressRoot";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import MDProgressRoot from "qqq/components/Temporary/MDProgress/MDProgressRoot";
|
||||
import MDTypography from "qqq/components/Temporary/MDTypography";
|
||||
|
||||
// Delcare props types for MDProgress
|
||||
interface Props {
|
||||
|
||||
@ -32,8 +32,8 @@ import Divider from "@mui/material/Divider";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import React, {useContext, useEffect, useState} from "react";
|
||||
import {Link, useLocation} from "react-router-dom";
|
||||
import BaseLayout from "layouts/BaseLayout";
|
||||
import QContext from "QContext";
|
||||
import BaseLayout from "qqq/components/BaseLayout";
|
||||
import DashboardWidgets from "qqq/components/DashboardWidgets";
|
||||
import ProcessLinkCard from "qqq/components/ProcessLinkCard";
|
||||
import MDBox from "qqq/components/Temporary/MDBox";
|
||||
@ -57,7 +57,7 @@ function AppHome({app}: Props): JSX.Element
|
||||
const [childApps, setChildApps] = useState([] as QAppMetaData[]);
|
||||
const [tableCounts, setTableCounts] = useState(new Map<string, { isLoading: boolean, value: number }>());
|
||||
const [tableCountNumbers, setTableCountNumbers] = useState(new Map<string, string>());
|
||||
const [tableCountTexts, setTableCountTexts] = useState(new Map<string, string>());
|
||||
const [tableCountTexts, setTableCountTexts] = useState(new Map<string, string>() as any);
|
||||
const [updatedTableCounts, setUpdatedTableCounts] = useState(new Date());
|
||||
const [widgets, setWidgets] = useState([] as any[]);
|
||||
|
||||
|
||||
@ -23,11 +23,11 @@ import colors from "assets/theme/base/colors";
|
||||
|
||||
const {gradients, dark} = colors;
|
||||
|
||||
function configs(labels: any, datasets: any)
|
||||
function configs(labels: any, datasets: any)
|
||||
{
|
||||
const backgroundColors = [];
|
||||
|
||||
if (datasets.backgroundColors)
|
||||
if (datasets.backgroundColors)
|
||||
{
|
||||
datasets.backgroundColors.forEach((color: string) =>
|
||||
gradients[color]
|
||||
@ -35,7 +35,7 @@ function configs(labels: any, datasets: any)
|
||||
: backgroundColors.push(dark.main)
|
||||
);
|
||||
}
|
||||
else
|
||||
else
|
||||
{
|
||||
backgroundColors.push(dark.main);
|
||||
}
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
|
||||
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import BaseLayout from "qqq/components/BaseLayout";
|
||||
import BaseLayout from "layouts/BaseLayout";
|
||||
import EntityForm from "qqq/components/EntityForm";
|
||||
import MDBox from "qqq/components/Temporary/MDBox";
|
||||
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import {useParams} from "react-router-dom";
|
||||
import BaseLayout from "qqq/components/BaseLayout";
|
||||
import BaseLayout from "layouts/BaseLayout";
|
||||
import EntityForm from "qqq/components/EntityForm";
|
||||
import MDBox from "qqq/components/Temporary/MDBox";
|
||||
|
||||
|
||||
@ -39,8 +39,8 @@ import Tabs from "@mui/material/Tabs";
|
||||
import React, {useContext, useReducer, useState} from "react";
|
||||
import AceEditor from "react-ace";
|
||||
import {useParams} from "react-router-dom";
|
||||
import BaseLayout from "layouts/BaseLayout";
|
||||
import QContext from "QContext";
|
||||
import BaseLayout from "qqq/components/BaseLayout";
|
||||
import CustomWidthTooltip from "qqq/components/CustomWidthTooltip/CustomWidthTooltip";
|
||||
import AssociatedScriptEditor from "qqq/components/ScriptComponents/AssociatedScriptEditor";
|
||||
import ScriptDocsForm from "qqq/components/ScriptComponents/ScriptDocsForm";
|
||||
|
||||
@ -43,8 +43,8 @@ import MenuItem from "@mui/material/MenuItem";
|
||||
import Modal from "@mui/material/Modal";
|
||||
import React, {useContext, useEffect, useReducer, useState} from "react";
|
||||
import {useLocation, useNavigate, useParams, useSearchParams} from "react-router-dom";
|
||||
import BaseLayout from "layouts/BaseLayout";
|
||||
import QContext from "QContext";
|
||||
import BaseLayout from "qqq/components/BaseLayout";
|
||||
import DashboardWidgets from "qqq/components/DashboardWidgets";
|
||||
import EntityForm from "qqq/components/EntityForm";
|
||||
import {QActionsMenuButton, QDeleteButton, QEditButton} from "qqq/components/QButtons";
|
||||
|
||||
@ -29,7 +29,7 @@ import Icon from "@mui/material/Icon";
|
||||
import List from "@mui/material/List";
|
||||
import ListItemText from "@mui/material/ListItemText";
|
||||
import React, {useState} from "react";
|
||||
import MDBox from "components/MDBox";
|
||||
import MDBox from "qqq/components/Temporary/MDBox";
|
||||
import {ProcessSummaryLine} from "qqq/pages/process-run/model/ProcessSummaryLine";
|
||||
import QClient from "qqq/utils/QClient";
|
||||
import QValueUtils from "qqq/utils/QValueUtils";
|
||||
|
||||
@ -24,18 +24,16 @@ import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstan
|
||||
import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
|
||||
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
||||
import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
|
||||
import {Box, Button, FormControlLabel, ListItem, Radio, RadioGroup, tooltipClasses, TooltipProps} from "@mui/material";
|
||||
import {Box, Button, FormControlLabel, ListItem, Radio, RadioGroup} from "@mui/material";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Icon from "@mui/material/Icon";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
import List from "@mui/material/List";
|
||||
import ListItemText from "@mui/material/ListItemText";
|
||||
import {styled} from "@mui/material/styles";
|
||||
import Tooltip from "@mui/material/Tooltip";
|
||||
import React, {useState} from "react";
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import CustomWidthTooltip from "qqq/components/CustomWidthTooltip/CustomWidthTooltip";
|
||||
import MDBox from "qqq/components/Temporary/MDBox";
|
||||
import MDTypography from "qqq/components/Temporary/MDTypography";
|
||||
import {ProcessSummaryLine} from "qqq/pages/process-run/model/ProcessSummaryLine";
|
||||
import QClient from "qqq/utils/QClient";
|
||||
import QValueUtils from "qqq/utils/QValueUtils";
|
||||
|
||||
@ -49,8 +49,8 @@ import {Form, Formik} from "formik";
|
||||
import React, {useContext, useEffect, useState} from "react";
|
||||
import {useLocation, useNavigate, useParams} from "react-router-dom";
|
||||
import * as Yup from "yup";
|
||||
import BaseLayout from "layouts/BaseLayout";
|
||||
import QContext from "QContext";
|
||||
import BaseLayout from "qqq/components/BaseLayout";
|
||||
import {QCancelButton, QSubmitButton} from "qqq/components/QButtons";
|
||||
import QDynamicForm from "qqq/components/QDynamicForm";
|
||||
import DynamicFormUtils from "qqq/components/QDynamicForm/utils/DynamicFormUtils";
|
||||
@ -295,6 +295,7 @@ function ProcessRun({process, defaultProcessValues, isModal, isWidget, recordIds
|
||||
<div>{`${qJobRunning.current.toLocaleString()} of ${qJobRunning.total.toLocaleString()}`}</div>
|
||||
<MDBox width="20rem">
|
||||
<MDProgress variant="gradient" value={100 * (qJobRunning.current / qJobRunning.total)} color="success" />
|
||||
|
||||
</MDBox>
|
||||
</>
|
||||
)}
|
||||
|
||||
@ -31,7 +31,7 @@ import ListItemText from "@mui/material/ListItemText";
|
||||
import Tooltip from "@mui/material/Tooltip";
|
||||
import React from "react";
|
||||
import {Link} from "react-router-dom";
|
||||
import MDBox from "components/MDBox";
|
||||
import MDBox from "qqq/components/Temporary/MDBox";
|
||||
import QValueUtils from "qqq/utils/QValueUtils";
|
||||
|
||||
/*******************************************************************************
|
||||
|
||||
Reference in New Issue
Block a user