@rufous/ui 0.1.68 → 0.1.70
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/DataGrid/DataGrid.cjs +143 -98
- package/dist/DataGrid/DataGrid.js +1 -1
- package/dist/DataGrid/index.cjs +143 -98
- package/dist/DataGrid/index.js +1 -1
- package/dist/Dialogs/BaseDialog.css +0 -1
- package/dist/Dialogs/BaseDialog.js +16 -16
- package/dist/Dialogs/index.css +0 -1
- package/dist/Dialogs/index.js +16 -16
- package/dist/TextFields/AddressLookup.js +3 -3
- package/dist/{chunk-B6EOV25J.js → chunk-7OMS6IWF.js} +143 -98
- package/dist/icons/index.js +16 -16
- package/dist/main.cjs +143 -98
- package/dist/main.css +0 -1
- package/dist/main.js +35 -35
- package/dist/style.css +0 -1
- package/dist/styles/datagrid.css +0 -1
- package/package.json +1 -1
- package/dist/{chunk-4GPYGFPP.js → chunk-K6626C4D.js} +3 -3
- package/dist/{chunk-EB6MPFGC.js → chunk-M5GFOGY5.js} +3 -3
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import {
|
|
2
2
|
AddressLookup_default
|
|
3
|
-
} from "../chunk-
|
|
4
|
-
import "../chunk-UPCMMCPQ.js";
|
|
5
|
-
import "../chunk-CTBYVXFP.js";
|
|
3
|
+
} from "../chunk-M5GFOGY5.js";
|
|
6
4
|
import "../chunk-BOE27BFQ.js";
|
|
7
5
|
import "../chunk-S7BNFVQO.js";
|
|
6
|
+
import "../chunk-UPCMMCPQ.js";
|
|
7
|
+
import "../chunk-CTBYVXFP.js";
|
|
8
8
|
import "../chunk-LI4N7JWK.js";
|
|
9
9
|
export {
|
|
10
10
|
AddressLookup_default as default
|
|
@@ -26,22 +26,31 @@ function DataGrid({
|
|
|
26
26
|
pageSizeOptions = [5, 10, 25, 50],
|
|
27
27
|
title
|
|
28
28
|
}) {
|
|
29
|
-
const
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
29
|
+
const [columnOverrides, setColumnOverrides] = useState({});
|
|
30
|
+
const resolvedColumns = useMemo(() => {
|
|
31
|
+
return initialColumnsProp.map((col) => {
|
|
32
|
+
const field = String(col.field || col.key || "");
|
|
33
|
+
const override = columnOverrides[field] || {};
|
|
34
|
+
return {
|
|
35
|
+
...col,
|
|
36
|
+
field,
|
|
37
|
+
headerName: col.headerName || col.header || "",
|
|
38
|
+
hidden: override.hidden !== void 0 ? override.hidden : col.hidden,
|
|
39
|
+
pinned: override.pinned !== void 0 ? override.pinned : col.pinned
|
|
40
|
+
};
|
|
41
|
+
});
|
|
42
|
+
}, [initialColumnsProp, columnOverrides]);
|
|
35
43
|
const [columnWidths, setColumnWidths] = useState(() => {
|
|
36
44
|
const widths = {};
|
|
37
|
-
|
|
45
|
+
initialColumnsProp.forEach((col) => {
|
|
46
|
+
const field = String(col.field || col.key || "");
|
|
38
47
|
const w = col.width || 200;
|
|
39
|
-
widths[
|
|
48
|
+
widths[field] = typeof w === "number" ? w : parseInt(w);
|
|
40
49
|
});
|
|
41
50
|
return widths;
|
|
42
51
|
});
|
|
43
52
|
const [pageSize, setPageSize] = useState(initialPageSize);
|
|
44
|
-
const [
|
|
53
|
+
const [sortField, setSortField] = useState(null);
|
|
45
54
|
const [sortDirection, setSortDirection] = useState(null);
|
|
46
55
|
const [filterText, setFilterText] = useState("");
|
|
47
56
|
const [currentPage, setCurrentPage] = useState(1);
|
|
@@ -54,40 +63,15 @@ function DataGrid({
|
|
|
54
63
|
const menuRef = useRef(null);
|
|
55
64
|
const [showManageColumns, setShowManageColumns] = useState(false);
|
|
56
65
|
const [showAdvancedFilter, setShowAdvancedFilter] = useState(false);
|
|
66
|
+
const initialFilterCol = String(initialColumnsProp[0]?.field || initialColumnsProp[0]?.key || "");
|
|
57
67
|
const [advancedFilters, setAdvancedFilters] = useState([
|
|
58
|
-
{ column:
|
|
68
|
+
{ column: initialFilterCol, operator: "contains", value: "", logic: "AND" }
|
|
59
69
|
]);
|
|
60
|
-
useEffect(() => {
|
|
61
|
-
setColumns((prevColumns) => {
|
|
62
|
-
return initialColumns.map((newCol) => {
|
|
63
|
-
const prevCol = prevColumns.find((c) => (c.key || c.field) === (newCol.key || newCol.field));
|
|
64
|
-
if (!prevCol) return newCol;
|
|
65
|
-
return {
|
|
66
|
-
...newCol,
|
|
67
|
-
hidden: prevCol.hidden !== void 0 ? prevCol.hidden : newCol.hidden,
|
|
68
|
-
pinned: prevCol.pinned !== void 0 ? prevCol.pinned : newCol.pinned
|
|
69
|
-
};
|
|
70
|
-
});
|
|
71
|
-
});
|
|
72
|
-
}, [initialColumns]);
|
|
73
|
-
useEffect(() => {
|
|
74
|
-
setColumnWidths((prev) => {
|
|
75
|
-
const next = { ...prev };
|
|
76
|
-
initialColumns.forEach((col) => {
|
|
77
|
-
const key = String(col.key);
|
|
78
|
-
if (next[key] === void 0) {
|
|
79
|
-
const w = col.width || 200;
|
|
80
|
-
next[key] = typeof w === "number" ? w : parseInt(w);
|
|
81
|
-
}
|
|
82
|
-
});
|
|
83
|
-
return next;
|
|
84
|
-
});
|
|
85
|
-
}, [initialColumns]);
|
|
86
70
|
const [colSearch, setColSearch] = useState("");
|
|
87
71
|
useEffect(() => {
|
|
88
72
|
const handleMouseMove = (e) => {
|
|
89
73
|
if (!resizingColumn) return;
|
|
90
|
-
const col =
|
|
74
|
+
const col = resolvedColumns.find((c) => String(c.field) === resizingColumn);
|
|
91
75
|
const diff = e.clientX - startX;
|
|
92
76
|
const minW = col?.minWidth ? typeof col.minWidth === "number" ? col.minWidth : parseInt(col.minWidth) : 80;
|
|
93
77
|
const maxW = col?.maxWidth ? typeof col.maxWidth === "number" ? col.maxWidth : parseInt(col.maxWidth) : Infinity;
|
|
@@ -103,7 +87,7 @@ function DataGrid({
|
|
|
103
87
|
document.removeEventListener("mousemove", handleMouseMove);
|
|
104
88
|
document.removeEventListener("mouseup", handleMouseUp);
|
|
105
89
|
};
|
|
106
|
-
}, [resizingColumn, startX, startWidth,
|
|
90
|
+
}, [resizingColumn, startX, startWidth, resolvedColumns]);
|
|
107
91
|
useEffect(() => {
|
|
108
92
|
const handleClickOutside = (e) => {
|
|
109
93
|
if (menuRef.current && !menuRef.current.contains(e.target)) {
|
|
@@ -113,32 +97,55 @@ function DataGrid({
|
|
|
113
97
|
document.addEventListener("mousedown", handleClickOutside);
|
|
114
98
|
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
115
99
|
}, []);
|
|
116
|
-
|
|
100
|
+
useEffect(() => {
|
|
101
|
+
setColumnWidths((prev) => {
|
|
102
|
+
const next = { ...prev };
|
|
103
|
+
initialColumnsProp.forEach((col) => {
|
|
104
|
+
const field = String(col.field || col.key || "");
|
|
105
|
+
if (next[field] === void 0) {
|
|
106
|
+
const w = col.width || 200;
|
|
107
|
+
next[field] = typeof w === "number" ? w : parseInt(w);
|
|
108
|
+
}
|
|
109
|
+
});
|
|
110
|
+
return next;
|
|
111
|
+
});
|
|
112
|
+
}, [initialColumnsProp]);
|
|
113
|
+
const handleSort = (fieldKey, dir) => {
|
|
117
114
|
if (dir !== void 0) {
|
|
118
|
-
|
|
115
|
+
setSortField(fieldKey);
|
|
119
116
|
setSortDirection(dir);
|
|
120
|
-
} else if (
|
|
117
|
+
} else if (sortField === fieldKey) {
|
|
121
118
|
if (sortDirection === "asc") setSortDirection("desc");
|
|
122
119
|
else {
|
|
123
|
-
|
|
120
|
+
setSortField(null);
|
|
124
121
|
setSortDirection(null);
|
|
125
122
|
}
|
|
126
123
|
} else {
|
|
127
|
-
|
|
124
|
+
setSortField(fieldKey);
|
|
128
125
|
setSortDirection("asc");
|
|
129
126
|
}
|
|
130
127
|
setActiveMenu(null);
|
|
131
128
|
};
|
|
132
|
-
const togglePin = (
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
129
|
+
const togglePin = (fieldKey, side) => {
|
|
130
|
+
setColumnOverrides((prev) => {
|
|
131
|
+
const current = prev[fieldKey] || {};
|
|
132
|
+
return {
|
|
133
|
+
...prev,
|
|
134
|
+
[fieldKey]: { ...current, pinned: current.pinned === side ? void 0 : side }
|
|
135
|
+
};
|
|
136
|
+
});
|
|
136
137
|
setActiveMenu(null);
|
|
137
138
|
};
|
|
138
|
-
const toggleHide = (
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
139
|
+
const toggleHide = (fieldKey) => {
|
|
140
|
+
setColumnOverrides((prev) => {
|
|
141
|
+
const current = prev[fieldKey] || {};
|
|
142
|
+
const col = resolvedColumns.find((c) => String(c.field) === fieldKey);
|
|
143
|
+
if (col?.hideable === false) return prev;
|
|
144
|
+
return {
|
|
145
|
+
...prev,
|
|
146
|
+
[fieldKey]: { ...current, hidden: !current.hidden }
|
|
147
|
+
};
|
|
148
|
+
});
|
|
142
149
|
setActiveMenu(null);
|
|
143
150
|
};
|
|
144
151
|
const filteredData = useMemo(() => {
|
|
@@ -180,30 +187,30 @@ function DataGrid({
|
|
|
180
187
|
});
|
|
181
188
|
}, [data, filterText, advancedFilters]);
|
|
182
189
|
const sortedData = useMemo(() => {
|
|
183
|
-
if (!
|
|
184
|
-
const col =
|
|
190
|
+
if (!sortField || !sortDirection) return filteredData;
|
|
191
|
+
const col = resolvedColumns.find((c) => c.field === sortField);
|
|
185
192
|
return [...filteredData].sort((a, b) => {
|
|
186
|
-
let aVal = a[
|
|
187
|
-
let bVal = b[
|
|
193
|
+
let aVal = a[sortField];
|
|
194
|
+
let bVal = b[sortField];
|
|
188
195
|
if (col?.valueGetter) {
|
|
189
|
-
aVal = col.valueGetter({ value: aVal, row: a, field: String(
|
|
190
|
-
bVal = col.valueGetter({ value: bVal, row: b, field: String(
|
|
196
|
+
aVal = col.valueGetter({ value: aVal, row: a, field: String(sortField) });
|
|
197
|
+
bVal = col.valueGetter({ value: bVal, row: b, field: String(sortField) });
|
|
191
198
|
}
|
|
192
199
|
if (aVal < bVal) return sortDirection === "asc" ? -1 : 1;
|
|
193
200
|
if (aVal > bVal) return sortDirection === "asc" ? 1 : -1;
|
|
194
201
|
return 0;
|
|
195
202
|
});
|
|
196
|
-
}, [filteredData,
|
|
203
|
+
}, [filteredData, sortField, sortDirection, resolvedColumns]);
|
|
197
204
|
const totalPages = Math.max(1, Math.ceil(sortedData.length / pageSize));
|
|
198
205
|
const paginatedData = useMemo(() => {
|
|
199
206
|
const start = (currentPage - 1) * pageSize;
|
|
200
207
|
return sortedData.slice(start, start + pageSize);
|
|
201
208
|
}, [sortedData, currentPage, pageSize]);
|
|
202
209
|
const handleExport = () => {
|
|
203
|
-
const visibleCols =
|
|
204
|
-
const headers = visibleCols.map((c) => c.
|
|
210
|
+
const visibleCols = resolvedColumns.filter((c) => !c.hidden);
|
|
211
|
+
const headers = visibleCols.map((c) => c.headerName).join(",");
|
|
205
212
|
const rows = sortedData.map(
|
|
206
|
-
(item) => visibleCols.map((c) => `"${String(item[c.
|
|
213
|
+
(item) => visibleCols.map((c) => `"${String(item[c.field]).replace(/"/g, '""')}"`).join(",")
|
|
207
214
|
);
|
|
208
215
|
const csv = [headers, ...rows].join("\n");
|
|
209
216
|
const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
|
|
@@ -214,24 +221,34 @@ function DataGrid({
|
|
|
214
221
|
link.click();
|
|
215
222
|
document.body.removeChild(link);
|
|
216
223
|
};
|
|
217
|
-
const handleMenuOpen = (e,
|
|
224
|
+
const handleMenuOpen = (e, keyStr) => {
|
|
218
225
|
e.stopPropagation();
|
|
219
226
|
const rect = e.currentTarget.getBoundingClientRect();
|
|
220
|
-
|
|
221
|
-
|
|
227
|
+
let position = {
|
|
228
|
+
top: rect.bottom + 4,
|
|
229
|
+
left: rect.left
|
|
230
|
+
};
|
|
231
|
+
if (rect.left + 150 > window.innerWidth) {
|
|
232
|
+
position = {
|
|
233
|
+
top: rect.bottom + 4,
|
|
234
|
+
right: window.innerWidth - rect.right
|
|
235
|
+
};
|
|
236
|
+
}
|
|
237
|
+
setMenuPosition(position);
|
|
238
|
+
setActiveMenu(keyStr);
|
|
222
239
|
};
|
|
223
240
|
const visibleColumns = useMemo(() => {
|
|
224
|
-
const left =
|
|
225
|
-
const mid =
|
|
226
|
-
const right =
|
|
241
|
+
const left = resolvedColumns.filter((c) => !c.hidden && c.pinned === "left");
|
|
242
|
+
const mid = resolvedColumns.filter((c) => !c.hidden && !c.pinned);
|
|
243
|
+
const right = resolvedColumns.filter((c) => !c.hidden && c.pinned === "right");
|
|
227
244
|
return [...left, ...mid, ...right];
|
|
228
|
-
}, [
|
|
245
|
+
}, [resolvedColumns]);
|
|
229
246
|
const getLeftOffset = (col, idx) => {
|
|
230
247
|
if (col.pinned !== "left") return void 0;
|
|
231
248
|
let offset = 0;
|
|
232
249
|
for (let i = 0; i < idx; i++) {
|
|
233
250
|
if (visibleColumns[i].pinned === "left") {
|
|
234
|
-
offset += columnWidths[String(visibleColumns[i].
|
|
251
|
+
offset += columnWidths[String(visibleColumns[i].field)] || 200;
|
|
235
252
|
}
|
|
236
253
|
}
|
|
237
254
|
return offset;
|
|
@@ -265,14 +282,14 @@ function DataGrid({
|
|
|
265
282
|
},
|
|
266
283
|
/* @__PURE__ */ React.createElement(Columns, { size: 16 })
|
|
267
284
|
), /* @__PURE__ */ React.createElement("button", { className: "dg-action-btn", onClick: handleExport }, /* @__PURE__ */ React.createElement(Download, { size: 14 }), " Export CSV"))), /* @__PURE__ */ React.createElement("div", { className: "dg-table-wrap" }, /* @__PURE__ */ React.createElement("table", { className: "dg-table" }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, visibleColumns.map((col, idx) => {
|
|
268
|
-
const
|
|
269
|
-
const width = columnWidths[
|
|
285
|
+
const colField = String(col.field);
|
|
286
|
+
const width = columnWidths[colField] || 200;
|
|
270
287
|
const leftOffset = getLeftOffset(col, idx);
|
|
271
|
-
const isSorted =
|
|
288
|
+
const isSorted = sortField === col.field;
|
|
272
289
|
return /* @__PURE__ */ React.createElement(
|
|
273
290
|
"th",
|
|
274
291
|
{
|
|
275
|
-
key:
|
|
292
|
+
key: colField,
|
|
276
293
|
className: `dg-thead-cell${col.pinned === "left" ? " pinned-left" : col.pinned === "right" ? " pinned-right" : ""} ${col.headerClassName || ""}`,
|
|
277
294
|
style: { width, minWidth: width, left: leftOffset, flex: col.flex }
|
|
278
295
|
},
|
|
@@ -280,25 +297,25 @@ function DataGrid({
|
|
|
280
297
|
"div",
|
|
281
298
|
{
|
|
282
299
|
className: `dg-th-label${col.sortable === false ? " no-sort" : ""}`,
|
|
283
|
-
onClick: () => col.sortable !== false && handleSort(col.
|
|
300
|
+
onClick: () => col.sortable !== false && handleSort(col.field || "")
|
|
284
301
|
},
|
|
285
|
-
col.
|
|
302
|
+
col.headerName,
|
|
286
303
|
isSorted && sortDirection === "asc" && /* @__PURE__ */ React.createElement(ChevronUp, { size: 12 }),
|
|
287
304
|
isSorted && sortDirection === "desc" && /* @__PURE__ */ React.createElement(ChevronDown, { size: 12 })
|
|
288
305
|
), /* @__PURE__ */ React.createElement("div", { className: "dg-th-actions" }, !col.disableColumnMenu && /* @__PURE__ */ React.createElement(
|
|
289
306
|
"button",
|
|
290
307
|
{
|
|
291
308
|
className: "dg-th-menu-btn",
|
|
292
|
-
onClick: (e) => handleMenuOpen(e,
|
|
309
|
+
onClick: (e) => handleMenuOpen(e, colField)
|
|
293
310
|
},
|
|
294
311
|
/* @__PURE__ */ React.createElement(MoreVertical, { size: 13 })
|
|
295
312
|
), /* @__PURE__ */ React.createElement(
|
|
296
313
|
"div",
|
|
297
314
|
{
|
|
298
|
-
className: `dg-resizer${resizingColumn ===
|
|
315
|
+
className: `dg-resizer${resizingColumn === colField ? " resizing" : ""}`,
|
|
299
316
|
onMouseDown: (e) => {
|
|
300
317
|
e.preventDefault();
|
|
301
|
-
setResizingColumn(
|
|
318
|
+
setResizingColumn(colField);
|
|
302
319
|
setStartX(e.clientX);
|
|
303
320
|
setStartWidth(width);
|
|
304
321
|
}
|
|
@@ -306,19 +323,19 @@ function DataGrid({
|
|
|
306
323
|
)))
|
|
307
324
|
);
|
|
308
325
|
}), actions && /* @__PURE__ */ React.createElement("th", { style: { width: 0, padding: 0 } }))), /* @__PURE__ */ React.createElement("tbody", null, paginatedData.length === 0 ? /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("td", { colSpan: visibleColumns.length + (actions ? 1 : 0), className: "dg-empty" }, "No records found")) : paginatedData.map((item) => /* @__PURE__ */ React.createElement("tr", { key: item.id, className: "dg-tbody-row" }, visibleColumns.map((col, idx) => {
|
|
309
|
-
const
|
|
310
|
-
const width = columnWidths[
|
|
326
|
+
const colField = String(col.field);
|
|
327
|
+
const width = columnWidths[colField] || 200;
|
|
311
328
|
const leftOffset = getLeftOffset(col, idx);
|
|
312
329
|
return /* @__PURE__ */ React.createElement(
|
|
313
330
|
"td",
|
|
314
331
|
{
|
|
315
|
-
key: `${item.id}-${
|
|
332
|
+
key: `${item.id}-${colField}`,
|
|
316
333
|
className: `dg-td${col.pinned === "left" ? " pinned-left" : ""} ${col.cellClassName || ""}`,
|
|
317
334
|
style: { width, minWidth: width, maxWidth: width, left: leftOffset, flex: col.flex }
|
|
318
335
|
},
|
|
319
336
|
(() => {
|
|
320
|
-
const field = String(col.
|
|
321
|
-
const rawValue = item[col.
|
|
337
|
+
const field = String(col.field);
|
|
338
|
+
const rawValue = item[col.field || ""];
|
|
322
339
|
let value = col.valueGetter ? col.valueGetter({ value: rawValue, row: item, field }) : rawValue;
|
|
323
340
|
const formattedValue = col.valueFormatter ? col.valueFormatter({ value, row: item, field }) : value;
|
|
324
341
|
if (col.renderCell) {
|
|
@@ -365,8 +382,11 @@ function DataGrid({
|
|
|
365
382
|
/* @__PURE__ */ React.createElement("button", { className: "dg-menu-item", onClick: () => handleSort(activeMenu, "asc") }, /* @__PURE__ */ React.createElement(ArrowUp, { size: 14 }), " Sort ascending"),
|
|
366
383
|
/* @__PURE__ */ React.createElement("button", { className: "dg-menu-item", onClick: () => handleSort(activeMenu, "desc") }, /* @__PURE__ */ React.createElement(ArrowDown, { size: 14 }), " Sort descending"),
|
|
367
384
|
/* @__PURE__ */ React.createElement("div", { className: "dg-menu-divider" }),
|
|
368
|
-
|
|
369
|
-
|
|
385
|
+
(() => {
|
|
386
|
+
const col = resolvedColumns.find((c) => c.field === activeMenu);
|
|
387
|
+
if (!col) return null;
|
|
388
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, col.pinned === "left" ? /* @__PURE__ */ React.createElement("button", { className: "dg-menu-item", onClick: () => togglePin(activeMenu, "left") }, /* @__PURE__ */ React.createElement(Pin, { size: 14, style: { transform: "rotate(0deg)", opacity: 0.5 } }), " Unpin") : /* @__PURE__ */ React.createElement("button", { className: "dg-menu-item", onClick: () => togglePin(activeMenu, "left") }, /* @__PURE__ */ React.createElement(Pin, { size: 14, style: { transform: "rotate(45deg)" } }), " Pin left"), col.pinned === "right" ? /* @__PURE__ */ React.createElement("button", { className: "dg-menu-item", onClick: () => togglePin(activeMenu, "right") }, /* @__PURE__ */ React.createElement(Pin, { size: 14, style: { transform: "rotate(0deg)", opacity: 0.5 } }), " Unpin") : /* @__PURE__ */ React.createElement("button", { className: "dg-menu-item", onClick: () => togglePin(activeMenu, "right") }, /* @__PURE__ */ React.createElement(Pin, { size: 14, style: { transform: "rotate(-45deg)" } }), " Pin right"));
|
|
389
|
+
})(),
|
|
370
390
|
/* @__PURE__ */ React.createElement("div", { className: "dg-menu-divider" }),
|
|
371
391
|
/* @__PURE__ */ React.createElement("button", { className: "dg-menu-item", onClick: () => {
|
|
372
392
|
setShowAdvancedFilter(true);
|
|
@@ -386,7 +406,27 @@ function DataGrid({
|
|
|
386
406
|
value: colSearch,
|
|
387
407
|
onChange: (e) => setColSearch(e.target.value)
|
|
388
408
|
}
|
|
389
|
-
)),
|
|
409
|
+
)), resolvedColumns.filter((c) => c.header.toLowerCase().includes(colSearch.toLowerCase())).map((col) => {
|
|
410
|
+
const key = String(col.key);
|
|
411
|
+
const isUnhideable = col.hideable === false;
|
|
412
|
+
return /* @__PURE__ */ React.createElement("div", { key, className: `dg-col-row${isUnhideable ? " disabled" : ""}` }, /* @__PURE__ */ React.createElement("div", { className: "dg-col-label" }, /* @__PURE__ */ React.createElement("div", { className: "dg-col-dot", style: { background: col.hidden ? "var(--border-color)" : "var(--primary-color)" } }), col.header), !isUnhideable && /* @__PURE__ */ React.createElement("button", { className: "dg-icon-btn", onClick: () => toggleHide(key) }, col.hidden ? /* @__PURE__ */ React.createElement(EyeOff, { size: 14 }) : /* @__PURE__ */ React.createElement(EyeOff, { size: 14, style: { opacity: 0.4 } })));
|
|
413
|
+
})), /* @__PURE__ */ React.createElement("div", { className: "dg-modal-footer" }, /* @__PURE__ */ React.createElement("button", { className: "dg-action-btn", onClick: () => setColumnOverrides((prev) => {
|
|
414
|
+
const next = { ...prev };
|
|
415
|
+
resolvedColumns.forEach((c) => {
|
|
416
|
+
const k = String(c.key);
|
|
417
|
+
next[k] = { ...next[k], hidden: false };
|
|
418
|
+
});
|
|
419
|
+
return next;
|
|
420
|
+
}) }, "Show All"), /* @__PURE__ */ React.createElement("button", { className: "dg-action-btn", onClick: () => {
|
|
421
|
+
const newOverrides = { ...columnOverrides };
|
|
422
|
+
resolvedColumns.forEach((c) => {
|
|
423
|
+
if (c.hideable !== false) {
|
|
424
|
+
const key = String(c.key);
|
|
425
|
+
newOverrides[key] = { ...newOverrides[key], hidden: true };
|
|
426
|
+
}
|
|
427
|
+
});
|
|
428
|
+
setColumnOverrides(newOverrides);
|
|
429
|
+
} }, "Hide All")))), showAdvancedFilter && /* @__PURE__ */ React.createElement("div", { className: "dg-modal-overlay", onClick: () => setShowAdvancedFilter(false) }, /* @__PURE__ */ React.createElement("div", { className: "dg-modal dg-modal-wide", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React.createElement("div", { className: "dg-modal-header" }, /* @__PURE__ */ React.createElement("h3", null, "Filters"), /* @__PURE__ */ React.createElement("button", { className: "dg-icon-btn", onClick: () => setShowAdvancedFilter(false) }, /* @__PURE__ */ React.createElement(X, { size: 18 }))), /* @__PURE__ */ React.createElement("div", { className: "dg-modal-body" }, advancedFilters.map((f, idx) => /* @__PURE__ */ React.createElement("div", { key: idx }, idx > 0 && /* @__PURE__ */ React.createElement("div", { className: "dg-filter-logic" }, /* @__PURE__ */ React.createElement(
|
|
390
430
|
"button",
|
|
391
431
|
{
|
|
392
432
|
className: `dg-logic-btn${f.logic === "AND" ? " active" : ""}`,
|
|
@@ -407,7 +447,7 @@ function DataGrid({
|
|
|
407
447
|
value: f.column,
|
|
408
448
|
onChange: (e) => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, column: e.target.value } : fi))
|
|
409
449
|
},
|
|
410
|
-
|
|
450
|
+
resolvedColumns.map((c) => /* @__PURE__ */ React.createElement("option", { key: String(c.key), value: String(c.key) }, c.header))
|
|
411
451
|
), /* @__PURE__ */ React.createElement(
|
|
412
452
|
"select",
|
|
413
453
|
{
|
|
@@ -421,20 +461,25 @@ function DataGrid({
|
|
|
421
461
|
/* @__PURE__ */ React.createElement("option", { value: "ends with" }, "ends with"),
|
|
422
462
|
/* @__PURE__ */ React.createElement("option", { value: "is empty" }, "is empty"),
|
|
423
463
|
/* @__PURE__ */ React.createElement("option", { value: "is not empty" }, "is not empty")
|
|
424
|
-
),
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
464
|
+
), (() => {
|
|
465
|
+
const col = resolvedColumns.find((c) => String(c.field) === f.column);
|
|
466
|
+
const isDate = col?.type === "date";
|
|
467
|
+
return /* @__PURE__ */ React.createElement(
|
|
468
|
+
"input",
|
|
469
|
+
{
|
|
470
|
+
type: isDate ? "date" : "text",
|
|
471
|
+
className: "dg-filter-input",
|
|
472
|
+
placeholder: "Value\u2026",
|
|
473
|
+
value: f.value,
|
|
474
|
+
onChange: (e) => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, value: e.target.value } : fi))
|
|
475
|
+
}
|
|
476
|
+
);
|
|
477
|
+
})()))), /* @__PURE__ */ React.createElement(
|
|
433
478
|
"button",
|
|
434
479
|
{
|
|
435
480
|
className: "dg-action-btn",
|
|
436
481
|
style: { alignSelf: "flex-start", marginTop: 4 },
|
|
437
|
-
onClick: () => setAdvancedFilters((p) => [...p, { column: String(
|
|
482
|
+
onClick: () => setAdvancedFilters((p) => [...p, { column: String(resolvedColumns[0].key), operator: "contains", value: "", logic: "AND" }])
|
|
438
483
|
},
|
|
439
484
|
/* @__PURE__ */ React.createElement(Plus, { size: 14 }),
|
|
440
485
|
" Add Filter"
|
|
@@ -442,7 +487,7 @@ function DataGrid({
|
|
|
442
487
|
"button",
|
|
443
488
|
{
|
|
444
489
|
className: "dg-action-btn",
|
|
445
|
-
onClick: () => setAdvancedFilters([{ column: String(
|
|
490
|
+
onClick: () => setAdvancedFilters([{ column: String(resolvedColumns[0].key), operator: "contains", value: "", logic: "AND" }])
|
|
446
491
|
},
|
|
447
492
|
/* @__PURE__ */ React.createElement(Trash2, { size: 14 }),
|
|
448
493
|
" Reset"
|
package/dist/icons/index.js
CHANGED
|
@@ -1,7 +1,4 @@
|
|
|
1
1
|
import "../chunk-E5RTHYCU.js";
|
|
2
|
-
import {
|
|
3
|
-
unsubscribeIcon_default
|
|
4
|
-
} from "../chunk-EZI3QGYJ.js";
|
|
5
2
|
import {
|
|
6
3
|
uploadIcon_default
|
|
7
4
|
} from "../chunk-QTGVW36I.js";
|
|
@@ -14,9 +11,6 @@ import {
|
|
|
14
11
|
import {
|
|
15
12
|
workItemIcon_default
|
|
16
13
|
} from "../chunk-QJPQC544.js";
|
|
17
|
-
import {
|
|
18
|
-
softSkillsIcon_default
|
|
19
|
-
} from "../chunk-3Y6QBRGD.js";
|
|
20
14
|
import {
|
|
21
15
|
subscribeIcon_default
|
|
22
16
|
} from "../chunk-JVN6QVET.js";
|
|
@@ -39,8 +33,8 @@ import {
|
|
|
39
33
|
unArchivedIcon_default
|
|
40
34
|
} from "../chunk-ZJAV3FEQ.js";
|
|
41
35
|
import {
|
|
42
|
-
|
|
43
|
-
} from "../chunk-
|
|
36
|
+
unsubscribeIcon_default
|
|
37
|
+
} from "../chunk-EZI3QGYJ.js";
|
|
44
38
|
import {
|
|
45
39
|
refreshIcon_default
|
|
46
40
|
} from "../chunk-YTVUM76D.js";
|
|
@@ -63,8 +57,8 @@ import {
|
|
|
63
57
|
sidebarIcon_default
|
|
64
58
|
} from "../chunk-DK3DA5LH.js";
|
|
65
59
|
import {
|
|
66
|
-
|
|
67
|
-
} from "../chunk-
|
|
60
|
+
softSkillsIcon_default
|
|
61
|
+
} from "../chunk-3Y6QBRGD.js";
|
|
68
62
|
import {
|
|
69
63
|
questionStatusAllIcon_default
|
|
70
64
|
} from "../chunk-4Y7SQ5EP.js";
|
|
@@ -87,8 +81,8 @@ import {
|
|
|
87
81
|
questionTypeMultipleIcon_default
|
|
88
82
|
} from "../chunk-Z7USRFM2.js";
|
|
89
83
|
import {
|
|
90
|
-
|
|
91
|
-
} from "../chunk-
|
|
84
|
+
questionTypeSingleIcon_default
|
|
85
|
+
} from "../chunk-Q4DHI3B5.js";
|
|
92
86
|
import {
|
|
93
87
|
invoiceIcon_default
|
|
94
88
|
} from "../chunk-6SUKO6QW.js";
|
|
@@ -111,8 +105,8 @@ import {
|
|
|
111
105
|
projectIcon_default
|
|
112
106
|
} from "../chunk-DLJHWFNG.js";
|
|
113
107
|
import {
|
|
114
|
-
|
|
115
|
-
} from "../chunk-
|
|
108
|
+
qualificationsIcon_default
|
|
109
|
+
} from "../chunk-UTBCFDOX.js";
|
|
116
110
|
import {
|
|
117
111
|
editIcon_default
|
|
118
112
|
} from "../chunk-H372BAXA.js";
|
|
@@ -132,8 +126,8 @@ import {
|
|
|
132
126
|
inactiveGroupIcon_default
|
|
133
127
|
} from "../chunk-77QDKDFI.js";
|
|
134
128
|
import {
|
|
135
|
-
|
|
136
|
-
} from "../chunk-
|
|
129
|
+
industryIcon_default
|
|
130
|
+
} from "../chunk-4BTXGP7U.js";
|
|
137
131
|
import {
|
|
138
132
|
difficultyAllIcon_default
|
|
139
133
|
} from "../chunk-5XKFPQLH.js";
|
|
@@ -155,6 +149,9 @@ import {
|
|
|
155
149
|
import {
|
|
156
150
|
downloadPdfIcon_default
|
|
157
151
|
} from "../chunk-N26C33E6.js";
|
|
152
|
+
import {
|
|
153
|
+
editChatIcon_default
|
|
154
|
+
} from "../chunk-XCE3QE6Q.js";
|
|
158
155
|
import {
|
|
159
156
|
activateUserIcon_default
|
|
160
157
|
} from "../chunk-AH6RCYDL.js";
|
|
@@ -167,6 +164,9 @@ import {
|
|
|
167
164
|
import {
|
|
168
165
|
closeIcon_default
|
|
169
166
|
} from "../chunk-Q5XKCUE3.js";
|
|
167
|
+
import {
|
|
168
|
+
copyIcon_default
|
|
169
|
+
} from "../chunk-6FEUS4CQ.js";
|
|
170
170
|
import "../chunk-LI4N7JWK.js";
|
|
171
171
|
export {
|
|
172
172
|
activateUserIcon_default as ActivateUserIcon,
|