@toolbox-web/grid-react 2.0.0-rc.0 → 2.0.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/feature-registry-8K2rOVnC.js +2 -0
- package/chunks/grid-detail-panel-CLdX0T_A.js +44 -0
- package/chunks/grid-element-context-DpuQsoie.js +5 -0
- package/chunks/grid-responsive-card-Dx5U6Prm.js +41 -0
- package/chunks/portal-bridge-zxgm_jwK.js +60 -0
- package/chunks/post-mount-refresh-hooks-D7BDK4Kl.js +10 -0
- package/chunks/react-column-config-Cto2WHGC.js +126 -0
- package/chunks/react-grid-adapter-CZfpPJvo.js +308 -0
- package/features/editing.js +6 -4
- package/features/export.js +44 -59
- package/features/filtering.js +82 -132
- package/features/grouping-columns.js +24 -24
- package/features/grouping-rows.js +14 -17
- package/features/index.js +18 -20
- package/features/master-detail.js +48 -63
- package/features/pinned-rows.js +58 -51
- package/features/print.js +18 -23
- package/features/responsive.js +51 -63
- package/features/selection.js +47 -45
- package/features/undo-redo.js +53 -86
- package/index.js +591 -654
- package/lib/event-props.d.ts +14 -1
- package/lib/event-props.d.ts.map +1 -1
- package/package.json +2 -2
- package/chunks/grid-detail-panel-BZFcujsZ.js +0 -52
- package/chunks/grid-element-context-BU3WvNtM.js +0 -5
- package/chunks/grid-responsive-card-CSZhDCoN.js +0 -45
- package/chunks/portal-bridge-CvxNt40O.js +0 -68
- package/chunks/post-mount-refresh-hooks-Dt7mPoZC.js +0 -12
- package/chunks/react-column-config-BOe_PgL1.js +0 -125
- package/chunks/react-grid-adapter-BhC9x425.js +0 -518
package/features/pinned-rows.js
CHANGED
|
@@ -1,54 +1,61 @@
|
|
|
1
|
+
import { a as e, i as t } from "../chunks/portal-bridge-zxgm_jwK.js";
|
|
2
|
+
import { t as n } from "../chunks/feature-registry-8K2rOVnC.js";
|
|
1
3
|
import "@toolbox-web/grid/features/pinned-rows";
|
|
2
|
-
import { PinnedRowsPlugin as
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
4
|
+
import { PinnedRowsPlugin as r } from "@toolbox-web/grid/plugins/pinned-rows";
|
|
5
|
+
//#region libs/grid-react/src/features/pinned-rows.ts
|
|
6
|
+
function i(n, r) {
|
|
7
|
+
let i = null, a = !1;
|
|
8
|
+
return (o) => {
|
|
9
|
+
let s = n(o);
|
|
10
|
+
if (s == null || s === !1) return null;
|
|
11
|
+
if (s instanceof HTMLElement) return s;
|
|
12
|
+
if (!i) {
|
|
13
|
+
let e = document.createElement("div");
|
|
14
|
+
e.style.display = "contents", i = {
|
|
15
|
+
host: e,
|
|
16
|
+
portalKey: null
|
|
17
|
+
};
|
|
18
|
+
}
|
|
19
|
+
return i.portalKey = e(i.host, s, i.portalKey ?? void 0), a || (a = !0, r(() => {
|
|
20
|
+
i?.portalKey && t(i.portalKey, { sync: !1 }), i = null;
|
|
21
|
+
})), i.host;
|
|
22
|
+
};
|
|
19
23
|
}
|
|
20
|
-
function
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
24
|
+
function a(e, t) {
|
|
25
|
+
if (!("render" in e) || e.render == null) return e;
|
|
26
|
+
if (Array.isArray(e.render)) {
|
|
27
|
+
let n = e.render.map((e) => typeof e?.render == "function" ? {
|
|
28
|
+
zone: e.zone,
|
|
29
|
+
render: i(e.render, t)
|
|
30
|
+
} : e);
|
|
31
|
+
return {
|
|
32
|
+
...e,
|
|
33
|
+
render: n
|
|
34
|
+
};
|
|
35
|
+
}
|
|
36
|
+
return typeof e.render == "function" ? {
|
|
37
|
+
...e,
|
|
38
|
+
render: i(e.render, t)
|
|
39
|
+
} : e;
|
|
27
40
|
}
|
|
28
|
-
class
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
o.push(a);
|
|
50
|
-
};
|
|
51
|
-
return Array.isArray(r) && (i.slots = r.map((a) => p(a, s))), new h(i, o);
|
|
52
|
-
},
|
|
53
|
-
{ override: !0 }
|
|
54
|
-
);
|
|
41
|
+
var o = class extends r {
|
|
42
|
+
#e;
|
|
43
|
+
constructor(e, t) {
|
|
44
|
+
super(e), this.#e = t;
|
|
45
|
+
}
|
|
46
|
+
detach() {
|
|
47
|
+
super.detach();
|
|
48
|
+
for (let e of this.#e) try {
|
|
49
|
+
e();
|
|
50
|
+
} catch {}
|
|
51
|
+
this.#e.length = 0;
|
|
52
|
+
}
|
|
53
|
+
};
|
|
54
|
+
n("pinnedRows", (e) => {
|
|
55
|
+
if (typeof e == "boolean" || !e) return new r();
|
|
56
|
+
let { slots: t, ...n } = e, i = { ...n }, s = [], c = (e) => {
|
|
57
|
+
s.push(e);
|
|
58
|
+
};
|
|
59
|
+
return Array.isArray(t) && (i.slots = t.map((e) => a(e, c))), new o(i, s);
|
|
60
|
+
}, { override: !0 });
|
|
61
|
+
//#endregion
|
package/features/print.js
CHANGED
|
@@ -1,25 +1,20 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { t as e } from "../chunks/grid-element-context-DpuQsoie.js";
|
|
2
|
+
import { useCallback as t, useContext as n } from "react";
|
|
3
3
|
import "@toolbox-web/grid/features/print";
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
},
|
|
19
|
-
[n]
|
|
20
|
-
), g = r(() => n()?.isPrinting() ?? !1, [n]);
|
|
21
|
-
return { print: u, isPrinting: g };
|
|
4
|
+
//#region libs/grid-react/src/features/print.ts
|
|
5
|
+
function r(r) {
|
|
6
|
+
let i = n(e), a = t(() => (r ? document.querySelector(r) : i?.current)?.getPluginByName("print"), [i, r]);
|
|
7
|
+
return {
|
|
8
|
+
print: t(async (e) => {
|
|
9
|
+
let t = a();
|
|
10
|
+
if (!t) {
|
|
11
|
+
console.warn("[tbw-grid:print] PrintPlugin not found.\n\n → Enable print on the grid:\n <DataGrid print />");
|
|
12
|
+
return;
|
|
13
|
+
}
|
|
14
|
+
await t.print(e);
|
|
15
|
+
}, [a]),
|
|
16
|
+
isPrinting: t(() => a()?.isPrinting() ?? !1, [a])
|
|
17
|
+
};
|
|
22
18
|
}
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
};
|
|
19
|
+
//#endregion
|
|
20
|
+
export { r as useGridPrint };
|
package/features/responsive.js
CHANGED
|
@@ -1,65 +1,53 @@
|
|
|
1
|
+
import { o as e } from "../chunks/react-grid-adapter-CZfpPJvo.js";
|
|
2
|
+
import { a as t, i as n } from "../chunks/portal-bridge-zxgm_jwK.js";
|
|
3
|
+
import { n as r } from "../chunks/post-mount-refresh-hooks-D7BDK4Kl.js";
|
|
4
|
+
import { t as i } from "../chunks/feature-registry-8K2rOVnC.js";
|
|
5
|
+
import { n as a } from "../chunks/grid-responsive-card-Dx5U6Prm.js";
|
|
1
6
|
import "@toolbox-web/grid/features/responsive";
|
|
2
|
-
import { ResponsivePlugin as
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
e
|
|
19
|
-
);
|
|
20
|
-
return r(i, o, !1), o;
|
|
21
|
-
};
|
|
7
|
+
import { ResponsivePlugin as o } from "@toolbox-web/grid/plugins/responsive";
|
|
8
|
+
e((e, { trackPortal: n }) => {
|
|
9
|
+
let r = a(e);
|
|
10
|
+
if (r) return (i, a) => {
|
|
11
|
+
let o = document.createElement("div");
|
|
12
|
+
return o.className = "react-responsive-card", n(t(o, r({
|
|
13
|
+
row: i,
|
|
14
|
+
index: a
|
|
15
|
+
}), void 0, e), o, !1), o;
|
|
16
|
+
};
|
|
17
|
+
}), r("responsive", ({ gridEl: e }) => {
|
|
18
|
+
if (!e.querySelector("tbw-grid-responsive-card") || !a(e)) return;
|
|
19
|
+
let t = e, n = t.getPluginByName("responsive");
|
|
20
|
+
if (!n?.setCardRenderer) return;
|
|
21
|
+
let r = t.__frameworkAdapter?.createResponsiveCardRenderer?.(e);
|
|
22
|
+
r && n.setCardRenderer(r);
|
|
22
23
|
});
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
if (a instanceof HTMLElement) return a;
|
|
54
|
-
const c = document.createElement("div");
|
|
55
|
-
if (c.className = "react-responsive-card", a == null || a === !1) return c;
|
|
56
|
-
const m = f(c, a);
|
|
57
|
-
return n.add(m), c;
|
|
58
|
-
};
|
|
59
|
-
return new h(
|
|
60
|
-
{ ...r, cardRenderer: s },
|
|
61
|
-
n
|
|
62
|
-
);
|
|
63
|
-
},
|
|
64
|
-
{ override: !0 }
|
|
65
|
-
);
|
|
24
|
+
var s = class extends o {
|
|
25
|
+
#e;
|
|
26
|
+
constructor(e, t) {
|
|
27
|
+
super(e), this.#e = t;
|
|
28
|
+
}
|
|
29
|
+
detach() {
|
|
30
|
+
super.detach();
|
|
31
|
+
for (let e of this.#e) try {
|
|
32
|
+
n(e, { sync: !1 });
|
|
33
|
+
} catch {}
|
|
34
|
+
this.#e.clear();
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
i("responsive", (e) => {
|
|
38
|
+
let n = e == null || typeof e == "boolean" ? {} : e, r = n.cardRenderer;
|
|
39
|
+
if (typeof r != "function") return new o(n);
|
|
40
|
+
let i = /* @__PURE__ */ new Set(), a = (e, n, a) => {
|
|
41
|
+
let o = r(e, n, a);
|
|
42
|
+
if (o instanceof HTMLElement) return o;
|
|
43
|
+
let s = document.createElement("div");
|
|
44
|
+
if (s.className = "react-responsive-card", o == null || o === !1) return s;
|
|
45
|
+
let c = t(s, o);
|
|
46
|
+
return i.add(c), s;
|
|
47
|
+
};
|
|
48
|
+
return new s({
|
|
49
|
+
...n,
|
|
50
|
+
cardRenderer: a
|
|
51
|
+
}, i);
|
|
52
|
+
}, { override: !0 });
|
|
53
|
+
//#endregion
|
package/features/selection.js
CHANGED
|
@@ -1,47 +1,49 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { t as e } from "../chunks/grid-element-context-DpuQsoie.js";
|
|
2
|
+
import { useCallback as t, useContext as n } from "react";
|
|
3
3
|
import "@toolbox-web/grid/features/selection";
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
→ Enable selection on the grid
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
4
|
+
//#region libs/grid-react/src/features/selection.ts
|
|
5
|
+
function r(r) {
|
|
6
|
+
let i = n(e), a = t(() => (r ? document.querySelector(r) : i?.current)?.getPluginByName("selection"), [i, r]);
|
|
7
|
+
return {
|
|
8
|
+
selectAll: t(() => {
|
|
9
|
+
let e = a();
|
|
10
|
+
if (!e) {
|
|
11
|
+
console.warn("[tbw-grid:selection] SelectionPlugin not found.\n\n → Enable selection on the grid:\n <DataGrid selection=\"range\" />");
|
|
12
|
+
return;
|
|
13
|
+
}
|
|
14
|
+
let t = r ? document.querySelector(r) : i?.current, n = e.config?.mode;
|
|
15
|
+
if (n === "row") {
|
|
16
|
+
let n = t?.rows?.length ?? 0, r = /* @__PURE__ */ new Set();
|
|
17
|
+
for (let e = 0; e < n; e++) r.add(e);
|
|
18
|
+
e.selected = r, e.requestAfterRender?.();
|
|
19
|
+
} else if (n === "range") {
|
|
20
|
+
let n = t?.rows?.length ?? 0, r = t?._columns?.length ?? 0;
|
|
21
|
+
n > 0 && r > 0 && e.setRanges([{
|
|
22
|
+
from: {
|
|
23
|
+
row: 0,
|
|
24
|
+
col: 0
|
|
25
|
+
},
|
|
26
|
+
to: {
|
|
27
|
+
row: n - 1,
|
|
28
|
+
col: r - 1
|
|
29
|
+
}
|
|
30
|
+
}]);
|
|
31
|
+
}
|
|
32
|
+
}, [
|
|
33
|
+
a,
|
|
34
|
+
i,
|
|
35
|
+
r
|
|
36
|
+
]),
|
|
37
|
+
clearSelection: t(() => {
|
|
38
|
+
a()?.clearSelection();
|
|
39
|
+
}, [a]),
|
|
40
|
+
getSelection: t(() => a()?.getSelection() ?? null, [a]),
|
|
41
|
+
isCellSelected: t((e, t) => a()?.isCellSelected(e, t) ?? !1, [a]),
|
|
42
|
+
setRanges: t((e) => {
|
|
43
|
+
a()?.setRanges(e);
|
|
44
|
+
}, [a]),
|
|
45
|
+
getSelectedRows: t(() => a()?.getSelectedRows() ?? [], [a])
|
|
46
|
+
};
|
|
44
47
|
}
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
};
|
|
48
|
+
//#endregion
|
|
49
|
+
export { r as useGridSelection };
|
package/features/undo-redo.js
CHANGED
|
@@ -1,88 +1,55 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { t as e } from "../chunks/grid-element-context-DpuQsoie.js";
|
|
2
|
+
import { useCallback as t, useContext as n } from "react";
|
|
3
3
|
import "@toolbox-web/grid/features/undo-redo";
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
→ Enable undo/redo on the grid
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
→ Enable undo/redo on the grid:
|
|
55
|
-
<DataGrid editing="dblclick" undoRedo />`
|
|
56
|
-
);
|
|
57
|
-
return;
|
|
58
|
-
}
|
|
59
|
-
o.beginTransaction();
|
|
60
|
-
}, [n]), f = d(() => {
|
|
61
|
-
const o = n();
|
|
62
|
-
if (!o) {
|
|
63
|
-
console.warn(
|
|
64
|
-
`[tbw-grid:undoRedo] UndoRedoPlugin not found.
|
|
65
|
-
|
|
66
|
-
→ Enable undo/redo on the grid:
|
|
67
|
-
<DataGrid editing="dblclick" undoRedo />`
|
|
68
|
-
);
|
|
69
|
-
return;
|
|
70
|
-
}
|
|
71
|
-
o.endTransaction();
|
|
72
|
-
}, [n]);
|
|
73
|
-
return {
|
|
74
|
-
undo: i,
|
|
75
|
-
redo: u,
|
|
76
|
-
canUndo: c,
|
|
77
|
-
canRedo: a,
|
|
78
|
-
clearHistory: l,
|
|
79
|
-
getUndoStack: g,
|
|
80
|
-
getRedoStack: s,
|
|
81
|
-
recordEdit: R,
|
|
82
|
-
beginTransaction: b,
|
|
83
|
-
endTransaction: f
|
|
84
|
-
};
|
|
4
|
+
//#region libs/grid-react/src/features/undo-redo.ts
|
|
5
|
+
function r(r) {
|
|
6
|
+
let i = n(e), a = t(() => (r ? document.querySelector(r) : i?.current)?.getPluginByName("undoRedo"), [i, r]);
|
|
7
|
+
return {
|
|
8
|
+
undo: t(() => {
|
|
9
|
+
let e = a();
|
|
10
|
+
return e ? e.undo() : (console.warn("[tbw-grid:undoRedo] UndoRedoPlugin not found.\n\n → Enable undo/redo on the grid:\n <DataGrid editing=\"dblclick\" undoRedo />"), null);
|
|
11
|
+
}, [a]),
|
|
12
|
+
redo: t(() => {
|
|
13
|
+
let e = a();
|
|
14
|
+
return e ? e.redo() : (console.warn("[tbw-grid:undoRedo] UndoRedoPlugin not found.\n\n → Enable undo/redo on the grid:\n <DataGrid editing=\"dblclick\" undoRedo />"), null);
|
|
15
|
+
}, [a]),
|
|
16
|
+
canUndo: t(() => a()?.canUndo() ?? !1, [a]),
|
|
17
|
+
canRedo: t(() => a()?.canRedo() ?? !1, [a]),
|
|
18
|
+
clearHistory: t(() => {
|
|
19
|
+
let e = a();
|
|
20
|
+
if (!e) {
|
|
21
|
+
console.warn("[tbw-grid:undoRedo] UndoRedoPlugin not found.\n\n → Enable undo/redo on the grid:\n <DataGrid editing=\"dblclick\" undoRedo />");
|
|
22
|
+
return;
|
|
23
|
+
}
|
|
24
|
+
e.clearHistory();
|
|
25
|
+
}, [a]),
|
|
26
|
+
getUndoStack: t(() => a()?.getUndoStack() ?? [], [a]),
|
|
27
|
+
getRedoStack: t(() => a()?.getRedoStack() ?? [], [a]),
|
|
28
|
+
recordEdit: t((e, t, n, r) => {
|
|
29
|
+
let i = a();
|
|
30
|
+
if (!i) {
|
|
31
|
+
console.warn("[tbw-grid:undoRedo] UndoRedoPlugin not found.\n\n → Enable undo/redo on the grid:\n <DataGrid editing=\"dblclick\" undoRedo />");
|
|
32
|
+
return;
|
|
33
|
+
}
|
|
34
|
+
i.recordEdit(e, t, n, r);
|
|
35
|
+
}, [a]),
|
|
36
|
+
beginTransaction: t(() => {
|
|
37
|
+
let e = a();
|
|
38
|
+
if (!e) {
|
|
39
|
+
console.warn("[tbw-grid:undoRedo] UndoRedoPlugin not found.\n\n → Enable undo/redo on the grid:\n <DataGrid editing=\"dblclick\" undoRedo />");
|
|
40
|
+
return;
|
|
41
|
+
}
|
|
42
|
+
e.beginTransaction();
|
|
43
|
+
}, [a]),
|
|
44
|
+
endTransaction: t(() => {
|
|
45
|
+
let e = a();
|
|
46
|
+
if (!e) {
|
|
47
|
+
console.warn("[tbw-grid:undoRedo] UndoRedoPlugin not found.\n\n → Enable undo/redo on the grid:\n <DataGrid editing=\"dblclick\" undoRedo />");
|
|
48
|
+
return;
|
|
49
|
+
}
|
|
50
|
+
e.endTransaction();
|
|
51
|
+
}, [a])
|
|
52
|
+
};
|
|
85
53
|
}
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
};
|
|
54
|
+
//#endregion
|
|
55
|
+
export { r as useGridUndoRedo };
|