@megha-ui/react 1.2.801 → 1.2.803
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.
|
@@ -20,7 +20,7 @@ const isUrl = (value) => {
|
|
|
20
20
|
return false;
|
|
21
21
|
};
|
|
22
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
|
|
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
26
|
const groupByKeys = useMemo(() => (groupBy || "")
|
|
@@ -87,19 +87,12 @@ const GridRow = ({ item, rowStyle, cellStyle, rowHeight, bulkSelect, selectedRow
|
|
|
87
87
|
? "var(--row-bg)"
|
|
88
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
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
90
|
wordBreak: widthMode === "auto" ? "break-all" : "unset",
|
|
98
91
|
padding: groupBy ? "0.25rem" : 0,
|
|
99
92
|
backgroundColor: alternateRowColor && (index + 1) % 2 === 0
|
|
100
93
|
? "var(--row-bg)"
|
|
101
94
|
: "var(--row-bg-even)",
|
|
102
|
-
}, className: `column index-${groupBy}`, children: _jsx("div", { children: ((
|
|
95
|
+
}, className: `column index-${groupBy}`, children: _jsx("div", { children: ((_f = item[groupBy]) === null || _f === void 0 ? void 0 : _f.html) || ((_g = item[groupBy]) === null || _g === void 0 ? void 0 : _g.value) }) })), columns.map((column, colIndex) => {
|
|
103
96
|
var _a, _b, _c, _d;
|
|
104
97
|
const cellData = item[column.key];
|
|
105
98
|
const cellValue = cellData && Object.keys(cellData).includes("html")
|
|
@@ -112,13 +105,7 @@ const GridRow = ({ item, rowStyle, cellStyle, rowHeight, bulkSelect, selectedRow
|
|
|
112
105
|
const cellUrl = cellData === null || cellData === void 0 ? void 0 : cellData.url;
|
|
113
106
|
const isHidden = column.overflowHidden;
|
|
114
107
|
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",
|
|
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",
|
|
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",
|
|
122
109
|
// marginTop:
|
|
123
110
|
// rowIndex === index && rowIndex > -1 && rowIndex < 2
|
|
124
111
|
// ? rowHeight
|
|
@@ -130,7 +117,7 @@ const GridRow = ({ item, rowStyle, cellStyle, rowHeight, bulkSelect, selectedRow
|
|
|
130
117
|
: "var(--row-bg-even)" }), onClick: () => handleRowClick(column), children: [draggable && colIndex === draggableIndex && (_jsx("div", { onDragStart: (e) => handleDragStart && handleDragStart(e, index), style: {
|
|
131
118
|
cursor: "grab",
|
|
132
119
|
margin: "0 0.25rem",
|
|
133
|
-
}, children: "\u2630" })), loading ? (_jsx("div", { style: {
|
|
120
|
+
}, 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: {
|
|
134
121
|
display: "flex",
|
|
135
122
|
alignItems: "center", // Vertically center content within the cell
|
|
136
123
|
width: "100%",
|
|
@@ -144,11 +131,11 @@ const GridRow = ({ item, rowStyle, cellStyle, rowHeight, bulkSelect, selectedRow
|
|
|
144
131
|
}
|
|
145
132
|
return null;
|
|
146
133
|
})] }), isExpandable &&
|
|
147
|
-
((
|
|
148
|
-
expandedRow === ((
|
|
134
|
+
((_h = item === null || item === void 0 ? void 0 : item.id) === null || _h === void 0 ? void 0 : _h.value) &&
|
|
135
|
+
expandedRow === ((_j = item === null || item === void 0 ? void 0 : item.id) === null || _j === void 0 ? void 0 : _j.value) &&
|
|
149
136
|
item.expandedDetails &&
|
|
150
|
-
item.expandedDetails.html] }, String((
|
|
151
|
-
ignoreRowSelect.has((
|
|
137
|
+
item.expandedDetails.html] }, String((_l = (_k = item.id) === null || _k === void 0 ? void 0 : _k.value) !== null && _l !== void 0 ? _l : 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 &&
|
|
138
|
+
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) => {
|
|
152
139
|
var _a, _b, _c, _d, _e, _f;
|
|
153
140
|
const cellData = item[column.key];
|
|
154
141
|
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
|
|
@@ -195,7 +182,7 @@ const GridRow = ({ item, rowStyle, cellStyle, rowHeight, bulkSelect, selectedRow
|
|
|
195
182
|
? "var(--row-bg)"
|
|
196
183
|
: "var(--row-bg-even)" }), onClick: () => handleRowClick(column), children: [draggable && colIndex === draggableIndex && (_jsx("div", { onDragStart: (e) => handleDragStart && handleDragStart(e, index), style: {
|
|
197
184
|
cursor: "grab",
|
|
198
|
-
}, children: _jsx(MdDragIndicator, { size: "1.25rem" }) })), loading ? (_jsx("div", { style: {
|
|
185
|
+
}, 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: {
|
|
199
186
|
display: "flex",
|
|
200
187
|
alignItems: "center", // Vertically center content within the cell
|
|
201
188
|
width: "100%",
|
|
@@ -208,6 +195,6 @@ const GridRow = ({ item, rowStyle, cellStyle, rowHeight, bulkSelect, selectedRow
|
|
|
208
195
|
}, 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
196
|
}
|
|
210
197
|
return null;
|
|
211
|
-
})] }, String((
|
|
198
|
+
})] }, String((_p = (_o = item.id) === null || _o === void 0 ? void 0 : _o.value) !== null && _p !== void 0 ? _p : index)));
|
|
212
199
|
};
|
|
213
200
|
export default memo(GridRow);
|
package/package.json
CHANGED