@envisiongroup/porygon 1.0.0-rc.34 → 1.0.0-rc.35
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/react-components/tables/EFWTable/components/EFWTableBody/EFWTableBody.js +51 -49
- package/dist/react-components/tables/EFWTable/components/EFWTableRow/EFWTableRow.js +33 -32
- package/dist/react-components/tables/EFWTable/components/EFWTableRow/EFWTableRow.types.d.ts +1 -0
- package/package.json +1 -1
|
@@ -1,51 +1,51 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { useEffect as
|
|
1
|
+
import { jsx as d, jsxs as V } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect as v } from "react";
|
|
3
3
|
import { useVirtualizer as F } from "@tanstack/react-virtual";
|
|
4
|
-
import { EFWTableRow as
|
|
4
|
+
import { EFWTableRow as x } from "../EFWTableRow/EFWTableRow.js";
|
|
5
5
|
import { tokens as m } from "@fluentui/react-components";
|
|
6
|
-
const
|
|
6
|
+
const S = (e) => e ? {
|
|
7
7
|
fontSize: m.fontSizeBase200,
|
|
8
8
|
lineHeight: m.lineHeightBase200
|
|
9
9
|
} : {
|
|
10
10
|
fontSize: m.fontSizeBase300,
|
|
11
11
|
lineHeight: m.lineHeightBase300
|
|
12
|
-
},
|
|
13
|
-
|
|
12
|
+
}, B = (e) => {
|
|
13
|
+
v(() => {
|
|
14
14
|
const t = e.current;
|
|
15
15
|
if (!t) return;
|
|
16
|
-
let i = 0, o = !1,
|
|
17
|
-
const
|
|
16
|
+
let i = 0, o = !1, s = !1;
|
|
17
|
+
const a = () => {
|
|
18
18
|
cancelAnimationFrame(i), i = requestAnimationFrame(() => {
|
|
19
|
-
const
|
|
20
|
-
|
|
19
|
+
const c = t.scrollLeft > 0, u = t.scrollTop > 0;
|
|
20
|
+
c !== o && (t.classList.toggle("is-scrolling-x", c), o = c), u !== s && (t.classList.toggle("is-scrolling-y", u), s = u);
|
|
21
21
|
});
|
|
22
22
|
};
|
|
23
|
-
return t.addEventListener("scroll",
|
|
24
|
-
t.removeEventListener("scroll",
|
|
23
|
+
return t.addEventListener("scroll", a, { passive: !0 }), a(), () => {
|
|
24
|
+
t.removeEventListener("scroll", a), cancelAnimationFrame(i);
|
|
25
25
|
};
|
|
26
26
|
}, [e]);
|
|
27
|
-
},
|
|
27
|
+
}, I = ({
|
|
28
28
|
tableContainerRef: e,
|
|
29
29
|
enableSelection: t = !0,
|
|
30
30
|
itemSize: i,
|
|
31
31
|
dense: o = !0,
|
|
32
|
-
table:
|
|
33
|
-
gridTemplateColumns:
|
|
34
|
-
columnSizing:
|
|
35
|
-
stickyColumnsInfo:
|
|
32
|
+
table: s,
|
|
33
|
+
gridTemplateColumns: a,
|
|
34
|
+
columnSizing: c,
|
|
35
|
+
stickyColumnsInfo: u,
|
|
36
36
|
onRowClick: h,
|
|
37
|
-
onRowDoubleClick:
|
|
37
|
+
onRowDoubleClick: p
|
|
38
38
|
}) => {
|
|
39
|
-
const
|
|
40
|
-
|
|
39
|
+
const g = s.getRowModel().rows.length, f = g > 0;
|
|
40
|
+
B(f ? e : { current: null });
|
|
41
41
|
const n = F({
|
|
42
|
-
count:
|
|
42
|
+
count: g,
|
|
43
43
|
getScrollElement: () => e.current,
|
|
44
44
|
estimateSize: () => i ?? o ? 32 : 44,
|
|
45
45
|
measureElement: typeof window < "u" && navigator.userAgent.indexOf("Firefox") === -1 ? (r) => r?.getBoundingClientRect().height : void 0,
|
|
46
46
|
overscan: 10
|
|
47
47
|
});
|
|
48
|
-
|
|
48
|
+
v(() => {
|
|
49
49
|
requestAnimationFrame(() => {
|
|
50
50
|
try {
|
|
51
51
|
n.measure();
|
|
@@ -53,62 +53,64 @@ const R = (e) => e ? {
|
|
|
53
53
|
console.warn("Error al recalcular virtualizer:", r);
|
|
54
54
|
}
|
|
55
55
|
});
|
|
56
|
-
}, [
|
|
57
|
-
const
|
|
56
|
+
}, [g > 0, n]);
|
|
57
|
+
const l = n.getVirtualItems(), R = n.getTotalSize(), y = l.length > 0 ? l[0].start : 0, w = l.length > 0 ? R - l[l.length - 1].end : 0, T = l.map((r) => ({
|
|
58
58
|
virtualRow: r,
|
|
59
|
-
row:
|
|
60
|
-
})),
|
|
61
|
-
return /* @__PURE__ */ V("div", { className: "table-body", style:
|
|
62
|
-
y > 0 && /* @__PURE__ */
|
|
63
|
-
T.map(({ row: r, virtualRow:
|
|
64
|
-
|
|
59
|
+
row: s.getRowModel().rows[r.index]
|
|
60
|
+
})), E = S(o);
|
|
61
|
+
return /* @__PURE__ */ V("div", { className: "table-body", style: E, children: [
|
|
62
|
+
y > 0 && /* @__PURE__ */ d("div", { style: { height: y } }),
|
|
63
|
+
T.map(({ row: r, virtualRow: z }) => /* @__PURE__ */ d(
|
|
64
|
+
x,
|
|
65
65
|
{
|
|
66
66
|
row: r,
|
|
67
|
-
|
|
67
|
+
stripeIndex: z.index,
|
|
68
|
+
virtualRow: z,
|
|
68
69
|
dense: o,
|
|
69
70
|
rowVirtualizer: n,
|
|
70
71
|
useVirtualization: !0,
|
|
71
72
|
enableSelection: t,
|
|
72
|
-
gridTemplateColumns:
|
|
73
|
-
columnSizing:
|
|
74
|
-
stickyColumnsInfo:
|
|
73
|
+
gridTemplateColumns: a,
|
|
74
|
+
columnSizing: c,
|
|
75
|
+
stickyColumnsInfo: u,
|
|
75
76
|
onRowClick: h,
|
|
76
|
-
onRowDoubleClick:
|
|
77
|
+
onRowDoubleClick: p
|
|
77
78
|
},
|
|
78
79
|
r.original._rowId || r.id
|
|
79
80
|
)),
|
|
80
|
-
|
|
81
|
+
w > 0 && /* @__PURE__ */ d("div", { style: { height: w } })
|
|
81
82
|
] });
|
|
82
|
-
},
|
|
83
|
+
}, A = ({
|
|
83
84
|
tableContainerRef: e,
|
|
84
85
|
enableSelection: t = !0,
|
|
85
86
|
dense: i = !0,
|
|
86
87
|
table: o,
|
|
87
|
-
gridTemplateColumns:
|
|
88
|
-
columnSizing:
|
|
89
|
-
stickyColumnsInfo:
|
|
90
|
-
onRowClick:
|
|
88
|
+
gridTemplateColumns: s,
|
|
89
|
+
columnSizing: a,
|
|
90
|
+
stickyColumnsInfo: c,
|
|
91
|
+
onRowClick: u,
|
|
91
92
|
onRowDoubleClick: h
|
|
92
93
|
}) => {
|
|
93
|
-
const
|
|
94
|
-
return
|
|
95
|
-
|
|
94
|
+
const g = o.getRowModel().rows.length > 0, f = S(i);
|
|
95
|
+
return B(g ? e : { current: null }), /* @__PURE__ */ d("div", { className: "table-body", style: f, children: o.getRowModel().rows.map((n, l) => /* @__PURE__ */ d(
|
|
96
|
+
x,
|
|
96
97
|
{
|
|
97
98
|
row: n,
|
|
99
|
+
stripeIndex: l,
|
|
98
100
|
virtualRow: null,
|
|
99
101
|
dense: i,
|
|
100
102
|
rowVirtualizer: null,
|
|
101
103
|
useVirtualization: !1,
|
|
102
104
|
enableSelection: t,
|
|
103
|
-
gridTemplateColumns:
|
|
104
|
-
columnSizing:
|
|
105
|
-
stickyColumnsInfo:
|
|
106
|
-
onRowClick:
|
|
105
|
+
gridTemplateColumns: s,
|
|
106
|
+
columnSizing: a,
|
|
107
|
+
stickyColumnsInfo: c,
|
|
108
|
+
onRowClick: u,
|
|
107
109
|
onRowDoubleClick: h
|
|
108
110
|
},
|
|
109
111
|
n.original._rowId || n.id
|
|
110
112
|
)) });
|
|
111
|
-
}, q = (e) => e.useVirtualization ? /* @__PURE__ */
|
|
113
|
+
}, q = (e) => e.useVirtualization ? /* @__PURE__ */ d(I, { ...e }) : /* @__PURE__ */ d(A, { ...e });
|
|
112
114
|
export {
|
|
113
115
|
q as EFWTableBody
|
|
114
116
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { makeStyles as
|
|
3
|
-
import { EFWTableCell as
|
|
4
|
-
const
|
|
1
|
+
import { jsx as c } from "react/jsx-runtime";
|
|
2
|
+
import { makeStyles as C, tokens as r, mergeClasses as f } from "@fluentui/react-components";
|
|
3
|
+
import { EFWTableCell as S } from "../EFWTableCell/EFWTableCell.js";
|
|
4
|
+
const N = C({
|
|
5
5
|
tableRow: {
|
|
6
6
|
display: "grid",
|
|
7
7
|
backgroundColor: r.colorNeutralBackground1,
|
|
@@ -16,55 +16,56 @@ const f = x({
|
|
|
16
16
|
}
|
|
17
17
|
}
|
|
18
18
|
}
|
|
19
|
-
}),
|
|
19
|
+
}), B = ({
|
|
20
20
|
row: o,
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
21
|
+
stripeIndex: d,
|
|
22
|
+
dense: s = !0,
|
|
23
|
+
virtualRow: t,
|
|
24
|
+
rowVirtualizer: n,
|
|
25
|
+
useVirtualization: l,
|
|
26
|
+
enableSelection: i,
|
|
27
|
+
gridTemplateColumns: u,
|
|
28
|
+
columnSizing: k,
|
|
29
|
+
stickyColumnsInfo: b,
|
|
30
|
+
onRowClick: g,
|
|
30
31
|
onRowDoubleClick: a
|
|
31
32
|
}) => {
|
|
32
|
-
const
|
|
33
|
-
return /* @__PURE__ */
|
|
33
|
+
const m = N(), p = o.getIsSelected(), y = d & 1 ? "odd" : "even", x = f(m.tableRow, "table-row", p && "selected");
|
|
34
|
+
return /* @__PURE__ */ c(
|
|
34
35
|
"div",
|
|
35
36
|
{
|
|
36
37
|
"data-row-index": o.index,
|
|
37
|
-
"data-row-parity":
|
|
38
|
-
...
|
|
39
|
-
"data-index":
|
|
40
|
-
ref: (e) =>
|
|
38
|
+
"data-row-parity": y,
|
|
39
|
+
...l && t ? {
|
|
40
|
+
"data-index": t.index,
|
|
41
|
+
ref: (e) => n?.measureElement(e)
|
|
41
42
|
} : {},
|
|
42
|
-
className:
|
|
43
|
+
className: x,
|
|
43
44
|
role: "row",
|
|
44
45
|
tabIndex: 0,
|
|
45
46
|
onKeyDown: (e) => {
|
|
46
47
|
(e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.currentTarget.click());
|
|
47
48
|
},
|
|
48
|
-
onClick: (e) =>
|
|
49
|
+
onClick: (e) => g(o, e),
|
|
49
50
|
onDoubleClick: a ? (e) => a(o, e) : void 0,
|
|
50
51
|
style: {
|
|
51
|
-
gridTemplateColumns:
|
|
52
|
-
cursor:
|
|
52
|
+
gridTemplateColumns: u,
|
|
53
|
+
cursor: i ? "pointer" : "default"
|
|
53
54
|
},
|
|
54
|
-
children: o.getVisibleCells().map((e) => /* @__PURE__ */
|
|
55
|
-
|
|
55
|
+
children: o.getVisibleCells().map((e) => /* @__PURE__ */ c(
|
|
56
|
+
S,
|
|
56
57
|
{
|
|
57
58
|
cell: e,
|
|
58
|
-
dense:
|
|
59
|
-
columnSizing:
|
|
60
|
-
stickyColumnsInfo:
|
|
61
|
-
useVirtualization:
|
|
59
|
+
dense: s,
|
|
60
|
+
columnSizing: k,
|
|
61
|
+
stickyColumnsInfo: b,
|
|
62
|
+
useVirtualization: l
|
|
62
63
|
},
|
|
63
64
|
e.id
|
|
64
65
|
))
|
|
65
66
|
}
|
|
66
67
|
);
|
|
67
|
-
},
|
|
68
|
+
}, h = B;
|
|
68
69
|
export {
|
|
69
|
-
|
|
70
|
+
h as EFWTableRow
|
|
70
71
|
};
|