@megha-ui/react 1.2.814 → 1.2.816
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.
|
@@ -36,6 +36,7 @@ import { TbCopy, TbCopyOff } from "react-icons/tb";
|
|
|
36
36
|
import { formatValue } from "../../services/commonService";
|
|
37
37
|
import NewGridHeader from "./utils/newGridHeader";
|
|
38
38
|
import NewGridRow from "./utils/newGridRow";
|
|
39
|
+
import NewSummariseDetails from "./utils/newSummariseDetails";
|
|
39
40
|
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 = {
|
|
40
41
|
borderLeft: "0.5rem solid #d9d9d9",
|
|
41
42
|
}, 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) => {
|
|
@@ -1600,7 +1601,9 @@ withCard = false, cardClassName, cardHeader, title, headerLeft, headerRight, sub
|
|
|
1600
1601
|
else if (index >= startIndex && index <= endIndex) {
|
|
1601
1602
|
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)));
|
|
1602
1603
|
}
|
|
1603
|
-
}), extraRow && extraRow
|
|
1604
|
+
}), extraRow && extraRow, tableData.length === 0 && typeof extraRow === "undefined" && (_jsx("div", { style: { gridColumn: 1 }, children: "No Data available" })), summariseAvailable &&
|
|
1605
|
+
filteredData.length > 0 &&
|
|
1606
|
+
gridGroupBy === "" && (_jsx(NewSummariseDetails, { summariseKeys: summariseKeys, columns: gridColumns, groupBy: gridGroupBy, sortable: sortable, cellStyle: cellStyle, columnWidths: columnWidths, widthMode: widthMode, summariseDetails: summariseDetails, activeCalculateColor: activeCalculateColor, gridRef: gridRef, setCalculatePosition: setCalculatePosition, calculatePosition: calculatePosition, calculatetextColor: calculatetextColor, setCalculateVisible: setCalculateVisible, calculateVisible: calculateVisible, summariseDisplay: summariseDisplay, recalculate: recalculate, actionsKey: actionsKey }))] }), paginate && gridGroupBy === "" && (_jsxs("div", { id: "pagination", style: {
|
|
1604
1607
|
display: "flex",
|
|
1605
1608
|
minHeight: "2rem",
|
|
1606
1609
|
alignItems: "center",
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Column } from "../types/grid";
|
|
3
|
+
import { Calculate } from "..";
|
|
4
|
+
interface SummariseDetailsProps {
|
|
5
|
+
removedKeys?: string[];
|
|
6
|
+
rowIndex?: number;
|
|
7
|
+
columns: Column[];
|
|
8
|
+
groupBy: string;
|
|
9
|
+
sortable: any;
|
|
10
|
+
cellStyle: any;
|
|
11
|
+
columnWidths: any;
|
|
12
|
+
widthMode: any;
|
|
13
|
+
summariseDetails: any;
|
|
14
|
+
summariseKeys: {
|
|
15
|
+
[key: string]: Calculate;
|
|
16
|
+
};
|
|
17
|
+
activeCalculateColor: any;
|
|
18
|
+
summariseDisplay: any;
|
|
19
|
+
gridRef: React.RefObject<HTMLDivElement | null>;
|
|
20
|
+
setCalculatePosition: any;
|
|
21
|
+
calculatePosition: {
|
|
22
|
+
top: number;
|
|
23
|
+
left: number;
|
|
24
|
+
};
|
|
25
|
+
calculatetextColor: string;
|
|
26
|
+
setCalculateVisible: React.Dispatch<React.SetStateAction<string>>;
|
|
27
|
+
calculateVisible: string;
|
|
28
|
+
recalculate: (_summariseDetails: {
|
|
29
|
+
[key: string]: Calculate;
|
|
30
|
+
}) => void;
|
|
31
|
+
groupedData?: string;
|
|
32
|
+
actionsKey: string;
|
|
33
|
+
}
|
|
34
|
+
declare const NewSummariseDetails: React.FC<SummariseDetailsProps>;
|
|
35
|
+
export default NewSummariseDetails;
|
|
@@ -0,0 +1,192 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import React from "react";
|
|
3
|
+
import CalculateDropdown from "./calculatedropdown";
|
|
4
|
+
const NewSummariseDetails = ({ columns, rowIndex, groupBy, sortable, cellStyle, columnWidths, widthMode, summariseDetails, summariseKeys, activeCalculateColor, gridRef, setCalculatePosition, calculatePosition, calculatetextColor = "#aaa", setCalculateVisible, calculateVisible, summariseDisplay, recalculate, groupedData, removedKeys = [], actionsKey, }) => {
|
|
5
|
+
const groupByKeys = React.useMemo(() => (groupBy || "")
|
|
6
|
+
.split(",")
|
|
7
|
+
.filter((g) => g)
|
|
8
|
+
.flatMap((g) => g.split("+").filter((k) => k)), [groupBy]);
|
|
9
|
+
const handleCalculateSelect = (_columnKey, type) => {
|
|
10
|
+
let columnKey = _columnKey;
|
|
11
|
+
if (columnKey.includes(">>")) {
|
|
12
|
+
columnKey = columnKey.split(">>")[1];
|
|
13
|
+
}
|
|
14
|
+
const _summariseKeys = Object.assign(Object.assign({}, summariseKeys), { [columnKey]: type });
|
|
15
|
+
recalculate(_summariseKeys);
|
|
16
|
+
};
|
|
17
|
+
const calculateOptions = [
|
|
18
|
+
{
|
|
19
|
+
label: summariseDisplay.count,
|
|
20
|
+
value: "count",
|
|
21
|
+
action: handleCalculateSelect,
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
label: summariseDisplay.countUnqValues,
|
|
25
|
+
value: "countUnqValues",
|
|
26
|
+
action: handleCalculateSelect,
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
label: summariseDisplay.countBlanks,
|
|
30
|
+
value: "countBlanks",
|
|
31
|
+
action: handleCalculateSelect,
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
label: summariseDisplay.countNotBlanks,
|
|
35
|
+
value: "countNotBlanks",
|
|
36
|
+
action: handleCalculateSelect,
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
label: summariseDisplay.percentEmpty + " %",
|
|
40
|
+
value: "percentEmpty",
|
|
41
|
+
action: handleCalculateSelect,
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
label: summariseDisplay.percentNonEmpty + " %",
|
|
45
|
+
value: "percentNonEmpty",
|
|
46
|
+
action: handleCalculateSelect,
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
label: summariseDisplay.sum,
|
|
50
|
+
value: "sum",
|
|
51
|
+
action: handleCalculateSelect,
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
label: summariseDisplay.average,
|
|
55
|
+
value: "average",
|
|
56
|
+
action: handleCalculateSelect,
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
label: summariseDisplay.min,
|
|
60
|
+
value: "min",
|
|
61
|
+
action: handleCalculateSelect,
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
label: summariseDisplay.max,
|
|
65
|
+
value: "max",
|
|
66
|
+
action: handleCalculateSelect,
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
label: summariseDisplay.new,
|
|
70
|
+
value: "new",
|
|
71
|
+
action: handleCalculateSelect,
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
label: summariseDisplay.old,
|
|
75
|
+
value: "old",
|
|
76
|
+
action: handleCalculateSelect,
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
label: summariseDisplay.range,
|
|
80
|
+
value: "range",
|
|
81
|
+
action: handleCalculateSelect,
|
|
82
|
+
},
|
|
83
|
+
];
|
|
84
|
+
const textTypeCalcOps = [
|
|
85
|
+
"count",
|
|
86
|
+
"countUnqValues",
|
|
87
|
+
"countBlanks",
|
|
88
|
+
"countNotBlanks",
|
|
89
|
+
"percentEmpty",
|
|
90
|
+
"percentNonEmpty",
|
|
91
|
+
];
|
|
92
|
+
const numberTypeCalcOps = [
|
|
93
|
+
...textTypeCalcOps,
|
|
94
|
+
"sum",
|
|
95
|
+
"average",
|
|
96
|
+
"min",
|
|
97
|
+
"max",
|
|
98
|
+
"range",
|
|
99
|
+
];
|
|
100
|
+
const dateTypeCalcOps = [
|
|
101
|
+
...textTypeCalcOps,
|
|
102
|
+
"new",
|
|
103
|
+
"old",
|
|
104
|
+
"range",
|
|
105
|
+
];
|
|
106
|
+
const handleCalculateClick = (e, columnKey) => {
|
|
107
|
+
var _a;
|
|
108
|
+
e.stopPropagation();
|
|
109
|
+
const grid = (_a = gridRef === null || gridRef === void 0 ? void 0 : gridRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
|
|
110
|
+
const rect = e.currentTarget.getBoundingClientRect();
|
|
111
|
+
let fixed = false;
|
|
112
|
+
let top = rect.bottom - rect.height + window.scrollY;
|
|
113
|
+
if (grid && top - 300 < (grid === null || grid === void 0 ? void 0 : grid.top)) {
|
|
114
|
+
top = rect.bottom + window.scrollY;
|
|
115
|
+
fixed = true;
|
|
116
|
+
}
|
|
117
|
+
const left = rect.left + window.scrollX;
|
|
118
|
+
setCalculatePosition({ top, left, fixed });
|
|
119
|
+
toggleDropdown(columnKey);
|
|
120
|
+
};
|
|
121
|
+
const toggleDropdown = (columnKey) => {
|
|
122
|
+
setCalculateVisible((prev) => prev === columnKey ? "" : columnKey);
|
|
123
|
+
};
|
|
124
|
+
const getCalculateValue = (details, columnKey, key) => {
|
|
125
|
+
const columnDetails = details[columnKey];
|
|
126
|
+
return Math.round(columnDetails[key]);
|
|
127
|
+
};
|
|
128
|
+
return (_jsxs(_Fragment, { children: [groupBy
|
|
129
|
+
.split(",")
|
|
130
|
+
.flatMap((item) => item.split("+"))
|
|
131
|
+
.filter((item) => item && !removedKeys.includes(item))
|
|
132
|
+
.map((_groupBy) => {
|
|
133
|
+
var _a;
|
|
134
|
+
const column = columns.find((column) => column.key === _groupBy);
|
|
135
|
+
const columnKey = groupedData
|
|
136
|
+
? `${groupedData}>>${column === null || column === void 0 ? void 0 : column.key}`
|
|
137
|
+
: column === null || column === void 0 ? void 0 : column.key;
|
|
138
|
+
return (_jsxs("div", { style: Object.assign(Object.assign({}, cellStyle), { position: "relative", padding: _groupBy ? "0.5rem" : 0 }), className: `column ${columnKey}-${(_a = summariseDetails[columnKey || ""]) === null || _a === void 0 ? void 0 : _a.type}`, children: [summariseDetails[columnKey || ""] &&
|
|
139
|
+
summariseDetails[columnKey || ""].type ? (_jsxs("div", { style: {
|
|
140
|
+
display: "flex",
|
|
141
|
+
alignItems: "center",
|
|
142
|
+
justifyContent: "space-between",
|
|
143
|
+
fontSize: "inherit",
|
|
144
|
+
color: activeCalculateColor,
|
|
145
|
+
cursor: "pointer",
|
|
146
|
+
}, onClick: (e) => handleCalculateClick(e, columnKey || ""), children: [_jsx("span", { children: summariseDisplay[summariseDetails[columnKey || ""].type] }), _jsx("span", { children: getCalculateValue(summariseDetails, columnKey || "", summariseDetails[columnKey || ""].type) })] })) : (_jsx("div", { style: {
|
|
147
|
+
display: "flex",
|
|
148
|
+
alignItems: "center",
|
|
149
|
+
justifyContent: "start",
|
|
150
|
+
fontSize: "inherit",
|
|
151
|
+
color: calculatetextColor,
|
|
152
|
+
cursor: "pointer",
|
|
153
|
+
}, onClick: (e) => handleCalculateClick(e, columnKey || ""), children: "Summarise" })), calculateVisible === columnKey && (_jsx(CalculateDropdown, { rowIndex: rowIndex !== null && rowIndex !== void 0 ? rowIndex : -1, options: calculateOptions.filter((item) => (column === null || column === void 0 ? void 0 : column.dataType) === "number"
|
|
154
|
+
? numberTypeCalcOps.includes(item.value)
|
|
155
|
+
: (column === null || column === void 0 ? void 0 : column.dataType) === "date"
|
|
156
|
+
? dateTypeCalcOps.includes(item.value)
|
|
157
|
+
: textTypeCalcOps.includes(item.value)), onClose: () => setCalculateVisible(""), columnKey: columnKey || "" }))] }, `${groupedData}-${_groupBy}`));
|
|
158
|
+
}), columns
|
|
159
|
+
.filter((column) => !groupByKeys.includes(column.key))
|
|
160
|
+
.map((column) => {
|
|
161
|
+
var _a;
|
|
162
|
+
const columnKey = groupedData
|
|
163
|
+
? `${groupedData}>>${column.key}`
|
|
164
|
+
: column.key;
|
|
165
|
+
if (!column.hidden) {
|
|
166
|
+
return (_jsxs("div", { className: `${sortable && column.sortable ? "sortable" : ""} ${column.showMenu ? "menu-true" : "menu-false"} ${`column-${column.key}`} ${columnKey}-${(_a = summariseDetails[columnKey]) === null || _a === void 0 ? void 0 : _a.type}`, style: Object.assign(Object.assign({}, cellStyle), { position: "relative", padding: "0.5rem", textAlign: "left", whiteSpace: "nowrap", textOverflow: "ellipsis", flex: widthMode === "auto" ? 1 : undefined, flexGrow: widthMode === "auto" ? 1 : 0, flexShrink: widthMode === "auto" ? 1 : 0, background: "inherit" }), children: [summariseDetails[columnKey] &&
|
|
167
|
+
summariseDetails[columnKey].type ? (_jsxs("div", { style: {
|
|
168
|
+
display: "flex",
|
|
169
|
+
alignItems: "center",
|
|
170
|
+
justifyContent: "space-between",
|
|
171
|
+
fontSize: "inherit",
|
|
172
|
+
color: activeCalculateColor,
|
|
173
|
+
cursor: "pointer",
|
|
174
|
+
}, onClick: (e) => handleCalculateClick(e, columnKey), children: [_jsx("span", { children: summariseDisplay[summariseDetails[columnKey].type] }), _jsx("span", { children: getCalculateValue(summariseDetails, columnKey, summariseDetails[columnKey].type) })] })) : (_jsx("div", { style: {
|
|
175
|
+
alignItems: "center",
|
|
176
|
+
justifyContent: "start",
|
|
177
|
+
fontSize: "inherit",
|
|
178
|
+
color: calculatetextColor,
|
|
179
|
+
cursor: "pointer",
|
|
180
|
+
display: actionsKey.split(",").includes(column.key)
|
|
181
|
+
? "none"
|
|
182
|
+
: "flex",
|
|
183
|
+
}, onClick: (e) => handleCalculateClick(e, columnKey), children: "Summarise" })), calculateVisible === columnKey && (_jsx(CalculateDropdown, { rowIndex: rowIndex !== null && rowIndex !== void 0 ? rowIndex : -1, options: calculateOptions.filter((item) => column.dataType === "number" ||
|
|
184
|
+
column.dataType === "currency"
|
|
185
|
+
? numberTypeCalcOps.includes(item.value)
|
|
186
|
+
: column.dataType === "date"
|
|
187
|
+
? dateTypeCalcOps.includes(item.value)
|
|
188
|
+
: textTypeCalcOps.includes(item.value)), onClose: () => setCalculateVisible(""), columnKey: columnKey }))] }, columnKey));
|
|
189
|
+
}
|
|
190
|
+
})] }));
|
|
191
|
+
};
|
|
192
|
+
export default NewSummariseDetails;
|
package/package.json
CHANGED