@symply.io/basic-components 1.6.8-alpha.1 → 1.6.9-alpha.1
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.
- package/README.md +1 -0
- package/Sidebar/SidebarItem.js +9 -8
- package/Sidebar/types.d.ts +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -800,6 +800,7 @@ import Sidebar from '@symply.io/basic-components/Sidebar';
|
|
|
800
800
|
|
|
801
801
|
| Name | Type | Default | Required | Description |
|
|
802
802
|
| ------------ | ------------------------- | ------------------------------------- | -------- | ------------------------------------------------------------ |
|
|
803
|
+
| badge | number | | false | The badge will be rendered for notifications. |
|
|
803
804
|
| beta | boolean | | false | If `true` the beta tag will be rendered. |
|
|
804
805
|
| betaTagColor | CSSProperties["color"] | \#00A2A9 | false | The value of the `Input` element. |
|
|
805
806
|
| children | Array\<SidebarItemProps\> | | false | If not undefined the sub sidebar items would be rendered. |
|
package/Sidebar/SidebarItem.js
CHANGED
|
@@ -11,6 +11,7 @@ var __assign = (this && this.__assign) || function () {
|
|
|
11
11
|
};
|
|
12
12
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
13
|
import Chip from "@mui/material/Chip";
|
|
14
|
+
import Badge from "@mui/material/Badge";
|
|
14
15
|
import ListItemText from "@mui/material/ListItemText";
|
|
15
16
|
import ListItemIcon from "@mui/material/ListItemIcon";
|
|
16
17
|
import ListItemButton from "@mui/material/ListItemButton";
|
|
@@ -19,7 +20,7 @@ import { useTheme, alpha } from "@mui/material/styles";
|
|
|
19
20
|
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
|
|
20
21
|
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
|
21
22
|
function SidebarItem(props) {
|
|
22
|
-
var icon = props.icon, name = props.name, active = props.active, expand = props.expand, lock = props.lock, beta = props.beta, isSub = props.isSub, hasChildren = props.hasChildren, _a = props.betaTagColor, betaTagColor = _a === void 0 ? "#00A2A9" : _a, _b = props.showIconOnly, showIconOnly = _b === void 0 ? false : _b, onClick = props.onClick;
|
|
23
|
+
var icon = props.icon, name = props.name, active = props.active, expand = props.expand, lock = props.lock, beta = props.beta, badge = props.badge, isSub = props.isSub, hasChildren = props.hasChildren, _a = props.betaTagColor, betaTagColor = _a === void 0 ? "#00A2A9" : _a, _b = props.showIconOnly, showIconOnly = _b === void 0 ? false : _b, onClick = props.onClick;
|
|
23
24
|
var theme = useTheme();
|
|
24
25
|
return (_jsxs(ListItemButton, __assign({ onClick: onClick, disabled: lock, sx: {
|
|
25
26
|
paddingLeft: isSub ? theme.spacing(4) : undefined,
|
|
@@ -28,16 +29,16 @@ function SidebarItem(props) {
|
|
|
28
29
|
"&:hover": {
|
|
29
30
|
backgroundColor: alpha(theme.palette.primary.main, active
|
|
30
31
|
? theme.palette.action.activatedOpacity
|
|
31
|
-
: theme.palette.action.selectedOpacity)
|
|
32
|
+
: theme.palette.action.selectedOpacity),
|
|
32
33
|
},
|
|
33
34
|
backgroundColor: active
|
|
34
35
|
? alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity)
|
|
35
|
-
: undefined
|
|
36
|
+
: undefined,
|
|
36
37
|
} }, { children: [_jsx(ListItemIcon, __assign({ sx: {
|
|
37
38
|
color: active ? theme.palette.primary.main : undefined,
|
|
38
39
|
borderRadius: active ? "5px" : undefined,
|
|
39
40
|
opacity: active ? "1" : undefined,
|
|
40
|
-
fontWeight: active ? 600 : undefined
|
|
41
|
+
fontWeight: active ? 600 : undefined,
|
|
41
42
|
} }, { children: icon })), !showIconOnly ? (_jsxs(_Fragment, { children: [_jsx(ListItemText, { primaryTypographyProps: {
|
|
42
43
|
color: active ? theme.palette.primary.main : "textPrimary",
|
|
43
44
|
sx: {
|
|
@@ -46,15 +47,15 @@ function SidebarItem(props) {
|
|
|
46
47
|
whiteSpace: "nowrap",
|
|
47
48
|
borderRadius: active ? "5px" : undefined,
|
|
48
49
|
opacity: active ? "1" : undefined,
|
|
49
|
-
fontWeight: active ? 600 : undefined
|
|
50
|
-
}
|
|
51
|
-
}, primary: name }), lock ? (_jsx(LockIcon, { fontSize: "small", color: "error", sx: { fontSize: "1rem" } })) : (_jsx(_Fragment, {})), beta ? (_jsx(Chip, { label: "BETA", color: "primary", size: "small", sx: {
|
|
50
|
+
fontWeight: active ? 600 : undefined,
|
|
51
|
+
},
|
|
52
|
+
}, primary: name }), lock ? (_jsx(LockIcon, { fontSize: "small", color: "error", sx: { fontSize: "1rem" } })) : (_jsx(_Fragment, {})), badge ? (_jsx(Badge, { max: 9, badgeContent: badge, overlap: "circular", color: "secondary" })) : (_jsx(_Fragment, {})), beta ? (_jsx(Chip, { label: "BETA", color: "primary", size: "small", sx: {
|
|
52
53
|
borderRadius: theme.spacing(0.5),
|
|
53
54
|
backgroundColor: betaTagColor,
|
|
54
55
|
color: "white",
|
|
55
56
|
height: theme.spacing(2.5),
|
|
56
57
|
fontSize: theme.spacing(1.25),
|
|
57
|
-
padding: theme.spacing(0, 0.75)
|
|
58
|
+
padding: theme.spacing(0, 0.75),
|
|
58
59
|
} })) : (_jsx(_Fragment, {})), hasChildren ? (expand ? (_jsx(ExpandMoreIcon, {})) : (_jsx(ChevronRightIcon, {}))) : (_jsx(_Fragment, {}))] })) : (_jsx(_Fragment, {}))] })));
|
|
59
60
|
}
|
|
60
61
|
export default SidebarItem;
|
package/Sidebar/types.d.ts
CHANGED