@megha-ui/react 1.2.799 → 1.2.801
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.
|
@@ -35,6 +35,7 @@ import { TbAntennaBarsOff, TbCalculator, TbCalculatorFilled, TbCalculatorOff, }
|
|
|
35
35
|
import { TbCopy, TbCopyOff } from "react-icons/tb";
|
|
36
36
|
import { formatValue } from "../../services/commonService";
|
|
37
37
|
import NewGridHeader from "./utils/newGridHeader";
|
|
38
|
+
import NewGridRow from "./utils/newGridRow";
|
|
38
39
|
const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable = true, paginate, rowsPerPageOptions = [10, 20, 50, 100], defaultRowsPerPage = 100, defaultColumnsPerView = 200, widthMode = "custom", bulkSelect = false, cellBorder = false, rowHeight = "3rem", onRowClick, rowCount = false, rowBorder = true, showMenu = false, search = false, defaultSearchOperation = "contains", gridBorder = false, isLoading = false, rowTopBorder, rowBottomBorder, rowLeftBorder, rowRightBorder, headerBackground = "var(--row-header-bg)", headerTopBorder = "none", headerBottomBorder = "none", SettingIcon, ExportIcon, ignoredExportItems = ["action", "actions"], borderColor = "#dbdfe9", updateColumns, showHideAvailable = false, columnSearchOutside = false, multiSorting = false, exportAvailable = false, exportableFileName = "", groupBy, updateGroupBy, rowKey = "id", hlBorderColor = "black", selectedRow, selectedRowStyle = {
|
|
39
40
|
borderLeft: "0.5rem solid #d9d9d9",
|
|
40
41
|
}, defaultSort, noKeyEvents = true, customOperation, hasCustomOperation, globalSearch, headerDropdownIndex, draggable = false, resizable = false, updateGridData, widthUnits, checkboxWrapper, ignoreHugContent = false, isSummarise = false, isHideDups = false, isMultipleChips = false, fullScreenAvailable = true, defaultGroupOpen, alternateRowColor = true, activeCalculateColor = "#2377BA", calculatetextColor = "#fff", actionsKey = "actions", ignoreClickKeys = "", saveAsNewView = false, handleSaveAsView, saveAsViewIcon, filterData, chipColor = "#ccc", withAscii = false, propSummariseKeys, SummariseIcon, summarizeColor = "black", isExpandable = false, expandedRow, extraRow, selectedCheckBox, setSelectedCheckbox, ignoreRowSelect, setOpenedRows, openedRows, getLoadingState, globalSearchOpen = false, updateFixedFilterValues = (fixedFilterValues) => {
|
|
@@ -1595,7 +1596,15 @@ withCard = false, cardClassName, cardHeader, title, headerLeft, headerRight, sub
|
|
|
1595
1596
|
: [..._gridGroupBy.split(",").filter((item) => item), value].join(",");
|
|
1596
1597
|
setGridGroupBy(_gridGroupBy);
|
|
1597
1598
|
updateGroupBy && updateGroupBy(_gridGroupBy);
|
|
1598
|
-
}, headerDropdownIndex: headerDropdownIndex, updateGridColumns: updateGridColumns, setGridColumns: setGridColumns, widthUnits: widthUnits, gridData: filteredData, checkboxWrapper: checkboxWrapper, onFilter: onFilter, setUniqueSearch: setUniqueSearch, uniqueSearch: uniqueSearch, hugColumnWidths: columnWidths, menuVisible: menuVisible, setMenuVisible: setMenuVisible, dropdownVisible: dropdownVisible, actionsKey: actionsKey, setDropdownVisible: setDropdownVisible, columnSearchOutside: columnSearchOutside, locale: locale, formatOptions: formatOptions })
|
|
1599
|
+
}, headerDropdownIndex: headerDropdownIndex, updateGridColumns: updateGridColumns, setGridColumns: setGridColumns, widthUnits: widthUnits, gridData: filteredData, checkboxWrapper: checkboxWrapper, onFilter: onFilter, setUniqueSearch: setUniqueSearch, uniqueSearch: uniqueSearch, hugColumnWidths: columnWidths, menuVisible: menuVisible, setMenuVisible: setMenuVisible, dropdownVisible: dropdownVisible, actionsKey: actionsKey, setDropdownVisible: setDropdownVisible, columnSearchOutside: columnSearchOutside, locale: locale, formatOptions: formatOptions }), tableData.map((item, index) => {
|
|
1600
|
+
var _a, _b, _c, _d, _e, _f;
|
|
1601
|
+
if (paginate) {
|
|
1602
|
+
return (_jsx(NewGridRow, { item: item, index: index, rowStyle: Object.assign(Object.assign({}, rowStyle), (selectedRow === ((_a = item.id) === null || _a === void 0 ? void 0 : _a.value) ? selectedRowStyle : {})), handleDragStart: handleDragStart, handleDragOver: handleDragOver, handleDrop: handleDrop, draggable: draggable, cellStyle: cellStyle, rowHeight: rowHeight, alternateRowColor: alternateRowColor, bulkSelect: bulkSelect, selectedRows: selectedRows ? selectedRows : new Set([""]), ignoreRowSelect: ignoreRowSelect ? ignoreRowSelect : new Set([""]), toggleRowSelection: toggleRowSelection, columns: gridColumns, widthMode: widthMode, hasVerticalScroll: hasVerticalScroll, onRowClick: onRowClick, loading: isLoading, groupBy: gridGroupBy, rowKey: rowKey, rowIndex: rowIndex, columnIndex: columnIndex, hlBorderColor: hlBorderColor, hugColumnWidths: columnWidths, hugColumnHeights: columnHeights, expandedRow: expandedRow, isExpandable: isExpandable, checkboxWrapper: checkboxWrapper, locale: locale, formatOptions: formatOptions, ignoreClickKeys: ignoreClickKeys, actionsKey: actionsKey }, String((_c = (_b = item.id) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : index)));
|
|
1603
|
+
}
|
|
1604
|
+
else if (index >= startIndex && index <= endIndex) {
|
|
1605
|
+
return (_jsx(NewGridRow, { item: item, index: index, rowStyle: Object.assign(Object.assign({}, rowStyle), (selectedRow === ((_d = item.id) === null || _d === void 0 ? void 0 : _d.value) ? selectedRowStyle : {})), handleDragStart: handleDragStart, handleDragOver: handleDragOver, handleDrop: handleDrop, draggable: draggable, cellStyle: cellStyle, rowHeight: rowHeight, alternateRowColor: alternateRowColor, bulkSelect: bulkSelect, selectedRows: selectedRows ? selectedRows : new Set([""]), ignoreRowSelect: ignoreRowSelect ? ignoreRowSelect : new Set([""]), toggleRowSelection: toggleRowSelection, columns: gridColumns, widthMode: widthMode, hasVerticalScroll: hasVerticalScroll, onRowClick: onRowClick, loading: isLoading, groupBy: gridGroupBy, rowKey: rowKey, rowIndex: rowIndex, columnIndex: columnIndex, hlBorderColor: hlBorderColor, hugColumnWidths: columnWidths, hugColumnHeights: columnHeights, expandedRow: expandedRow, isExpandable: isExpandable, checkboxWrapper: checkboxWrapper, locale: locale, formatOptions: formatOptions, ignoreClickKeys: ignoreClickKeys, actionsKey: actionsKey }, String((_f = (_e = item.id) === null || _e === void 0 ? void 0 : _e.value) !== null && _f !== void 0 ? _f : index)));
|
|
1606
|
+
}
|
|
1607
|
+
})] }), paginate && gridGroupBy === "" && (_jsxs("div", { id: "pagination", style: {
|
|
1599
1608
|
display: "flex",
|
|
1600
1609
|
minHeight: "2rem",
|
|
1601
1610
|
alignItems: "center",
|
|
@@ -0,0 +1,213 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import React, { memo, useCallback, useEffect, useMemo, useState, } from "react";
|
|
3
|
+
import Shimmer from "./shimmer";
|
|
4
|
+
import Checkbox from "../../checkbox";
|
|
5
|
+
import { formatValue } from "../../../services/commonService";
|
|
6
|
+
import { MdDragIndicator } from "react-icons/md";
|
|
7
|
+
import { Tooltip } from "react-tooltip";
|
|
8
|
+
const isUrl = (value) => {
|
|
9
|
+
if (value) {
|
|
10
|
+
const urlPattern = new RegExp("^(https?:\\/\\/)?" +
|
|
11
|
+
"((([a-zA-Z0-9\\-]+\\.)+[a-zA-Z]{2,})|" +
|
|
12
|
+
"localhost|" +
|
|
13
|
+
"\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}|" +
|
|
14
|
+
"\\[?[a-fA-F0-9]*:[a-fA-F0-9:]+\\]?)" +
|
|
15
|
+
"(\\:\\d+)?(\\/[-a-zA-Z0-9@:%._\\+~#=]*)*" +
|
|
16
|
+
"(\\?[;&a-zA-Z0-9%_.~+=-]*)?" +
|
|
17
|
+
"(\\#[-a-zA-Z0-9_]*)?$", "i");
|
|
18
|
+
return !!urlPattern.test(value);
|
|
19
|
+
}
|
|
20
|
+
return false;
|
|
21
|
+
};
|
|
22
|
+
const GridRow = ({ item, rowStyle, cellStyle, rowHeight, bulkSelect, selectedRows, toggleRowSelection, columns, widthMode, index, rowKey, hasVerticalScroll, onRowClick, loading, groupBy, rowIndex, columnIndex, hlBorderColor, handleDragStart, handleDragOver, handleDrop, draggable, checkboxWrapper, hugColumnWidths, hugColumnHeights, alternateRowColor, isExpandable, expandedRow, ignoreRowSelect, locale, formatOptions, actionsKey, ignoreClickKeys, }) => {
|
|
23
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
24
|
+
const [itemsAlign, setItemsAlign] = useState("stretch");
|
|
25
|
+
const [draggableIndex, setDraggableIndex] = useState(0);
|
|
26
|
+
const groupByKeys = useMemo(() => (groupBy || "")
|
|
27
|
+
.split(",")
|
|
28
|
+
.filter((g) => g)
|
|
29
|
+
.flatMap((g) => g.split("+").filter((k) => k)), [groupBy]);
|
|
30
|
+
const handleRowClick = useCallback((column) => {
|
|
31
|
+
const reactTooltips = document.querySelectorAll(".react-tooltip");
|
|
32
|
+
if (reactTooltips.length > 0)
|
|
33
|
+
return;
|
|
34
|
+
if ((actionsKey === null || actionsKey === void 0 ? void 0 : actionsKey.split(",").includes(column.key)) ||
|
|
35
|
+
(ignoreClickKeys === null || ignoreClickKeys === void 0 ? void 0 : ignoreClickKeys.split(",").includes(column.key)))
|
|
36
|
+
return;
|
|
37
|
+
onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(item);
|
|
38
|
+
}, [onRowClick, item]);
|
|
39
|
+
const getRowClassNames = useCallback(() => {
|
|
40
|
+
let classNames = ["row"];
|
|
41
|
+
if (onRowClick)
|
|
42
|
+
classNames.push("cursor-pointer");
|
|
43
|
+
return classNames.join(" ");
|
|
44
|
+
}, [onRowClick]);
|
|
45
|
+
useEffect(() => {
|
|
46
|
+
setItemsAlign(Object.values(item)
|
|
47
|
+
.map((value) => value.itemsAlign)
|
|
48
|
+
.every((item) => item === "start")
|
|
49
|
+
? "start"
|
|
50
|
+
: "stretch");
|
|
51
|
+
}, [item]);
|
|
52
|
+
useEffect(() => {
|
|
53
|
+
let _dragIndex = 0;
|
|
54
|
+
if (draggable && columns.length > 0) {
|
|
55
|
+
if (columns[0].key === "actions") {
|
|
56
|
+
_dragIndex = 1;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
setDraggableIndex(_dragIndex);
|
|
60
|
+
}, [columns]);
|
|
61
|
+
const checkAvailableForTooltip = (id) => {
|
|
62
|
+
setTimeout(() => {
|
|
63
|
+
var _a;
|
|
64
|
+
const tooltips = document.querySelectorAll(".react-tooltip");
|
|
65
|
+
let currentTooltip = [];
|
|
66
|
+
tooltips.forEach((value) => {
|
|
67
|
+
if (value.id === id && Array.isArray(currentTooltip)) {
|
|
68
|
+
currentTooltip.push(value);
|
|
69
|
+
}
|
|
70
|
+
});
|
|
71
|
+
currentTooltip = currentTooltip[0];
|
|
72
|
+
if (currentTooltip) {
|
|
73
|
+
const gridContent = document.querySelector("#grid-content");
|
|
74
|
+
const { height } = (_a = gridContent === null || gridContent === void 0 ? void 0 : gridContent.getBoundingClientRect()) !== null && _a !== void 0 ? _a : {};
|
|
75
|
+
if (height) {
|
|
76
|
+
const availableHeight = height - 50;
|
|
77
|
+
const styles = currentTooltip.getAttribute("style");
|
|
78
|
+
currentTooltip.setAttribute("style", `${styles} height: max-content; max-height: ${availableHeight}px; overflow: hidden auto;`);
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
}, 50);
|
|
82
|
+
};
|
|
83
|
+
return isExpandable &&
|
|
84
|
+
((_a = item === null || item === void 0 ? void 0 : item.id) === null || _a === void 0 ? void 0 : _a.value) &&
|
|
85
|
+
expandedRow === ((_b = item === null || item === void 0 ? void 0 : item.id) === null || _b === void 0 ? void 0 : _b.value) &&
|
|
86
|
+
item.expandedDetails ? (_jsxs("div", { children: [_jsxs("div", { id: String((_d = (_c = item.id) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : index), draggable: draggable, onDragStart: (e) => handleDragStart && handleDragStart(e, index), onDragOver: (e) => handleDragOver && handleDragOver(e), onDrop: (e) => handleDrop && handleDrop(e, index), className: getRowClassNames(), style: Object.assign(Object.assign({}, rowStyle), { position: "relative", display: "flex", alignItems: itemsAlign, fontSize: "inherit", height: "max-content", boxSizing: "border-box", backgroundColor: alternateRowColor && (index + 1) % 2 === 0
|
|
87
|
+
? "var(--row-bg)"
|
|
88
|
+
: "var(--row-bg-even)" }), children: [bulkSelect && (_jsx("div", { style: Object.assign(Object.assign({}, cellStyle), { textTransform: "uppercase", padding: "0.5rem", textAlign: "left", whiteSpace: "nowrap", textOverflow: "ellipsis" }), children: _jsx(Checkbox, { noLabel: true, disabled: ignoreRowSelect &&
|
|
89
|
+
ignoreRowSelect.has((_e = item["id"].value) === null || _e === void 0 ? void 0 : _e.toString()), onChange: () => { var _a; return toggleRowSelection((_a = item["id"].value) === null || _a === void 0 ? void 0 : _a.toString()); }, selected: item["id"] && selectedRows.has(item["id"].value), wrapperClass: checkboxWrapper }) })), item[groupBy] && (_jsx("div", { style: {
|
|
90
|
+
width: widthMode === "auto"
|
|
91
|
+
? "auto"
|
|
92
|
+
: ((_f = columns.find((column) => column.key === groupBy)) === null || _f === void 0 ? void 0 : _f.width)
|
|
93
|
+
? (_g = columns.find((column) => column.key === groupBy)) === null || _g === void 0 ? void 0 : _g.width
|
|
94
|
+
: (hugColumnWidths === null || hugColumnWidths === void 0 ? void 0 : hugColumnWidths[`column-${groupBy}`])
|
|
95
|
+
? hugColumnWidths === null || hugColumnWidths === void 0 ? void 0 : hugColumnWidths[`column-${groupBy}`]
|
|
96
|
+
: "fit-content",
|
|
97
|
+
wordBreak: widthMode === "auto" ? "break-all" : "unset",
|
|
98
|
+
padding: groupBy ? "0.25rem" : 0,
|
|
99
|
+
backgroundColor: alternateRowColor && (index + 1) % 2 === 0
|
|
100
|
+
? "var(--row-bg)"
|
|
101
|
+
: "var(--row-bg-even)",
|
|
102
|
+
}, className: `column index-${groupBy}`, children: _jsx("div", { children: ((_h = item[groupBy]) === null || _h === void 0 ? void 0 : _h.html) || ((_j = item[groupBy]) === null || _j === void 0 ? void 0 : _j.value) }) })), columns.map((column, colIndex) => {
|
|
103
|
+
var _a, _b, _c, _d;
|
|
104
|
+
const cellData = item[column.key];
|
|
105
|
+
const cellValue = cellData && Object.keys(cellData).includes("html")
|
|
106
|
+
? cellData === null || cellData === void 0 ? void 0 : cellData.html
|
|
107
|
+
: cellData && Object.keys(cellData).includes("value")
|
|
108
|
+
? formatValue(cellData === null || cellData === void 0 ? void 0 : cellData.value, (_a = column.dataType) !== null && _a !== void 0 ? _a : "string", locale, formatOptions)
|
|
109
|
+
: cellData
|
|
110
|
+
? cellData
|
|
111
|
+
: "";
|
|
112
|
+
const cellUrl = cellData === null || cellData === void 0 ? void 0 : cellData.url;
|
|
113
|
+
const isHidden = column.overflowHidden;
|
|
114
|
+
if (!column.hidden && !groupByKeys.includes(column.key)) {
|
|
115
|
+
return (_jsxs("div", { id: `column-${index}-${colIndex}`, className: `column index-${column.key}`, style: Object.assign(Object.assign({}, cellStyle), { padding: "0.5rem", display: "flex", alignItems: "center", justifyContent: "flex-start", overflow: isHidden ? "hidden" : "visible", textOverflow: isHidden ? "ellipsis" : "clip", whiteSpace: isHidden ? "nowrap" : "normal", width: widthMode === "auto"
|
|
116
|
+
? "auto"
|
|
117
|
+
: (column === null || column === void 0 ? void 0 : column.width)
|
|
118
|
+
? column === null || column === void 0 ? void 0 : column.width
|
|
119
|
+
: (hugColumnWidths === null || hugColumnWidths === void 0 ? void 0 : hugColumnWidths[`column-${column.key}`])
|
|
120
|
+
? hugColumnWidths === null || hugColumnWidths === void 0 ? void 0 : hugColumnWidths[`column-${column.key}`]
|
|
121
|
+
: "fit-content", flex: widthMode === "auto" ? 1 : undefined, flexGrow: widthMode === "auto" ? 1 : 0, flexShrink: widthMode === "auto" ? 1 : 0, wordBreak: widthMode === "auto" ? "break-all" : "unset", boxSizing: "border-box",
|
|
122
|
+
// marginTop:
|
|
123
|
+
// rowIndex === index && rowIndex > -1 && rowIndex < 2
|
|
124
|
+
// ? rowHeight
|
|
125
|
+
// : "",
|
|
126
|
+
border: rowIndex === index && columnIndex === colIndex
|
|
127
|
+
? `1px solid ${hlBorderColor}`
|
|
128
|
+
: "", backgroundColor: alternateRowColor && (index + 1) % 2 === 0
|
|
129
|
+
? "var(--row-bg)"
|
|
130
|
+
: "var(--row-bg-even)" }), onClick: () => handleRowClick(column), children: [draggable && colIndex === draggableIndex && (_jsx("div", { onDragStart: (e) => handleDragStart && handleDragStart(e, index), style: {
|
|
131
|
+
cursor: "grab",
|
|
132
|
+
margin: "0 0.25rem",
|
|
133
|
+
}, children: "\u2630" })), loading ? (_jsx("div", { style: { width: column.width, height: rowHeight }, children: _jsx(Shimmer, { height: 32, width: column.width }) })) : (_jsx("div", { className: (cellData === null || cellData === void 0 ? void 0 : cellData.className) || "", id: `column-${column.key}-${(_b = column.dataType) !== null && _b !== void 0 ? _b : "string"}`, style: {
|
|
134
|
+
display: "flex",
|
|
135
|
+
alignItems: "center", // Vertically center content within the cell
|
|
136
|
+
width: "100%",
|
|
137
|
+
justifyContent: column.alignment
|
|
138
|
+
? column.alignment
|
|
139
|
+
: column.dataType === "number" ||
|
|
140
|
+
column.dataType === "currency"
|
|
141
|
+
? "end"
|
|
142
|
+
: "start",
|
|
143
|
+
}, children: isUrl(cellUrl) ? (_jsx("a", { href: cellUrl, target: "_blank", rel: "noopener noreferrer", children: cellValue })) : column.render ? (column.render(cellValue)) : (cellValue) }))] }, `${column.key}-${(_d = (_c = item.id) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : index}`));
|
|
144
|
+
}
|
|
145
|
+
return null;
|
|
146
|
+
})] }), isExpandable &&
|
|
147
|
+
((_k = item === null || item === void 0 ? void 0 : item.id) === null || _k === void 0 ? void 0 : _k.value) &&
|
|
148
|
+
expandedRow === ((_l = item === null || item === void 0 ? void 0 : item.id) === null || _l === void 0 ? void 0 : _l.value) &&
|
|
149
|
+
item.expandedDetails &&
|
|
150
|
+
item.expandedDetails.html] }, String((_o = (_m = item.id) === null || _m === void 0 ? void 0 : _m.value) !== null && _o !== void 0 ? _o : index))) : (_jsxs(React.Fragment, { children: [bulkSelect && (_jsx("div", { style: Object.assign(Object.assign({}, cellStyle), { textTransform: "uppercase", padding: "0.25rem", textAlign: "left", whiteSpace: "nowrap", textOverflow: "ellipsis" }), children: _jsx(Checkbox, { noLabel: true, disabled: ignoreRowSelect &&
|
|
151
|
+
ignoreRowSelect.has((_p = item["id"].value) === null || _p === void 0 ? void 0 : _p.toString()), onChange: () => { var _a; return toggleRowSelection((_a = item["id"].value) === null || _a === void 0 ? void 0 : _a.toString()); }, selected: item["id"] && selectedRows.has(item["id"].value), wrapperClass: checkboxWrapper }) })), columns.map((column, colIndex) => {
|
|
152
|
+
var _a, _b, _c, _d, _e, _f;
|
|
153
|
+
const cellData = item[column.key];
|
|
154
|
+
const cellValue = cellData && cellData.isArrayString ? (_jsx("div", { children: cellData.value.toString().split(">>").length > 1 ? (_jsx(_Fragment, { children: column.isArrayString ? (_jsxs("div", { className: "flex items-center gap-2", children: [cellData.value
|
|
155
|
+
.toString()
|
|
156
|
+
.split(">>")
|
|
157
|
+
.slice(0, 3)
|
|
158
|
+
.map((item, index) => (_jsx("div", { className: "flex-grow-0 flex-shrink-0 rounded-full", style: cellData.value.toString().split(">>").slice(0, 3)
|
|
159
|
+
.length > 1
|
|
160
|
+
? {
|
|
161
|
+
background: "var(--standard)",
|
|
162
|
+
color: "var(--foreground)",
|
|
163
|
+
border: "1px solid var(--standard)",
|
|
164
|
+
padding: "0.25rem 0.5rem",
|
|
165
|
+
}
|
|
166
|
+
: {}, children: item }))), cellData.value.toString().split(">>").slice(3).length >
|
|
167
|
+
0 && (_jsxs("div", { className: "flex-grow-0 flex-shrink-0", "data-tooltip-id": (_a = item.id.value.toString()) !== null && _a !== void 0 ? _a : colIndex.toString(), "data-tooltip-html": `<div class="flex flex-col">${cellData.value
|
|
168
|
+
.toString()
|
|
169
|
+
.split(">>")
|
|
170
|
+
.slice(3)
|
|
171
|
+
.map((item) => `<div>${item}</div>`)
|
|
172
|
+
.join("")}</div>`, onMouseEnter: () => {
|
|
173
|
+
var _a;
|
|
174
|
+
return checkAvailableForTooltip((_a = item.id.value.toString()) !== null && _a !== void 0 ? _a : colIndex.toString());
|
|
175
|
+
}, children: ["+", " ", cellData.value.toString().split(">>").slice(3)
|
|
176
|
+
.length, " ", "more", _jsx(Tooltip, { className: "custom-tooltip", clickable: true, id: (_b = item.id.value.toString()) !== null && _b !== void 0 ? _b : colIndex.toString(), place: "top" })] }))] })) : (_jsx("span", { children: `${cellData.value.toString().split(">>").join(", ")}` })) })) : (_jsx("span", { children: cellData.value })) })) : column.isArrayString ? (_jsx("span", { className: "flex-grow-0 flex-shrink-0 rounded-full", style: (cellData === null || cellData === void 0 ? void 0 : cellData.value)
|
|
177
|
+
? {
|
|
178
|
+
background: "var(--standard)",
|
|
179
|
+
color: "var(--foreground)",
|
|
180
|
+
border: "1px solid var(--standard)",
|
|
181
|
+
padding: "0.25rem 0.5rem",
|
|
182
|
+
}
|
|
183
|
+
: {}, children: (_c = cellData === null || cellData === void 0 ? void 0 : cellData.value) !== null && _c !== void 0 ? _c : "" })) : cellData && Object.keys(cellData).includes("html") ? (cellData === null || cellData === void 0 ? void 0 : cellData.html) : cellData && Object.keys(cellData).includes("value") ? (formatValue(cellData === null || cellData === void 0 ? void 0 : cellData.value, (_d = column.dataType) !== null && _d !== void 0 ? _d : "string", locale, formatOptions)) : cellData ? (cellData) : ("");
|
|
184
|
+
const cellUrl = cellData === null || cellData === void 0 ? void 0 : cellData.url;
|
|
185
|
+
const isHidden = column.overflowHidden;
|
|
186
|
+
if (!column.hidden && !groupByKeys.includes(column.key)) {
|
|
187
|
+
return (_jsxs("div", { id: `column-${index}-${colIndex}`, className: `column index-${column.key}`, style: Object.assign(Object.assign({}, cellStyle), { padding: "0.5rem", display: "flex", alignItems: "center", justifyContent: "flex-start", overflow: isHidden ? "hidden" : "visible", textOverflow: isHidden ? "ellipsis" : "clip", whiteSpace: isHidden ? "nowrap" : "normal", flex: widthMode === "auto" ? 1 : undefined, flexGrow: widthMode === "auto" ? 1 : 0, flexShrink: widthMode === "auto" ? 1 : 0, wordBreak: widthMode === "auto" ? "break-all" : "unset", boxSizing: "border-box",
|
|
188
|
+
// marginTop:
|
|
189
|
+
// rowIndex === index && rowIndex > -1 && rowIndex < 2
|
|
190
|
+
// ? rowHeight
|
|
191
|
+
// : "",
|
|
192
|
+
border: rowIndex === index && columnIndex === colIndex
|
|
193
|
+
? `1px solid ${hlBorderColor}`
|
|
194
|
+
: "", backgroundColor: alternateRowColor && (index + 1) % 2 === 0
|
|
195
|
+
? "var(--row-bg)"
|
|
196
|
+
: "var(--row-bg-even)" }), onClick: () => handleRowClick(column), children: [draggable && colIndex === draggableIndex && (_jsx("div", { onDragStart: (e) => handleDragStart && handleDragStart(e, index), style: {
|
|
197
|
+
cursor: "grab",
|
|
198
|
+
}, children: _jsx(MdDragIndicator, { size: "1.25rem" }) })), loading ? (_jsx("div", { style: { width: column.width, height: rowHeight }, children: _jsx(Shimmer, { height: 32, width: column.width }) })) : (_jsx("div", { className: (cellData === null || cellData === void 0 ? void 0 : cellData.className) || "", style: {
|
|
199
|
+
display: "flex",
|
|
200
|
+
alignItems: "center", // Vertically center content within the cell
|
|
201
|
+
width: "100%",
|
|
202
|
+
justifyContent: column.alignment
|
|
203
|
+
? column.alignment
|
|
204
|
+
: column.dataType === "number" ||
|
|
205
|
+
column.dataType === "currency"
|
|
206
|
+
? "end"
|
|
207
|
+
: "start",
|
|
208
|
+
}, children: isUrl(cellUrl) ? (_jsx("a", { href: cellUrl, target: "_blank", rel: "noopener noreferrer", children: cellValue })) : column.render ? (column.render(cellValue)) : (cellValue) }))] }, `${column.key}-${(_f = (_e = item.id) === null || _e === void 0 ? void 0 : _e.value) !== null && _f !== void 0 ? _f : index}`));
|
|
209
|
+
}
|
|
210
|
+
return null;
|
|
211
|
+
})] }, String((_r = (_q = item.id) === null || _q === void 0 ? void 0 : _q.value) !== null && _r !== void 0 ? _r : index)));
|
|
212
|
+
};
|
|
213
|
+
export default memo(GridRow);
|
package/package.json
CHANGED