@megha-ui/react 1.3.18 → 1.3.20
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
2
|
+
import { memo, useCallback, useEffect, useMemo, useState, } from "react";
|
|
3
3
|
import Shimmer from "./shimmer";
|
|
4
4
|
import Checkbox from "../../checkbox";
|
|
5
5
|
import { formatValue } from "../../../services/commonService";
|
|
@@ -23,6 +23,7 @@ const GridRow = ({ item, rowStyle, cellStyle, rowHeight, bulkSelect, selectedRow
|
|
|
23
23
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
|
|
24
24
|
const [itemsAlign, setItemsAlign] = useState("stretch");
|
|
25
25
|
const [draggableIndex, setDraggableIndex] = useState(0);
|
|
26
|
+
const [isDragging, setIsDragging] = useState(false);
|
|
26
27
|
const groupByKeys = useMemo(() => (groupBy || "")
|
|
27
28
|
.split(",")
|
|
28
29
|
.filter((g) => g)
|
|
@@ -58,6 +59,15 @@ const GridRow = ({ item, rowStyle, cellStyle, rowHeight, bulkSelect, selectedRow
|
|
|
58
59
|
}
|
|
59
60
|
setDraggableIndex(_dragIndex);
|
|
60
61
|
}, [columns]);
|
|
62
|
+
const dragHighlightStyle = isDragging
|
|
63
|
+
? {
|
|
64
|
+
boxShadow: "0 0 8px rgba(0, 0, 0, 0.15)",
|
|
65
|
+
transform: "scale(1.01)",
|
|
66
|
+
transition: "box-shadow 0.15s ease, transform 0.15s ease",
|
|
67
|
+
}
|
|
68
|
+
: {
|
|
69
|
+
transition: "box-shadow 0.15s ease, transform 0.15s ease",
|
|
70
|
+
};
|
|
61
71
|
const checkAvailableForTooltip = (id) => {
|
|
62
72
|
setTimeout(() => {
|
|
63
73
|
var _a;
|
|
@@ -83,9 +93,9 @@ const GridRow = ({ item, rowStyle, cellStyle, rowHeight, bulkSelect, selectedRow
|
|
|
83
93
|
return isExpandable &&
|
|
84
94
|
((_a = item === null || item === void 0 ? void 0 : item.id) === null || _a === void 0 ? void 0 : _a.value) &&
|
|
85
95
|
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),
|
|
96
|
+
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), 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
97
|
? "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 &&
|
|
98
|
+
: "var(--row-bg-even)" }), children: [bulkSelect && (_jsx("div", { style: Object.assign(Object.assign(Object.assign({}, cellStyle), dragHighlightStyle), { textTransform: "uppercase", padding: "0.5rem", textAlign: "left", whiteSpace: "nowrap", textOverflow: "ellipsis" }), children: _jsx(Checkbox, { noLabel: true, disabled: ignoreRowSelect &&
|
|
89
99
|
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
100
|
wordBreak: widthMode === "auto" ? "break-all" : "unset",
|
|
91
101
|
padding: groupBy ? "0.25rem" : 0,
|
|
@@ -105,11 +115,14 @@ const GridRow = ({ item, rowStyle, cellStyle, rowHeight, bulkSelect, selectedRow
|
|
|
105
115
|
const cellUrl = cellData === null || cellData === void 0 ? void 0 : cellData.url;
|
|
106
116
|
const isHidden = column.overflowHidden;
|
|
107
117
|
if (!column.hidden && !groupByKeys.includes(column.key)) {
|
|
108
|
-
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", border: rowIndex === index && columnIndex === colIndex
|
|
118
|
+
return (_jsxs("div", { id: `column-${index}-${colIndex}`, className: `column index-${column.key}`, style: Object.assign(Object.assign(Object.assign({}, cellStyle), dragHighlightStyle), { 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", border: rowIndex === index && columnIndex === colIndex
|
|
109
119
|
? `1px solid ${hlBorderColor}`
|
|
110
120
|
: "", backgroundColor: alternateRowColor && (index + 1) % 2 === 0
|
|
111
121
|
? "var(--row-bg)"
|
|
112
|
-
: "var(--row-bg-even)" }), draggable: draggable, onDragStart: (e) => handleDragStart && handleDragStart(e, index), onDragOver: (e) => handleDragOver && handleDragOver(e), onDrop: (e) => handleDrop && handleDrop(e, index), onClick: () => handleRowClick(column), children: [draggable && colIndex === draggableIndex && (_jsx("div", { draggable: draggable, onDragStart: (e) =>
|
|
122
|
+
: "var(--row-bg-even)" }), draggable: draggable, onDragStart: (e) => handleDragStart && handleDragStart(e, index), onDragOver: (e) => handleDragOver && handleDragOver(e), onDrop: (e) => handleDrop && handleDrop(e, index), onClick: () => handleRowClick(column), children: [draggable && colIndex === draggableIndex && (_jsx("div", { draggable: draggable, onDragStart: (e) => {
|
|
123
|
+
handleDragStart && handleDragStart(e, index);
|
|
124
|
+
setIsDragging(true);
|
|
125
|
+
}, onDragEnd: () => setIsDragging(false), style: {
|
|
113
126
|
cursor: "grab",
|
|
114
127
|
margin: "0 0.25rem",
|
|
115
128
|
}, children: "\u2630" })), loading ? (_jsx("div", { style: { 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: {
|
|
@@ -129,7 +142,7 @@ const GridRow = ({ item, rowStyle, cellStyle, rowHeight, bulkSelect, selectedRow
|
|
|
129
142
|
((_h = item === null || item === void 0 ? void 0 : item.id) === null || _h === void 0 ? void 0 : _h.value) &&
|
|
130
143
|
expandedRow === ((_j = item === null || item === void 0 ? void 0 : item.id) === null || _j === void 0 ? void 0 : _j.value) &&
|
|
131
144
|
item.expandedDetails &&
|
|
132
|
-
item.expandedDetails.html] }, String((_l = (_k = item.id) === null || _k === void 0 ? void 0 : _k.value) !== null && _l !== void 0 ? _l : index))) : (_jsxs(
|
|
145
|
+
item.expandedDetails.html] }, String((_l = (_k = item.id) === null || _k === void 0 ? void 0 : _k.value) !== null && _l !== void 0 ? _l : index))) : (_jsxs("div", { id: `${index}`, className: getRowClassNames(), onDragOver: (e) => handleDragOver && handleDragOver(e), onDrop: (e) => handleDrop && handleDrop(e, index), style: { display: "contents" }, children: [bulkSelect && (_jsx("div", { style: Object.assign(Object.assign(Object.assign(Object.assign({}, cellStyle), rowStyle), dragHighlightStyle), { textTransform: "uppercase", padding: "0.25rem", textAlign: "left", whiteSpace: "nowrap", textOverflow: "ellipsis" }), children: _jsx(Checkbox, { noLabel: true, disabled: ignoreRowSelect &&
|
|
133
146
|
ignoreRowSelect.has((_m = item["id"].value) === null || _m === void 0 ? void 0 : _m.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) => {
|
|
134
147
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
135
148
|
const cellData = item[column.key];
|
|
@@ -166,7 +179,7 @@ const GridRow = ({ item, rowStyle, cellStyle, rowHeight, bulkSelect, selectedRow
|
|
|
166
179
|
const cellUrl = cellData === null || cellData === void 0 ? void 0 : cellData.url;
|
|
167
180
|
const isHidden = column.overflowHidden;
|
|
168
181
|
if (!column.hidden && !groupByKeys.includes(column.key)) {
|
|
169
|
-
return (_jsxs("div", { id: `column-${index}-${colIndex}`, className: `column index-${column.key}`, style: Object.assign(Object.assign(Object.assign(Object.assign({}, cellStyle), rowStyle), (!bulkSelect &&
|
|
182
|
+
return (_jsxs("div", { id: `column-${index}-${colIndex}`, className: `column index-${column.key}`, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, cellStyle), rowStyle), dragHighlightStyle), (!bulkSelect &&
|
|
170
183
|
index === 0 &&
|
|
171
184
|
(selectedRow === ((_e = item.id) === null || _e === void 0 ? void 0 : _e.value) ? selectedRowStyle : {}))), { 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",
|
|
172
185
|
// marginTop:
|
|
@@ -177,7 +190,10 @@ const GridRow = ({ item, rowStyle, cellStyle, rowHeight, bulkSelect, selectedRow
|
|
|
177
190
|
? `1px solid ${hlBorderColor}`
|
|
178
191
|
: "", backgroundColor: alternateRowColor && (index + 1) % 2 === 0
|
|
179
192
|
? "var(--row-bg)"
|
|
180
|
-
: "var(--row-bg-even)" }),
|
|
193
|
+
: "var(--row-bg-even)" }), onClick: () => handleRowClick(column), children: [draggable && colIndex === draggableIndex && (_jsx("div", { draggable: draggable, onDragStart: (e) => {
|
|
194
|
+
handleDragStart && handleDragStart(e, index);
|
|
195
|
+
setIsDragging(true);
|
|
196
|
+
}, onDragEnd: () => setIsDragging(false), style: {
|
|
181
197
|
cursor: "grab",
|
|
182
198
|
}, children: _jsx(MdDragIndicator, { size: "1.25rem" }) })), loading ? (_jsx("div", { style: { height: rowHeight }, children: _jsx(Shimmer, { height: 32, width: column.width }) })) : (_jsx("div", { className: (cellData === null || cellData === void 0 ? void 0 : cellData.className) || "", style: {
|
|
183
199
|
display: "flex",
|
package/package.json
CHANGED