@toolbox-web/grid-react 0.16.0 → 0.17.0
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/chunks/{data-grid-oxWjOqoA.js → data-grid-Cpa5kukM.js} +308 -268
- package/features/export.js +1 -1
- package/features/filtering.js +1 -1
- package/features/grouping-columns.d.ts +24 -0
- package/features/grouping-columns.d.ts.map +1 -1
- package/features/grouping-columns.js +21 -1
- package/features/grouping-rows.d.ts +24 -0
- package/features/grouping-rows.d.ts.map +1 -1
- package/features/grouping-rows.js +21 -1
- package/features/index.js +4 -4
- package/features/pinned-rows.d.ts.map +1 -1
- package/features/pinned-rows.js +24 -0
- package/features/print.js +1 -1
- package/features/selection.js +1 -1
- package/features/undo-redo.js +1 -1
- package/index.js +2 -2
- package/lib/react-column-config.d.ts +33 -3
- package/lib/react-column-config.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as E } from "react/jsx-runtime";
|
|
2
2
|
import { DataGridElement as me } from "@toolbox-web/grid";
|
|
3
|
-
import { createContext as Z, useContext as V, useRef as
|
|
4
|
-
import { flushSync as
|
|
5
|
-
import { createRoot as
|
|
6
|
-
import { createPluginsFromFeatures as
|
|
7
|
-
function
|
|
3
|
+
import { createContext as Z, useContext as V, useRef as A, useCallback as Q, useEffect as m, forwardRef as he, useMemo as w, useImperativeHandle as ye, Children as Re, isValidElement as we } from "react";
|
|
4
|
+
import { flushSync as g } from "react-dom";
|
|
5
|
+
import { createRoot as h } from "react-dom/client";
|
|
6
|
+
import { createPluginsFromFeatures as ve } from "@toolbox-web/grid/features/registry";
|
|
7
|
+
function Ce(n) {
|
|
8
8
|
return n.charAt(0).toUpperCase() + n.slice(1);
|
|
9
9
|
}
|
|
10
10
|
function ae(n) {
|
|
11
|
-
return n.toLowerCase() === "id" ? "ID" : n.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/[_-]/g, " ").split(" ").filter(Boolean).map(
|
|
11
|
+
return n.toLowerCase() === "id" ? "ID" : n.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/[_-]/g, " ").split(" ").filter(Boolean).map(Ce).join(" ");
|
|
12
12
|
}
|
|
13
13
|
const be = /* @__PURE__ */ new Set(["string", "number", "boolean", "date", "datetime", "currency"]);
|
|
14
14
|
function Ee(n) {
|
|
@@ -57,8 +57,8 @@ const z = {
|
|
|
57
57
|
onExportComplete: "export-complete",
|
|
58
58
|
onPrintStart: "print-start",
|
|
59
59
|
onPrintComplete: "print-complete"
|
|
60
|
-
}, X = Z(null),
|
|
61
|
-
function
|
|
60
|
+
}, X = Z(null), Xe = ({ icons: n, children: t }) => /* @__PURE__ */ E(X.Provider, { value: n, children: t });
|
|
61
|
+
function et() {
|
|
62
62
|
return V(X);
|
|
63
63
|
}
|
|
64
64
|
const De = X, W = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new Map();
|
|
@@ -73,50 +73,50 @@ function le(n) {
|
|
|
73
73
|
return q.get(e);
|
|
74
74
|
}
|
|
75
75
|
function xe(n) {
|
|
76
|
-
const { children: t, cardRowHeight: e = "auto" } = n, r =
|
|
77
|
-
(
|
|
78
|
-
if (r.current =
|
|
79
|
-
W.set(
|
|
80
|
-
const d =
|
|
76
|
+
const { children: t, cardRowHeight: e = "auto" } = n, r = A(null), o = Q(
|
|
77
|
+
(c) => {
|
|
78
|
+
if (r.current = c, !c) return;
|
|
79
|
+
W.set(c, t);
|
|
80
|
+
const d = c.closest("tbw-grid");
|
|
81
81
|
if (d) {
|
|
82
|
-
const
|
|
83
|
-
|
|
82
|
+
const l = d.id || d.getAttribute("data-grid-id");
|
|
83
|
+
l && q.set(l, t);
|
|
84
84
|
}
|
|
85
85
|
},
|
|
86
86
|
[t]
|
|
87
87
|
);
|
|
88
|
-
|
|
89
|
-
const
|
|
90
|
-
if (
|
|
91
|
-
W.delete(
|
|
92
|
-
const d =
|
|
88
|
+
m(() => () => {
|
|
89
|
+
const c = r.current;
|
|
90
|
+
if (c) {
|
|
91
|
+
W.delete(c);
|
|
92
|
+
const d = c.closest("tbw-grid");
|
|
93
93
|
if (d) {
|
|
94
|
-
const
|
|
95
|
-
|
|
94
|
+
const l = d.id || d.getAttribute("data-grid-id");
|
|
95
|
+
l && q.delete(l);
|
|
96
96
|
}
|
|
97
97
|
}
|
|
98
98
|
}, []);
|
|
99
|
-
const
|
|
100
|
-
return /* @__PURE__ */
|
|
99
|
+
const s = e === "auto" ? "auto" : String(e);
|
|
100
|
+
return /* @__PURE__ */ E("tbw-grid-responsive-card", { ref: o, cardRowHeight: s });
|
|
101
101
|
}
|
|
102
102
|
xe.displayName = "GridResponsiveCard";
|
|
103
|
-
const T = Z(null),
|
|
104
|
-
function
|
|
103
|
+
const T = Z(null), tt = ({ defaults: n, children: t }) => /* @__PURE__ */ E(T.Provider, { value: n, children: t });
|
|
104
|
+
function rt() {
|
|
105
105
|
return V(T);
|
|
106
106
|
}
|
|
107
|
-
function
|
|
107
|
+
function nt(n) {
|
|
108
108
|
return V(T)?.[n];
|
|
109
109
|
}
|
|
110
|
-
const Ae = T,
|
|
110
|
+
const Ae = T, C = [];
|
|
111
111
|
function Se(n) {
|
|
112
|
-
for (let t =
|
|
113
|
-
const e =
|
|
112
|
+
for (let t = C.length - 1; t >= 0; t--) {
|
|
113
|
+
const e = C[t];
|
|
114
114
|
if (n.contains(e.container) && e.container.classList.contains("react-cell-editor")) {
|
|
115
115
|
try {
|
|
116
116
|
e.root.unmount();
|
|
117
117
|
} catch {
|
|
118
118
|
}
|
|
119
|
-
|
|
119
|
+
C.splice(t, 1);
|
|
120
120
|
}
|
|
121
121
|
}
|
|
122
122
|
}
|
|
@@ -125,36 +125,76 @@ function Ge(n) {
|
|
|
125
125
|
return (e) => {
|
|
126
126
|
const r = e.cellEl;
|
|
127
127
|
if (r) {
|
|
128
|
-
const
|
|
129
|
-
if (
|
|
130
|
-
return
|
|
131
|
-
|
|
132
|
-
}),
|
|
128
|
+
const c = t.get(r);
|
|
129
|
+
if (c)
|
|
130
|
+
return g(() => {
|
|
131
|
+
c.root.render(n(e));
|
|
132
|
+
}), c.container;
|
|
133
133
|
}
|
|
134
134
|
const o = document.createElement("div");
|
|
135
135
|
o.className = "react-cell-renderer", o.style.display = "contents";
|
|
136
|
-
const
|
|
137
|
-
return
|
|
138
|
-
|
|
139
|
-
}), r && t.set(r, { root:
|
|
136
|
+
const s = h(o);
|
|
137
|
+
return g(() => {
|
|
138
|
+
s.render(n(e));
|
|
139
|
+
}), r && t.set(r, { root: s, container: o }), C.push({ root: s, container: o }), o;
|
|
140
140
|
};
|
|
141
141
|
}
|
|
142
142
|
function Ie(n) {
|
|
143
143
|
return (t) => {
|
|
144
144
|
const e = document.createElement("div");
|
|
145
145
|
e.className = "react-cell-editor", e.style.display = "contents";
|
|
146
|
-
const r =
|
|
147
|
-
return
|
|
146
|
+
const r = h(e);
|
|
147
|
+
return g(() => {
|
|
148
148
|
r.render(n(t));
|
|
149
|
-
}),
|
|
149
|
+
}), C.push({ root: r, container: e }), e;
|
|
150
150
|
};
|
|
151
151
|
}
|
|
152
152
|
function Ve(n) {
|
|
153
|
+
return (t) => {
|
|
154
|
+
const e = document.createElement("div");
|
|
155
|
+
e.className = "react-header-renderer", e.style.display = "contents";
|
|
156
|
+
const r = h(e);
|
|
157
|
+
return g(() => {
|
|
158
|
+
r.render(n(t));
|
|
159
|
+
}), C.push({ root: r, container: e }), e;
|
|
160
|
+
};
|
|
161
|
+
}
|
|
162
|
+
function Ne(n) {
|
|
163
|
+
return (t) => {
|
|
164
|
+
const e = document.createElement("div");
|
|
165
|
+
e.className = "react-header-label-renderer", e.style.display = "contents";
|
|
166
|
+
const r = h(e);
|
|
167
|
+
return g(() => {
|
|
168
|
+
r.render(n(t));
|
|
169
|
+
}), C.push({ root: r, container: e }), e;
|
|
170
|
+
};
|
|
171
|
+
}
|
|
172
|
+
function Le(n) {
|
|
173
|
+
return (t) => {
|
|
174
|
+
const e = n(t);
|
|
175
|
+
if (e instanceof HTMLElement || typeof e == "string")
|
|
176
|
+
return e;
|
|
177
|
+
const r = document.createElement("div");
|
|
178
|
+
r.className = "react-loading-renderer", r.style.display = "contents";
|
|
179
|
+
const o = h(r);
|
|
180
|
+
return g(() => {
|
|
181
|
+
o.render(e);
|
|
182
|
+
}), C.push({ root: o, container: r }), r;
|
|
183
|
+
};
|
|
184
|
+
}
|
|
185
|
+
function Fe(n) {
|
|
153
186
|
if (!n) return;
|
|
187
|
+
if (n.loadingRenderer && typeof n.loadingRenderer == "function") {
|
|
188
|
+
const e = n.loadingRenderer;
|
|
189
|
+
n = {
|
|
190
|
+
...n,
|
|
191
|
+
loadingRenderer: Le(e)
|
|
192
|
+
};
|
|
193
|
+
}
|
|
154
194
|
if (!n.columns) return n;
|
|
155
195
|
const t = n.columns.map((e) => {
|
|
156
|
-
const { renderer: r, editor: o,
|
|
157
|
-
return r && (
|
|
196
|
+
const { renderer: r, editor: o, headerRenderer: s, headerLabelRenderer: c, ...d } = e, l = { ...d };
|
|
197
|
+
return r && (l.renderer = Ge(r)), o && (l.editor = Ie(o)), s && (l.headerRenderer = Ve(s)), c && (l.headerLabelRenderer = Ne(c)), l;
|
|
158
198
|
});
|
|
159
199
|
return {
|
|
160
200
|
...n,
|
|
@@ -162,7 +202,7 @@ function Ve(n) {
|
|
|
162
202
|
};
|
|
163
203
|
}
|
|
164
204
|
const B = /* @__PURE__ */ new WeakMap(), K = /* @__PURE__ */ new Map();
|
|
165
|
-
function
|
|
205
|
+
function Te(n) {
|
|
166
206
|
const t = n.querySelector("tbw-grid-detail");
|
|
167
207
|
if (t) {
|
|
168
208
|
const r = B.get(t);
|
|
@@ -172,99 +212,99 @@ function Ne(n) {
|
|
|
172
212
|
if (e)
|
|
173
213
|
return K.get(e);
|
|
174
214
|
}
|
|
175
|
-
function
|
|
176
|
-
const { children: t, showExpandColumn: e = !0, animation: r = "slide" } = n, o =
|
|
215
|
+
function ke(n) {
|
|
216
|
+
const { children: t, showExpandColumn: e = !0, animation: r = "slide" } = n, o = A(null), s = Q(
|
|
177
217
|
(d) => {
|
|
178
218
|
if (o.current = d, !d) return;
|
|
179
219
|
B.set(d, t);
|
|
180
|
-
const
|
|
181
|
-
if (
|
|
182
|
-
const
|
|
183
|
-
|
|
220
|
+
const l = d.closest("tbw-grid");
|
|
221
|
+
if (l) {
|
|
222
|
+
const p = l.id || l.getAttribute("data-grid-id");
|
|
223
|
+
p && K.set(p, t);
|
|
184
224
|
}
|
|
185
225
|
},
|
|
186
226
|
[t]
|
|
187
227
|
);
|
|
188
|
-
return
|
|
228
|
+
return m(() => () => {
|
|
189
229
|
const d = o.current;
|
|
190
230
|
if (d) {
|
|
191
231
|
B.delete(d);
|
|
192
|
-
const
|
|
193
|
-
if (
|
|
194
|
-
const
|
|
195
|
-
|
|
232
|
+
const l = d.closest("tbw-grid");
|
|
233
|
+
if (l) {
|
|
234
|
+
const R = l.id || l.getAttribute("data-grid-id");
|
|
235
|
+
R && K.delete(R);
|
|
196
236
|
}
|
|
197
|
-
const
|
|
198
|
-
|
|
237
|
+
const p = d.parentNode;
|
|
238
|
+
p && p.contains(d);
|
|
199
239
|
}
|
|
200
|
-
}, []), /* @__PURE__ */
|
|
240
|
+
}, []), /* @__PURE__ */ E(
|
|
201
241
|
"tbw-grid-detail",
|
|
202
242
|
{
|
|
203
|
-
ref:
|
|
243
|
+
ref: s,
|
|
204
244
|
showExpandColumn: e ? void 0 : "false",
|
|
205
245
|
animation: r === !1 ? "false" : r
|
|
206
246
|
}
|
|
207
247
|
);
|
|
208
248
|
}
|
|
209
|
-
|
|
249
|
+
ke.displayName = "GridDetailPanel";
|
|
210
250
|
const U = /* @__PURE__ */ new WeakMap(), J = /* @__PURE__ */ new Map();
|
|
211
|
-
function
|
|
251
|
+
function Me(n) {
|
|
212
252
|
const t = U.get(n);
|
|
213
253
|
if (t) return t;
|
|
214
254
|
const e = n.id;
|
|
215
255
|
if (e)
|
|
216
256
|
return J.get(e);
|
|
217
257
|
}
|
|
218
|
-
function
|
|
219
|
-
const { id: t, title: e, icon: r, tooltip: o, order:
|
|
220
|
-
(
|
|
221
|
-
d.current =
|
|
258
|
+
function ot(n) {
|
|
259
|
+
const { id: t, title: e, icon: r, tooltip: o, order: s = 100, children: c } = n, d = A(null), l = Q(
|
|
260
|
+
(p) => {
|
|
261
|
+
d.current = p, p && (U.set(p, c), t && J.set(t, c));
|
|
222
262
|
},
|
|
223
|
-
[
|
|
263
|
+
[c, t]
|
|
224
264
|
);
|
|
225
|
-
return
|
|
226
|
-
const
|
|
227
|
-
|
|
228
|
-
}, [t]), /* @__PURE__ */
|
|
265
|
+
return m(() => () => {
|
|
266
|
+
const p = d.current;
|
|
267
|
+
p && (U.delete(p), t && J.delete(t));
|
|
268
|
+
}, [t]), /* @__PURE__ */ E(
|
|
229
269
|
"tbw-grid-tool-panel",
|
|
230
270
|
{
|
|
231
|
-
ref:
|
|
271
|
+
ref: l,
|
|
232
272
|
id: t,
|
|
233
273
|
title: e,
|
|
234
274
|
icon: r,
|
|
235
275
|
tooltip: o,
|
|
236
|
-
order:
|
|
276
|
+
order: s?.toString()
|
|
237
277
|
}
|
|
238
278
|
);
|
|
239
279
|
}
|
|
240
|
-
const
|
|
241
|
-
function
|
|
242
|
-
const e = n.getAttribute("field"), r =
|
|
243
|
-
if (r.renderer = t,
|
|
244
|
-
const o =
|
|
245
|
-
o.renderer = t,
|
|
280
|
+
const b = /* @__PURE__ */ new WeakMap(), P = /* @__PURE__ */ new Map();
|
|
281
|
+
function it(n, t) {
|
|
282
|
+
const e = n.getAttribute("field"), r = b.get(n) ?? {};
|
|
283
|
+
if (r.renderer = t, b.set(n, r), e) {
|
|
284
|
+
const o = P.get(e) ?? {};
|
|
285
|
+
o.renderer = t, P.set(e, o);
|
|
246
286
|
}
|
|
247
287
|
}
|
|
248
|
-
function
|
|
249
|
-
const e = n.getAttribute("field"), r =
|
|
250
|
-
if (r.editor = t,
|
|
251
|
-
const o =
|
|
252
|
-
o.editor = t,
|
|
288
|
+
function st(n, t) {
|
|
289
|
+
const e = n.getAttribute("field"), r = b.get(n) ?? {};
|
|
290
|
+
if (r.editor = t, b.set(n, r), e) {
|
|
291
|
+
const o = P.get(e) ?? {};
|
|
292
|
+
o.editor = t, P.set(e, o);
|
|
253
293
|
}
|
|
254
294
|
}
|
|
255
|
-
function
|
|
256
|
-
let t =
|
|
295
|
+
function He(n) {
|
|
296
|
+
let t = b.get(n)?.renderer;
|
|
257
297
|
if (!t) {
|
|
258
298
|
const e = n.getAttribute("field");
|
|
259
|
-
e && (t =
|
|
299
|
+
e && (t = P.get(e)?.renderer);
|
|
260
300
|
}
|
|
261
301
|
return t;
|
|
262
302
|
}
|
|
263
|
-
function
|
|
264
|
-
let t =
|
|
303
|
+
function Oe(n) {
|
|
304
|
+
let t = b.get(n)?.editor;
|
|
265
305
|
if (!t) {
|
|
266
306
|
const e = n.getAttribute("field");
|
|
267
|
-
e && (t =
|
|
307
|
+
e && (t = P.get(e)?.editor);
|
|
268
308
|
}
|
|
269
309
|
return t;
|
|
270
310
|
}
|
|
@@ -288,13 +328,13 @@ class ue {
|
|
|
288
328
|
*/
|
|
289
329
|
canHandle(t) {
|
|
290
330
|
const e = t.getAttribute("field");
|
|
291
|
-
let r =
|
|
331
|
+
let r = b.get(t);
|
|
292
332
|
if (!r && e) {
|
|
293
|
-
const
|
|
294
|
-
|
|
333
|
+
const c = P.get(e);
|
|
334
|
+
c && (c.renderer || c.editor) && (r = c, b.set(t, r));
|
|
295
335
|
}
|
|
296
|
-
const o = r?.renderer !== void 0,
|
|
297
|
-
return r !== void 0 && (o ||
|
|
336
|
+
const o = r?.renderer !== void 0, s = r?.editor !== void 0;
|
|
337
|
+
return r !== void 0 && (o || s);
|
|
298
338
|
}
|
|
299
339
|
/**
|
|
300
340
|
* Creates a view renderer function that renders a React component
|
|
@@ -308,31 +348,31 @@ class ue {
|
|
|
308
348
|
* allowing the grid to use its default rendering.
|
|
309
349
|
*/
|
|
310
350
|
createRenderer(t) {
|
|
311
|
-
const e =
|
|
351
|
+
const e = He(t);
|
|
312
352
|
if (!e)
|
|
313
353
|
return;
|
|
314
354
|
const r = /* @__PURE__ */ new WeakMap();
|
|
315
355
|
return (o) => {
|
|
316
|
-
const
|
|
317
|
-
if (
|
|
318
|
-
const
|
|
319
|
-
if (
|
|
320
|
-
return
|
|
321
|
-
|
|
322
|
-
}),
|
|
323
|
-
const
|
|
324
|
-
|
|
325
|
-
const
|
|
326
|
-
return
|
|
327
|
-
|
|
328
|
-
}), r.set(
|
|
356
|
+
const s = o.cellEl;
|
|
357
|
+
if (s) {
|
|
358
|
+
const l = r.get(s);
|
|
359
|
+
if (l)
|
|
360
|
+
return g(() => {
|
|
361
|
+
l.root.render(e(o));
|
|
362
|
+
}), l.container;
|
|
363
|
+
const p = document.createElement("div");
|
|
364
|
+
p.className = "react-cell-renderer", p.style.display = "contents";
|
|
365
|
+
const R = h(p);
|
|
366
|
+
return g(() => {
|
|
367
|
+
R.render(e(o));
|
|
368
|
+
}), r.set(s, { root: R, container: p, lastRowIndex: o.rowIndex ?? -1 }), this.mountedViews.push({ root: R, container: p }), p;
|
|
329
369
|
}
|
|
330
|
-
const
|
|
331
|
-
|
|
332
|
-
const d =
|
|
333
|
-
return
|
|
370
|
+
const c = document.createElement("div");
|
|
371
|
+
c.className = "react-cell-renderer", c.style.display = "contents";
|
|
372
|
+
const d = h(c);
|
|
373
|
+
return g(() => {
|
|
334
374
|
d.render(e(o));
|
|
335
|
-
}), this.mountedViews.push({ root: d, container:
|
|
375
|
+
}), this.mountedViews.push({ root: d, container: c }), c;
|
|
336
376
|
};
|
|
337
377
|
}
|
|
338
378
|
/**
|
|
@@ -340,14 +380,14 @@ class ue {
|
|
|
340
380
|
* with commit/cancel callbacks passed as props.
|
|
341
381
|
*/
|
|
342
382
|
createEditor(t) {
|
|
343
|
-
const e =
|
|
383
|
+
const e = Oe(t);
|
|
344
384
|
return e ? (r) => {
|
|
345
385
|
const o = document.createElement("div");
|
|
346
386
|
o.className = "react-cell-editor", o.style.display = "contents";
|
|
347
|
-
const
|
|
348
|
-
return
|
|
349
|
-
|
|
350
|
-
}), this.editorViews.push({ root:
|
|
387
|
+
const s = h(o);
|
|
388
|
+
return g(() => {
|
|
389
|
+
s.render(e(r));
|
|
390
|
+
}), this.editorViews.push({ root: s, container: o }), o;
|
|
351
391
|
} : () => document.createElement("div");
|
|
352
392
|
}
|
|
353
393
|
/**
|
|
@@ -355,15 +395,15 @@ class ue {
|
|
|
355
395
|
* Renders React components for expandable detail rows.
|
|
356
396
|
*/
|
|
357
397
|
createDetailRenderer(t) {
|
|
358
|
-
const e =
|
|
398
|
+
const e = Te(t);
|
|
359
399
|
if (e)
|
|
360
400
|
return (r, o) => {
|
|
361
|
-
const
|
|
362
|
-
|
|
363
|
-
const
|
|
364
|
-
return
|
|
365
|
-
d.render(e(
|
|
366
|
-
}), this.mountedViews.push({ root: d, container:
|
|
401
|
+
const s = document.createElement("div");
|
|
402
|
+
s.className = "react-detail-panel";
|
|
403
|
+
const c = { row: r, rowIndex: o }, d = h(s);
|
|
404
|
+
return g(() => {
|
|
405
|
+
d.render(e(c));
|
|
406
|
+
}), this.mountedViews.push({ root: d, container: s }), s;
|
|
367
407
|
};
|
|
368
408
|
}
|
|
369
409
|
/**
|
|
@@ -383,12 +423,12 @@ class ue {
|
|
|
383
423
|
const e = le(t);
|
|
384
424
|
if (e)
|
|
385
425
|
return (r, o) => {
|
|
386
|
-
const
|
|
387
|
-
|
|
388
|
-
const
|
|
389
|
-
return
|
|
390
|
-
d.render(e(
|
|
391
|
-
}), this.mountedViews.push({ root: d, container:
|
|
426
|
+
const s = document.createElement("div");
|
|
427
|
+
s.className = "react-responsive-card";
|
|
428
|
+
const c = { row: r, index: o }, d = h(s);
|
|
429
|
+
return g(() => {
|
|
430
|
+
d.render(e(c));
|
|
431
|
+
}), this.mountedViews.push({ root: d, container: s }), s;
|
|
392
432
|
};
|
|
393
433
|
}
|
|
394
434
|
/**
|
|
@@ -396,22 +436,22 @@ class ue {
|
|
|
396
436
|
* Renders React components into tool panel containers.
|
|
397
437
|
*/
|
|
398
438
|
createToolPanelRenderer(t) {
|
|
399
|
-
const e =
|
|
439
|
+
const e = Me(t);
|
|
400
440
|
if (!e)
|
|
401
441
|
return;
|
|
402
442
|
const r = t.closest("tbw-grid");
|
|
403
443
|
return (o) => {
|
|
404
|
-
const
|
|
444
|
+
const s = {
|
|
405
445
|
grid: r ?? o
|
|
406
|
-
},
|
|
407
|
-
return
|
|
408
|
-
|
|
409
|
-
}), this.mountedViews.push({ root:
|
|
410
|
-
const d = this.mountedViews.findIndex((
|
|
446
|
+
}, c = h(o);
|
|
447
|
+
return g(() => {
|
|
448
|
+
c.render(e(s));
|
|
449
|
+
}), this.mountedViews.push({ root: c, container: o }), () => {
|
|
450
|
+
const d = this.mountedViews.findIndex((l) => l.container === o);
|
|
411
451
|
if (d !== -1) {
|
|
412
|
-
const { root:
|
|
452
|
+
const { root: l } = this.mountedViews[d];
|
|
413
453
|
try {
|
|
414
|
-
|
|
454
|
+
l.unmount();
|
|
415
455
|
} catch {
|
|
416
456
|
}
|
|
417
457
|
this.mountedViews.splice(d, 1);
|
|
@@ -462,8 +502,8 @@ class ue {
|
|
|
462
502
|
return (e) => {
|
|
463
503
|
const r = document.createElement("span");
|
|
464
504
|
r.style.display = "contents";
|
|
465
|
-
const o =
|
|
466
|
-
return this.mountedViews.push({ root: o, container: r }),
|
|
505
|
+
const o = h(r);
|
|
506
|
+
return this.mountedViews.push({ root: o, container: r }), g(() => {
|
|
467
507
|
o.render(t(e));
|
|
468
508
|
}), r;
|
|
469
509
|
};
|
|
@@ -476,8 +516,8 @@ class ue {
|
|
|
476
516
|
return (e) => {
|
|
477
517
|
const r = document.createElement("span");
|
|
478
518
|
r.style.display = "contents";
|
|
479
|
-
const o =
|
|
480
|
-
return this.editorViews.push({ root: o, container: r }),
|
|
519
|
+
const o = h(r);
|
|
520
|
+
return this.editorViews.push({ root: o, container: r }), g(() => {
|
|
481
521
|
o.render(t(e));
|
|
482
522
|
}), r;
|
|
483
523
|
};
|
|
@@ -490,9 +530,9 @@ class ue {
|
|
|
490
530
|
return (e, r) => {
|
|
491
531
|
const o = document.createElement("div");
|
|
492
532
|
o.style.display = "contents";
|
|
493
|
-
const
|
|
494
|
-
this.mountedViews.push({ root:
|
|
495
|
-
|
|
533
|
+
const s = h(o);
|
|
534
|
+
this.mountedViews.push({ root: s, container: o }), g(() => {
|
|
535
|
+
s.render(t(r));
|
|
496
536
|
}), e.appendChild(o);
|
|
497
537
|
};
|
|
498
538
|
}
|
|
@@ -547,14 +587,14 @@ class ue {
|
|
|
547
587
|
}
|
|
548
588
|
}
|
|
549
589
|
}
|
|
550
|
-
const
|
|
590
|
+
const ct = ue, je = {
|
|
551
591
|
undoRedo: ["editing"],
|
|
552
592
|
clipboard: ["selection"]
|
|
553
593
|
};
|
|
554
|
-
function
|
|
594
|
+
function $e(n) {
|
|
555
595
|
const t = new Set(n);
|
|
556
596
|
for (const e of n) {
|
|
557
|
-
const r =
|
|
597
|
+
const r = je[e];
|
|
558
598
|
if (r)
|
|
559
599
|
for (const o of r)
|
|
560
600
|
t.has(o) || console.warn(
|
|
@@ -562,35 +602,35 @@ function Oe(n) {
|
|
|
562
602
|
);
|
|
563
603
|
}
|
|
564
604
|
}
|
|
565
|
-
function
|
|
605
|
+
function ze(n) {
|
|
566
606
|
const t = [];
|
|
567
607
|
for (const [e, r] of Object.entries(n))
|
|
568
608
|
r === void 0 || r === !1 || t.push(e);
|
|
569
|
-
return
|
|
609
|
+
return $e(t), ve(n);
|
|
570
610
|
}
|
|
571
611
|
let de = !1, _ = null;
|
|
572
612
|
function Y() {
|
|
573
613
|
return de || (_ = new ue(), me.registerAdapter(_), de = !0), _;
|
|
574
614
|
}
|
|
575
615
|
Y();
|
|
576
|
-
const
|
|
577
|
-
function
|
|
616
|
+
const _e = Z(null);
|
|
617
|
+
function We(n) {
|
|
578
618
|
const e = n.getPluginByName?.("masterDetail");
|
|
579
619
|
e && typeof e.refreshDetailRenderer == "function" && e.refreshDetailRenderer();
|
|
580
620
|
}
|
|
581
|
-
function
|
|
621
|
+
function qe(n, t) {
|
|
582
622
|
const e = n;
|
|
583
623
|
if (!n.querySelector("tbw-grid-responsive-card") || !le(n)) return;
|
|
584
|
-
const
|
|
585
|
-
if (
|
|
586
|
-
const
|
|
587
|
-
|
|
624
|
+
const s = e.getPluginByName?.("responsive");
|
|
625
|
+
if (s && typeof s.setCardRenderer == "function") {
|
|
626
|
+
const c = t.createResponsiveCardRenderer(n);
|
|
627
|
+
c && s.setCardRenderer(c);
|
|
588
628
|
}
|
|
589
629
|
}
|
|
590
|
-
function
|
|
630
|
+
function Be(n) {
|
|
591
631
|
const t = {};
|
|
592
|
-
return
|
|
593
|
-
if (
|
|
632
|
+
return Re.forEach(n, (e) => {
|
|
633
|
+
if (we(e)) {
|
|
594
634
|
if (e.type && e.type.displayName === "GridDetailPanel") {
|
|
595
635
|
const r = e.props;
|
|
596
636
|
t.masterDetail = {
|
|
@@ -604,32 +644,32 @@ function _e(n) {
|
|
|
604
644
|
}
|
|
605
645
|
}), t;
|
|
606
646
|
}
|
|
607
|
-
const
|
|
647
|
+
const at = he(function(t, e) {
|
|
608
648
|
const {
|
|
609
649
|
// Core props
|
|
610
650
|
rows: r,
|
|
611
651
|
gridConfig: o,
|
|
612
|
-
columns:
|
|
613
|
-
columnDefaults:
|
|
652
|
+
columns: s,
|
|
653
|
+
columnDefaults: c,
|
|
614
654
|
fitMode: d,
|
|
615
|
-
sortable:
|
|
616
|
-
filterable:
|
|
617
|
-
selectable:
|
|
655
|
+
sortable: l,
|
|
656
|
+
filterable: p,
|
|
657
|
+
selectable: R,
|
|
618
658
|
loading: k,
|
|
619
659
|
editOn: M,
|
|
620
660
|
customStyles: N,
|
|
621
661
|
className: fe,
|
|
622
|
-
style:
|
|
623
|
-
children:
|
|
662
|
+
style: pe,
|
|
663
|
+
children: H,
|
|
624
664
|
// Plugin props
|
|
625
|
-
plugins:
|
|
665
|
+
plugins: D,
|
|
626
666
|
// SSR mode
|
|
627
667
|
ssr: ee,
|
|
628
668
|
// Legacy event handlers
|
|
629
|
-
onRowsChange:
|
|
669
|
+
onRowsChange: O,
|
|
630
670
|
// Feature props and event props are in ...rest
|
|
631
|
-
...
|
|
632
|
-
} = t,
|
|
671
|
+
...v
|
|
672
|
+
} = t, u = A(null), L = A(null), te = V(Ae), j = V(De), re = [
|
|
633
673
|
"selection",
|
|
634
674
|
"editing",
|
|
635
675
|
"filtering",
|
|
@@ -658,181 +698,181 @@ const it = he(function(t, e) {
|
|
|
658
698
|
"print",
|
|
659
699
|
"pivot",
|
|
660
700
|
"serverSide"
|
|
661
|
-
],
|
|
662
|
-
const a =
|
|
701
|
+
], ge = w(() => re.map((i) => {
|
|
702
|
+
const a = v[i];
|
|
663
703
|
return a !== void 0 ? `${i}:${JSON.stringify(a)}` : "";
|
|
664
|
-
}).filter(Boolean).join("|"), [
|
|
704
|
+
}).filter(Boolean).join("|"), [v]), ne = w(() => {
|
|
665
705
|
const i = {};
|
|
666
706
|
for (const a of re)
|
|
667
|
-
a in
|
|
707
|
+
a in v && v[a] !== void 0 && (i[a] = v[a]);
|
|
668
708
|
return i;
|
|
669
|
-
}, [
|
|
670
|
-
if (
|
|
671
|
-
const i = new Set(
|
|
672
|
-
return [...
|
|
709
|
+
}, [ge]), oe = w(() => Be(H), [H]), ie = w(() => ({ ...oe, ...ne }), [ne, oe]), $ = w(() => D || ee ? [] : ze(ie), [ie, D, ee]), S = w(() => {
|
|
710
|
+
if (D) {
|
|
711
|
+
const i = new Set(D.map((f) => f.name)), a = $.filter((f) => !i.has(f.name));
|
|
712
|
+
return [...D, ...a];
|
|
673
713
|
}
|
|
674
714
|
return $;
|
|
675
|
-
}, [
|
|
676
|
-
if (!
|
|
677
|
-
const i = Pe(
|
|
678
|
-
return
|
|
679
|
-
...
|
|
715
|
+
}, [D, $]), G = w(() => {
|
|
716
|
+
if (!s) return s;
|
|
717
|
+
const i = Pe(s);
|
|
718
|
+
return c ? i.map((a) => ({
|
|
719
|
+
...c,
|
|
680
720
|
...a
|
|
681
721
|
// Individual column props override defaults
|
|
682
722
|
})) : i;
|
|
683
|
-
}, [
|
|
684
|
-
const i =
|
|
685
|
-
if (
|
|
723
|
+
}, [s, c]), I = w(() => {
|
|
724
|
+
const i = Fe(o), a = {};
|
|
725
|
+
if (l !== void 0 && (a.sortable = l), p !== void 0 && (a.filterable = p), R !== void 0 && (a.selectable = R), j) {
|
|
686
726
|
const f = i?.icons || o?.icons || {};
|
|
687
|
-
a.icons = { ...
|
|
727
|
+
a.icons = { ...j, ...f };
|
|
688
728
|
}
|
|
689
|
-
if (
|
|
690
|
-
const f = i.plugins || [],
|
|
729
|
+
if (S.length > 0 && i) {
|
|
730
|
+
const f = i.plugins || [], y = new Set(f.map((x) => x.name)), F = S.filter((x) => !y.has(x.name));
|
|
691
731
|
return {
|
|
692
732
|
...i,
|
|
693
733
|
...a,
|
|
694
|
-
plugins: [...f, ...
|
|
734
|
+
plugins: [...f, ...F]
|
|
695
735
|
};
|
|
696
736
|
}
|
|
697
|
-
return
|
|
698
|
-
}, [o,
|
|
699
|
-
|
|
737
|
+
return S.length > 0 && !i ? { ...a, plugins: S } : Object.keys(a).length > 0 ? { ...i, ...a } : i;
|
|
738
|
+
}, [o, S, l, p, R, j]);
|
|
739
|
+
m(() => {
|
|
700
740
|
Y().setTypeDefaults(te);
|
|
701
|
-
}, [te]),
|
|
702
|
-
|
|
703
|
-
}, [r]),
|
|
704
|
-
|
|
705
|
-
}, [
|
|
706
|
-
|
|
707
|
-
}, [
|
|
708
|
-
|
|
709
|
-
}, [d]),
|
|
710
|
-
|
|
711
|
-
}, [M]),
|
|
712
|
-
|
|
713
|
-
}, [k]),
|
|
714
|
-
const i =
|
|
741
|
+
}, [te]), m(() => {
|
|
742
|
+
u.current && (u.current.rows = r);
|
|
743
|
+
}, [r]), m(() => {
|
|
744
|
+
u.current && I && (u.current.gridConfig = I);
|
|
745
|
+
}, [I]), m(() => {
|
|
746
|
+
u.current && G && (u.current.columns = G);
|
|
747
|
+
}, [G]), m(() => {
|
|
748
|
+
u.current && d !== void 0 && (u.current.fitMode = d);
|
|
749
|
+
}, [d]), m(() => {
|
|
750
|
+
u.current && M !== void 0 && (u.current.editOn = M);
|
|
751
|
+
}, [M]), m(() => {
|
|
752
|
+
u.current && k !== void 0 && (u.current.loading = k);
|
|
753
|
+
}, [k]), m(() => {
|
|
754
|
+
const i = u.current;
|
|
715
755
|
if (!i) return;
|
|
716
756
|
const a = Y();
|
|
717
|
-
i.__frameworkAdapter = a,
|
|
757
|
+
i.__frameworkAdapter = a, We(i), qe(i, a);
|
|
718
758
|
let f = !1;
|
|
719
|
-
const
|
|
759
|
+
const y = requestAnimationFrame(() => {
|
|
720
760
|
f || (typeof i.refreshColumns == "function" && i.refreshColumns(), typeof i.refreshShellHeader == "function" && i.refreshShellHeader());
|
|
721
761
|
});
|
|
722
762
|
return () => {
|
|
723
|
-
f = !0, cancelAnimationFrame(
|
|
763
|
+
f = !0, cancelAnimationFrame(y);
|
|
724
764
|
};
|
|
725
|
-
}, []),
|
|
726
|
-
if (!
|
|
727
|
-
const i =
|
|
765
|
+
}, []), m(() => {
|
|
766
|
+
if (!u.current || !N) return;
|
|
767
|
+
const i = u.current, a = "react-custom-styles";
|
|
728
768
|
let f = !0;
|
|
729
769
|
return i.ready?.().then(() => {
|
|
730
|
-
f && N && (i.registerStyles?.(a, N),
|
|
770
|
+
f && N && (i.registerStyles?.(a, N), L.current = a);
|
|
731
771
|
}), () => {
|
|
732
|
-
f = !1,
|
|
772
|
+
f = !1, L.current && (i.unregisterStyles?.(L.current), L.current = null);
|
|
733
773
|
};
|
|
734
|
-
}, [N]),
|
|
735
|
-
const i =
|
|
774
|
+
}, [N]), m(() => {
|
|
775
|
+
const i = u.current;
|
|
736
776
|
if (!i) return;
|
|
737
777
|
const a = [];
|
|
738
|
-
if (
|
|
739
|
-
const f = ((
|
|
778
|
+
if (O) {
|
|
779
|
+
const f = ((y) => O(y.detail.rows));
|
|
740
780
|
i.addEventListener("rows-change", f), a.push(["rows-change", f]);
|
|
741
781
|
}
|
|
742
782
|
return () => {
|
|
743
|
-
a.forEach(([f,
|
|
744
|
-
i.removeEventListener(f,
|
|
783
|
+
a.forEach(([f, y]) => {
|
|
784
|
+
i.removeEventListener(f, y);
|
|
745
785
|
});
|
|
746
786
|
};
|
|
747
|
-
}, [
|
|
748
|
-
const se =
|
|
787
|
+
}, [O]);
|
|
788
|
+
const se = w(() => Object.keys(z).filter((i) => typeof v[i] == "function").sort().join("|"), [v]), ce = A({});
|
|
749
789
|
for (const i of Object.keys(z))
|
|
750
|
-
ce.current[i] =
|
|
751
|
-
return
|
|
752
|
-
const i =
|
|
790
|
+
ce.current[i] = v[i];
|
|
791
|
+
return m(() => {
|
|
792
|
+
const i = u.current;
|
|
753
793
|
if (!i) return;
|
|
754
794
|
const a = [];
|
|
755
|
-
for (const [f,
|
|
795
|
+
for (const [f, y] of Object.entries(z))
|
|
756
796
|
if (se.includes(f)) {
|
|
757
|
-
const
|
|
758
|
-
ce.current[f]?.(
|
|
797
|
+
const F = ((x) => {
|
|
798
|
+
ce.current[f]?.(x.detail, x);
|
|
759
799
|
});
|
|
760
|
-
i.addEventListener(
|
|
800
|
+
i.addEventListener(y, F), a.push([y, F]);
|
|
761
801
|
}
|
|
762
802
|
return () => {
|
|
763
|
-
a.forEach(([f,
|
|
764
|
-
i.removeEventListener(f,
|
|
803
|
+
a.forEach(([f, y]) => {
|
|
804
|
+
i.removeEventListener(f, y);
|
|
765
805
|
});
|
|
766
806
|
};
|
|
767
807
|
}, [se]), ye(
|
|
768
808
|
e,
|
|
769
809
|
() => ({
|
|
770
810
|
get element() {
|
|
771
|
-
return
|
|
811
|
+
return u.current;
|
|
772
812
|
},
|
|
773
813
|
async getConfig() {
|
|
774
|
-
return
|
|
814
|
+
return u.current?.getConfig?.() ?? {};
|
|
775
815
|
},
|
|
776
816
|
async ready() {
|
|
777
|
-
return
|
|
817
|
+
return u.current?.ready?.();
|
|
778
818
|
},
|
|
779
819
|
async forceLayout() {
|
|
780
|
-
return
|
|
820
|
+
return u.current?.forceLayout?.();
|
|
781
821
|
},
|
|
782
822
|
async toggleGroup(i) {
|
|
783
|
-
return
|
|
823
|
+
return u.current?.toggleGroup?.(i);
|
|
784
824
|
},
|
|
785
825
|
registerStyles(i, a) {
|
|
786
|
-
|
|
826
|
+
u.current?.registerStyles?.(i, a);
|
|
787
827
|
},
|
|
788
828
|
unregisterStyles(i) {
|
|
789
|
-
|
|
829
|
+
u.current?.unregisterStyles?.(i);
|
|
790
830
|
},
|
|
791
831
|
setRowLoading(i, a) {
|
|
792
|
-
|
|
832
|
+
u.current?.setRowLoading?.(i, a);
|
|
793
833
|
},
|
|
794
834
|
setCellLoading(i, a, f) {
|
|
795
|
-
|
|
835
|
+
u.current?.setCellLoading?.(i, a, f);
|
|
796
836
|
},
|
|
797
837
|
isRowLoading(i) {
|
|
798
|
-
return
|
|
838
|
+
return u.current?.isRowLoading?.(i) ?? !1;
|
|
799
839
|
},
|
|
800
840
|
isCellLoading(i, a) {
|
|
801
|
-
return
|
|
841
|
+
return u.current?.isCellLoading?.(i, a) ?? !1;
|
|
802
842
|
},
|
|
803
843
|
clearAllLoading() {
|
|
804
|
-
|
|
844
|
+
u.current?.clearAllLoading?.();
|
|
805
845
|
}
|
|
806
846
|
}),
|
|
807
847
|
[]
|
|
808
|
-
), /* @__PURE__ */
|
|
848
|
+
), /* @__PURE__ */ E(
|
|
809
849
|
"tbw-grid",
|
|
810
850
|
{
|
|
811
851
|
ref: (i) => {
|
|
812
|
-
if (
|
|
852
|
+
if (u.current = i, i) {
|
|
813
853
|
const a = i;
|
|
814
|
-
|
|
854
|
+
I && (a.gridConfig = I), r && (a.rows = r), G && (a.columns = G);
|
|
815
855
|
}
|
|
816
856
|
},
|
|
817
857
|
class: fe,
|
|
818
|
-
style:
|
|
819
|
-
children: /* @__PURE__ */
|
|
858
|
+
style: pe,
|
|
859
|
+
children: /* @__PURE__ */ E(_e.Provider, { value: u, children: H })
|
|
820
860
|
}
|
|
821
861
|
);
|
|
822
862
|
});
|
|
823
863
|
export {
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
864
|
+
at as D,
|
|
865
|
+
_e as G,
|
|
866
|
+
ct as R,
|
|
867
|
+
st as a,
|
|
868
|
+
tt as b,
|
|
869
|
+
Xe as c,
|
|
870
|
+
ke as d,
|
|
831
871
|
xe as e,
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
872
|
+
ot as f,
|
|
873
|
+
nt as g,
|
|
874
|
+
et as h,
|
|
835
875
|
ue as i,
|
|
836
|
-
|
|
837
|
-
|
|
876
|
+
it as r,
|
|
877
|
+
rt as u
|
|
838
878
|
};
|
package/features/export.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useContext as g, useCallback as n } from "react";
|
|
2
|
-
import { G as c } from "../chunks/data-grid-
|
|
2
|
+
import { G as c } from "../chunks/data-grid-Cpa5kukM.js";
|
|
3
3
|
import "@toolbox-web/grid/features/export";
|
|
4
4
|
function E() {
|
|
5
5
|
const i = g(c), t = n(() => i?.current?.getPluginByName("export"), [i]), x = n(
|
package/features/filtering.js
CHANGED
|
@@ -2,7 +2,7 @@ import { FilteringPlugin as c } from "@toolbox-web/grid/plugins/filtering";
|
|
|
2
2
|
import { useContext as m, useCallback as n } from "react";
|
|
3
3
|
import { flushSync as w } from "react-dom";
|
|
4
4
|
import { createRoot as P } from "react-dom/client";
|
|
5
|
-
import { G as b } from "../chunks/data-grid-
|
|
5
|
+
import { G as b } from "../chunks/data-grid-Cpa5kukM.js";
|
|
6
6
|
import { registerFeature as R } from "@toolbox-web/grid/features/registry";
|
|
7
7
|
R("filtering", (r) => {
|
|
8
8
|
if (typeof r == "boolean") return new c();
|
|
@@ -1 +1,25 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Column Grouping feature for @toolbox-web/grid-react
|
|
3
|
+
*
|
|
4
|
+
* Import this module to enable the `groupingColumns` prop on DataGrid.
|
|
5
|
+
* Automatically bridges React JSX `groupHeaderRenderer` to vanilla DOM.
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* ```tsx
|
|
9
|
+
* import '@toolbox-web/grid-react/features/grouping-columns';
|
|
10
|
+
*
|
|
11
|
+
* <DataGrid groupingColumns />
|
|
12
|
+
* ```
|
|
13
|
+
*
|
|
14
|
+
* @example Custom group header renderer
|
|
15
|
+
* ```tsx
|
|
16
|
+
* <DataGrid groupingColumns={{
|
|
17
|
+
* columnGroups: [...],
|
|
18
|
+
* groupHeaderRenderer: (params) => <strong>{params.label} ({params.columns.length})</strong>,
|
|
19
|
+
* }} />
|
|
20
|
+
* ```
|
|
21
|
+
*
|
|
22
|
+
* @packageDocumentation
|
|
23
|
+
*/
|
|
24
|
+
export {};
|
|
1
25
|
//# sourceMappingURL=grouping-columns.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"grouping-columns.d.ts","sourceRoot":"","sources":["../../../../libs/grid-react/src/features/grouping-columns.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"grouping-columns.d.ts","sourceRoot":"","sources":["../../../../libs/grid-react/src/features/grouping-columns.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG"}
|
|
@@ -1 +1,21 @@
|
|
|
1
|
-
import "@toolbox-web/grid/
|
|
1
|
+
import { GroupingColumnsPlugin as n } from "@toolbox-web/grid/plugins/grouping-columns";
|
|
2
|
+
import { flushSync as c } from "react-dom";
|
|
3
|
+
import { createRoot as s } from "react-dom/client";
|
|
4
|
+
import { registerFeature as m } from "@toolbox-web/grid/features/registry";
|
|
5
|
+
m("groupingColumns", (e) => {
|
|
6
|
+
if (typeof e == "boolean") return new n();
|
|
7
|
+
if (!e) return new n();
|
|
8
|
+
const r = e, t = { ...r };
|
|
9
|
+
if (typeof r.groupHeaderRenderer == "function") {
|
|
10
|
+
const u = r.groupHeaderRenderer;
|
|
11
|
+
t.groupHeaderRenderer = (p) => {
|
|
12
|
+
const o = document.createElement("div");
|
|
13
|
+
o.style.display = "contents";
|
|
14
|
+
const i = s(o);
|
|
15
|
+
return c(() => {
|
|
16
|
+
i.render(u(p));
|
|
17
|
+
}), o;
|
|
18
|
+
};
|
|
19
|
+
}
|
|
20
|
+
return new n(t);
|
|
21
|
+
});
|
|
@@ -1 +1,25 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Row Grouping feature for @toolbox-web/grid-react
|
|
3
|
+
*
|
|
4
|
+
* Import this module to enable the `groupingRows` prop on DataGrid.
|
|
5
|
+
* Automatically bridges React JSX `groupRowRenderer` to vanilla DOM.
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* ```tsx
|
|
9
|
+
* import '@toolbox-web/grid-react/features/grouping-rows';
|
|
10
|
+
*
|
|
11
|
+
* <DataGrid groupingRows={{ groupBy: ['department'] }} />
|
|
12
|
+
* ```
|
|
13
|
+
*
|
|
14
|
+
* @example Custom group row renderer
|
|
15
|
+
* ```tsx
|
|
16
|
+
* <DataGrid groupingRows={{
|
|
17
|
+
* groupBy: ['department'],
|
|
18
|
+
* groupRowRenderer: (params) => <strong>{params.key}: {params.value} ({params.rows.length})</strong>,
|
|
19
|
+
* }} />
|
|
20
|
+
* ```
|
|
21
|
+
*
|
|
22
|
+
* @packageDocumentation
|
|
23
|
+
*/
|
|
24
|
+
export {};
|
|
1
25
|
//# sourceMappingURL=grouping-rows.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"grouping-rows.d.ts","sourceRoot":"","sources":["../../../../libs/grid-react/src/features/grouping-rows.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"grouping-rows.d.ts","sourceRoot":"","sources":["../../../../libs/grid-react/src/features/grouping-rows.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG"}
|
|
@@ -1 +1,21 @@
|
|
|
1
|
-
import "@toolbox-web/grid/
|
|
1
|
+
import { GroupingRowsPlugin as t } from "@toolbox-web/grid/plugins/grouping-rows";
|
|
2
|
+
import { flushSync as c } from "react-dom";
|
|
3
|
+
import { createRoot as s } from "react-dom/client";
|
|
4
|
+
import { registerFeature as f } from "@toolbox-web/grid/features/registry";
|
|
5
|
+
f("groupingRows", (e) => {
|
|
6
|
+
if (typeof e == "boolean") return new t();
|
|
7
|
+
if (!e) return new t();
|
|
8
|
+
const r = e, n = { ...r };
|
|
9
|
+
if (typeof r.groupRowRenderer == "function") {
|
|
10
|
+
const p = r.groupRowRenderer;
|
|
11
|
+
n.groupRowRenderer = (i) => {
|
|
12
|
+
const o = document.createElement("div");
|
|
13
|
+
o.style.display = "contents";
|
|
14
|
+
const u = s(o);
|
|
15
|
+
return c(() => {
|
|
16
|
+
u.render(p(i));
|
|
17
|
+
}), o;
|
|
18
|
+
};
|
|
19
|
+
}
|
|
20
|
+
return new t(n);
|
|
21
|
+
});
|
package/features/index.js
CHANGED
|
@@ -3,15 +3,15 @@ import "@toolbox-web/grid/features/column-virtualization";
|
|
|
3
3
|
import "@toolbox-web/grid/features/context-menu";
|
|
4
4
|
import "@toolbox-web/grid/features/editing";
|
|
5
5
|
import "react";
|
|
6
|
-
import "../chunks/data-grid-
|
|
6
|
+
import "../chunks/data-grid-Cpa5kukM.js";
|
|
7
7
|
import "@toolbox-web/grid/features/export";
|
|
8
8
|
import "./filtering.js";
|
|
9
|
-
import "
|
|
10
|
-
import "
|
|
9
|
+
import "./grouping-columns.js";
|
|
10
|
+
import "./grouping-rows.js";
|
|
11
11
|
import "@toolbox-web/grid/features/master-detail";
|
|
12
12
|
import "@toolbox-web/grid/features/multi-sort";
|
|
13
13
|
import "@toolbox-web/grid/features/pinned-columns";
|
|
14
|
-
import "
|
|
14
|
+
import "./pinned-rows.js";
|
|
15
15
|
import "@toolbox-web/grid/features/pivot";
|
|
16
16
|
import "@toolbox-web/grid/features/print";
|
|
17
17
|
import "@toolbox-web/grid/features/responsive";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pinned-rows.d.ts","sourceRoot":"","sources":["../../../../libs/grid-react/src/features/pinned-rows.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"pinned-rows.d.ts","sourceRoot":"","sources":["../../../../libs/grid-react/src/features/pinned-rows.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,wCAAwC,CAAC"}
|
package/features/pinned-rows.js
CHANGED
|
@@ -1 +1,25 @@
|
|
|
1
1
|
import "@toolbox-web/grid/features/pinned-rows";
|
|
2
|
+
import { PinnedRowsPlugin as o } from "@toolbox-web/grid/plugins/pinned-rows";
|
|
3
|
+
import { flushSync as u } from "react-dom";
|
|
4
|
+
import { createRoot as f } from "react-dom/client";
|
|
5
|
+
import { registerFeature as p } from "@toolbox-web/grid/features/registry";
|
|
6
|
+
p("pinnedRows", (e) => {
|
|
7
|
+
if (typeof e == "boolean") return new o();
|
|
8
|
+
if (!e) return new o();
|
|
9
|
+
const t = e, s = { ...t };
|
|
10
|
+
return Array.isArray(t.customPanels) && (s.customPanels = t.customPanels.map((r) => {
|
|
11
|
+
if (typeof r.render != "function") return r;
|
|
12
|
+
const i = r.render;
|
|
13
|
+
return {
|
|
14
|
+
...r,
|
|
15
|
+
render: (c) => {
|
|
16
|
+
const n = document.createElement("div");
|
|
17
|
+
n.style.display = "contents";
|
|
18
|
+
const m = f(n);
|
|
19
|
+
return u(() => {
|
|
20
|
+
m.render(i(c));
|
|
21
|
+
}), n;
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
})), new o(s);
|
|
25
|
+
});
|
package/features/print.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useContext as g, useCallback as t } from "react";
|
|
2
|
-
import { G as u } from "../chunks/data-grid-
|
|
2
|
+
import { G as u } from "../chunks/data-grid-Cpa5kukM.js";
|
|
3
3
|
import "@toolbox-web/grid/features/print";
|
|
4
4
|
function l() {
|
|
5
5
|
const r = g(u), n = t(() => r?.current?.getPluginByName("print"), [r]), o = t(
|
package/features/selection.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useContext as m, useCallback as n } from "react";
|
|
2
|
-
import { G as S } from "../chunks/data-grid-
|
|
2
|
+
import { G as S } from "../chunks/data-grid-Cpa5kukM.js";
|
|
3
3
|
import "@toolbox-web/grid/features/selection";
|
|
4
4
|
function h() {
|
|
5
5
|
const l = m(S), e = n(() => l?.current?.getPluginByName("selection"), [l]), g = n(() => {
|
package/features/undo-redo.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useContext as U, useCallback as d } from "react";
|
|
2
|
-
import { G as p } from "../chunks/data-grid-
|
|
2
|
+
import { G as p } from "../chunks/data-grid-Cpa5kukM.js";
|
|
3
3
|
import "@toolbox-web/grid/features/undo-redo";
|
|
4
4
|
function m() {
|
|
5
5
|
const e = U(p), n = d(() => e?.current?.getPluginByName("undoRedo"), [e]), r = d(() => {
|
package/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { r as T, a as B, b as k, c as A } from "./chunks/data-grid-
|
|
2
|
-
import { D as H, i as U, d as $, e as K, f as M, R as O, h as Q, u as X, g as Y } from "./chunks/data-grid-
|
|
1
|
+
import { r as T, a as B, b as k, c as A } from "./chunks/data-grid-Cpa5kukM.js";
|
|
2
|
+
import { D as H, i as U, d as $, e as K, f as M, R as O, h as Q, u as X, g as Y } from "./chunks/data-grid-Cpa5kukM.js";
|
|
3
3
|
import { jsx as w, Fragment as I } from "react/jsx-runtime";
|
|
4
4
|
import { useRef as R, useCallback as i, useState as P, useEffect as S } from "react";
|
|
5
5
|
function J(n) {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ColumnConfig as BaseColumnConfig, GridConfig as BaseGridConfig, CellRenderContext, ColumnEditorContext } from '@toolbox-web/grid';
|
|
1
|
+
import { ColumnConfig as BaseColumnConfig, GridConfig as BaseGridConfig, CellRenderContext, ColumnEditorContext, HeaderCellContext, HeaderLabelContext, LoadingContext } from '@toolbox-web/grid';
|
|
2
2
|
import { ReactNode } from 'react';
|
|
3
3
|
/**
|
|
4
4
|
* Column configuration for React applications.
|
|
@@ -27,7 +27,7 @@ import { ReactNode } from 'react';
|
|
|
27
27
|
* ];
|
|
28
28
|
* ```
|
|
29
29
|
*/
|
|
30
|
-
export interface ColumnConfig<TRow = unknown> extends Omit<BaseColumnConfig<TRow>, 'renderer' | 'viewRenderer' | 'editor'> {
|
|
30
|
+
export interface ColumnConfig<TRow = unknown> extends Omit<BaseColumnConfig<TRow>, 'renderer' | 'viewRenderer' | 'editor' | 'headerRenderer' | 'headerLabelRenderer'> {
|
|
31
31
|
/**
|
|
32
32
|
* React component renderer for cell display.
|
|
33
33
|
* Receives cell context and returns a React node (JSX).
|
|
@@ -42,6 +42,16 @@ export interface ColumnConfig<TRow = unknown> extends Omit<BaseColumnConfig<TRow
|
|
|
42
42
|
* Same property name as vanilla JS, but accepts React components.
|
|
43
43
|
*/
|
|
44
44
|
editor?: (ctx: ColumnEditorContext<TRow>) => ReactNode;
|
|
45
|
+
/**
|
|
46
|
+
* React component header renderer for full header cell control.
|
|
47
|
+
* Receives header cell context and returns a React node (JSX).
|
|
48
|
+
*/
|
|
49
|
+
headerRenderer?: (ctx: HeaderCellContext<TRow>) => ReactNode;
|
|
50
|
+
/**
|
|
51
|
+
* React component header label renderer for customizing just the label portion.
|
|
52
|
+
* Receives header label context and returns a React node (JSX).
|
|
53
|
+
*/
|
|
54
|
+
headerLabelRenderer?: (ctx: HeaderLabelContext<TRow>) => ReactNode;
|
|
45
55
|
}
|
|
46
56
|
/**
|
|
47
57
|
* @deprecated Use `ColumnConfig` instead.
|
|
@@ -68,8 +78,12 @@ export type ReactColumnConfig<TRow = unknown> = ColumnConfig<TRow>;
|
|
|
68
78
|
* };
|
|
69
79
|
* ```
|
|
70
80
|
*/
|
|
71
|
-
export type GridConfig<TRow = unknown> = Omit<BaseGridConfig<TRow>, 'columns'> & {
|
|
81
|
+
export type GridConfig<TRow = unknown> = Omit<BaseGridConfig<TRow>, 'columns' | 'loadingRenderer'> & {
|
|
72
82
|
columns?: ColumnConfig<TRow>[];
|
|
83
|
+
/**
|
|
84
|
+
* Custom loading renderer - can be a vanilla DOM function or a React render function returning JSX.
|
|
85
|
+
*/
|
|
86
|
+
loadingRenderer?: BaseGridConfig<TRow>['loadingRenderer'] | ((ctx: LoadingContext) => ReactNode);
|
|
73
87
|
};
|
|
74
88
|
/**
|
|
75
89
|
* @deprecated Use `GridConfig` instead.
|
|
@@ -97,6 +111,22 @@ export declare function wrapReactRenderer<TRow>(renderFn: (ctx: CellRenderContex
|
|
|
97
111
|
* Used internally by DataGrid to process reactEditor properties.
|
|
98
112
|
*/
|
|
99
113
|
export declare function wrapReactEditor<TRow>(editorFn: (ctx: ColumnEditorContext<TRow>) => ReactNode): (ctx: ColumnEditorContext<TRow>) => HTMLElement;
|
|
114
|
+
/**
|
|
115
|
+
* Wraps a React header renderer function into a DOM-returning function.
|
|
116
|
+
* Used internally by DataGrid to process headerRenderer properties.
|
|
117
|
+
*/
|
|
118
|
+
export declare function wrapReactHeaderRenderer<TRow>(renderFn: (ctx: HeaderCellContext<TRow>) => ReactNode): (ctx: HeaderCellContext<TRow>) => HTMLElement;
|
|
119
|
+
/**
|
|
120
|
+
* Wraps a React header label renderer function into a DOM-returning function.
|
|
121
|
+
* Used internally by DataGrid to process headerLabelRenderer properties.
|
|
122
|
+
*/
|
|
123
|
+
export declare function wrapReactHeaderLabelRenderer<TRow>(renderFn: (ctx: HeaderLabelContext<TRow>) => ReactNode): (ctx: HeaderLabelContext<TRow>) => HTMLElement;
|
|
124
|
+
/**
|
|
125
|
+
* Wraps a React loading renderer function into a DOM-returning function.
|
|
126
|
+
* Used internally by processGridConfig to process loadingRenderer properties.
|
|
127
|
+
* Skips wrapping if the function already returns an HTMLElement or string (vanilla DOM renderer).
|
|
128
|
+
*/
|
|
129
|
+
export declare function wrapReactLoadingRenderer(renderFn: (ctx: LoadingContext) => ReactNode): (ctx: LoadingContext) => HTMLElement | string;
|
|
100
130
|
/**
|
|
101
131
|
* Processes a GridConfig, converting React renderer/editor functions
|
|
102
132
|
* to DOM-returning functions that the grid core understands.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react-column-config.d.ts","sourceRoot":"","sources":["../../../../libs/grid-react/src/lib/react-column-config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,YAAY,IAAI,gBAAgB,EAChC,UAAU,IAAI,cAAc,EAC5B,iBAAiB,EACjB,mBAAmB,
|
|
1
|
+
{"version":3,"file":"react-column-config.d.ts","sourceRoot":"","sources":["../../../../libs/grid-react/src/lib/react-column-config.ts"],"names":[],"mappings":"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"}
|