@megha-ui/react 1.2.816 → 1.2.817
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.
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import React, { memo, useEffect, useRef, useState } from "react";
|
|
3
|
+
import GroupedRow from "./groupedRow";
|
|
4
|
+
import NewSummariseDetails from "./newSummariseDetails";
|
|
5
|
+
const GroupedGrid = ({ groupedData, rowOpened, startIndex, endIndex, alternateRowColor, updateRowOpened, columnWidths, columnHeights, groupBy, widthMode, rowKey, rowHeight, headerBackground, isSummarise, gridGroupBy, rowStyle, sortable, cellStyle, summariseKeys, summariseDetails, activeCalculateColor, gridRef, setCalculatePosition, calculatePosition, calculatetextColor, setCalculateVisible, calculateVisible, summariseDisplay, recalculate, selectedRowStyle, isLoading, selectedRow, onRowClick, gridColumns, bulkSelect, selectedRows, toggleRowSelection, hasVerticalScroll, setColumnWidths, setColumnHeights, actionsKey, ignoreClickKeys, locale, formatOptions, }) => {
|
|
6
|
+
const groupedDiv = useRef(null);
|
|
7
|
+
const [renderedKeys, setRenderedKeys] = useState([]);
|
|
8
|
+
useEffect(() => {
|
|
9
|
+
var _a;
|
|
10
|
+
const groupedColumns = (_a = groupedDiv.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".group-column");
|
|
11
|
+
const _renderedKeys = [];
|
|
12
|
+
let newColumnWidths = columnWidths;
|
|
13
|
+
let newColumnHeights = columnHeights;
|
|
14
|
+
groupedColumns === null || groupedColumns === void 0 ? void 0 : groupedColumns.forEach((column) => {
|
|
15
|
+
var _a;
|
|
16
|
+
const key = (_a = column.className.split(" ")) === null || _a === void 0 ? void 0 : _a[1];
|
|
17
|
+
_renderedKeys.push(key);
|
|
18
|
+
newColumnWidths = Object.assign(Object.assign({}, newColumnWidths), { [key]: `${column.clientWidth}px` });
|
|
19
|
+
newColumnHeights = Object.assign(Object.assign({}, newColumnHeights), { [key]: `${column.clientHeight}px` });
|
|
20
|
+
});
|
|
21
|
+
if (renderedKeys.sort().toString() !== _renderedKeys.sort().toString()) {
|
|
22
|
+
setColumnWidths((prev) => (Object.assign(Object.assign({}, prev), newColumnWidths)));
|
|
23
|
+
setColumnHeights((prev) => (Object.assign(Object.assign({}, prev), newColumnHeights)));
|
|
24
|
+
setRenderedKeys(_renderedKeys);
|
|
25
|
+
}
|
|
26
|
+
}, [
|
|
27
|
+
groupedData.filter((item) => {
|
|
28
|
+
return item.type === "main" && item.level === 1
|
|
29
|
+
? true
|
|
30
|
+
: rowOpened.includes(item.groupedValue
|
|
31
|
+
.split(">")
|
|
32
|
+
.filter((value, index) => index !== item.groupedValue.split(">").length - 1)
|
|
33
|
+
.join(">"));
|
|
34
|
+
}),
|
|
35
|
+
]);
|
|
36
|
+
return (_jsx(_Fragment, { children: groupedData
|
|
37
|
+
.filter((item) => {
|
|
38
|
+
return item.type === "main" && item.level === 1
|
|
39
|
+
? true
|
|
40
|
+
: rowOpened.includes(item.groupedValue
|
|
41
|
+
.split(">")
|
|
42
|
+
.filter((value, index) => index !== item.groupedValue.split(">").length - 1)
|
|
43
|
+
.join(">"));
|
|
44
|
+
})
|
|
45
|
+
.map((item, gIndex) => {
|
|
46
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
47
|
+
if (gIndex >= startIndex && gIndex <= endIndex)
|
|
48
|
+
return item.type === "main" ? (_jsxs(React.Fragment, { children: [(_a = item.groupedKey) === null || _a === void 0 ? void 0 : _a.split(">").filter((key) => key !== item.key).map((columnKey) => {
|
|
49
|
+
const column = gridColumns.find((column) => column.key === columnKey);
|
|
50
|
+
if (column) {
|
|
51
|
+
return (_jsx("div", { style: {
|
|
52
|
+
display: "flex",
|
|
53
|
+
alignItems: "center",
|
|
54
|
+
padding: "0.5rem",
|
|
55
|
+
}, className: `column index-${columnKey}`, onClick: () => updateRowOpened(item.groupedValue), children: _jsx("div", { style: {
|
|
56
|
+
color: alternateRowColor && (gIndex + 1) % 2 === 0
|
|
57
|
+
? "var(--row-header-bg)"
|
|
58
|
+
: "var(--row-bg)",
|
|
59
|
+
}, children: "--" }) }));
|
|
60
|
+
}
|
|
61
|
+
return null;
|
|
62
|
+
}), _jsxs("div", { style: {
|
|
63
|
+
display: "flex",
|
|
64
|
+
alignItems: "center",
|
|
65
|
+
fontSize: "inherit",
|
|
66
|
+
background: "inherit",
|
|
67
|
+
cursor: "pointer",
|
|
68
|
+
padding: "0.5rem",
|
|
69
|
+
}, className: `group-column ${item.key}`, onClick: () => updateRowOpened(item.groupedValue), children: [_jsx("span", { style: {
|
|
70
|
+
fontSize: "inherit",
|
|
71
|
+
marginRight: "0.5rem",
|
|
72
|
+
color: "var(--foreground)",
|
|
73
|
+
background: "var(--disabled-bg)",
|
|
74
|
+
width: "1rem",
|
|
75
|
+
height: "1rem",
|
|
76
|
+
flexGrow: 0,
|
|
77
|
+
flexShrink: 0,
|
|
78
|
+
borderRadius: 4,
|
|
79
|
+
display: "flex",
|
|
80
|
+
alignItems: "center",
|
|
81
|
+
justifyContent: "center",
|
|
82
|
+
}, children: rowOpened.includes(item.groupedValue || "") ? "-" : "+" }), _jsxs("div", { style: {
|
|
83
|
+
display: "flex",
|
|
84
|
+
alignItems: "center",
|
|
85
|
+
flexWrap: "wrap",
|
|
86
|
+
}, children: [_jsx("span", { style: { marginRight: "0.5rem" }, children: item.html ? _jsx(_Fragment, { children: item.html }) : item.value }), _jsx("span", { children: `(${item === null || item === void 0 ? void 0 : item.count})` })] })] }), isSummarise &&
|
|
87
|
+
parseInt(((_b = item === null || item === void 0 ? void 0 : item.count) === null || _b === void 0 ? void 0 : _b.toString()) || "0") > 0 && (_jsx(NewSummariseDetails, { rowIndex: gIndex, removedKeys: item.groupedKey.split(">"), columns: gridColumns, groupBy: gridGroupBy, sortable: sortable, cellStyle: cellStyle, columnWidths: columnWidths, widthMode: widthMode, summariseKeys: summariseKeys, summariseDetails: summariseDetails, activeCalculateColor: activeCalculateColor, gridRef: gridRef, setCalculatePosition: setCalculatePosition, calculatePosition: calculatePosition, calculatetextColor: calculatetextColor, setCalculateVisible: setCalculateVisible, calculateVisible: calculateVisible, summariseDisplay: summariseDisplay, recalculate: recalculate, groupedData: item.groupedValue, actionsKey: actionsKey }))] }, String((_c = item.groupedValue) !== null && _c !== void 0 ? _c : gIndex))) : (_jsx(GroupedRow, { item: item.rowData, index: gIndex, rowStyle: Object.assign(Object.assign({}, rowStyle), (selectedRow === ((_e = (_d = item.rowData) === null || _d === void 0 ? void 0 : _d.id) === null || _e === void 0 ? void 0 : _e.value)
|
|
88
|
+
? selectedRowStyle
|
|
89
|
+
: {})), cellStyle: cellStyle, rowHeight: rowHeight, alternateRowColor: alternateRowColor, bulkSelect: bulkSelect, columns: gridColumns, widthMode: widthMode, rowKey: rowKey, onRowClick: onRowClick, loading: isLoading, groupBy: gridGroupBy, selectedRows: selectedRows, toggleRowSelection: toggleRowSelection, hasVerticalScroll: hasVerticalScroll, hugColumnWidths: columnWidths, actionsKey: actionsKey, ignoreClickKeys: ignoreClickKeys }, String(((_g = (_f = item.rowData) === null || _f === void 0 ? void 0 : _f.id) === null || _g === void 0 ? void 0 : _g.value)
|
|
90
|
+
? `${item.groupedValue}-${(_j = (_h = item.rowData) === null || _h === void 0 ? void 0 : _h.id) === null || _j === void 0 ? void 0 : _j.value}`
|
|
91
|
+
: gIndex)));
|
|
92
|
+
}) }));
|
|
93
|
+
};
|
|
94
|
+
export default memo(GroupedGrid);
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { memo, useCallback, useMemo } from "react";
|
|
3
|
+
import Shimmer from "./shimmer";
|
|
4
|
+
import { Tooltip } from "react-tooltip";
|
|
5
|
+
const isUrl = (value) => {
|
|
6
|
+
if (value) {
|
|
7
|
+
const urlPattern = new RegExp("^(https?:\\/\\/)?" +
|
|
8
|
+
"((([a-zA-Z0-9\\-]+\\.)+[a-zA-Z]{2,})|" +
|
|
9
|
+
"localhost|" +
|
|
10
|
+
"\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}|" +
|
|
11
|
+
"\\[?[a-fA-F0-9]*:[a-fA-F0-9:]+\\]?)" +
|
|
12
|
+
"(\\:\\d+)?(\\/[-a-zA-Z0-9@:%._\\+~#=]*)*" +
|
|
13
|
+
"(\\?[;&a-zA-Z0-9%_.~+=-]*)?" +
|
|
14
|
+
"(\\#[-a-zA-Z0-9_]*)?$", "i");
|
|
15
|
+
return !!urlPattern.test(value);
|
|
16
|
+
}
|
|
17
|
+
return false;
|
|
18
|
+
};
|
|
19
|
+
const GroupedRow = ({ item, rowStyle, cellStyle, rowHeight, columns, widthMode, index, rowKey, onRowClick, loading, groupBy, hugColumnWidths, alternateRowColor, actionsKey, ignoreClickKeys, }) => {
|
|
20
|
+
const handleRowClick = useCallback((column) => {
|
|
21
|
+
if ((actionsKey === null || actionsKey === void 0 ? void 0 : actionsKey.split(",").includes(column.key)) ||
|
|
22
|
+
(ignoreClickKeys === null || ignoreClickKeys === void 0 ? void 0 : ignoreClickKeys.split(",").includes(column.key)))
|
|
23
|
+
return;
|
|
24
|
+
onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(item);
|
|
25
|
+
}, [onRowClick, item]);
|
|
26
|
+
const getRowClassNames = useCallback(() => {
|
|
27
|
+
let classNames = ["row"];
|
|
28
|
+
if (onRowClick)
|
|
29
|
+
classNames.push("cursor-pointer");
|
|
30
|
+
return classNames.join(" ");
|
|
31
|
+
}, [onRowClick]);
|
|
32
|
+
const groupByKeys = useMemo(() => (groupBy || "")
|
|
33
|
+
.split(",")
|
|
34
|
+
.filter((g) => g)
|
|
35
|
+
.flatMap((g) => g.split("+").filter((k) => k)), [groupBy]);
|
|
36
|
+
const checkAvailableForTooltip = (id) => {
|
|
37
|
+
setTimeout(() => {
|
|
38
|
+
var _a;
|
|
39
|
+
const tooltips = document.querySelectorAll(".react-tooltip");
|
|
40
|
+
let currentTooltip = [];
|
|
41
|
+
tooltips.forEach((value) => {
|
|
42
|
+
if (value.id === id && Array.isArray(currentTooltip)) {
|
|
43
|
+
currentTooltip.push(value);
|
|
44
|
+
}
|
|
45
|
+
});
|
|
46
|
+
currentTooltip = currentTooltip[0];
|
|
47
|
+
if (currentTooltip) {
|
|
48
|
+
const gridContent = document.querySelector("#grid-content");
|
|
49
|
+
const { height } = (_a = gridContent === null || gridContent === void 0 ? void 0 : gridContent.getBoundingClientRect()) !== null && _a !== void 0 ? _a : {};
|
|
50
|
+
if (height) {
|
|
51
|
+
const availableHeight = height - 50;
|
|
52
|
+
const styles = currentTooltip.getAttribute("style");
|
|
53
|
+
currentTooltip.setAttribute("style", `${styles} height: max-content; max-height: ${availableHeight}px; overflow: hidden auto;`);
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
}, 50);
|
|
57
|
+
};
|
|
58
|
+
return (_jsxs(_Fragment, { children: [groupByKeys.map((_groupBy) => {
|
|
59
|
+
var _a, _b;
|
|
60
|
+
return (_jsx("div", { style: {
|
|
61
|
+
width: widthMode === "auto"
|
|
62
|
+
? "auto"
|
|
63
|
+
: ((_a = columns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.width)
|
|
64
|
+
? `calc(${(_b = columns.find((column) => column.key === _groupBy)) === null || _b === void 0 ? void 0 : _b.width} + 4rem)`
|
|
65
|
+
: (hugColumnWidths === null || hugColumnWidths === void 0 ? void 0 : hugColumnWidths[`column-${_groupBy}`])
|
|
66
|
+
? `calc(${hugColumnWidths === null || hugColumnWidths === void 0 ? void 0 : hugColumnWidths[`column-${_groupBy}`]} + 4rem)`
|
|
67
|
+
: "fit-content",
|
|
68
|
+
padding: _groupBy ? "0.5rem" : 0,
|
|
69
|
+
backgroundColor: alternateRowColor && (index + 1) % 2 === 0
|
|
70
|
+
? "var(--row-bg)"
|
|
71
|
+
: "var(--row-bg-even)",
|
|
72
|
+
flex: widthMode === "auto" ? 1 : undefined,
|
|
73
|
+
flexGrow: widthMode === "auto" ? 1 : 0,
|
|
74
|
+
flexShrink: widthMode === "auto" ? 1 : 0,
|
|
75
|
+
}, className: `column index-${_groupBy}`, children: _jsx("div", {}) }));
|
|
76
|
+
}), columns
|
|
77
|
+
.filter((column) => !groupByKeys.includes(column.key))
|
|
78
|
+
.map((column, colIndex) => {
|
|
79
|
+
var _a, _b, _c, _d, _e;
|
|
80
|
+
const cellData = item[column.key];
|
|
81
|
+
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
|
|
82
|
+
.toString()
|
|
83
|
+
.split(">>")
|
|
84
|
+
.slice(0, 3)
|
|
85
|
+
.map((item) => (_jsx("div", { className: "flex-grow-0 flex-shrink-0 rounded-full", style: {
|
|
86
|
+
background: "var(--standard)",
|
|
87
|
+
color: "var(--foreground)",
|
|
88
|
+
border: "1px solid var(--standard)",
|
|
89
|
+
padding: "0.25rem 0.5rem",
|
|
90
|
+
}, children: item }))), cellData.value.toString().split(">>").slice(3).length >
|
|
91
|
+
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
|
|
92
|
+
.toString()
|
|
93
|
+
.split(">>")
|
|
94
|
+
.slice(3)
|
|
95
|
+
.map((item) => `<div>${item}</div>`)
|
|
96
|
+
.join("")}</div>`, onMouseEnter: () => {
|
|
97
|
+
var _a;
|
|
98
|
+
return checkAvailableForTooltip((_a = item.id.value.toString()) !== null && _a !== void 0 ? _a : colIndex.toString());
|
|
99
|
+
}, children: ["+", " ", cellData.value.toString().split(">>").slice(3)
|
|
100
|
+
.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)
|
|
101
|
+
? {
|
|
102
|
+
background: "var(--standard)",
|
|
103
|
+
color: "var(--foreground)",
|
|
104
|
+
border: "1px solid var(--standard)",
|
|
105
|
+
padding: "0.25rem 0.5rem",
|
|
106
|
+
}
|
|
107
|
+
: {}, 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") ? (cellData === null || cellData === void 0 ? void 0 : cellData.value) : cellData ? (cellData) : ("");
|
|
108
|
+
const cellUrl = cellData === null || cellData === void 0 ? void 0 : cellData.url;
|
|
109
|
+
const isHidden = column.overflowHidden;
|
|
110
|
+
if (!column.hidden) {
|
|
111
|
+
return (_jsx("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", height: "100%", width: widthMode === "auto"
|
|
112
|
+
? "auto"
|
|
113
|
+
: (column === null || column === void 0 ? void 0 : column.width)
|
|
114
|
+
? column === null || column === void 0 ? void 0 : column.width
|
|
115
|
+
: (hugColumnWidths === null || hugColumnWidths === void 0 ? void 0 : hugColumnWidths[`column-${column.key}`])
|
|
116
|
+
? hugColumnWidths === null || hugColumnWidths === void 0 ? void 0 : hugColumnWidths[`column-${column.key}`]
|
|
117
|
+
: "fit-content", flex: widthMode === "auto" ? 1 : undefined, flexGrow: widthMode === "auto" ? 1 : 0, flexShrink: widthMode === "auto" ? 1 : 0, boxSizing: "border-box",
|
|
118
|
+
// marginTop:
|
|
119
|
+
// rowIndex === index && rowIndex > -1 && rowIndex < 2
|
|
120
|
+
// ? rowHeight
|
|
121
|
+
// : "",
|
|
122
|
+
backgroundColor: alternateRowColor && (index + 1) % 2 === 0
|
|
123
|
+
? "var(--row-bg)"
|
|
124
|
+
: "var(--row-bg-even)" }), onClick: () => handleRowClick(column), children: 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: {
|
|
125
|
+
display: "flex",
|
|
126
|
+
alignItems: "center", // Vertically center content within the cell
|
|
127
|
+
width: "100%",
|
|
128
|
+
justifyContent: column.alignment
|
|
129
|
+
? column.alignment
|
|
130
|
+
: column.dataType === "number" ||
|
|
131
|
+
column.dataType === "currency"
|
|
132
|
+
? "end"
|
|
133
|
+
: "start",
|
|
134
|
+
}, children: isUrl(cellUrl) ? (_jsx("a", { href: cellUrl, target: "_blank", rel: "noopener noreferrer", children: cellValue })) : column.render ? (column.render(cellValue)) : (cellValue) })) }, `${column.key}-${(_e = (_d = item.id) === null || _d === void 0 ? void 0 : _d.value) !== null && _e !== void 0 ? _e : index}`));
|
|
135
|
+
}
|
|
136
|
+
return null;
|
|
137
|
+
})] }));
|
|
138
|
+
};
|
|
139
|
+
export default memo(GroupedRow);
|
package/package.json
CHANGED