@megha-ui/react 1.2.200 → 1.2.201
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/grid/index.js +20 -37
- package/dist/components/grid/types/grid.d.ts +1 -3
- package/dist/components/grid/utils/SummariseDetails.js +0 -14
- package/dist/components/grid/utils/groupedGridDetails.js +5 -17
- package/dist/components/grid/utils/groupedRow.js +5 -17
- package/package.json +1 -1
|
@@ -22,7 +22,7 @@ import Button from "../button";
|
|
|
22
22
|
import { TbAntennaBarsOff, TbCalculator, TbCalculatorFilled, TbCalculatorOff, } from "react-icons/tb";
|
|
23
23
|
import { TbCopy, TbCopyOff } from "react-icons/tb";
|
|
24
24
|
import { formatValue } from "../../services/commonService";
|
|
25
|
-
const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable = true, paginate, rowsPerPageOptions = [10, 20, 50, 100], defaultRowsPerPage = 100, widthMode = "custom", bulkSelect = false, cellBorder = false, rowHeight = 38, 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,
|
|
25
|
+
const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable = true, paginate, rowsPerPageOptions = [10, 20, 50, 100], defaultRowsPerPage = 100, widthMode = "custom", bulkSelect = false, cellBorder = false, rowHeight = 38, 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 = {
|
|
26
26
|
borderLeft: "0.5rem solid #d9d9d9",
|
|
27
27
|
}, defaultSort, noKeyEvents = true, customOperation, hasCustomOperation, globalSearch, headerDropdownIndex, draggable = false, resizable = false, updateGridData, widthUnits, checkboxWrapper, ignoreHugContent = false, setRendered, isSummarise = true, fullScreenAvailable = true, defaultGroupOpen, alternateRowColor = true, activeCalculateColor = "#2377BA", calculatetextColor = "#fff", actionsKey = "actions", 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) => {
|
|
28
28
|
console.log("Update fixed filter values not implemented", fixedFilterValues);
|
|
@@ -542,56 +542,40 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
|
|
|
542
542
|
}
|
|
543
543
|
return column;
|
|
544
544
|
}));
|
|
545
|
-
|
|
546
|
-
if (groupLevels && groupLevels.length > 0) {
|
|
547
|
-
const gb = groupLevels
|
|
548
|
-
.map((level) => level.filter(Boolean).join("+"))
|
|
549
|
-
.filter(Boolean)
|
|
550
|
-
.join(",");
|
|
551
|
-
setGridGroupBy(gb);
|
|
552
|
-
}
|
|
553
|
-
else if (groupBy) {
|
|
545
|
+
if (groupBy) {
|
|
554
546
|
setGridGroupBy(groupBy);
|
|
555
547
|
}
|
|
556
|
-
}, [gridColumns, groupBy
|
|
557
|
-
const
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
.map((lvl) => lvl.split("+").filter((k) => k));
|
|
561
|
-
const groupByCompositeLevels = (data, groupLevelsArr) => {
|
|
562
|
-
const groupData = (items, levels, level = 0) => {
|
|
563
|
-
if (level >= levels.length)
|
|
548
|
+
}, [gridColumns, groupBy]);
|
|
549
|
+
const groupByMultipleKeys = (data, groupByKeys) => {
|
|
550
|
+
const groupData = (items, keys, level = 0) => {
|
|
551
|
+
if (level >= keys.length)
|
|
564
552
|
return items;
|
|
565
553
|
const groupedResult = [];
|
|
566
|
-
const
|
|
567
|
-
const map = new Map();
|
|
554
|
+
const groupKey = keys[level];
|
|
568
555
|
items.forEach((item) => {
|
|
569
|
-
|
|
570
|
-
const
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
if (existing) {
|
|
575
|
-
existing.values.push(item);
|
|
556
|
+
var _a;
|
|
557
|
+
const groupValue = ((_a = item[groupKey]) === null || _a === void 0 ? void 0 : _a.value) || "";
|
|
558
|
+
let existingGroup = groupedResult.find((g) => g.value === groupValue);
|
|
559
|
+
if (existingGroup) {
|
|
560
|
+
existingGroup.values.push(item);
|
|
576
561
|
}
|
|
577
562
|
else {
|
|
578
|
-
|
|
579
|
-
key:
|
|
580
|
-
value:
|
|
563
|
+
groupedResult.push({
|
|
564
|
+
key: groupKey,
|
|
565
|
+
value: groupValue,
|
|
581
566
|
count: 0,
|
|
582
567
|
subGroups: [],
|
|
583
568
|
values: [item],
|
|
584
569
|
});
|
|
585
570
|
}
|
|
586
571
|
});
|
|
587
|
-
|
|
588
|
-
result.forEach((group) => {
|
|
572
|
+
groupedResult.forEach((group) => {
|
|
589
573
|
group.count = group.values.length;
|
|
590
|
-
group.subGroups = groupData(group.values,
|
|
574
|
+
group.subGroups = groupData(group.values, keys, level + 1);
|
|
591
575
|
});
|
|
592
|
-
return
|
|
576
|
+
return groupedResult;
|
|
593
577
|
};
|
|
594
|
-
return groupData(data,
|
|
578
|
+
return groupData(data, groupByKeys);
|
|
595
579
|
};
|
|
596
580
|
const flattenGroupedData = (groupedData, level, groupedValues = [], parentKeys = []) => {
|
|
597
581
|
const flatArray = [];
|
|
@@ -631,8 +615,7 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
|
|
|
631
615
|
};
|
|
632
616
|
useEffect(() => {
|
|
633
617
|
if (gridGroupBy && gridGroupBy !== "") {
|
|
634
|
-
const
|
|
635
|
-
const groupedArray = groupByCompositeLevels(sortedData, levels);
|
|
618
|
+
const groupedArray = groupByMultipleKeys(sortedData, gridGroupBy.split(","));
|
|
636
619
|
const flatGroupedArray = flattenGroupedData(groupedArray, 1);
|
|
637
620
|
setGroupedData(flatGroupedArray);
|
|
638
621
|
const grouped = flatGroupedArray
|
|
@@ -104,8 +104,6 @@ export interface OjasGridProps {
|
|
|
104
104
|
exportableFileName?: string;
|
|
105
105
|
groupBy?: string;
|
|
106
106
|
updateGroupBy?: (value: string) => void;
|
|
107
|
-
/** Optional composite grouping levels; each inner array is a same-level composite group */
|
|
108
|
-
groupLevels?: string[][];
|
|
109
107
|
hlBorderColor?: string;
|
|
110
108
|
selectedRow?: number;
|
|
111
109
|
selectedRowStyle?: React.CSSProperties;
|
|
@@ -155,7 +153,7 @@ export interface OjasGridProps {
|
|
|
155
153
|
updateFixedFilterValues?: (fixedFilterValues: {
|
|
156
154
|
[key: string]: string[];
|
|
157
155
|
}) => void;
|
|
158
|
-
locale
|
|
156
|
+
locale?: string;
|
|
159
157
|
formatOptions?: any;
|
|
160
158
|
exportOptions?: any;
|
|
161
159
|
}
|
|
@@ -130,20 +130,6 @@ const SummariseDetails = ({ columns, rowIndex, groupBy, sortable, cellStyle, col
|
|
|
130
130
|
.filter((item) => item && !removedKeys.includes(item))
|
|
131
131
|
.map((_groupBy) => {
|
|
132
132
|
var _a;
|
|
133
|
-
if (_groupBy.includes("+")) {
|
|
134
|
-
const width = (() => {
|
|
135
|
-
const keys = _groupBy.split("+");
|
|
136
|
-
const sum = keys.reduce((acc, k) => {
|
|
137
|
-
const col = columns.find((c) => c.key === k);
|
|
138
|
-
const w = (col === null || col === void 0 ? void 0 : col.width)
|
|
139
|
-
? parseFloat(col.width.toString())
|
|
140
|
-
: parseFloat((columnWidths[`column-${k}`] || "0").toString());
|
|
141
|
-
return acc + (isNaN(w) ? 0 : w);
|
|
142
|
-
}, 0);
|
|
143
|
-
return `${sum}px`;
|
|
144
|
-
})();
|
|
145
|
-
return (_jsx("div", { style: Object.assign(Object.assign({}, cellStyle), { position: "relative", width: widthMode === "auto" ? "auto" : width, padding: _groupBy ? "0.5rem" : 0 }), className: `column composite-${_groupBy}`, children: "--" }, `${groupedData}-${_groupBy}`));
|
|
146
|
-
}
|
|
147
133
|
const column = columns.find((column) => column.key === _groupBy);
|
|
148
134
|
const columnKey = groupedData
|
|
149
135
|
? `${groupedData}-${column === null || column === void 0 ? void 0 : column.key}`
|
|
@@ -78,23 +78,11 @@ const GroupedGrid = ({ groupedData, rowOpened, startIndex, endIndex, alternateRo
|
|
|
78
78
|
fontSize: "inherit",
|
|
79
79
|
width: widthMode === "auto"
|
|
80
80
|
? "auto"
|
|
81
|
-
: item.key.
|
|
82
|
-
? (() =>
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
const w = (col === null || col === void 0 ? void 0 : col.width)
|
|
87
|
-
? parseFloat(col.width.toString())
|
|
88
|
-
: parseFloat((columnWidths[`column-${k}`] || "0").toString());
|
|
89
|
-
return acc + (isNaN(w) ? 0 : w);
|
|
90
|
-
}, 0);
|
|
91
|
-
return `calc(${sum}px + 25px)`;
|
|
92
|
-
})()
|
|
93
|
-
: ((_b = gridColumns.find((column) => column.key === item.key)) === null || _b === void 0 ? void 0 : _b.width)
|
|
94
|
-
? `calc(${(_c = gridColumns.find((column) => column.key === item.key)) === null || _c === void 0 ? void 0 : _c.width} + 25px)`
|
|
95
|
-
: columnWidths[`column-${item.key}`]
|
|
96
|
-
? `calc(${columnWidths[`column-${item.key}`]} + 25px)`
|
|
97
|
-
: "fit-content",
|
|
81
|
+
: ((_b = gridColumns.find((column) => column.key === item.key)) === null || _b === void 0 ? void 0 : _b.width)
|
|
82
|
+
? `calc(${(_c = gridColumns.find((column) => column.key === item.key)) === null || _c === void 0 ? void 0 : _c.width} + 25px)`
|
|
83
|
+
: columnWidths[`column-${item.key}`]
|
|
84
|
+
? `calc(${columnWidths[`column-${item.key}`]} + 25px)`
|
|
85
|
+
: "fit-content",
|
|
98
86
|
background: "inherit",
|
|
99
87
|
flexShrink: 0,
|
|
100
88
|
flexGrow: 0,
|
|
@@ -35,23 +35,11 @@ const GroupedRow = ({ item, rowStyle, cellStyle, rowHeight, columns, widthMode,
|
|
|
35
35
|
return (_jsx("div", { style: {
|
|
36
36
|
width: widthMode === "auto"
|
|
37
37
|
? "auto"
|
|
38
|
-
:
|
|
39
|
-
? (() =>
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
const w = (col === null || col === void 0 ? void 0 : col.width)
|
|
44
|
-
? parseFloat(col.width.toString())
|
|
45
|
-
: parseFloat(((hugColumnWidths === null || hugColumnWidths === void 0 ? void 0 : hugColumnWidths[`column-${k}`]) || "0").toString());
|
|
46
|
-
return acc + (isNaN(w) ? 0 : w);
|
|
47
|
-
}, 0);
|
|
48
|
-
return `calc(${sum}px + 25px)`;
|
|
49
|
-
})()
|
|
50
|
-
: ((_a = columns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.width)
|
|
51
|
-
? `calc(${(_b = columns.find((column) => column.key === _groupBy)) === null || _b === void 0 ? void 0 : _b.width} + 25px)`
|
|
52
|
-
: (hugColumnWidths === null || hugColumnWidths === void 0 ? void 0 : hugColumnWidths[`column-${_groupBy}`])
|
|
53
|
-
? `calc(${hugColumnWidths === null || hugColumnWidths === void 0 ? void 0 : hugColumnWidths[`column-${_groupBy}`]} + 25px)`
|
|
54
|
-
: "fit-content",
|
|
38
|
+
: ((_a = columns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.width)
|
|
39
|
+
? `calc(${(_b = columns.find((column) => column.key === _groupBy)) === null || _b === void 0 ? void 0 : _b.width} + 25px)`
|
|
40
|
+
: (hugColumnWidths === null || hugColumnWidths === void 0 ? void 0 : hugColumnWidths[`column-${_groupBy}`])
|
|
41
|
+
? `calc(${hugColumnWidths === null || hugColumnWidths === void 0 ? void 0 : hugColumnWidths[`column-${_groupBy}`]} + 25px)`
|
|
42
|
+
: "fit-content",
|
|
55
43
|
padding: _groupBy ? "0.5rem" : 0,
|
|
56
44
|
backgroundColor: alternateRowColor && (index + 1) % 2 === 0
|
|
57
45
|
? "var(--row-bg)"
|
package/package.json
CHANGED