pixelize-design-library 2.3.1-beta.2 → 2.3.1-beta.4
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/.claude/settings.local.json +17 -1
- package/dist/Components/Accordion/Accordion.js +26 -5
- package/dist/Components/KanbanBoard/AccountCard.js +17 -14
- package/dist/Components/KanbanBoard/KanbanBoard.js +93 -78
- package/dist/Components/NavigationBar/NavigationBar.js +4 -4
- package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewer.d.ts +1 -1
- package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewer.js +42 -24
- package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewerProps.d.ts +2 -0
- package/dist/Components/SearchSelect/SearchSelect.js +53 -21
- package/dist/Components/Table/Table.d.ts +1 -1
- package/dist/Components/Table/Table.js +67 -26
- package/dist/Components/Table/TableProps.d.ts +4 -1
- package/dist/Components/Table/components/TableActions.d.ts +2 -2
- package/dist/Components/Table/components/TableActions.js +5 -4
- package/dist/Components/Table/components/TableBody.js +84 -18
- package/dist/Components/Table/components/TableHeader.js +5 -9
- package/dist/Components/Table/settings/TableSettings.d.ts +3 -1
- package/dist/Components/Table/settings/TableSettings.js +30 -5
- package/dist/Components/Timeline/Timeline.d.ts +1 -1
- package/dist/Components/Timeline/Timeline.js +145 -78
- package/dist/Components/Toaster/Toaster.js +40 -20
- package/package.json +1 -1
|
@@ -18,7 +18,23 @@
|
|
|
18
18
|
"Bash(echo \"exit=$?\")",
|
|
19
19
|
"Read(//tmp/**)",
|
|
20
20
|
"Bash(git mv *)",
|
|
21
|
-
"Bash(git rm *)"
|
|
21
|
+
"Bash(git rm *)",
|
|
22
|
+
"Bash(node -e \"console.log\\(require\\('@emotion/react/package.json'\\).version\\)\")",
|
|
23
|
+
"Bash(node -e \"console.log\\('jodit-react', require\\('jodit-react/package.json'\\).version\\); try{console.log\\('jodit', require\\('jodit/package.json'\\).version\\)}catch\\(e\\){}\")",
|
|
24
|
+
"Bash(node -e \"console.log\\('playwright', require\\('playwright/package.json'\\).version\\)\")",
|
|
25
|
+
"Bash(node -e \"console.log\\('puppeteer', require\\('puppeteer/package.json'\\).version\\)\")",
|
|
26
|
+
"Bash(node -e \"console.log\\('ws', require\\('ws/package.json'\\).version\\)\")",
|
|
27
|
+
"Bash(node -e \"console.log\\('node', process.version\\)\")",
|
|
28
|
+
"Bash(grep -E \"\\\\.tsx?$\")",
|
|
29
|
+
"Bash(node -e \"console.log\\(require.resolve\\('@chakra-ui/styled-system'\\)\\)\")",
|
|
30
|
+
"Bash(node -e \"const p=require.resolve\\('@chakra-ui/react'\\);console.log\\(p\\)\")",
|
|
31
|
+
"Bash(sed -n '31,45p' src/Pages/table.tsx)",
|
|
32
|
+
"Bash(perl -0pi -e 's/\\\\n\\\\s*content: \\\\\\(\\\\\\) => <>Hello<\\\\/>,?//' src/Pages/table.tsx)",
|
|
33
|
+
"Bash(cd /Users/mahesh/Applications/Pixelize/CRM/Micro-Components *)"
|
|
34
|
+
],
|
|
35
|
+
"additionalDirectories": [
|
|
36
|
+
"/private/tmp",
|
|
37
|
+
"/tmp"
|
|
22
38
|
]
|
|
23
39
|
}
|
|
24
40
|
}
|
|
@@ -27,14 +27,35 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
27
27
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
28
28
|
var react_1 = __importDefault(require("react"));
|
|
29
29
|
var react_2 = require("@chakra-ui/react");
|
|
30
|
+
var lucide_react_1 = require("lucide-react");
|
|
31
|
+
var useCustomTheme_1 = require("../../Theme/useCustomTheme");
|
|
30
32
|
var Accordion = function (_a) {
|
|
33
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
|
|
31
34
|
var allowMultiple = _a.allowMultiple, allowToggle = _a.allowToggle, index = _a.index, onChange = _a.onChange, reduceMotion = _a.reduceMotion, items = _a.items, rest = __rest(_a, ["allowMultiple", "allowToggle", "index", "onChange", "reduceMotion", "items"]);
|
|
35
|
+
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
36
|
+
var c = (_b = theme.colors) !== null && _b !== void 0 ? _b : {};
|
|
37
|
+
var border = (_d = (_c = c.boxborder) === null || _c === void 0 ? void 0 : _c[300]) !== null && _d !== void 0 ? _d : (_e = c.gray) === null || _e === void 0 ? void 0 : _e[200];
|
|
38
|
+
var headingColor = (_g = (_f = c.text) === null || _f === void 0 ? void 0 : _f[800]) !== null && _g !== void 0 ? _g : (_h = c.gray) === null || _h === void 0 ? void 0 : _h[800];
|
|
39
|
+
var bodyColor = (_k = (_j = c.text) === null || _j === void 0 ? void 0 : _j[600]) !== null && _k !== void 0 ? _k : (_l = c.gray) === null || _l === void 0 ? void 0 : _l[600];
|
|
40
|
+
var softHover = (_p = (_o = (_m = c.table) === null || _m === void 0 ? void 0 : _m.hover) === null || _o === void 0 ? void 0 : _o[100]) !== null && _p !== void 0 ? _p : (_q = c.gray) === null || _q === void 0 ? void 0 : _q[50];
|
|
41
|
+
var expandedBg = (_t = (_s = (_r = c.primary) === null || _r === void 0 ? void 0 : _r.opacity) === null || _s === void 0 ? void 0 : _s[8]) !== null && _t !== void 0 ? _t : (_u = c.gray) === null || _u === void 0 ? void 0 : _u[50];
|
|
32
42
|
return (react_1.default.createElement(react_2.Accordion, __assign({ allowMultiple: allowMultiple, allowToggle: allowToggle, index: index, onChange: onChange, reduceMotion: reduceMotion }, rest), items.map(function (item, idx) {
|
|
33
|
-
var _a, _b, _c, _d;
|
|
34
|
-
return (react_1.default.createElement(react_2.AccordionItem, __assign({ key: idx }, item.itemProps, { sx: (
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
react_1.default.createElement(
|
|
43
|
+
var _a, _b, _c, _d, _e;
|
|
44
|
+
return (react_1.default.createElement(react_2.AccordionItem, __assign({ key: idx, border: "0.063rem solid ".concat(border), borderRadius: "0.625rem", bg: (_a = c.white) !== null && _a !== void 0 ? _a : "#fff", mb: 3, overflow: "hidden", transition: "border-color 0.15s ease, box-shadow 0.15s ease", _last: { mb: 0 }, _hover: { borderColor: (_c = (_b = c.boxborder) === null || _b === void 0 ? void 0 : _b[400]) !== null && _c !== void 0 ? _c : (_d = c.gray) === null || _d === void 0 ? void 0 : _d[300] } }, item.itemProps, { sx: (_e = item.customStyles) === null || _e === void 0 ? void 0 : _e.itemStyle }), function (_a) {
|
|
45
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
46
|
+
var isExpanded = _a.isExpanded;
|
|
47
|
+
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
48
|
+
react_1.default.createElement("h2", null,
|
|
49
|
+
react_1.default.createElement(react_2.AccordionButton, __assign({ px: 4, py: 3, gap: 3, fontSize: "0.875rem", fontWeight: 600, color: headingColor, bg: isExpanded ? expandedBg : "transparent", transition: "background 0.15s ease", _hover: { bg: isExpanded ? expandedBg : softHover }, _focusVisible: {
|
|
50
|
+
boxShadow: "none",
|
|
51
|
+
outline: "0.125rem solid ".concat((_c = (_b = c.primary) === null || _b === void 0 ? void 0 : _b[300]) !== null && _c !== void 0 ? _c : (_d = c.gray) === null || _d === void 0 ? void 0 : _d[300]),
|
|
52
|
+
outlineOffset: "-0.125rem",
|
|
53
|
+
} }, item.buttonProps, { sx: __assign(__assign({}, (_e = item.customStyles) === null || _e === void 0 ? void 0 : _e.buttonStyle), { "&:hover": __assign({}, (_f = item.customStyles) === null || _f === void 0 ? void 0 : _f.hoverbuttonStyle) }) }),
|
|
54
|
+
react_1.default.createElement(react_2.Box, { as: "span", flex: "1", textAlign: "left" }, item.header),
|
|
55
|
+
react_1.default.createElement(react_2.Flex, { align: "center", justify: "center", boxSize: "1.5rem", flexShrink: 0, borderRadius: "0.375rem", color: isExpanded ? ((_h = (_g = c.primary) === null || _g === void 0 ? void 0 : _g[600]) !== null && _h !== void 0 ? _h : headingColor) : (_j = c.gray) === null || _j === void 0 ? void 0 : _j[500], bg: isExpanded ? ((_m = (_l = (_k = c.primary) === null || _k === void 0 ? void 0 : _k.opacity) === null || _l === void 0 ? void 0 : _l[16]) !== null && _m !== void 0 ? _m : "transparent") : "transparent", transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)", transition: "transform 0.2s ease, color 0.2s ease, background 0.2s ease" },
|
|
56
|
+
react_1.default.createElement(lucide_react_1.ChevronDown, { size: 16 })))),
|
|
57
|
+
react_1.default.createElement(react_2.AccordionPanel, __assign({ px: 4, pt: 1, pb: 4, fontSize: "0.875rem", lineHeight: "1.5", color: bodyColor }, item.panelProps, { sx: (_o = item.customStyles) === null || _o === void 0 ? void 0 : _o.panelStyle }), item.content)));
|
|
58
|
+
}));
|
|
38
59
|
})));
|
|
39
60
|
};
|
|
40
61
|
exports.default = Accordion;
|
|
@@ -43,32 +43,35 @@ var useCustomTheme_1 = require("../../Theme/useCustomTheme");
|
|
|
43
43
|
var AccountRow_1 = __importDefault(require("./AccountRow"));
|
|
44
44
|
var excludeKeys = ["id", "details"];
|
|
45
45
|
var AccountCard = react_1.default.memo(function (_a) {
|
|
46
|
-
var _b, _c, _d, _e, _f, _g, _h;
|
|
47
|
-
var account = _a.account, onDelete = _a.onDelete, onOpen = _a.onOpen,
|
|
46
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
47
|
+
var account = _a.account, onDelete = _a.onDelete, onOpen = _a.onOpen, _s = _a.isExpanded, isExpanded = _s === void 0 ? false : _s, onToggleExpand = _a.onToggleExpand, _t = _a.isDeletable, isDeletable = _t === void 0 ? true : _t;
|
|
48
48
|
var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
|
|
49
49
|
var keys = (0, react_1.useMemo)(function () { return Object.keys(account).filter(function (key) { return typeof account[key] === "string" && !excludeKeys.includes(key); }); }, [account]);
|
|
50
50
|
var visibleKeys = isExpanded ? keys : keys.slice(0, 4);
|
|
51
51
|
var handleToggle = function () {
|
|
52
52
|
onToggleExpand === null || onToggleExpand === void 0 ? void 0 : onToggleExpand();
|
|
53
53
|
};
|
|
54
|
-
return (react_1.default.createElement(react_2.Box, {
|
|
55
|
-
borderColor: (
|
|
54
|
+
return (react_1.default.createElement(react_2.Box, { role: "group", width: "100%", borderRadius: "0.625rem", background: (_b = colors === null || colors === void 0 ? void 0 : colors.white) !== null && _b !== void 0 ? _b : "#fff", border: "0.063rem solid ".concat((_d = (_c = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_e = colors.gray) === null || _e === void 0 ? void 0 : _e[200]), boxShadow: "0 0.063rem 0.125rem rgba(0,0,0,0.04)", p: 3, boxSizing: "border-box", minHeight: isExpanded ? "180px" : "80px", transition: "border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease", _hover: {
|
|
55
|
+
borderColor: (_f = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _f === void 0 ? void 0 : _f[300],
|
|
56
|
+
boxShadow: "0 0.25rem 0.75rem rgba(0,0,0,0.08)",
|
|
57
|
+
transform: "translateY(-0.063rem)",
|
|
56
58
|
} },
|
|
57
|
-
react_1.default.createElement(react_2.VStack, { align: "
|
|
59
|
+
react_1.default.createElement(react_2.VStack, { align: "stretch", spacing: 1, fontSize: "0.875rem", color: (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[700] },
|
|
58
60
|
visibleKeys.map(function (key) { return (react_1.default.createElement(AccountRow_1.default, { key: key, label: key.replace(/\b\w/g, function (c) { return c.toUpperCase(); }), value: account[key] })); }),
|
|
59
61
|
react_1.default.createElement(react_2.Collapse, { in: isExpanded && account.details !== undefined, animateOpacity: true },
|
|
60
|
-
react_1.default.createElement(react_2.Text, { pt: 2 }, account.details)),
|
|
62
|
+
react_1.default.createElement(react_2.Text, { pt: 2, fontSize: "0.8125rem", color: (_h = colors === null || colors === void 0 ? void 0 : colors.text) === null || _h === void 0 ? void 0 : _h[600] }, account.details)),
|
|
61
63
|
react_1.default.createElement(react_2.Flex, { justify: "space-between", w: "full", pt: 2, alignItems: "center" },
|
|
62
|
-
keys.length > 4
|
|
64
|
+
keys.length > 4 ? (react_1.default.createElement(react_2.Text, { color: (_j = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _j === void 0 ? void 0 : _j[600], fontSize: "0.75rem", fontWeight: 600, cursor: "pointer", onClick: handleToggle, display: "flex", alignItems: "center", gap: 1, _hover: { color: (_k = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _k === void 0 ? void 0 : _k[700] } },
|
|
63
65
|
"Show ",
|
|
64
66
|
isExpanded ? "less" : "more",
|
|
65
67
|
" ",
|
|
66
|
-
isExpanded ? react_1.default.createElement(lucide_react_1.ChevronUp, { size:
|
|
67
|
-
react_1.default.createElement(react_2.
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
react_1.default.createElement(react_2.Tooltip, { label: "Open" },
|
|
72
|
-
react_1.default.createElement(
|
|
68
|
+
isExpanded ? react_1.default.createElement(lucide_react_1.ChevronUp, { size: 13 }) : react_1.default.createElement(lucide_react_1.ChevronDown, { size: 13 }))) : (react_1.default.createElement(react_2.Spacer, null)),
|
|
69
|
+
react_1.default.createElement(react_2.HStack, { spacing: 1, opacity: 0, transition: "opacity 0.15s ease", _groupHover: { opacity: 1 } },
|
|
70
|
+
isDeletable && (react_1.default.createElement(react_2.Tooltip, { label: "Delete", hasArrow: true },
|
|
71
|
+
react_1.default.createElement(react_2.Flex, { align: "center", justify: "center", boxSize: "1.625rem", borderRadius: "0.375rem", cursor: "pointer", color: (_l = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _l === void 0 ? void 0 : _l[500], transition: "background 0.15s ease, color 0.15s ease", _hover: { bg: (_m = colors === null || colors === void 0 ? void 0 : colors.red) === null || _m === void 0 ? void 0 : _m[50], color: (_o = colors === null || colors === void 0 ? void 0 : colors.red) === null || _o === void 0 ? void 0 : _o[600] }, onClick: function () { return onDelete === null || onDelete === void 0 ? void 0 : onDelete(account); }, "aria-label": "Delete" },
|
|
72
|
+
react_1.default.createElement(lucide_react_1.Trash2, { size: 15 })))),
|
|
73
|
+
react_1.default.createElement(react_2.Tooltip, { label: "Open", hasArrow: true },
|
|
74
|
+
react_1.default.createElement(react_2.Flex, { align: "center", justify: "center", boxSize: "1.625rem", borderRadius: "0.375rem", cursor: "pointer", color: (_p = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _p === void 0 ? void 0 : _p[500], transition: "background 0.15s ease, color 0.15s ease", _hover: { bg: (_q = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _q === void 0 ? void 0 : _q[50], color: (_r = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _r === void 0 ? void 0 : _r[600] }, onClick: function () { return onOpen === null || onOpen === void 0 ? void 0 : onOpen(account); }, "aria-label": "Open" },
|
|
75
|
+
react_1.default.createElement(lucide_react_1.ExternalLink, { size: 15 }))))))));
|
|
73
76
|
});
|
|
74
77
|
exports.default = AccountCard;
|
|
@@ -71,6 +71,9 @@ var Button_1 = __importDefault(require("../Button/Button"));
|
|
|
71
71
|
/** Narrow rail width when a column is horizontally collapsed. */
|
|
72
72
|
var COLLAPSED_KANBAN_COLUMN_WIDTH = "2.75rem";
|
|
73
73
|
var KANBAN_CARD_GAP = 12;
|
|
74
|
+
// Top buffer above the first card so its border + hover lift aren't clipped by the
|
|
75
|
+
// scroll/virtualized list's top edge.
|
|
76
|
+
var KANBAN_LIST_TOP_PAD = 6;
|
|
74
77
|
var KanbanRow = react_1.default.memo(function (_a) {
|
|
75
78
|
var index = _a.index, style = _a.style, data = _a.data;
|
|
76
79
|
var items = data.items, colId = data.colId, canDrag = data.canDrag, expanded = data.expanded, onDelete = data.onDelete, onOpen = data.onOpen, canDelete = data.canDelete, setSize = data.setSize, toggleExpand = data.toggleExpand;
|
|
@@ -79,7 +82,7 @@ var KanbanRow = react_1.default.memo(function (_a) {
|
|
|
79
82
|
return react_1.default.createElement("div", { style: style });
|
|
80
83
|
}
|
|
81
84
|
return (react_1.default.createElement("div", { style: style },
|
|
82
|
-
react_1.default.createElement("div", { style: { paddingBottom: KANBAN_CARD_GAP } },
|
|
85
|
+
react_1.default.createElement("div", { style: { paddingBottom: KANBAN_CARD_GAP, paddingTop: index === 0 ? KANBAN_LIST_TOP_PAD : 0 } },
|
|
83
86
|
react_1.default.createElement(MeasuredItem_1.default, { index: index, setSize: function (i, h) { return setSize(i, h, colId); } },
|
|
84
87
|
react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, key: account.id, isDragDisabled: !canDrag }, function (provided) {
|
|
85
88
|
var _a;
|
|
@@ -259,13 +262,14 @@ var KanbanBoard = function (_a) {
|
|
|
259
262
|
return prev;
|
|
260
263
|
return __assign(__assign({}, prev), (_a = {}, _a[key] = size, _a));
|
|
261
264
|
});
|
|
265
|
+
// Only recompute from the row that changed downward (cheaper than resetting all).
|
|
262
266
|
if (listRefs.current[colId]) {
|
|
263
|
-
listRefs.current[colId].resetAfterIndex(
|
|
267
|
+
listRefs.current[colId].resetAfterIndex(index);
|
|
264
268
|
}
|
|
265
269
|
}, []);
|
|
266
270
|
var getItemSize = (0, react_1.useCallback)(function (index, _items, colId) {
|
|
267
271
|
var key = "".concat(colId, "-").concat(index);
|
|
268
|
-
return (sizes[key] || DEFAULT_ITEM_HEIGHT) + KANBAN_CARD_GAP;
|
|
272
|
+
return (sizes[key] || DEFAULT_ITEM_HEIGHT) + KANBAN_CARD_GAP + (index === 0 ? KANBAN_LIST_TOP_PAD : 0);
|
|
269
273
|
}, [sizes]);
|
|
270
274
|
// Calculate container height
|
|
271
275
|
(0, react_1.useEffect)(function () {
|
|
@@ -281,8 +285,9 @@ var KanbanBoard = function (_a) {
|
|
|
281
285
|
window.removeEventListener("resize", calculateDimensions);
|
|
282
286
|
};
|
|
283
287
|
}, [isBoardLoading]);
|
|
284
|
-
// toggle expand/collapse
|
|
285
|
-
|
|
288
|
+
// toggle expand/collapse — memoized so it doesn't bust `rowBaseProps`/itemData
|
|
289
|
+
// every render (which would re-render every virtualized row).
|
|
290
|
+
var toggleExpand = (0, react_1.useCallback)(function (id, colId, index) {
|
|
286
291
|
setExpanded(function (prev) {
|
|
287
292
|
var _a;
|
|
288
293
|
var newExpanded = __assign(__assign({}, prev), (_a = {}, _a[id] = !prev[id], _a));
|
|
@@ -291,9 +296,9 @@ var KanbanBoard = function (_a) {
|
|
|
291
296
|
}
|
|
292
297
|
return newExpanded;
|
|
293
298
|
});
|
|
294
|
-
};
|
|
299
|
+
}, []);
|
|
295
300
|
// drag handler
|
|
296
|
-
var onDragEnd = function (result) {
|
|
301
|
+
var onDragEnd = (0, react_1.useCallback)(function (result) {
|
|
297
302
|
var _a, _b;
|
|
298
303
|
var source = result.source, destination = result.destination, type = result.type;
|
|
299
304
|
if (!destination)
|
|
@@ -344,12 +349,12 @@ var KanbanBoard = function (_a) {
|
|
|
344
349
|
toIndex: destination.index,
|
|
345
350
|
});
|
|
346
351
|
}
|
|
347
|
-
};
|
|
348
|
-
var handleColumnDelete = function (colId) {
|
|
352
|
+
}, [columns, onDrag, onColumnReorder]);
|
|
353
|
+
var handleColumnDelete = (0, react_1.useCallback)(function (colId) {
|
|
349
354
|
var _a, _b;
|
|
350
355
|
var columnIds = ((_b = (_a = columns[colId]) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b.map(function (item) { return item.id; })) || [];
|
|
351
356
|
onColumnDelete === null || onColumnDelete === void 0 ? void 0 : onColumnDelete(columnIds);
|
|
352
|
-
};
|
|
357
|
+
}, [columns, onColumnDelete]);
|
|
353
358
|
var rowBaseProps = (0, react_1.useMemo)(function () { return ({
|
|
354
359
|
canDrag: canDrag,
|
|
355
360
|
expanded: expanded,
|
|
@@ -359,6 +364,16 @@ var KanbanBoard = function (_a) {
|
|
|
359
364
|
setSize: setSize,
|
|
360
365
|
toggleExpand: toggleExpand,
|
|
361
366
|
}); }, [canDrag, expanded, onDelete, onOpen, canDelete, setSize, toggleExpand]);
|
|
367
|
+
// Stable per-column itemData so unrelated board re-renders (e.g. column hover)
|
|
368
|
+
// don't change the reference react-window hands to every row → no row re-renders.
|
|
369
|
+
var itemDataByCol = (0, react_1.useMemo)(function () {
|
|
370
|
+
var map = {};
|
|
371
|
+
for (var _i = 0, _a = Object.entries(columns); _i < _a.length; _i++) {
|
|
372
|
+
var _b = _a[_i], colId = _b[0], column = _b[1];
|
|
373
|
+
map[colId] = __assign(__assign({}, rowBaseProps), { items: column.items, colId: colId });
|
|
374
|
+
}
|
|
375
|
+
return map;
|
|
376
|
+
}, [columns, rowBaseProps]);
|
|
362
377
|
var renderColumnDroppable = function (colId, column, columnDragHandleProps, isColCollapsed) { return (react_1.default.createElement(dnd_1.Droppable, { droppableId: colId, key: colId, mode: virtualization ? "virtual" : "standard", renderClone: function (provided, _snapshot, rubric) {
|
|
363
378
|
var _a;
|
|
364
379
|
var item = column.items[rubric.source.index];
|
|
@@ -366,89 +381,89 @@ var KanbanBoard = function (_a) {
|
|
|
366
381
|
return toggleExpand(item.id, colId, rubric.source.index);
|
|
367
382
|
}, isDeletable: canDelete }))));
|
|
368
383
|
} }, function (provided, snapshot) {
|
|
369
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7;
|
|
370
|
-
return (react_1.default.createElement(react_2.Box, __assign({ ref: provided.innerRef }, provided.droppableProps, { width: isColCollapsed ? COLLAPSED_KANBAN_COLUMN_WIDTH : columnWidth, borderRadius: "0.
|
|
384
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10;
|
|
385
|
+
return (react_1.default.createElement(react_2.Box, __assign({ ref: provided.innerRef }, provided.droppableProps, { width: isColCollapsed ? COLLAPSED_KANBAN_COLUMN_WIDTH : columnWidth, borderRadius: "0.75rem", background: snapshot.isDraggingOver
|
|
371
386
|
? (_a = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _a === void 0 ? void 0 : _a[50]
|
|
372
|
-
: (_b = colors === null || colors === void 0 ? void 0 : colors.background) === null || _b === void 0 ? void 0 : _b[100], border: "".concat(snapshot.isDraggingOver
|
|
373
|
-
?
|
|
374
|
-
:
|
|
387
|
+
: (_b = colors === null || colors === void 0 ? void 0 : colors.background) === null || _b === void 0 ? void 0 : _b[100], border: "0.063rem ".concat(snapshot.isDraggingOver ? "dashed" : "solid", " ").concat(snapshot.isDraggingOver
|
|
388
|
+
? (_c = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _c === void 0 ? void 0 : _c[300]
|
|
389
|
+
: (_e = (_d = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _d === void 0 ? void 0 : _d[200]) !== null && _e !== void 0 ? _e : (_f = colors.gray) === null || _f === void 0 ? void 0 : _f[200]), transition: "background 0.15s ease, border-color 0.15s ease, width 0.2s ease", display: "flex", flexDirection: "column", flexShrink: 0, overflow: isColCollapsed ? "visible" : "hidden", height: "".concat(containerHeight - 60, "px"), onMouseEnter: function () { return setHoveredColumn(colId); }, onMouseLeave: function () { return setHoveredColumn(null); } }),
|
|
375
390
|
isColCollapsed ? (react_1.default.createElement(react_2.Flex, { direction: "column", align: "stretch", flex: "1", width: "100%", minH: 0, overflow: "visible", position: "relative" },
|
|
376
|
-
react_1.default.createElement(react_2.Flex, { as: "header", direction: "column", align: "center", flexShrink: 0, width: "100%", py: 3, px: 1, gap: 3, borderTop: "0.25rem solid", borderTopColor: (
|
|
391
|
+
react_1.default.createElement(react_2.Flex, { as: "header", direction: "column", align: "center", flexShrink: 0, width: "100%", py: 3, px: 1, gap: 3, borderTop: "0.25rem solid", borderTopColor: (_g = column.color) !== null && _g !== void 0 ? _g : (_h = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _h === void 0 ? void 0 : _h[500], bg: (_j = colors === null || colors === void 0 ? void 0 : colors.background) === null || _j === void 0 ? void 0 : _j[100], position: "relative", zIndex: 1 },
|
|
377
392
|
enableColumnReorder && columnDragHandleProps ? (react_1.default.createElement(react_2.Flex, __assign({ align: "center", justify: "center", flexShrink: 0, cursor: "grab" }, columnDragHandleProps),
|
|
378
|
-
react_1.default.createElement(react_2.Box, { as: lucide_react_1.GripVertical, size: 14, color: (
|
|
379
|
-
enableColumnCollapse && (react_1.default.createElement(react_2.Flex, { flexShrink: 0, w: "100%", justify: "center", bg: (
|
|
393
|
+
react_1.default.createElement(react_2.Box, { as: lucide_react_1.GripVertical, size: 14, color: (_k = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _k === void 0 ? void 0 : _k[400] }))) : null,
|
|
394
|
+
enableColumnCollapse && (react_1.default.createElement(react_2.Flex, { flexShrink: 0, w: "100%", justify: "center", bg: (_l = colors === null || colors === void 0 ? void 0 : colors.background) === null || _l === void 0 ? void 0 : _l[100], position: "relative", zIndex: 3 },
|
|
380
395
|
react_1.default.createElement(react_2.IconButton, { "aria-label": "Expand column", icon: react_1.default.createElement(lucide_react_1.ChevronRight, { size: 14 }), variant: "ghost", size: "xs", minW: "1.5rem", h: "1.75rem", onClick: function () { return toggleColumnCollapsed(colId); } }))),
|
|
381
|
-
react_1.default.createElement(react_2.Text, { as: "span", fontWeight: "700", fontSize: "0.75rem", color: (
|
|
396
|
+
react_1.default.createElement(react_2.Text, { as: "span", fontWeight: "700", fontSize: "0.75rem", color: (_m = colors === null || colors === void 0 ? void 0 : colors.text) === null || _m === void 0 ? void 0 : _m[700], sx: {
|
|
382
397
|
writingMode: "vertical-rl",
|
|
383
398
|
textOrientation: "mixed",
|
|
384
399
|
}, maxH: "".concat(Math.max(120, containerHeight - 200), "px"), overflow: "hidden", lineHeight: "1.2", title: column.title }, column.title),
|
|
385
|
-
react_1.default.createElement(react_2.Badge, { minW: "1.25rem", h: "1.25rem", borderRadius: "999px", border: "1px solid", borderColor: (
|
|
386
|
-
column.customNode ? (react_1.default.createElement(react_2.Box, { flexShrink: 0, minH: COLLAPSED_CUSTOM_NODE_TOP_RESERVE, w: "100%", bg: (
|
|
387
|
-
column.customNode ? (react_1.default.createElement(react_2.Box, { as: "section", "aria-label": "Column summary", flex: "1", minH: 0, w: "100%", overflow: "visible", py: 2, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "flex-start", bg: (
|
|
400
|
+
react_1.default.createElement(react_2.Badge, { minW: "1.25rem", h: "1.25rem", borderRadius: "999px", border: "1px solid", borderColor: (_o = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _o === void 0 ? void 0 : _o[300], display: "flex", backgroundColor: (_p = colors === null || colors === void 0 ? void 0 : colors.background) === null || _p === void 0 ? void 0 : _p[100], alignItems: "center", justifyContent: "center", color: (_q = colors === null || colors === void 0 ? void 0 : colors.text) === null || _q === void 0 ? void 0 : _q[900], fontWeight: 600, fontSize: "10px" }, (_r = column === null || column === void 0 ? void 0 : column.items) === null || _r === void 0 ? void 0 : _r.length)),
|
|
401
|
+
column.customNode ? (react_1.default.createElement(react_2.Box, { flexShrink: 0, minH: COLLAPSED_CUSTOM_NODE_TOP_RESERVE, w: "100%", bg: (_s = colors === null || colors === void 0 ? void 0 : colors.background) === null || _s === void 0 ? void 0 : _s[100], "aria-hidden": true })) : null,
|
|
402
|
+
column.customNode ? (react_1.default.createElement(react_2.Box, { as: "section", "aria-label": "Column summary", flex: "1", minH: 0, w: "100%", overflow: "visible", py: 2, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "flex-start", bg: (_t = colors === null || colors === void 0 ? void 0 : colors.background) === null || _t === void 0 ? void 0 : _t[100], position: "relative", zIndex: 2 },
|
|
388
403
|
react_1.default.createElement(react_2.Box, { position: "relative", transform: "rotate(90deg)", transformOrigin: "center center", marginTop: '1rem' },
|
|
389
|
-
react_1.default.createElement(react_2.VStack, { align: "stretch", spacing: 1, minW: "max-content", fontSize: "xs", color: (
|
|
390
|
-
react_1.default.createElement(react_2.
|
|
391
|
-
|
|
392
|
-
react_1.default.createElement(react_2.Box, {
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
404
|
+
react_1.default.createElement(react_2.VStack, { align: "stretch", spacing: 1, minW: "max-content", fontSize: "xs", color: (_u = colors === null || colors === void 0 ? void 0 : colors.text) === null || _u === void 0 ? void 0 : _u[600] }, column.customNode())))) : (react_1.default.createElement(react_2.Box, { flex: "1", minH: 0 })))) : (react_1.default.createElement(react_2.Flex, { width: "100%", h: !isColCollapsed && !!((_v = column.customNode) === null || _v === void 0 ? void 0 : _v.call(column)) ? "auto" : "2.75rem", align: !isColCollapsed && !!((_w = column.customNode) === null || _w === void 0 ? void 0 : _w.call(column)) ? "flex-start" : "center", px: 3, py: 2, flexShrink: 0, justifyContent: "space-between", position: "relative", gap: 2, borderBottom: "0.063rem solid ".concat((_y = (_x = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _x === void 0 ? void 0 : _x[100]) !== null && _y !== void 0 ? _y : (_z = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _z === void 0 ? void 0 : _z[100]) },
|
|
405
|
+
react_1.default.createElement(react_2.Flex, { direction: "column", gap: 1, minW: 0, flex: "1" },
|
|
406
|
+
react_1.default.createElement(react_2.Flex, { align: "center", gap: 2, minW: 0 },
|
|
407
|
+
react_1.default.createElement(react_2.Box, { boxSize: "0.625rem", borderRadius: "full", bg: (_0 = column.color) !== null && _0 !== void 0 ? _0 : (_1 = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _1 === void 0 ? void 0 : _1[500], flexShrink: 0 }),
|
|
408
|
+
enableColumnReorder && columnDragHandleProps ? (react_1.default.createElement(react_2.Flex, __assign({ align: "center", justify: "center", flexShrink: 0, cursor: "grab" }, columnDragHandleProps),
|
|
409
|
+
react_1.default.createElement(react_2.Box, { as: lucide_react_1.GripVertical, size: 14, color: (_2 = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _2 === void 0 ? void 0 : _2[400] }))) : null,
|
|
410
|
+
react_1.default.createElement(react_2.Text, { as: "span", fontWeight: "600", fontSize: "0.875rem", color: (_3 = colors === null || colors === void 0 ? void 0 : colors.text) === null || _3 === void 0 ? void 0 : _3[700], noOfLines: 1, minW: 0 },
|
|
411
|
+
react_1.default.createElement(OverflowTooltipText_1.default, { placement: "top" }, column.title))),
|
|
412
|
+
!!((_4 = column.customNode) === null || _4 === void 0 ? void 0 : _4.call(column)) ? (react_1.default.createElement(react_2.Box, { as: "section", "aria-label": "Column summary", width: "100%", flexShrink: 0, fontSize: "xs", color: (_5 = colors === null || colors === void 0 ? void 0 : colors.text) === null || _5 === void 0 ? void 0 : _5[600] }, column.customNode())) : null),
|
|
397
413
|
react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 2 },
|
|
398
|
-
react_1.default.createElement(react_2.Badge, { minW:
|
|
414
|
+
react_1.default.createElement(react_2.Badge, { minW: "1.5rem", h: "1.5rem", px: 2, borderRadius: "999px", backgroundColor: (_6 = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _6 === void 0 ? void 0 : _6[100], display: "flex", alignItems: "center", justifyContent: "center", color: (_7 = colors === null || colors === void 0 ? void 0 : colors.text) === null || _7 === void 0 ? void 0 : _7[700], fontWeight: 600, fontSize: "0.625rem" }, (_8 = column === null || column === void 0 ? void 0 : column.items) === null || _8 === void 0 ? void 0 : _8.length),
|
|
399
415
|
enableColumnCollapse && (react_1.default.createElement(react_2.IconButton, { "aria-label": "Collapse column", icon: react_1.default.createElement(lucide_react_1.ChevronLeft, { size: 14 }), variant: "ghost", size: "xs", minW: "1.5rem", h: "1.75rem", flexShrink: 0, onClick: function () { return toggleColumnCollapsed(colId); } })),
|
|
400
416
|
canDelete &&
|
|
401
417
|
hoveredColumn === colId &&
|
|
402
|
-
column.items.length > 0 && (react_1.default.createElement(react_2.Box, { as: lucide_react_1.Trash2, size: 16, cursor: "pointer", color: (
|
|
418
|
+
column.items.length > 0 && (react_1.default.createElement(react_2.Box, { as: lucide_react_1.Trash2, size: 16, cursor: "pointer", color: (_9 = colors === null || colors === void 0 ? void 0 : colors.text) === null || _9 === void 0 ? void 0 : _9[600], _hover: { color: (_10 = colors === null || colors === void 0 ? void 0 : colors.red) === null || _10 === void 0 ? void 0 : _10[600] }, onClick: function () { return handleColumnDelete(colId); }, transition: "color 0.2s ease", flexShrink: 0 })),
|
|
403
419
|
!(canDelete &&
|
|
404
420
|
hoveredColumn === colId &&
|
|
405
421
|
column.items.length > 0) && react_1.default.createElement(react_2.Box, { width: "16px", height: "16px", flexShrink: 0 })))),
|
|
406
|
-
!isColCollapsed && (react_1.default.createElement(
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
"
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
"
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
"
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
"
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
provided.placeholder)))))));
|
|
422
|
+
!isColCollapsed && (react_1.default.createElement(react_2.Box, { px: 2, flex: "1", overflowY: "auto", width: "100%", sx: {
|
|
423
|
+
overflowY: "auto",
|
|
424
|
+
overflowX: "hidden",
|
|
425
|
+
scrollbarWidth: "thin",
|
|
426
|
+
scrollbarColor: "var(--chakra-colors-gray-300) transparent",
|
|
427
|
+
"&::-webkit-scrollbar": {
|
|
428
|
+
width: "6px !important",
|
|
429
|
+
height: "6px !important",
|
|
430
|
+
},
|
|
431
|
+
"&::-webkit-scrollbar-track": {
|
|
432
|
+
background: "gray.100",
|
|
433
|
+
borderRadius: "3px",
|
|
434
|
+
marginTop: "4px",
|
|
435
|
+
marginBottom: "4px",
|
|
436
|
+
},
|
|
437
|
+
"&::-webkit-scrollbar-thumb": {
|
|
438
|
+
background: "gray.300",
|
|
439
|
+
borderRadius: "3px",
|
|
440
|
+
border: "1px solid",
|
|
441
|
+
borderColor: "gray.100",
|
|
442
|
+
},
|
|
443
|
+
"&::-webkit-scrollbar-thumb:hover": {
|
|
444
|
+
background: "gray.400",
|
|
445
|
+
},
|
|
446
|
+
"&": {
|
|
447
|
+
scrollbarGutter: "stable both-edges",
|
|
448
|
+
},
|
|
449
|
+
cursor: canDrag ? "grab" : "not-allowed",
|
|
450
|
+
} },
|
|
451
|
+
(noItems === null || noItems === void 0 ? void 0 : noItems.isVisible) && column.items.length === 0 && (react_1.default.createElement(NoItemsTemplate, { column: column, noItems: noItems, colors: colors })),
|
|
452
|
+
virtualization ? (react_1.default.createElement(react_window_1.VariableSizeList, { ref: function (el) {
|
|
453
|
+
if (el)
|
|
454
|
+
listRefs.current[colId] = el;
|
|
455
|
+
}, height: containerHeight - 150, itemCount: column.items.length +
|
|
456
|
+
(snapshot.isUsingPlaceholder ? 1 : 0), itemSize: function (index) {
|
|
457
|
+
return getItemSize(index, column.items, colId);
|
|
458
|
+
}, width: "100%", itemData: itemDataByCol[colId] }, KanbanRow)) : (react_1.default.createElement(react_2.Box, null,
|
|
459
|
+
column.items.map(function (account, index) { return (react_1.default.createElement("div", { key: account.id, style: { paddingBottom: KANBAN_CARD_GAP, paddingTop: index === 0 ? KANBAN_LIST_TOP_PAD : 0 } },
|
|
460
|
+
react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, key: account.id, isDragDisabled: !canDrag }, function (dragProvided) {
|
|
461
|
+
var _a;
|
|
462
|
+
return (react_1.default.createElement("div", __assign({ ref: dragProvided.innerRef }, dragProvided.draggableProps, dragProvided.dragHandleProps, { style: dragProvided.draggableProps.style }), (account === null || account === void 0 ? void 0 : account.customNode) ? (_a = account === null || account === void 0 ? void 0 : account.customNode) === null || _a === void 0 ? void 0 : _a.call(account) : (react_1.default.createElement(AccountCard_1.default, { account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[account.id], onToggleExpand: function () {
|
|
463
|
+
return toggleExpand(account.id, colId, index);
|
|
464
|
+
}, isDeletable: canDelete }))));
|
|
465
|
+
}))); }),
|
|
466
|
+
provided.placeholder))))));
|
|
452
467
|
})); };
|
|
453
468
|
if (!canView)
|
|
454
469
|
return null;
|
|
@@ -57,11 +57,11 @@ function NavBar(_a) {
|
|
|
57
57
|
(navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) && (react_1.default.createElement(react_2.Box, __assign({}, iconButtonStyle, { display: "flex", onClick: function () { var _a; return (_a = navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) === null || _a === void 0 ? void 0 : _a.call(navigationBarText); } }),
|
|
58
58
|
react_1.default.createElement(lucide_react_1.CircleArrowLeft, { size: "1.25rem", color: (_c = (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.text) === null || _c === void 0 ? void 0 : _c[500] }))),
|
|
59
59
|
(navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text) && (react_1.default.createElement(react_2.Text, { color: (_e = (_d = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _d === void 0 ? void 0 : _d.secondary) === null || _e === void 0 ? void 0 : _e[500], fontSize: "1.25rem", fontWeight: 600, fontFamily: "open-sans, sans-serif", letterSpacing: "-0.013rem" }, navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text))),
|
|
60
|
-
react_1.default.createElement(react_2.Flex,
|
|
61
|
-
react_1.default.createElement(react_2.Stack, { direction: "row", alignItems: "center", spacing:
|
|
60
|
+
react_1.default.createElement(react_2.Flex, { minW: 0, flexShrink: 1 },
|
|
61
|
+
react_1.default.createElement(react_2.Stack, { direction: "row", alignItems: "center", spacing: 4, minW: 0 },
|
|
62
|
+
moreIcon && (react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", minW: 0 }, moreIcon)),
|
|
62
63
|
react_1.default.createElement(react_2.Menu, null,
|
|
63
|
-
|
|
64
|
-
react_1.default.createElement(react_2.MenuButton, { as: react_2.Button, rounded: "full", variant: "link", cursor: "pointer", minW: 0 },
|
|
64
|
+
react_1.default.createElement(react_2.MenuButton, { as: react_2.Button, rounded: "full", variant: "link", cursor: "pointer", minW: 0, flexShrink: 0 },
|
|
65
65
|
react_1.default.createElement(react_2.Avatar, { size: "sm", name: userName, src: userAvathar })),
|
|
66
66
|
react_1.default.createElement(react_2.MenuList, { alignItems: "center", zIndex: 5, p: 0, py: "0.375rem", bg: theme.colors.backgroundColor.light, border: "1px solid", borderColor: "blackAlpha.100", borderRadius: "0.75rem", boxShadow: "lg", color: "gray.700", overflow: "hidden" },
|
|
67
67
|
react_1.default.createElement(react_2.Box, { display: "flex", flexDirection: "column", maxH: "90vh" },
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { ProfilePhotoViewerProps } from "./ProfilePhotoViewerProps";
|
|
3
|
-
export default function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth, imageAlt, imageObjectFit, imageBorderRadius, editIconSize, editIconPositionRight, editIconPositionBottom, isRound, boxStyle, isEditable, isView, style, handleIsView, fallbackText, }: ProfilePhotoViewerProps): React.JSX.Element;
|
|
3
|
+
export default function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth, imageAlt, imageObjectFit, imageBorderRadius, editIconSize, editIconPositionRight, editIconPositionBottom, isRound, boxStyle, isEditable, isView, style, handleIsView, fallbackText, revealOnHover, }: ProfilePhotoViewerProps): React.JSX.Element;
|
|
@@ -50,10 +50,12 @@ var react_2 = require("@chakra-ui/react");
|
|
|
50
50
|
var lucide_react_1 = require("lucide-react");
|
|
51
51
|
var useCustomTheme_1 = require("../../Theme/useCustomTheme");
|
|
52
52
|
function ProfilePhotoViewer(_a) {
|
|
53
|
-
var
|
|
54
|
-
var
|
|
53
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
|
|
54
|
+
var photoUrl = _a.photoUrl, onPhotoChange = _a.onPhotoChange, _z = _a.imageWidth, imageWidth = _z === void 0 ? "100px" : _z, _0 = _a.imageAlt, imageAlt = _0 === void 0 ? "Profile Photo" : _0, _1 = _a.imageObjectFit, imageObjectFit = _1 === void 0 ? "cover" : _1, _2 = _a.imageBorderRadius, imageBorderRadius = _2 === void 0 ? "full" : _2, _3 = _a.editIconSize, editIconSize = _3 === void 0 ? "sm" : _3, _4 = _a.editIconPositionRight, editIconPositionRight = _4 === void 0 ? "0px" : _4, _5 = _a.editIconPositionBottom, editIconPositionBottom = _5 === void 0 ? "0px" : _5, _6 = _a.isRound, isRound = _6 === void 0 ? true : _6, boxStyle = _a.boxStyle, _7 = _a.isEditable, isEditable = _7 === void 0 ? false : _7, _8 = _a.isView, isView = _8 === void 0 ? false : _8, style = _a.style, handleIsView = _a.handleIsView, fallbackText = _a.fallbackText, _9 = _a.revealOnHover, revealOnHover = _9 === void 0 ? true : _9;
|
|
55
|
+
var _10 = (0, react_1.useState)(photoUrl), photo = _10[0], setPhoto = _10[1];
|
|
55
56
|
var fileInputRef = (0, react_1.useRef)(null);
|
|
56
57
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
58
|
+
var c = (_b = theme.colors) !== null && _b !== void 0 ? _b : {};
|
|
57
59
|
var handlePhotoChange = function (event) {
|
|
58
60
|
var _a;
|
|
59
61
|
if (!isEditable)
|
|
@@ -76,31 +78,47 @@ function ProfilePhotoViewer(_a) {
|
|
|
76
78
|
(_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
|
|
77
79
|
};
|
|
78
80
|
var isPdf = photo === null || photo === void 0 ? void 0 : photo.endsWith(".pdf");
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
81
|
+
var border = (_d = (_c = c.boxborder) === null || _c === void 0 ? void 0 : _c[300]) !== null && _d !== void 0 ? _d : (_e = c.gray) === null || _e === void 0 ? void 0 : _e[200];
|
|
82
|
+
// Shared modern frame for whichever media we render (photo / pdf / fallback).
|
|
83
|
+
var mediaFrame = {
|
|
84
|
+
boxSize: imageWidth,
|
|
85
|
+
borderRadius: imageBorderRadius,
|
|
86
|
+
border: "0.063rem solid ".concat(border),
|
|
87
|
+
boxShadow: (_f = theme.shadows) === null || _f === void 0 ? void 0 : _f.sm,
|
|
88
|
+
};
|
|
89
|
+
var renderMedia = function () {
|
|
90
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
91
|
+
if (photo) {
|
|
92
|
+
return isPdf ? (react_1.default.createElement(react_2.Box, __assign({}, mediaFrame, { bg: (_b = (_a = c.gray) === null || _a === void 0 ? void 0 : _a[100]) !== null && _b !== void 0 ? _b : "gray.100", color: (_c = c.gray) === null || _c === void 0 ? void 0 : _c[500], display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden" }),
|
|
93
|
+
react_1.default.createElement(lucide_react_1.FileText, { size: "45%" }))) : (react_1.default.createElement(react_2.Image, __assign({ src: photo, alt: imageAlt, objectFit: imageObjectFit }, mediaFrame)));
|
|
94
|
+
}
|
|
95
|
+
// Fallback: branded tinted avatar (initials or user glyph).
|
|
96
|
+
return (react_1.default.createElement(react_2.Box, __assign({}, mediaFrame, { display: "flex", alignItems: "center", justifyContent: "center", bg: (_f = (_e = (_d = c.primary) === null || _d === void 0 ? void 0 : _d.opacity) === null || _e === void 0 ? void 0 : _e[16]) !== null && _f !== void 0 ? _f : (_g = c.gray) === null || _g === void 0 ? void 0 : _g[100], color: (_j = (_h = c.primary) === null || _h === void 0 ? void 0 : _h[600]) !== null && _j !== void 0 ? _j : (_k = c.gray) === null || _k === void 0 ? void 0 : _k[500] }), fallbackText ? (react_1.default.createElement(react_2.Text, { fontSize: "1.75rem", fontWeight: 700, lineHeight: "1" }, fallbackText)) : (react_1.default.createElement(lucide_react_1.User, { size: "48%" }))));
|
|
97
|
+
};
|
|
98
|
+
var hasActions = isEditable || isView;
|
|
99
|
+
return (react_1.default.createElement(react_2.Box, { position: "relative", display: "inline-block", style: boxStyle, borderRadius: imageBorderRadius, transition: "box-shadow 0.2s ease", sx: {
|
|
100
|
+
"&:hover .ppv-overlay": { opacity: 1 },
|
|
101
|
+
"&:hover .ppv-actions": { opacity: 1 },
|
|
102
|
+
"&:hover .ppv-media": {
|
|
103
|
+
boxShadow: "0 0 0 0.1875rem ".concat((_j = (_h = (_g = c.primary) === null || _g === void 0 ? void 0 : _g.opacity) === null || _h === void 0 ? void 0 : _h[24]) !== null && _j !== void 0 ? _j : "transparent"),
|
|
82
104
|
},
|
|
83
105
|
} },
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
react_1.default.createElement(react_2.
|
|
87
|
-
react_1.default.createElement(
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
transition: "opacity 0.3s",
|
|
92
|
-
} },
|
|
93
|
-
isEditable && (react_1.default.createElement(react_2.Tooltip, { label: "Edit", "aria-label": "Edit" },
|
|
94
|
-
react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.SquarePen, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleClick, "aria-label": "Edit photo", color: theme.colors.gray[200], style: __assign(__assign({}, style), { transition: "transform 0.3s, box-shadow 0.3s", boxShadow: theme.shadows.md, marginRight: "3px" }), _hover: {
|
|
106
|
+
react_1.default.createElement(react_2.Box, { className: "ppv-media", borderRadius: imageBorderRadius, transition: "box-shadow 0.2s ease" }, renderMedia()),
|
|
107
|
+
hasActions && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
108
|
+
react_1.default.createElement(react_2.Box, { className: "ppv-overlay", position: "absolute", inset: 0, borderRadius: imageBorderRadius, bg: "blackAlpha.300", opacity: 0, transition: "opacity 0.2s ease", pointerEvents: "none" }),
|
|
109
|
+
react_1.default.createElement(react_2.HStack, { className: "ppv-actions", position: "absolute", right: editIconPositionRight, bottom: editIconPositionBottom, transform: "translate(-15%, -15%)", spacing: 1.5, opacity: revealOnHover ? 0 : 1, transition: "opacity 0.2s ease" },
|
|
110
|
+
isEditable && (react_1.default.createElement(react_2.Tooltip, { label: "Edit", "aria-label": "Edit", hasArrow: true },
|
|
111
|
+
react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.SquarePen, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleClick, "aria-label": "Edit photo", bg: (_k = c.primary) === null || _k === void 0 ? void 0 : _k[500], color: (_l = c.white) !== null && _l !== void 0 ? _l : "#fff", border: "0.125rem solid ".concat((_m = c.white) !== null && _m !== void 0 ? _m : "#fff"), boxShadow: (_o = theme.shadows) === null || _o === void 0 ? void 0 : _o.md, style: style, transition: "transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease", _hover: {
|
|
112
|
+
bg: (_p = c.primary) === null || _p === void 0 ? void 0 : _p[600],
|
|
95
113
|
transform: "scale(1.1)",
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
114
|
+
boxShadow: (_q = theme.shadows) === null || _q === void 0 ? void 0 : _q.lg,
|
|
115
|
+
}, _active: { bg: (_r = c.primary) === null || _r === void 0 ? void 0 : _r[700] } }))),
|
|
116
|
+
isView && (react_1.default.createElement(react_2.Tooltip, { label: "View", "aria-label": "View", hasArrow: true },
|
|
117
|
+
react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.Eye, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleIsView, "aria-label": "View photo", bg: (_s = c.white) !== null && _s !== void 0 ? _s : "#fff", color: (_t = c.gray) === null || _t === void 0 ? void 0 : _t[700], border: "0.063rem solid ".concat(border), boxShadow: (_u = theme.shadows) === null || _u === void 0 ? void 0 : _u.md, style: style, transition: "transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease", _hover: {
|
|
118
|
+
bg: (_v = c.gray) === null || _v === void 0 ? void 0 : _v[50],
|
|
119
|
+
color: (_w = c.primary) === null || _w === void 0 ? void 0 : _w[600],
|
|
101
120
|
transform: "scale(1.1)",
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
} })))),
|
|
121
|
+
boxShadow: (_x = theme.shadows) === null || _x === void 0 ? void 0 : _x.lg,
|
|
122
|
+
}, _active: { bg: (_y = c.gray) === null || _y === void 0 ? void 0 : _y[100] } })))),
|
|
105
123
|
isEditable && (react_1.default.createElement(react_2.Input, { type: "file", accept: "image/*", onChange: handlePhotoChange, hidden: true, ref: fileInputRef }))))));
|
|
106
124
|
}
|
|
@@ -15,4 +15,6 @@ export type ProfilePhotoViewerProps = {
|
|
|
15
15
|
style?: React.CSSProperties;
|
|
16
16
|
handleIsView?: () => void;
|
|
17
17
|
fallbackText?: string;
|
|
18
|
+
/** When true, the edit/view icons are hidden and revealed on hover. Defaults to false (always visible). */
|
|
19
|
+
revealOnHover?: boolean;
|
|
18
20
|
};
|