pixelize-design-library 2.2.114 → 2.2.116
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/dist/Components/ProductCard/ProductPrice.js +2 -4
- package/dist/Components/SideBar/SecondaryBar.d.ts +15 -0
- package/dist/Components/SideBar/SecondaryBar.js +90 -0
- package/dist/Components/SideBar/SideBar.d.ts +1 -1
- package/dist/Components/SideBar/SideBar.js +35 -30
- package/dist/Components/SideBar/SideBarProps.d.ts +10 -1
- package/dist/Components/SideBar/components/MenuItemBox.js +32 -8
- package/dist/Components/SideBar/components/MenuPopoverContent.js +18 -2
- package/dist/Components/SideBar/components/OverflowTooltipText.d.ts +4 -3
- package/dist/Components/SideBar/components/OverflowTooltipText.js +45 -26
- package/package.json +1 -1
|
@@ -116,8 +116,7 @@ var ProductPrice = function (_a) {
|
|
|
116
116
|
isSingleOption ? (react_1.default.createElement(react_2.Box, { border: "0.063rem solid", borderColor: "red.300", bg: "#fff5f5", px: cfg.px, py: cfg.py, rounded: "md", display: "inline-block", w: "100%" },
|
|
117
117
|
react_1.default.createElement(react_2.Text, { fontSize: cfg.label, fontWeight: "medium" }, options[0].label))) : (react_1.default.createElement(react_2.Box, { ref: buttonRef, onClick: function () { return setIsOpen(!isOpen); }, border: "0.063rem solid", borderColor: "red.300", bg: "#fff5f5", px: cfg.px, py: cfg.py, rounded: "md", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", w: "100%" },
|
|
118
118
|
react_1.default.createElement(react_2.Box, { flex: "1", minW: 0 },
|
|
119
|
-
react_1.default.createElement(OverflowTooltipText_1.default, { placement: "top", maxWidth: "70%" },
|
|
120
|
-
react_1.default.createElement(react_2.Text, { fontSize: cfg.label, fontWeight: "medium", whiteSpace: "nowrap" }, selected.label))),
|
|
119
|
+
react_1.default.createElement(OverflowTooltipText_1.default, { placement: "top", maxWidth: "70%", fontSize: cfg.label, fontWeight: "medium", whiteSpace: "nowrap" }, selected.label)),
|
|
121
120
|
react_1.default.createElement(react_2.Text, { fontSize: cfg.font, color: "red.400", transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)', transition: "transform 0.2s" }, "\u25BE"))),
|
|
122
121
|
!isSingleOption && isOpen && (react_1.default.createElement(react_2.Portal, null,
|
|
123
122
|
react_1.default.createElement(react_2.Box, { ref: dropdownRef, position: "fixed", top: "".concat(dropdownPosition.top, "px"), left: "".concat(dropdownPosition.left, "px"), width: "".concat(dropdownPosition.width, "px"), bg: "white", border: "0.063rem solid", borderColor: "red.300", borderRadius: "md", overflow: "hidden", maxH: "14rem", overflowY: "auto", shadow: "md", zIndex: 100000 }, options.map(function (option) {
|
|
@@ -129,8 +128,7 @@ var ProductPrice = function (_a) {
|
|
|
129
128
|
}, templateColumns: { base: '1fr auto', md: '1fr auto' }, columnGap: { base: 2, md: 3 }, rowGap: { base: 1.5, md: 2 }, alignItems: "center" },
|
|
130
129
|
react_1.default.createElement(react_2.HStack, { gridColumn: 1, gridRow: 1, spacing: 2, align: "center", minW: 0 },
|
|
131
130
|
react_1.default.createElement(react_2.Box, { flex: "1", minW: 0 },
|
|
132
|
-
react_1.default.createElement(OverflowTooltipText_1.default, { placement: "top", maxWidth: "100%" },
|
|
133
|
-
react_1.default.createElement(react_2.Text, { fontSize: { base: "xs", md: "sm" }, fontWeight: "medium", whiteSpace: "nowrap" }, option.label))),
|
|
131
|
+
react_1.default.createElement(OverflowTooltipText_1.default, { placement: "top", maxWidth: "100%", fontSize: { base: "xs", md: "sm" }, fontWeight: "medium", whiteSpace: "nowrap" }, option.label)),
|
|
134
132
|
option.offer > 0 && (react_1.default.createElement(react_2.Badge, { bg: "green.100", color: "green.700", borderRadius: "md", px: { base: 1, md: 2 }, py: { base: 0, md: 0.5 }, fontWeight: "bold", fontSize: { base: "2xs", md: "xs" }, flexShrink: 0 }, isMobile ? "".concat(option.offer, "%") : "".concat(option.offer, "% OFF")))),
|
|
135
133
|
react_1.default.createElement(react_2.Box, { gridColumn: { base: 1, md: 2 }, gridRow: { base: 2, md: 'auto' }, mt: { base: 1, md: 0 }, textAlign: { base: 'left', md: 'right' } },
|
|
136
134
|
react_1.default.createElement(react_2.Text, { fontSize: "sm", fontWeight: "bold", color: "red.500", whiteSpace: "nowrap" },
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { MenuProps } from "./SideBarProps";
|
|
3
|
+
type SecondaryBarProps = {
|
|
4
|
+
items?: MenuProps[];
|
|
5
|
+
defaultCollapsed?: boolean;
|
|
6
|
+
collapsedWidth?: string | number;
|
|
7
|
+
expandedWidth?: string | number;
|
|
8
|
+
headerFontSize?: string;
|
|
9
|
+
itemFontSize?: string;
|
|
10
|
+
selected?: string | number | null;
|
|
11
|
+
onItemClick?: (item: MenuProps) => void;
|
|
12
|
+
title?: string;
|
|
13
|
+
};
|
|
14
|
+
declare const SecondaryBar: React.FC<SecondaryBarProps>;
|
|
15
|
+
export default SecondaryBar;
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
25
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
26
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
|
+
};
|
|
28
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
|
+
var react_1 = __importStar(require("react"));
|
|
30
|
+
var react_2 = require("@chakra-ui/react");
|
|
31
|
+
var useCustomTheme_1 = require("../../Theme/useCustomTheme");
|
|
32
|
+
var lucide_react_1 = require("lucide-react");
|
|
33
|
+
var OverflowTooltipText_1 = __importDefault(require("./components/OverflowTooltipText"));
|
|
34
|
+
var ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
|
|
35
|
+
var SecondaryBar = function (_a) {
|
|
36
|
+
var _b, _c, _d;
|
|
37
|
+
var _e = _a.items, items = _e === void 0 ? [] : _e, _f = _a.defaultCollapsed, defaultCollapsed = _f === void 0 ? true : _f, _g = _a.collapsedWidth, collapsedWidth = _g === void 0 ? "3.5rem" : _g, _h = _a.expandedWidth, expandedWidth = _h === void 0 ? "10rem" : _h, _j = _a.headerFontSize, headerFontSize = _j === void 0 ? "0.95rem" : _j, _k = _a.itemFontSize, itemFontSize = _k === void 0 ? "0.875rem" : _k, selected = _a.selected, onItemClick = _a.onItemClick, title = _a.title;
|
|
38
|
+
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
39
|
+
var _l = (0, react_1.useState)(defaultCollapsed), collapsed = _l[0], setCollapsed = _l[1];
|
|
40
|
+
var width = collapsed ? collapsedWidth : expandedWidth;
|
|
41
|
+
var showText = !collapsed;
|
|
42
|
+
var textMaxWidth = expandedWidth !== null && expandedWidth !== void 0 ? expandedWidth : "10rem";
|
|
43
|
+
return (react_1.default.createElement(react_2.Box, { transition: "all 0.3s", pos: "sticky", top: 0, h: "100vh", w: width, bg: (_d = (_c = (_b = theme.colors.sidebar) === null || _b === void 0 ? void 0 : _b.background) === null || _c === void 0 ? void 0 : _c[400]) !== null && _d !== void 0 ? _d : theme.colors.gray[800], boxShadow: theme.shadows.md, zIndex: 1 },
|
|
44
|
+
react_1.default.createElement(react_2.VStack, { align: "stretch", spacing: 0 },
|
|
45
|
+
react_1.default.createElement(react_2.Flex, { align: "center", justify: showText ? "space-between" : "center", px: showText ? "0.75rem" : 0, h: "3.91rem", overflow: "hidden" },
|
|
46
|
+
showText ? (react_1.default.createElement(react_2.Box, { flex: "1", minW: 0, mr: "0.5rem" },
|
|
47
|
+
react_1.default.createElement(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: headerFontSize, fontWeight: 700, color: theme.colors.white, as: "p" }, title !== null && title !== void 0 ? title : ""))) : null,
|
|
48
|
+
react_1.default.createElement(react_2.Box, { w: "1.625rem", h: "100%", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", onClick: function () { return setCollapsed(function (c) { return !c; }); } }, collapsed ? (react_1.default.createElement(ToolTip_1.default, { label: title !== null && title !== void 0 ? title : "", placement: "right" },
|
|
49
|
+
react_1.default.createElement(lucide_react_1.ChevronRight, { size: 16, color: theme.colors.white }))) : (react_1.default.createElement(lucide_react_1.ChevronLeft, { size: 16, color: theme.colors.white })))),
|
|
50
|
+
react_1.default.createElement(react_2.Box, { w: "100%", h: "0.063rem", bg: theme.colors.sidebar.background[300] }),
|
|
51
|
+
react_1.default.createElement(react_2.Box, { id: "secondary-scroll-container", flex: "1", overflowY: "auto", overflowX: "hidden" }, items.map(function (item) {
|
|
52
|
+
var _a, _b, _c, _d, _e;
|
|
53
|
+
var isActive = String(selected) === String(item.id) ||
|
|
54
|
+
String(selected) === String(item.title);
|
|
55
|
+
var isObj = typeof item.badge === "object" && item.badge !== null;
|
|
56
|
+
var badgeVal = isObj ? item.badge.count : item.badge;
|
|
57
|
+
var colorScheme = (_a = (isObj ? item.badge.color : undefined)) !== null && _a !== void 0 ? _a : "teal";
|
|
58
|
+
var radius = (_b = (isObj ? item.badge.radius : undefined)) !== null && _b !== void 0 ? _b : "full";
|
|
59
|
+
var variant = (_c = (isObj ? item.badge.variant : undefined)) !== null && _c !== void 0 ? _c : "subtle";
|
|
60
|
+
if (!showText) {
|
|
61
|
+
return (react_1.default.createElement(react_2.Popover, { key: String((_d = item.id) !== null && _d !== void 0 ? _d : item.title), trigger: "hover", placement: "right-start", closeOnBlur: false, isLazy: true },
|
|
62
|
+
react_1.default.createElement(react_2.PopoverTrigger, null,
|
|
63
|
+
react_1.default.createElement(react_2.Box, { py: "0.625rem", display: "flex", alignItems: "center", justifyContent: "center", cursor: item.disabled ? "not-allowed" : "pointer", opacity: item.disabled ? 0.6 : 1, color: theme.colors.white, _hover: {
|
|
64
|
+
bg: item.disabled ? "transparent" : theme.colors.primary[700],
|
|
65
|
+
}, onClick: function () { return !item.disabled && (onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item)); } },
|
|
66
|
+
react_1.default.createElement(react_2.Box, { position: "relative" },
|
|
67
|
+
react_1.default.createElement(react_2.Icon, { as: item.icon, fontSize: "1.2rem" }),
|
|
68
|
+
badgeVal != null && (react_1.default.createElement(react_2.Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.red[400] }))))),
|
|
69
|
+
react_1.default.createElement(react_2.Portal, null,
|
|
70
|
+
react_1.default.createElement(react_2.PopoverContent, { borderRadius: "0.063rem", bg: theme.colors.primary[isActive ? 500 : 700], boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.313rem", cursor: item.disabled ? "not-allowed" : "pointer", zIndex: 1500, color: "white" },
|
|
71
|
+
react_1.default.createElement(react_2.PopoverBody, { p: "0.5rem" },
|
|
72
|
+
react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.5rem", justify: "space-between" },
|
|
73
|
+
react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.5rem", flex: "1", minW: 0 },
|
|
74
|
+
react_1.default.createElement(react_2.Icon, { as: item.icon, fontSize: "1rem", flexShrink: 0 }),
|
|
75
|
+
react_1.default.createElement(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: "medium", as: "p" }, item.title)),
|
|
76
|
+
badgeVal != null ? (react_1.default.createElement(react_2.Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius }, badgeVal)) : null))))));
|
|
77
|
+
}
|
|
78
|
+
return (react_1.default.createElement(react_2.Flex, { key: String((_e = item.id) !== null && _e !== void 0 ? _e : item.title), px: "1rem", py: "0.625rem", align: "center", justify: "space-between", gap: "0.5rem", overflow: "hidden", cursor: item.disabled ? "not-allowed" : "pointer", opacity: item.disabled ? 0.6 : 1, bg: isActive ? theme.colors.primary[600] : "transparent", _hover: {
|
|
79
|
+
bg: item.disabled ? "transparent" : theme.colors.primary[700],
|
|
80
|
+
}, onClick: function () { return !item.disabled && (onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item)); }, color: theme.colors.white, borderLeft: isActive
|
|
81
|
+
? "0.188rem solid ".concat(theme.colors.background[300])
|
|
82
|
+
: "0.188rem solid transparent" },
|
|
83
|
+
react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.5rem", flex: "1", minW: 0, overflow: "hidden" },
|
|
84
|
+
react_1.default.createElement(react_2.Icon, { as: item.icon, fontSize: "1.2rem", flexShrink: 0 }),
|
|
85
|
+
react_1.default.createElement(react_2.Box, { flex: "1", minW: 0 },
|
|
86
|
+
react_1.default.createElement(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: 600, as: "p" }, item.title))),
|
|
87
|
+
badgeVal != null ? (react_1.default.createElement(react_2.Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius }, badgeVal)) : null));
|
|
88
|
+
})))));
|
|
89
|
+
};
|
|
90
|
+
exports.default = SecondaryBar;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { SidebarProps } from "./SideBarProps";
|
|
3
|
-
export default function Sidebar({ menus, activeMenu, handleMenuClick, toggle, changeToggle, logo, companyName, isDisableAddNew, onAddNewClick, selectedSubMenu, isLoading, loadingLines, }: SidebarProps): React.JSX.Element;
|
|
3
|
+
export default function Sidebar({ menus, activeMenu, handleMenuClick, handleSecondaryNavClick, toggle, changeToggle, logo, companyName, isDisableAddNew, onAddNewClick, selectedSubMenu, selectedSecondaryItem, isLoading, loadingLines, }: SidebarProps): React.JSX.Element;
|
|
@@ -22,37 +22,42 @@ var lucide_react_1 = require("lucide-react");
|
|
|
22
22
|
var MenuItems_1 = __importDefault(require("./components/MenuItems"));
|
|
23
23
|
var defaultLogo_1 = __importDefault(require("../../Assets/defaultLogo"));
|
|
24
24
|
var OverflowTooltipText_1 = __importDefault(require("./components/OverflowTooltipText"));
|
|
25
|
+
var SecondaryBar_1 = __importDefault(require("./SecondaryBar"));
|
|
25
26
|
function Sidebar(_a) {
|
|
26
|
-
var _b;
|
|
27
|
-
var menus = _a.menus, activeMenu = _a.activeMenu, handleMenuClick = _a.handleMenuClick, toggle = _a.toggle, changeToggle = _a.changeToggle, logo = _a.logo, companyName = _a.companyName,
|
|
27
|
+
var _b, _c;
|
|
28
|
+
var menus = _a.menus, activeMenu = _a.activeMenu, handleMenuClick = _a.handleMenuClick, handleSecondaryNavClick = _a.handleSecondaryNavClick, toggle = _a.toggle, changeToggle = _a.changeToggle, logo = _a.logo, companyName = _a.companyName, _d = _a.isDisableAddNew, isDisableAddNew = _d === void 0 ? false : _d, onAddNewClick = _a.onAddNewClick, selectedSubMenu = _a.selectedSubMenu, selectedSecondaryItem = _a.selectedSecondaryItem, isLoading = _a.isLoading, loadingLines = _a.loadingLines;
|
|
28
29
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
react_1.default.createElement(react_2.
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
react_1.default.createElement(
|
|
39
|
-
|
|
40
|
-
react_1.default.createElement(
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
react_1.default.createElement(react_2.
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
30
|
+
var activeTop = menus.find(function (m) { return String(m.title) === String(activeMenu); }) ||
|
|
31
|
+
menus.find(function (m) { return String(m.id) === String(activeMenu); });
|
|
32
|
+
var secondaryItems = (_b = activeTop === null || activeTop === void 0 ? void 0 : activeTop.secondaryItems) !== null && _b !== void 0 ? _b : [];
|
|
33
|
+
return (react_1.default.createElement(react_2.Box, { transition: "all 0.5s", position: "sticky", height: "100vh", boxShadow: theme.shadows.lg, display: "flex", background: theme.colors.sidebar.background[500] },
|
|
34
|
+
react_1.default.createElement(react_2.Box, { width: toggle ? "4.688rem" : "13rem", display: "flex", flexDirection: "column", justifyContent: "space-between" },
|
|
35
|
+
react_1.default.createElement(react_2.Flex, { flexDir: "column", w: "100%", alignItems: toggle ? "center" : "flex-start", as: "nav", h: "100vh" },
|
|
36
|
+
isLoading ? (react_1.default.createElement(react_2.Box, { w: "100%", px: toggle ? 2 : 4, py: 2 }, toggle ? (react_1.default.createElement(react_2.Flex, { align: "flex-start", gap: 4, justifyContent: "center" },
|
|
37
|
+
react_1.default.createElement(react_2.Skeleton, { w: "30px", h: "30px", borderRadius: "2rem", startColor: "gray.600", endColor: "gray.500" }))) : (react_1.default.createElement(react_2.Flex, { align: "flex-start", gap: 4 },
|
|
38
|
+
react_1.default.createElement(react_2.Skeleton, { w: "25px", h: "25px", borderRadius: "2rem", startColor: "gray.600", endColor: "gray.500" }),
|
|
39
|
+
react_1.default.createElement(react_2.Skeleton, { h: "1.5rem", w: "85%", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" }))))) : (react_1.default.createElement(react_2.Box, null, logo ? (react_1.default.createElement(react_2.Flex, { h: "4.688rem", alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: "0.625rem", px: toggle ? 0 : "0.625rem" },
|
|
40
|
+
react_1.default.createElement(react_2.Image, { borderRadius: "full", boxSize: "2rem", src: logo, alt: "Company Logo" }),
|
|
41
|
+
!toggle && (react_1.default.createElement(react_2.Text, { fontSize: "18px", fontWeight: 800, color: theme.colors.white, lineHeight: 2 }, companyName)))) : (react_1.default.createElement(react_2.Flex, { h: "3.91rem", alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: "0.625rem", px: toggle ? 0 : "0.625rem" },
|
|
42
|
+
react_1.default.createElement(react_2.Box, { bg: theme.colors.white, color: theme.colors.black, borderRadius: "full", boxSize: "2rem", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: "bold", fontSize: { base: "xl", md: "2xl" } },
|
|
43
|
+
react_1.default.createElement(defaultLogo_1.default, null)),
|
|
44
|
+
!toggle && (react_1.default.createElement(OverflowTooltipText_1.default, { placement: "right", fontWeight: 800, fontSize: "1.3rem", textAlign: "center", color: theme.colors.white, lineHeight: 2, as: "p" }, companyName !== null && companyName !== void 0 ? companyName : "")))))),
|
|
45
|
+
react_1.default.createElement(react_2.Box, { w: "100%", h: "0.063rem", bg: theme.colors.sidebar.background[200] }),
|
|
46
|
+
react_1.default.createElement(react_2.Flex, { flexDir: "column", w: "100%", alignItems: toggle ? "center" : "flex-start", h: "100vh", overflow: "auto", css: Sidebar_1.FlexCss, overflowX: "hidden" },
|
|
47
|
+
react_1.default.createElement(react_2.Box, { id: "sidebar-scroll-container", width: "100%", flex: "1", overflowY: "auto", overflowX: "hidden", alignItems: toggle ? "center" : "flex-start", css: __assign(__assign({}, Sidebar_1.FlexCss), { transition: "all 0.3s ease" }) }, isLoading ? (Array.from({ length: loadingLines ? loadingLines : 15 }).map(function (_, i) { return (react_1.default.createElement(react_2.Box, { key: i, w: "100%", px: toggle ? 2 : 4, py: 3 }, toggle ? (react_1.default.createElement(react_2.Flex, { align: "flex-start", gap: 4, justifyContent: "center" },
|
|
48
|
+
react_1.default.createElement(react_2.Skeleton, { w: "30px", h: "30px", borderRadius: "2rem", startColor: "gray.600", endColor: "gray.500" }))) : (react_1.default.createElement(react_2.Flex, { align: "flex-start", gap: 5 },
|
|
49
|
+
react_1.default.createElement(react_2.Skeleton, { w: "20px", h: "20px", borderRadius: "2rem", startColor: "gray.600", endColor: "gray.500" }),
|
|
50
|
+
react_1.default.createElement(react_2.Skeleton, { h: "1rem", w: "85%", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" }))))); })) : (react_1.default.createElement(MenuItems_1.default, { activeMenu: activeMenu, menus: menus, handleMenuClick: handleMenuClick !== null && handleMenuClick !== void 0 ? handleMenuClick : (function () { }), toggle: toggle, selectedSubMenu: selectedSubMenu }))),
|
|
51
|
+
react_1.default.createElement(react_2.Box, { w: "100%", h: "0.063rem", bg: theme.colors.sidebar.background[200], mb: "0.125rem" }),
|
|
52
|
+
!isDisableAddNew &&
|
|
53
|
+
(isLoading ? (react_1.default.createElement(react_2.Box, { w: "100%", px: toggle ? 2 : 4, py: 2 },
|
|
54
|
+
react_1.default.createElement(react_2.Skeleton, { height: "1.25rem", borderRadius: "md" }))) : (react_1.default.createElement(react_2.Flex, { alignItems: "center", gap: "0.5rem", p: "0.625rem", cursor: "pointer", _hover: { backgroundColor: theme.colors.primary[500] }, w: "100%", justifyContent: toggle ? "center" : "flex-start", onClick: onAddNewClick },
|
|
55
|
+
react_1.default.createElement(react_2.Box, { w: "1.625rem", h: "1.625rem", bg: theme.colors.white, borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center" },
|
|
56
|
+
react_1.default.createElement(lucide_react_1.Plus, { size: 16, color: theme.colors.primary[500] })),
|
|
57
|
+
react_1.default.createElement(react_2.Text, { fontSize: "0.875rem", color: theme.colors.white, fontWeight: "medium", display: toggle ? "none" : "block" }, "Add New")))),
|
|
58
|
+
react_1.default.createElement(react_2.Flex, { alignItems: "center", gap: "0.5rem", p: "0.625rem", cursor: "pointer", w: "100%", justifyContent: toggle ? "center" : "flex-start", onClick: changeToggle, transition: "all 0.5s", bg: theme.colors.gray[700] },
|
|
59
|
+
react_1.default.createElement(react_2.Box, { w: "1.625rem", h: "1.625rem", borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center" }, toggle ? (react_1.default.createElement(lucide_react_1.ArrowRightToLine, { size: 16, color: (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.white })) : (react_1.default.createElement(lucide_react_1.ArrowLeftToLine, { size: 16, color: theme.colors.white }))),
|
|
60
|
+
react_1.default.createElement(react_2.Text, { fontSize: "0.875rem", color: "white", fontWeight: "medium", display: toggle ? "none" : "block" }, "Collapse"))))),
|
|
61
|
+
secondaryItems.length ? (react_1.default.createElement(SecondaryBar_1.default, { items: secondaryItems, defaultCollapsed: toggle, collapsedWidth: "3.5rem", expandedWidth: "10rem", selected: selectedSecondaryItem, onItemClick: handleSecondaryNavClick, title: activeTop === null || activeTop === void 0 ? void 0 : activeTop.title })) : null));
|
|
57
62
|
}
|
|
58
63
|
exports.default = Sidebar;
|
|
@@ -2,6 +2,7 @@ export type SidebarProps = {
|
|
|
2
2
|
menus: MenuProps[];
|
|
3
3
|
activeMenu: string;
|
|
4
4
|
handleMenuClick?: (menu: MenuProps) => void;
|
|
5
|
+
handleSecondaryNavClick?: (menu: MenuProps) => void;
|
|
5
6
|
toggle: boolean;
|
|
6
7
|
changeToggle: () => void;
|
|
7
8
|
logo?: string;
|
|
@@ -9,6 +10,7 @@ export type SidebarProps = {
|
|
|
9
10
|
isDisableAddNew?: boolean;
|
|
10
11
|
onAddNewClick?: () => void;
|
|
11
12
|
selectedSubMenu?: string | null;
|
|
13
|
+
selectedSecondaryItem?: string | number | null;
|
|
12
14
|
isLoading?: boolean;
|
|
13
15
|
loadingLines?: number;
|
|
14
16
|
};
|
|
@@ -19,8 +21,14 @@ export type MenuProps = {
|
|
|
19
21
|
url: string;
|
|
20
22
|
disabled?: boolean;
|
|
21
23
|
locked?: boolean;
|
|
22
|
-
badge?:
|
|
24
|
+
badge?: {
|
|
25
|
+
count?: number;
|
|
26
|
+
color?: string;
|
|
27
|
+
radius?: string | number;
|
|
28
|
+
variant?: string;
|
|
29
|
+
};
|
|
23
30
|
subMenu?: MenuProps[];
|
|
31
|
+
secondaryItems?: MenuProps[];
|
|
24
32
|
};
|
|
25
33
|
export type RenderMenuType = {
|
|
26
34
|
menus: MenuProps[];
|
|
@@ -28,4 +36,5 @@ export type RenderMenuType = {
|
|
|
28
36
|
handleMenuClick: (menu: MenuProps) => void;
|
|
29
37
|
toggle: boolean;
|
|
30
38
|
selectedSubMenu?: string | null;
|
|
39
|
+
selectedSecondaryItem?: string | number | null;
|
|
31
40
|
};
|
|
@@ -21,11 +21,18 @@ var lucide_react_1 = require("lucide-react");
|
|
|
21
21
|
var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
|
|
22
22
|
var TextTruncation_1 = __importDefault(require("./TextTruncation"));
|
|
23
23
|
var MenuItemBox = function (_a) {
|
|
24
|
-
var _b, _c, _d;
|
|
24
|
+
var _b, _c, _d, _e;
|
|
25
25
|
var menu = _a.menu, activeMenu = _a.activeMenu, toggle = _a.toggle, handleClick = _a.handleClick, isOpen = _a.isOpen, onToggle = _a.onToggle;
|
|
26
26
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
27
27
|
var title = menu.title, icon = menu.icon, disabled = menu.disabled, locked = menu.locked, badge = menu.badge, subMenu = menu.subMenu;
|
|
28
28
|
var hasSubMenu = !!(subMenu === null || subMenu === void 0 ? void 0 : subMenu.length);
|
|
29
|
+
var isBadgeObj = typeof badge === "object" && badge !== null;
|
|
30
|
+
var badgeValue = isBadgeObj ? badge.count : badge;
|
|
31
|
+
var hasSubmenuBadge = (_b = subMenu === null || subMenu === void 0 ? void 0 : subMenu.some(function (sub) {
|
|
32
|
+
var isObj = typeof sub.badge === "object" && sub.badge !== null;
|
|
33
|
+
var value = isObj ? sub.badge.count : sub.badge;
|
|
34
|
+
return value != null;
|
|
35
|
+
})) !== null && _b !== void 0 ? _b : false;
|
|
29
36
|
var isChildActive = subMenu === null || subMenu === void 0 ? void 0 : subMenu.some(function (sub) { return sub.id === activeMenu; });
|
|
30
37
|
var isParentActive = activeMenu === menu.id;
|
|
31
38
|
var isAnyActive = isParentActive || isChildActive;
|
|
@@ -54,11 +61,20 @@ var MenuItemBox = function (_a) {
|
|
|
54
61
|
opacity: disabled ? 0.6 : 1,
|
|
55
62
|
};
|
|
56
63
|
var buttonContent = (react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.625rem", justify: "space-between" },
|
|
57
|
-
react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.625rem", overflow: "
|
|
58
|
-
react_1.default.createElement(react_2.
|
|
64
|
+
react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.625rem", overflow: "hidden" },
|
|
65
|
+
react_1.default.createElement(react_2.Box, { position: "relative" },
|
|
66
|
+
react_1.default.createElement(react_2.Icon, { as: icon, fontSize: "1.25rem", color: disabled ? theme.colors.gray[400] : theme.colors.white }),
|
|
67
|
+
toggle && (badgeValue != null || hasSubmenuBadge) && (react_1.default.createElement(react_2.Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.red[400] }))),
|
|
59
68
|
!toggle && (react_1.default.createElement(TextTruncation_1.default, { open: isOpen, fontSize: "1rem", flex: "1" }, title))),
|
|
60
69
|
!toggle && (react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.375rem" },
|
|
61
|
-
|
|
70
|
+
(function () {
|
|
71
|
+
var _a, _b, _c;
|
|
72
|
+
var value = badgeValue;
|
|
73
|
+
var colorScheme = (_a = (isBadgeObj ? badge.color : undefined)) !== null && _a !== void 0 ? _a : "teal";
|
|
74
|
+
var radius = (_b = (isBadgeObj ? badge.radius : undefined)) !== null && _b !== void 0 ? _b : "full";
|
|
75
|
+
var variant = (_c = (isBadgeObj ? badge.variant : undefined)) !== null && _c !== void 0 ? _c : "subtle";
|
|
76
|
+
return value != null ? (react_1.default.createElement(react_2.Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius }, value)) : null;
|
|
77
|
+
})(),
|
|
62
78
|
locked && react_1.default.createElement(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "1rem" }),
|
|
63
79
|
hasSubMenu && (react_1.default.createElement(react_2.Icon, { as: isOpen ? lucide_react_1.ChevronDown : lucide_react_1.ChevronRight, fontSize: "1rem", onClick: function (e) {
|
|
64
80
|
e.stopPropagation();
|
|
@@ -68,16 +84,16 @@ var MenuItemBox = function (_a) {
|
|
|
68
84
|
// Collapsed sidebar: show Popover
|
|
69
85
|
return (react_1.default.createElement(react_2.Popover, { trigger: "hover", placement: "right-start", closeOnBlur: false, isLazy: true },
|
|
70
86
|
react_1.default.createElement(react_2.PopoverTrigger, null,
|
|
71
|
-
react_1.default.createElement(react_2.Box, __assign({}, commonStyles, { onClick: function (e) { return handleToggleSubMenu(e); }, "data-menu-id": String((
|
|
87
|
+
react_1.default.createElement(react_2.Box, __assign({}, commonStyles, { onClick: function (e) { return handleToggleSubMenu(e); }, "data-menu-id": String((_c = menu.id) !== null && _c !== void 0 ? _c : title) }), buttonContent)),
|
|
72
88
|
react_1.default.createElement(react_2.Portal, null,
|
|
73
89
|
react_1.default.createElement(react_2.PopoverContent, { borderRadius: "0.063rem", bg: theme.colors.primary[isAnyActive ? 500 : 700], boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.313rem", cursor: disabled ? "not-allowed" : "pointer", zIndex: 1500 },
|
|
74
90
|
react_1.default.createElement(react_2.PopoverBody, { p: "0.5rem", color: "white" },
|
|
75
91
|
react_1.default.createElement(MenuPopoverContent_1.default, { menu: menu, handleMenuClick: handleClick, activeMenu: activeMenu }))))));
|
|
76
92
|
}
|
|
77
93
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
78
|
-
react_1.default.createElement(react_2.Box, __assign({}, commonStyles, { onClick: function (e) { return handleToggleSubMenu(e); }, "data-menu-id": String((
|
|
94
|
+
react_1.default.createElement(react_2.Box, __assign({}, commonStyles, { onClick: function (e) { return handleToggleSubMenu(e); }, "data-menu-id": String((_d = menu.id) !== null && _d !== void 0 ? _d : title) }), buttonContent),
|
|
79
95
|
hasSubMenu && (react_1.default.createElement(react_2.Collapse, { in: isOpen, animateOpacity: true },
|
|
80
|
-
react_1.default.createElement(react_2.Box, { "data-collapse": "true", "data-menu-id": String((
|
|
96
|
+
react_1.default.createElement(react_2.Box, { "data-collapse": "true", "data-menu-id": String((_e = menu.id) !== null && _e !== void 0 ? _e : title), "data-open": isOpen ? "true" : "false", sx: {
|
|
81
97
|
transition: "opacity 0.28s ease, transform 0.28s ease",
|
|
82
98
|
opacity: isOpen ? 1 : 0,
|
|
83
99
|
transform: isOpen ? "translateY(0)" : "translateY(-6px)",
|
|
@@ -92,7 +108,15 @@ var MenuItemBox = function (_a) {
|
|
|
92
108
|
react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.5rem", overflow: "auto" },
|
|
93
109
|
react_1.default.createElement(react_2.Icon, { as: sub.icon, fontSize: "1rem" }),
|
|
94
110
|
react_1.default.createElement(TextTruncation_1.default, { fontSize: "0.875rem", fontWeight: "medium", open: isOpen }, sub.title)),
|
|
95
|
-
sub.locked ? (react_1.default.createElement(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "1rem" })) :
|
|
111
|
+
sub.locked ? (react_1.default.createElement(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "1rem" })) : (function () {
|
|
112
|
+
var _a, _b, _c;
|
|
113
|
+
var isObj = typeof sub.badge === "object" && sub.badge !== null;
|
|
114
|
+
var value = isObj ? sub.badge.count : sub.badge;
|
|
115
|
+
var colorScheme = (_a = (isObj ? sub.badge.color : undefined)) !== null && _a !== void 0 ? _a : "teal";
|
|
116
|
+
var radius = (_b = (isObj ? sub.badge.radius : undefined)) !== null && _b !== void 0 ? _b : "full";
|
|
117
|
+
var variant = (_c = (isObj ? sub.badge.variant : undefined)) !== null && _c !== void 0 ? _c : "subtle";
|
|
118
|
+
return value != null ? (react_1.default.createElement(react_2.Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius }, value)) : null;
|
|
119
|
+
})()));
|
|
96
120
|
}))))));
|
|
97
121
|
};
|
|
98
122
|
exports.default = MenuItemBox;
|
|
@@ -20,7 +20,15 @@ var MenuPopoverContent = function (_a) {
|
|
|
20
20
|
}
|
|
21
21
|
}, cursor: !(subMenu === null || subMenu === void 0 ? void 0 : subMenu.length) ? "pointer" : "default" },
|
|
22
22
|
react_1.default.createElement(TextTruncation_1.default, { fontWeight: "medium", fontSize: "1rem", flex: "1" }, title),
|
|
23
|
-
|
|
23
|
+
(function () {
|
|
24
|
+
var _a, _b, _c;
|
|
25
|
+
var isObj = typeof badge === "object" && badge !== null;
|
|
26
|
+
var value = isObj ? badge.count : badge;
|
|
27
|
+
var colorScheme = (_a = (isObj ? badge.color : undefined)) !== null && _a !== void 0 ? _a : "teal";
|
|
28
|
+
var radius = (_b = (isObj ? badge.radius : undefined)) !== null && _b !== void 0 ? _b : "full";
|
|
29
|
+
var variant = (_c = (isObj ? badge.variant : undefined)) !== null && _c !== void 0 ? _c : "subtle";
|
|
30
|
+
return value != null ? (react_1.default.createElement(react_2.Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius }, value)) : null;
|
|
31
|
+
})(),
|
|
24
32
|
locked && react_1.default.createElement(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "1rem" })), subMenu === null || subMenu === void 0 ? void 0 :
|
|
25
33
|
subMenu.map(function (sub) {
|
|
26
34
|
var isSubActive = activeMenu === sub.id;
|
|
@@ -33,7 +41,15 @@ var MenuPopoverContent = function (_a) {
|
|
|
33
41
|
react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.5rem", overflow: "auto" },
|
|
34
42
|
react_1.default.createElement(react_2.Icon, { as: sub.icon, fontSize: "1rem" }),
|
|
35
43
|
react_1.default.createElement(TextTruncation_1.default, { fontSize: "0.875rem", fontWeight: "medium", flex: 1 }, sub.title)),
|
|
36
|
-
sub.locked ? (react_1.default.createElement(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "1rem" })) :
|
|
44
|
+
sub.locked ? (react_1.default.createElement(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "1rem" })) : (function () {
|
|
45
|
+
var _a, _b, _c;
|
|
46
|
+
var isObj = typeof sub.badge === "object" && sub.badge !== null;
|
|
47
|
+
var value = isObj ? sub.badge.count : sub.badge;
|
|
48
|
+
var colorScheme = (_a = (isObj ? sub.badge.color : undefined)) !== null && _a !== void 0 ? _a : "teal";
|
|
49
|
+
var radius = (_b = (isObj ? sub.badge.radius : undefined)) !== null && _b !== void 0 ? _b : "full";
|
|
50
|
+
var variant = (_c = (isObj ? sub.badge.variant : undefined)) !== null && _c !== void 0 ? _c : "subtle";
|
|
51
|
+
return value != null ? (react_1.default.createElement(react_2.Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius }, value)) : null;
|
|
52
|
+
})()));
|
|
37
53
|
})));
|
|
38
54
|
};
|
|
39
55
|
exports.default = MenuPopoverContent;
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
import { TextProps } from "@chakra-ui/react";
|
|
3
|
+
interface OverflowTooltipTextProps extends TextProps {
|
|
4
|
+
children: string;
|
|
4
5
|
placement?: "top" | "bottom" | "left" | "right";
|
|
5
6
|
maxWidth?: string | number;
|
|
6
7
|
isTooltipDisabled?: boolean;
|
|
7
8
|
}
|
|
8
|
-
declare const OverflowTooltipText: React.FC<
|
|
9
|
+
declare const OverflowTooltipText: React.FC<OverflowTooltipTextProps>;
|
|
9
10
|
export default OverflowTooltipText;
|
|
@@ -1,4 +1,15 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
2
13
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
14
|
if (k2 === undefined) k2 = k;
|
|
4
15
|
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
@@ -22,6 +33,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
22
33
|
__setModuleDefault(result, mod);
|
|
23
34
|
return result;
|
|
24
35
|
};
|
|
36
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
37
|
+
var t = {};
|
|
38
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
39
|
+
t[p] = s[p];
|
|
40
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
41
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
42
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
43
|
+
t[p[i]] = s[p[i]];
|
|
44
|
+
}
|
|
45
|
+
return t;
|
|
46
|
+
};
|
|
25
47
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
26
48
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
49
|
};
|
|
@@ -30,34 +52,31 @@ var react_1 = __importStar(require("react"));
|
|
|
30
52
|
var react_2 = require("@chakra-ui/react");
|
|
31
53
|
var ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
|
|
32
54
|
var OverflowTooltipText = function (_a) {
|
|
33
|
-
var children = _a.children, _b = _a.placement, placement = _b === void 0 ? "bottom" : _b, _c = _a.maxWidth, maxWidth = _c === void 0 ? "
|
|
34
|
-
var
|
|
35
|
-
var
|
|
36
|
-
var
|
|
55
|
+
var children = _a.children, _b = _a.placement, placement = _b === void 0 ? "bottom" : _b, _c = _a.maxWidth, maxWidth = _c === void 0 ? "100%" : _c, _d = _a.isTooltipDisabled, isTooltipDisabled = _d === void 0 ? false : _d, textProps = __rest(_a, ["children", "placement", "maxWidth", "isTooltipDisabled"]);
|
|
56
|
+
var textRef = (0, react_1.useRef)(null);
|
|
57
|
+
var shadowRef = (0, react_1.useRef)(null);
|
|
58
|
+
var _e = (0, react_1.useState)(false), isTruncated = _e[0], setIsTruncated = _e[1];
|
|
37
59
|
(0, react_1.useEffect)(function () {
|
|
38
|
-
var
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
};
|
|
47
|
-
checkOverflow();
|
|
48
|
-
var ro = new ResizeObserver(function () { return checkOverflow(); });
|
|
49
|
-
ro.observe(el);
|
|
50
|
-
var mo = new MutationObserver(function () { return checkOverflow(); });
|
|
51
|
-
mo.observe(el, { childList: true, subtree: true, characterData: true });
|
|
52
|
-
window.addEventListener("resize", checkOverflow);
|
|
53
|
-
return function () {
|
|
54
|
-
ro.disconnect();
|
|
55
|
-
mo.disconnect();
|
|
56
|
-
window.removeEventListener("resize", checkOverflow);
|
|
60
|
+
var checkTruncation = function () {
|
|
61
|
+
var textEl = textRef.current;
|
|
62
|
+
var shadowEl = shadowRef.current;
|
|
63
|
+
if (textEl && shadowEl) {
|
|
64
|
+
var visibleWidth = textEl.offsetWidth;
|
|
65
|
+
var fullTextWidth = shadowEl.scrollWidth;
|
|
66
|
+
setIsTruncated(fullTextWidth > visibleWidth + 1);
|
|
67
|
+
}
|
|
57
68
|
};
|
|
69
|
+
checkTruncation();
|
|
70
|
+
var resizeObserver = new ResizeObserver(checkTruncation);
|
|
71
|
+
if (textRef.current) {
|
|
72
|
+
resizeObserver.observe(textRef.current);
|
|
73
|
+
}
|
|
74
|
+
return function () { return resizeObserver.disconnect(); };
|
|
58
75
|
}, [children]);
|
|
59
|
-
var shouldShowTooltip =
|
|
60
|
-
return (react_1.default.createElement(
|
|
61
|
-
react_1.default.createElement(
|
|
76
|
+
var shouldShowTooltip = isTruncated && !isTooltipDisabled;
|
|
77
|
+
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
78
|
+
react_1.default.createElement(ToolTip_1.default, { label: children, isDisabled: !shouldShowTooltip, placement: placement, hasArrow: true },
|
|
79
|
+
react_1.default.createElement(react_2.Text, __assign({ ref: textRef, isTruncated: true, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", maxW: maxWidth }, textProps), children)),
|
|
80
|
+
react_1.default.createElement(react_2.Box, { ref: shadowRef, position: "absolute", visibility: "hidden", whiteSpace: "nowrap", fontSize: textProps.fontSize, fontWeight: textProps.fontWeight, fontFamily: textProps.fontFamily, lineHeight: textProps.lineHeight, px: textProps.px, py: textProps.py }, children)));
|
|
62
81
|
};
|
|
63
82
|
exports.default = OverflowTooltipText;
|