pixelize-design-library 2.2.28 → 2.2.29
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/ProfileCard/ProfileCard.js +1 -1
- package/dist/Components/Table/Components/Pagination.js +11 -9
- package/dist/Components/Table/Components/TableActions.js +10 -7
- package/dist/Components/Table/Table.js +19 -1
- package/dist/Components/Timeline/Timeline.js +110 -50
- package/package.json +1 -1
|
@@ -45,7 +45,7 @@ function ProfileCard(_a) {
|
|
|
45
45
|
? __assign(__assign({}, CardStyle), { borderTop: "2px solid #3182CE" }) : __assign({}, CardStyle);
|
|
46
46
|
return (react_1.default.createElement(react_2.Card, { maxW: maxW, align: align, variant: variant, direction: direction, justify: justify, size: size, overflow: overflow, colorScheme: color, style: StylesWithBorder },
|
|
47
47
|
header && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
48
|
-
react_1.default.createElement(react_2.CardHeader, { sx: __assign(__assign({}, CardHeaderStyle), { fontWeight: "bold" }) }, header),
|
|
48
|
+
react_1.default.createElement(react_2.CardHeader, { sx: __assign(__assign({}, CardHeaderStyle), { fontWeight: "bold" }), py: 15 }, header),
|
|
49
49
|
react_1.default.createElement(react_2.Divider, { style: {
|
|
50
50
|
borderColor: dividercolor,
|
|
51
51
|
borderWidth: dividersize,
|
|
@@ -10,23 +10,25 @@ var lucide_react_1 = require("lucide-react");
|
|
|
10
10
|
var Pagination = function (_a) {
|
|
11
11
|
var paginationText = _a.paginationText, handlePageSizeChange = _a.handlePageSizeChange, rowsPerPage = _a.rowsPerPage, currentPage = _a.currentPage, pages = _a.pages, setCurrentPage = _a.setCurrentPage, dataLength = _a.dataLength, isServerPagination = _a.isServerPagination;
|
|
12
12
|
var pageSizeOptions = (0, table_1.pageSizeCalculation)(dataLength);
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
// const isLeftDisabled = currentPage === 0;
|
|
14
|
+
// const isRightDisabled = currentPage >= pages - 1;
|
|
15
|
+
var isLeftDisabled = dataLength === 0 || currentPage === 0;
|
|
16
|
+
var isRightDisabled = dataLength === 0 || currentPage >= pages - 1;
|
|
15
17
|
return (react_1.default.createElement(react_2.Flex, { justify: "flex-end", align: "center" },
|
|
16
|
-
!isServerPagination && (react_1.default.createElement(react_2.Select, { onChange: handlePageSizeChange, value: rowsPerPage, size: "xs", borderRadius: 3, width: 20 },
|
|
18
|
+
!isServerPagination && (react_1.default.createElement(react_2.Select, { onChange: handlePageSizeChange, value: rowsPerPage, size: "xs", borderRadius: 3, width: 20, isDisabled: dataLength === 0 },
|
|
17
19
|
dataLength < 100 ? react_1.default.createElement("option", { value: 0 }) : null,
|
|
18
20
|
pageSizeOptions.map(function (size, index) { return (react_1.default.createElement("option", { key: index, value: size }, size)); }))),
|
|
19
|
-
react_1.default.createElement(react_2.Flex, null,
|
|
20
|
-
react_1.default.createElement(react_2.IconButton, { "aria-label": "
|
|
21
|
+
dataLength > 0 && (react_1.default.createElement(react_2.Flex, null,
|
|
22
|
+
react_1.default.createElement(react_2.IconButton, { "aria-label": "first-page", color: isLeftDisabled ? "gray" : "black", rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: function () { return setCurrentPage(0); } },
|
|
21
23
|
react_1.default.createElement(lucide_react_1.ChevronsLeft, null)),
|
|
22
|
-
react_1.default.createElement(react_2.IconButton, { "aria-label": "
|
|
24
|
+
react_1.default.createElement(react_2.IconButton, { "aria-label": "previous-page", color: isLeftDisabled ? "gray" : "black", rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: function () { return currentPage > 0 && setCurrentPage(currentPage - 1); } },
|
|
23
25
|
react_1.default.createElement(lucide_react_1.ChevronLeft, null)),
|
|
24
26
|
react_1.default.createElement(react_2.Text, { mt: 3, fontSize: 12 }, paginationText),
|
|
25
|
-
react_1.default.createElement(react_2.IconButton, { "aria-label": "
|
|
27
|
+
react_1.default.createElement(react_2.IconButton, { "aria-label": "next-page", color: isRightDisabled ? "gray" : "black", rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: function () {
|
|
26
28
|
return currentPage < pages - 1 && setCurrentPage(currentPage + 1);
|
|
27
29
|
} },
|
|
28
30
|
react_1.default.createElement(lucide_react_1.ChevronRight, null)),
|
|
29
|
-
react_1.default.createElement(react_2.IconButton, { "aria-label": "
|
|
30
|
-
react_1.default.createElement(lucide_react_1.ChevronsRight, null)))));
|
|
31
|
+
react_1.default.createElement(react_2.IconButton, { "aria-label": "last-page", color: isRightDisabled ? "gray" : "black", rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: function () { return setCurrentPage(pages - 1); } },
|
|
32
|
+
react_1.default.createElement(lucide_react_1.ChevronsRight, null))))));
|
|
31
33
|
};
|
|
32
34
|
exports.default = Pagination;
|
|
@@ -26,10 +26,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
26
26
|
var react_1 = __importStar(require("react"));
|
|
27
27
|
var react_2 = require("@chakra-ui/react");
|
|
28
28
|
var lucide_react_1 = require("lucide-react");
|
|
29
|
+
var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
|
|
29
30
|
var TableActions = function (_a) {
|
|
31
|
+
var _b, _c;
|
|
30
32
|
var row = _a.row;
|
|
31
|
-
var
|
|
33
|
+
var _d = (0, react_1.useState)(false), isOpen = _d[0], setIsOpen = _d[1];
|
|
32
34
|
var ref = (0, react_1.useRef)(null);
|
|
35
|
+
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
33
36
|
// Listen for "close-all-popovers"
|
|
34
37
|
(0, react_1.useEffect)(function () {
|
|
35
38
|
var handler = function () { return setIsOpen(false); };
|
|
@@ -64,24 +67,24 @@ var TableActions = function (_a) {
|
|
|
64
67
|
react_1.default.createElement(react_2.PopoverTrigger, null,
|
|
65
68
|
react_1.default.createElement(react_2.IconButton, { "aria-label": "Actions", color: "black", icon: react_1.default.createElement(lucide_react_1.EllipsisVertical, { size: 17 }), size: "sm", p: 0, variant: "ghost", _hover: { transform: "scale(1.2)" }, onClick: function () { return (isOpen ? handleClose() : handleOpen()); } })),
|
|
66
69
|
react_1.default.createElement(react_2.Portal, null,
|
|
67
|
-
react_1.default.createElement(react_2.PopoverContent, { w: "auto", minW: "
|
|
68
|
-
react_1.default.createElement(react_2.PopoverBody,
|
|
69
|
-
react_1.default.createElement(react_2.VStack, { align: "stretch", spacing: 1 },
|
|
70
|
-
row.onLink && (react_1.default.createElement(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", gap: 2, onClick: function () {
|
|
70
|
+
react_1.default.createElement(react_2.PopoverContent, { w: "auto", minW: "100px", boxShadow: "lg", p: 0, zIndex: 999 },
|
|
71
|
+
react_1.default.createElement(react_2.PopoverBody, { p: 0, m: 0 },
|
|
72
|
+
react_1.default.createElement(react_2.VStack, { align: "stretch", spacing: 1, p: 0, m: 0 },
|
|
73
|
+
row.onLink && (react_1.default.createElement(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", borderBottom: "1px solid ".concat((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.border[500]), borderRadius: 0, gap: 2, onClick: function () {
|
|
71
74
|
var _a;
|
|
72
75
|
(_a = row.onLink) === null || _a === void 0 ? void 0 : _a.call(row, row);
|
|
73
76
|
// handleClose();
|
|
74
77
|
} },
|
|
75
78
|
react_1.default.createElement(lucide_react_1.ExternalLink, { size: 17 }),
|
|
76
79
|
" View")),
|
|
77
|
-
row.onEdit && (react_1.default.createElement(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", gap: 2, onClick: function () {
|
|
80
|
+
row.onEdit && (react_1.default.createElement(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", gap: 2, borderBottom: "1px solid ".concat((_c = theme.colors) === null || _c === void 0 ? void 0 : _c.border[500]), borderRadius: 0, onClick: function () {
|
|
78
81
|
var _a;
|
|
79
82
|
(_a = row.onEdit) === null || _a === void 0 ? void 0 : _a.call(row, row);
|
|
80
83
|
// handleClose();
|
|
81
84
|
} },
|
|
82
85
|
react_1.default.createElement(lucide_react_1.Pencil, { size: 17 }),
|
|
83
86
|
" Edit")),
|
|
84
|
-
row.onDelete && (react_1.default.createElement(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", colorScheme: "red", gap: 2, onClick: function () {
|
|
87
|
+
row.onDelete && (react_1.default.createElement(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", colorScheme: "red", gap: 2, borderRadius: 0, onClick: function () {
|
|
85
88
|
var _a;
|
|
86
89
|
(_a = row.onDelete) === null || _a === void 0 ? void 0 : _a.call(row, row);
|
|
87
90
|
// handleClose();
|
|
@@ -107,7 +107,25 @@ function Table(_a) {
|
|
|
107
107
|
react_1.default.createElement(HeaderActions_1.default, { actions: headerActions, selections: selection }))) : null,
|
|
108
108
|
(isPagination || isServerPagination) && (react_1.default.createElement(react_2.Box, { ml: "auto" },
|
|
109
109
|
react_1.default.createElement(Pagination_1.default, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, isVisiblity: true })))),
|
|
110
|
-
react_1.default.createElement(react_2.TableContainer, { maxH: 500, overflowY: "auto"
|
|
110
|
+
react_1.default.createElement(react_2.TableContainer, { maxH: 500, overflowY: "auto", sx: {
|
|
111
|
+
'&::-webkit-scrollbar': {
|
|
112
|
+
width: '6px',
|
|
113
|
+
height: '6px',
|
|
114
|
+
},
|
|
115
|
+
'&::-webkit-scrollbar-track': {
|
|
116
|
+
background: theme.colors.gray[100],
|
|
117
|
+
borderRadius: '3px',
|
|
118
|
+
},
|
|
119
|
+
'&::-webkit-scrollbar-thumb': {
|
|
120
|
+
background: theme.colors.gray[400],
|
|
121
|
+
borderRadius: '3px',
|
|
122
|
+
},
|
|
123
|
+
'&::-webkit-scrollbar-thumb:hover': {
|
|
124
|
+
background: theme.colors.gray[500],
|
|
125
|
+
},
|
|
126
|
+
scrollbarWidth: 'thin',
|
|
127
|
+
scrollbarColor: "".concat(theme.colors.gray[400], " ").concat(theme.colors.gray[100]),
|
|
128
|
+
} },
|
|
111
129
|
react_1.default.createElement(react_3.Table, { variant: "simple", size: "sm", overflowX: "scroll", minW: "100%", className: "table_wrapper", sx: {
|
|
112
130
|
width: "100%",
|
|
113
131
|
borderCollapse: "collapse",
|
|
@@ -9,13 +9,38 @@ var lucide_react_1 = require("lucide-react");
|
|
|
9
9
|
var useCustomTheme_1 = require("../../Theme/useCustomTheme");
|
|
10
10
|
var functions_1 = require("../../Utils/functions");
|
|
11
11
|
var Timeline = function (_a) {
|
|
12
|
+
var _b, _c, _d, _e;
|
|
12
13
|
var timelineEvents = _a.timelineEvents;
|
|
13
14
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
15
|
+
var isMobile = (0, react_2.useBreakpointValue)({ base: true, md: false });
|
|
14
16
|
var formatTimestamp = function (timestamp, type) {
|
|
15
|
-
var parsedTimestamp
|
|
17
|
+
var parsedTimestamp;
|
|
18
|
+
if (typeof timestamp === 'string' && !timestamp.match(/^\d+$/)) {
|
|
19
|
+
var date_1 = new Date(timestamp);
|
|
20
|
+
if (!isNaN(date_1.getTime())) {
|
|
21
|
+
if (type === "date") {
|
|
22
|
+
return date_1.toLocaleDateString("en-US", {
|
|
23
|
+
month: "long",
|
|
24
|
+
day: "numeric",
|
|
25
|
+
year: "numeric",
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
else if (type === "time") {
|
|
29
|
+
return date_1.toLocaleTimeString("en-US", {
|
|
30
|
+
hour: "numeric",
|
|
31
|
+
minute: "2-digit",
|
|
32
|
+
hour12: true,
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
return date_1.toLocaleString();
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
parsedTimestamp = parseInt(timestamp, 10);
|
|
16
39
|
var date = new Date(parsedTimestamp);
|
|
17
|
-
if (isNaN(date.getTime()))
|
|
40
|
+
if (isNaN(date.getTime())) {
|
|
41
|
+
console.warn("Invalid timestamp:", timestamp);
|
|
18
42
|
return "Invalid Date";
|
|
43
|
+
}
|
|
19
44
|
if (type === "date") {
|
|
20
45
|
return date.toLocaleDateString("en-US", {
|
|
21
46
|
month: "long",
|
|
@@ -24,9 +49,7 @@ var Timeline = function (_a) {
|
|
|
24
49
|
});
|
|
25
50
|
}
|
|
26
51
|
else if (type === "time") {
|
|
27
|
-
|
|
28
|
-
var istDate = new Date(date.getTime() + istOffset);
|
|
29
|
-
return istDate.toLocaleTimeString("en-US", {
|
|
52
|
+
return date.toLocaleTimeString("en-US", {
|
|
30
53
|
hour: "numeric",
|
|
31
54
|
minute: "2-digit",
|
|
32
55
|
hour12: true,
|
|
@@ -37,74 +60,111 @@ var Timeline = function (_a) {
|
|
|
37
60
|
var getIcon = function (event) {
|
|
38
61
|
switch (event.action_from) {
|
|
39
62
|
case "Accounts":
|
|
40
|
-
return react_1.default.createElement(lucide_react_1.IndianRupee, { size: 17 });
|
|
63
|
+
return react_1.default.createElement(lucide_react_1.IndianRupee, { size: isMobile ? 14 : 17 });
|
|
41
64
|
case "Notes":
|
|
42
|
-
return react_1.default.createElement(lucide_react_1.FileText, { size: 17 });
|
|
65
|
+
return react_1.default.createElement(lucide_react_1.FileText, { size: isMobile ? 14 : 17 });
|
|
43
66
|
default:
|
|
44
|
-
return react_1.default.createElement(lucide_react_1.Volleyball, { size: 17 });
|
|
67
|
+
return react_1.default.createElement(lucide_react_1.Volleyball, { size: isMobile ? 14 : 17 });
|
|
45
68
|
}
|
|
46
69
|
};
|
|
47
70
|
var groupEventsByDate = function (events) {
|
|
48
71
|
return events.reduce(function (groups, event) {
|
|
49
72
|
var date = formatTimestamp(event.created_at, "date");
|
|
50
|
-
if (
|
|
51
|
-
groups[date]
|
|
52
|
-
|
|
73
|
+
if (date !== "Invalid Date") {
|
|
74
|
+
if (!groups[date])
|
|
75
|
+
groups[date] = [];
|
|
76
|
+
groups[date].push(event);
|
|
77
|
+
}
|
|
53
78
|
return groups;
|
|
54
79
|
}, {});
|
|
55
80
|
};
|
|
56
81
|
var groupedEvents = groupEventsByDate(timelineEvents);
|
|
57
82
|
var formatChanges = function (changes) {
|
|
58
|
-
if (changes === null)
|
|
83
|
+
if (!changes || changes === "null")
|
|
59
84
|
return "No Changes";
|
|
60
|
-
|
|
61
|
-
.
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
if (changeRecord.original === null || changeRecord.original === undefined) {
|
|
65
|
-
return "".concat(key, " changed from null to ").concat(changeRecord.updated);
|
|
85
|
+
try {
|
|
86
|
+
var parsedChanges = JSON.parse(changes);
|
|
87
|
+
if (typeof parsedChanges !== 'object' || parsedChanges === null) {
|
|
88
|
+
return "No Changes";
|
|
66
89
|
}
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
90
|
+
return Object.entries(parsedChanges)
|
|
91
|
+
.map(function (_a) {
|
|
92
|
+
var key = _a[0], value = _a[1];
|
|
93
|
+
var changeRecord = value;
|
|
94
|
+
if (changeRecord.original === null || changeRecord.original === undefined) {
|
|
95
|
+
return "".concat(key, " changed from null to ").concat(changeRecord.updated);
|
|
96
|
+
}
|
|
97
|
+
else {
|
|
98
|
+
return "".concat(key, " updated from ").concat(changeRecord.original, " to ").concat(changeRecord.updated);
|
|
99
|
+
}
|
|
100
|
+
})
|
|
101
|
+
.join("\n");
|
|
102
|
+
}
|
|
103
|
+
catch (error) {
|
|
104
|
+
console.error("Error parsing changes:", error);
|
|
105
|
+
return "Error parsing changes";
|
|
106
|
+
}
|
|
72
107
|
};
|
|
73
|
-
var isMobile = (0, react_2.useBreakpointValue)({ base: true, md: false });
|
|
74
108
|
var getEventBgColor = function (title) {
|
|
109
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
75
110
|
switch (title.toLowerCase()) {
|
|
76
111
|
case "created":
|
|
77
|
-
return theme.colors.green[50];
|
|
112
|
+
return ((_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.green) === null || _b === void 0 ? void 0 : _b[50]) || "#f0fff4";
|
|
78
113
|
case "updated":
|
|
79
|
-
return theme.colors.yellow[50];
|
|
114
|
+
return ((_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.yellow) === null || _d === void 0 ? void 0 : _d[50]) || "#fffbeb";
|
|
80
115
|
case "delete":
|
|
81
|
-
return theme.colors.red[50];
|
|
116
|
+
return ((_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.red) === null || _f === void 0 ? void 0 : _f[50]) || "#fff5f5";
|
|
82
117
|
default:
|
|
83
|
-
return theme.colors.white;
|
|
118
|
+
return ((_g = theme.colors) === null || _g === void 0 ? void 0 : _g.white) || "#ffffff";
|
|
84
119
|
}
|
|
85
120
|
};
|
|
86
|
-
|
|
87
|
-
react_1.default.createElement(react_2.Box, {
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
react_1.default.createElement(react_2.
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
121
|
+
if (!timelineEvents || timelineEvents.length === 0) {
|
|
122
|
+
return (react_1.default.createElement(react_2.Box, { textAlign: "center", py: 8, color: (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray) === null || _c === void 0 ? void 0 : _c[500] },
|
|
123
|
+
react_1.default.createElement(react_2.Text, null, "No timeline events to display")));
|
|
124
|
+
}
|
|
125
|
+
return (react_1.default.createElement(react_2.Box, { position: "relative", px: { base: 3, md: 6 }, maxW: { base: "100%", md: "50rem" }, mx: "auto" },
|
|
126
|
+
react_1.default.createElement(react_2.Box, { position: "absolute", left: { base: "1.5rem", md: "50%" }, top: 0, bottom: 0, w: "0.125rem", bg: ((_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray) === null || _e === void 0 ? void 0 : _e[300]) || "#e2e8f0", transform: { md: "translateX(-50%)" } }),
|
|
127
|
+
Object.keys(groupedEvents).map(function (date) {
|
|
128
|
+
var _a, _b, _c, _d, _e;
|
|
129
|
+
return (react_1.default.createElement(react_2.Box, { key: date, mb: 4 },
|
|
130
|
+
react_1.default.createElement(react_2.Flex, { justify: "center", mb: 4 },
|
|
131
|
+
react_1.default.createElement(react_2.Box, { fontSize: { base: "0.875rem", md: "1rem" }, fontWeight: "400", color: ((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.black) || "#000000", bg: ((_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray) === null || _c === void 0 ? void 0 : _c[50]) || "#f7fafc", border: "0.063rem solid ".concat(((_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray) === null || _e === void 0 ? void 0 : _e[300]) || "#e2e8f0"), borderRadius: "0.313rem", px: { base: 2, md: 6 }, py: 1, textAlign: "center", zIndex: 1 }, date)),
|
|
132
|
+
groupedEvents[date].map(function (event, index) {
|
|
133
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
|
|
134
|
+
var isLeft = index % 2 === 0;
|
|
135
|
+
return (react_1.default.createElement(react_2.Box, { key: "".concat(date, "-").concat(index), mb: 4, position: "relative" }, isMobile ? (react_1.default.createElement(react_2.Flex, { align: "flex-start", gap: 3 },
|
|
136
|
+
react_1.default.createElement(react_2.Box, { w: "1.5rem", h: "1.5rem", bg: ((_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray) === null || _b === void 0 ? void 0 : _b[50]) || "#f7fafc", borderRadius: "full", border: "0.063rem solid ".concat(((_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray) === null || _d === void 0 ? void 0 : _d[300]) || "#e2e8f0"), display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, mt: 0.5 }, getIcon(event)),
|
|
137
|
+
react_1.default.createElement(react_2.Box, { flex: "1" },
|
|
138
|
+
react_1.default.createElement(react_2.Flex, { align: "center", gap: 2, mb: 1 },
|
|
139
|
+
react_1.default.createElement(react_2.Text, { fontSize: "0.75rem", color: ((_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.gray) === null || _f === void 0 ? void 0 : _f[500]) || "#718096", minW: "3.5rem" }, formatTimestamp(event.created_at, "time")),
|
|
140
|
+
react_1.default.createElement(react_2.Text, { fontSize: "0.75rem", fontWeight: "medium", color: ((_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.gray) === null || _h === void 0 ? void 0 : _h[700]) || "#2d3748" },
|
|
141
|
+
event.action_from,
|
|
142
|
+
" ",
|
|
143
|
+
event.title),
|
|
144
|
+
react_1.default.createElement(react_2.Tooltip, { label: formatChanges(event.changes), placement: "top", hasArrow: true },
|
|
145
|
+
react_1.default.createElement(react_2.Box, { cursor: "pointer" },
|
|
146
|
+
react_1.default.createElement(lucide_react_1.Info, { size: 12 })))),
|
|
147
|
+
react_1.default.createElement(react_2.Text, { fontSize: "0.7rem", color: ((_k = (_j = theme.colors) === null || _j === void 0 ? void 0 : _j.gray) === null || _k === void 0 ? void 0 : _k[500]) || "#718096" },
|
|
148
|
+
"by ",
|
|
149
|
+
(0, functions_1.toWords)(event.action_by))))) : (
|
|
150
|
+
// Desktop Layout
|
|
151
|
+
react_1.default.createElement(react_2.Flex, { justify: isLeft ? "flex-start" : "flex-end", align: "flex-start", position: "relative" },
|
|
152
|
+
react_1.default.createElement(react_2.Box, { position: "absolute", left: isLeft ? "auto" : "calc(50% + 0.938rem)", right: isLeft ? "calc(50% + 0.938rem)" : "auto", top: "0.938rem", width: isLeft ? "calc(50% - 4rem)" : "calc(50% - 4rem)", height: "0.125rem", bg: ((_m = (_l = theme.colors) === null || _l === void 0 ? void 0 : _l.gray) === null || _m === void 0 ? void 0 : _m[300]) || "#e2e8f0", zIndex: 0 }),
|
|
153
|
+
react_1.default.createElement(react_2.Box, { position: "absolute", left: "50%", transform: "translateX(-50%)", w: "1.875rem", h: "1.875rem", bg: ((_p = (_o = theme.colors) === null || _o === void 0 ? void 0 : _o.gray) === null || _p === void 0 ? void 0 : _p[50]) || "#f7fafc", borderRadius: "full", border: "0.063rem solid ".concat(((_r = (_q = theme.colors) === null || _q === void 0 ? void 0 : _q.gray) === null || _r === void 0 ? void 0 : _r[300]) || "#e2e8f0"), display: "flex", alignItems: "center", justifyContent: "center", zIndex: 2 }, getIcon(event)),
|
|
154
|
+
react_1.default.createElement(react_2.Box, { bg: getEventBgColor(event.title), border: "0.063rem solid ".concat(((_t = (_s = theme.colors) === null || _s === void 0 ? void 0 : _s.gray) === null || _t === void 0 ? void 0 : _t[300]) || "#e2e8f0"), borderRadius: "0.5rem", px: 4, py: 2, maxW: "16rem", boxShadow: "sm", zIndex: 1, ml: isLeft ? 0 : "50%", mr: isLeft ? "50%" : 0, width: "calc(50% - 2rem)", position: "relative" },
|
|
155
|
+
react_1.default.createElement(react_2.Flex, { align: "center", justify: "space-between", mb: 1 },
|
|
156
|
+
react_1.default.createElement(react_2.Text, { fontSize: "0.875rem", fontWeight: "medium" },
|
|
157
|
+
event.action_from,
|
|
158
|
+
" ",
|
|
159
|
+
event.title),
|
|
101
160
|
react_1.default.createElement(react_2.Tooltip, { label: formatChanges(event.changes), placement: "top", hasArrow: true },
|
|
102
|
-
react_1.default.createElement(react_2.Box, { ml: 1 },
|
|
103
|
-
react_1.default.createElement(lucide_react_1.Info, { size:
|
|
104
|
-
react_1.default.createElement(react_2.Text, {
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
161
|
+
react_1.default.createElement(react_2.Box, { ml: 1, cursor: "pointer" },
|
|
162
|
+
react_1.default.createElement(lucide_react_1.Info, { size: 14 })))),
|
|
163
|
+
react_1.default.createElement(react_2.Text, { fontSize: "0.75rem", color: ((_v = (_u = theme.colors) === null || _u === void 0 ? void 0 : _u.gray) === null || _v === void 0 ? void 0 : _v[500]) || "#718096" },
|
|
164
|
+
"by ",
|
|
165
|
+
(0, functions_1.toWords)(event.action_by)),
|
|
166
|
+
react_1.default.createElement(react_2.Text, { fontSize: "0.75rem", color: ((_x = (_w = theme.colors) === null || _w === void 0 ? void 0 : _w.gray) === null || _x === void 0 ? void 0 : _x[500]) || "#718096" }, formatTimestamp(event.created_at, "time")))))));
|
|
167
|
+
})));
|
|
168
|
+
})));
|
|
109
169
|
};
|
|
110
170
|
exports.default = Timeline;
|