@pipelinesolucoes/menu 1.0.2 → 1.0.3-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,14 +1,19 @@
|
|
|
1
1
|
import { ReactNode } from "react";
|
|
2
|
+
import { TypographyVariant } from "@mui/material";
|
|
2
3
|
import { NavItem } from "../types/NavItem";
|
|
3
4
|
interface SideNavProps {
|
|
4
5
|
items: NavItem[];
|
|
5
6
|
menuWidth?: number;
|
|
7
|
+
itemMenuBackgroundColorSemContent?: string;
|
|
8
|
+
itemMenuColorSemContent?: string;
|
|
9
|
+
itemMenuVariantSemContent?: TypographyVariant;
|
|
6
10
|
menuBackground?: string;
|
|
7
11
|
itemMenuBackgroundColor?: string;
|
|
8
12
|
itemMenuBackgroundColorSelected?: string;
|
|
9
13
|
itemMenuBackgroundColorHover?: string;
|
|
10
14
|
itemMenuColor?: string;
|
|
11
15
|
itemMenuColorSelected?: string;
|
|
16
|
+
itemMenuVariant?: TypographyVariant;
|
|
12
17
|
borderRadius?: string;
|
|
13
18
|
itemMenuBorderRadius?: string;
|
|
14
19
|
contentBackground?: string;
|
|
@@ -33,7 +38,7 @@ export declare const SideNavContent: import("@emotion/styled").StyledComponent<i
|
|
|
33
38
|
* - conteúdo no topo do menu (`renderTopMenu`)
|
|
34
39
|
* - conteúdo fixado na base do menu (`renderBottomMenu`)
|
|
35
40
|
*/
|
|
36
|
-
declare function SideNav({ items, menuWidth, menuBackground, borderRadius, itemMenuBorderRadius, itemMenuBackgroundColor, itemMenuBackgroundColorHover, itemMenuBackgroundColorSelected, itemMenuColor, itemMenuColorSelected, contentBackground, renderTopMenu, renderBottomMenu, height, contentGap, }: SideNavProps): import("react/jsx-runtime").JSX.Element | null;
|
|
41
|
+
declare function SideNav({ items, menuWidth, itemMenuBackgroundColorSemContent, itemMenuColorSemContent, itemMenuVariantSemContent, menuBackground, borderRadius, itemMenuBorderRadius, itemMenuBackgroundColor, itemMenuBackgroundColorHover, itemMenuBackgroundColorSelected, itemMenuColor, itemMenuColorSelected, itemMenuVariant, contentBackground, renderTopMenu, renderBottomMenu, height, contentGap, }: SideNavProps): import("react/jsx-runtime").JSX.Element | null;
|
|
37
42
|
declare namespace SideNav {
|
|
38
43
|
var displayName: string;
|
|
39
44
|
}
|
|
@@ -31,24 +31,15 @@ const MenuItemBox = styled(Box, {
|
|
|
31
31
|
"itemMenuBackgroundColorHover",
|
|
32
32
|
"itemMenuColor",
|
|
33
33
|
"itemMenuColorSelected",
|
|
34
|
+
"typographyVariant",
|
|
34
35
|
].includes(prop),
|
|
35
|
-
})(({ active, itemMenuBorderRadius, itemMenuBackgroundColor, itemMenuBackgroundColorSelected, itemMenuBackgroundColorHover, itemMenuColor, itemMenuColorSelected, }) => ({
|
|
36
|
-
cursor: "pointer",
|
|
37
|
-
padding: "8px 16px",
|
|
38
|
-
borderRadius: itemMenuBorderRadius,
|
|
39
|
-
backgroundColor: active
|
|
36
|
+
})(({ theme, active, itemMenuBorderRadius, itemMenuBackgroundColor, itemMenuBackgroundColorSelected, itemMenuBackgroundColorHover, itemMenuColor, itemMenuColorSelected, typographyVariant }) => (Object.assign(Object.assign({ cursor: "pointer", padding: "8px 16px", borderRadius: itemMenuBorderRadius, backgroundColor: active
|
|
40
37
|
? itemMenuBackgroundColorSelected
|
|
41
|
-
: itemMenuBackgroundColor,
|
|
42
|
-
color: active ? itemMenuColorSelected : itemMenuColor,
|
|
43
|
-
width: "100%",
|
|
44
|
-
transition: "all 0.2s ease",
|
|
45
|
-
userSelect: "none",
|
|
46
|
-
"&:hover": {
|
|
38
|
+
: itemMenuBackgroundColor, color: active ? itemMenuColorSelected : itemMenuColor, width: "100%", transition: "all 0.2s ease", userSelect: "none" }, (typographyVariant && theme.typography[typographyVariant])), { "&:hover": {
|
|
47
39
|
backgroundColor: active
|
|
48
40
|
? itemMenuBackgroundColorSelected
|
|
49
41
|
: itemMenuBackgroundColorHover,
|
|
50
|
-
}
|
|
51
|
-
}));
|
|
42
|
+
} })));
|
|
52
43
|
export const SideNavContent = styled(Box, {
|
|
53
44
|
shouldForwardProp: (prop) => !["contentGap", "contentBackground", "borderRadius", "height"].includes(prop),
|
|
54
45
|
})(({ contentGap = 2, contentBackground = "transparent", borderRadius = 2, height = "100%", }) => ({
|
|
@@ -73,7 +64,7 @@ export const SideNavContent = styled(Box, {
|
|
|
73
64
|
* - conteúdo no topo do menu (`renderTopMenu`)
|
|
74
65
|
* - conteúdo fixado na base do menu (`renderBottomMenu`)
|
|
75
66
|
*/
|
|
76
|
-
export default function SideNav({ items, menuWidth = 180, menuBackground = "transparent", borderRadius = "0", itemMenuBorderRadius = "16px", itemMenuBackgroundColor = "transparent", itemMenuBackgroundColorHover = "grey.300", itemMenuBackgroundColorSelected = "primary.main", itemMenuColor = "black", itemMenuColorSelected = "black", contentBackground = "grey.50", renderTopMenu, renderBottomMenu, height = "500px", contentGap = 2, }) {
|
|
67
|
+
export default function SideNav({ items, menuWidth = 180, itemMenuBackgroundColorSemContent = "transparent", itemMenuColorSemContent = "black", itemMenuVariantSemContent = "body1", menuBackground = "transparent", borderRadius = "0", itemMenuBorderRadius = "16px", itemMenuBackgroundColor = "transparent", itemMenuBackgroundColorHover = "grey.300", itemMenuBackgroundColorSelected = "primary.main", itemMenuColor = "black", itemMenuColorSelected = "black", itemMenuVariant = "body1", contentBackground = "grey.50", renderTopMenu, renderBottomMenu, height = "500px", contentGap = 2, }) {
|
|
77
68
|
var _a;
|
|
78
69
|
const [activeIndex, setActiveIndex] = useState(0);
|
|
79
70
|
if (!items || items.length === 0) {
|
|
@@ -85,14 +76,10 @@ export default function SideNav({ items, menuWidth = 180, menuBackground = "tran
|
|
|
85
76
|
if (((_a = item.label) === null || _a === void 0 ? void 0 : _a.toUpperCase()) == "DIVIDER") {
|
|
86
77
|
return (_jsx(Divider, {}));
|
|
87
78
|
}
|
|
88
|
-
return (_jsx(MenuItemBox, { itemMenuBorderRadius: itemMenuBorderRadius, itemMenuBackgroundColor:
|
|
79
|
+
return (_jsx(MenuItemBox, { typographyVariant: itemMenuVariantSemContent, itemMenuBorderRadius: itemMenuBorderRadius, itemMenuBackgroundColor: itemMenuBackgroundColorSemContent, itemMenuColor: itemMenuColorSemContent, sx: { cursor: "default" }, children: item.label }, `${item.label}-${idx}`));
|
|
89
80
|
}
|
|
90
|
-
return (_jsx(MenuItemBox, { itemMenuBorderRadius: itemMenuBorderRadius, itemMenuBackgroundColor: itemMenuBackgroundColor, itemMenuBackgroundColorHover: itemMenuBackgroundColorHover, itemMenuBackgroundColorSelected: itemMenuBackgroundColorSelected, itemMenuColor: itemMenuColor, itemMenuColorSelected: itemMenuColorSelected, onClick: () => setActiveIndex(idx), children: item.label }, `${item.label}-${idx}`));
|
|
91
|
-
}) }), renderBottomMenu && (_jsx(Box, { sx: {
|
|
92
|
-
mt: 2,
|
|
93
|
-
pt: 2,
|
|
94
|
-
flexShrink: 0,
|
|
95
|
-
}, children: renderBottomMenu }))] }), _jsx(SideNavContent, { contentBackground: contentBackground, contentGap: contentGap, children: _jsx(AnimatePresence, { mode: "wait", children: _jsx(motion.div, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, transition: { duration: 0.2 }, style: { width: "100%" }, children: (_a = items[activeIndex]) === null || _a === void 0 ? void 0 : _a.content }, activeIndex) }) })] }));
|
|
81
|
+
return (_jsx(MenuItemBox, { active: activeIndex === idx, typographyVariant: itemMenuVariant, itemMenuBorderRadius: itemMenuBorderRadius, itemMenuBackgroundColor: itemMenuBackgroundColor, itemMenuBackgroundColorHover: itemMenuBackgroundColorHover, itemMenuBackgroundColorSelected: itemMenuBackgroundColorSelected, itemMenuColor: itemMenuColor, itemMenuColorSelected: itemMenuColorSelected, onClick: () => setActiveIndex(idx), children: item.label }, `${item.label}-${idx}`));
|
|
82
|
+
}) }), renderBottomMenu && (_jsx(Box, { sx: { mt: 2, pt: 2, flexShrink: 0, }, children: renderBottomMenu }))] }), _jsx(SideNavContent, { contentBackground: contentBackground, contentGap: contentGap, height: height, borderRadius: borderRadius, children: _jsx(AnimatePresence, { mode: "wait", children: _jsx(motion.div, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, transition: { duration: 0.2 }, style: { width: "100%" }, children: (_a = items[activeIndex]) === null || _a === void 0 ? void 0 : _a.content }, activeIndex) }) })] }));
|
|
96
83
|
}
|
|
97
84
|
SideNav.displayName = "SideNav";
|
|
98
85
|
//# sourceMappingURL=SideNav.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SideNav.js","sourceRoot":"","sources":["../../src/components/SideNav.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,QAAQ,EAAa,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"SideNav.js","sourceRoot":"","sources":["../../src/components/SideNav.tsx"],"names":[],"mappings":"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"}
|