New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@gisce/react-formiga-table

Package Overview
Dependencies
Maintainers
2
Versions
129
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@gisce/react-formiga-table - npm Package Compare versions

Comparing version 1.2.1 to 1.3.0-alpha.1

dist/components/InfiniteTable/HeaderCheckbox.d.ts
dist/components/InfiniteTable/HeaderCheckbox.d.ts.map
dist/components/InfiniteTable/InfiniteTable.d.ts
dist/components/InfiniteTable/InfiniteTable.d.ts.map
dist/components/InfiniteTable/useRowSelection.d.ts
dist/components/InfiniteTable/useRowSelection.d.ts.map
dist/hooks/useDeepArrayMemo.d.ts
dist/hooks/useDeepArrayMemo.d.ts.map
src/components/InfiniteTable/HeaderCheckbox.tsx
src/components/InfiniteTable/InfiniteTable.tsx
src/components/InfiniteTable/useRowSelection.ts
src/hooks/useDeepArrayMemo.ts
src/stories/InfiniteTable.stories.tsx

4

dist/index.d.ts
export { Table } from "./components/Table";
export { InfiniteTable } from "./components/InfiniteTable/InfiniteTable";
export type { InfiniteTableProps, InfiniteTableRef, } from "./components/InfiniteTable/InfiniteTable";
export type { ColumnState } from "ag-grid-community";
export type { BodyScrollEvent } from "ag-grid-community";
export * from "./types";
//# sourceMappingURL=index.d.ts.map

1066

dist/react-formiga-table.es.js

@@ -1,7 +0,12 @@

import { jsx as a, jsxs as w, Fragment as D } from "react/jsx-runtime";
import _, { useState as R, useRef as W, useEffect as M, useCallback as k, forwardRef as X, useImperativeHandle as Y } from "react";
import Z from "use-deep-compare-effect";
import U from "style-object-to-css-string";
import O from "styled-components";
const ee = ({
import { jsx as p, jsxs as M, Fragment as le } from "react/jsx-runtime";
import B, { useState as L, useRef as T, useEffect as D, useCallback as v, forwardRef as ce, useImperativeHandle as de, memo as J, useMemo as ne } from "react";
import me from "use-deep-compare-effect";
import be from "style-object-to-css-string";
import ke from "styled-components";
import { AgGridReact as ve } from "ag-grid-react";
import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-quartz.css";
import { useCustomCompareMemo as Ce } from "use-custom-compare";
import ae from "lodash/debounce";
const xe = ({
dataSource: e,

@@ -11,18 +16,18 @@ onFetchChildrenForRecord: t,

}) => {
const [n, g] = R([]), [s, h] = R([]), i = W(/* @__PURE__ */ new Map()), [o, c] = R(
const [s, c] = L([]), [i, u] = L([]), n = T(/* @__PURE__ */ new Map()), [o, l] = L(
e.map(
(d) => A({
(d) => W({
entry: d,
childField: r,
idLevelMap: i.current
idLevelMap: n.current
})
)
);
M(() => {
c(
D(() => {
l(
e.map(
(d) => A({
(d) => W({
entry: d,
childField: r,
idLevelMap: i.current
idLevelMap: n.current
})

@@ -32,45 +37,45 @@ )

}, [e]);
const u = k(
const a = v(
(d) => {
n.indexOf(d) === -1 ? (n.push(d), g([...n])) : g(n.filter((f) => f !== d));
s.indexOf(d) === -1 ? (s.push(d), c([...s])) : c(s.filter((g) => g !== d));
},
[n]
), p = k(
(d) => n.includes(d),
[n]
), b = k(
[s]
), f = v(
(d) => s.includes(d),
[s]
), y = (d) => i.current.get(d) || 0, x = k(
), b = v(
(d) => i.includes(d),
[i]
), m = (d) => n.current.get(d) || 0, R = v(
(d) => {
const f = o.find((l) => l.id === d);
return f ? f[r] !== void 0 && f[r].length > 0 : !1;
const g = o.find((y) => y.id === d);
return g ? g[r] !== void 0 && g[r].length > 0 : !1;
},
[r, o]
), L = k(
), S = v(
(d) => {
const f = o.find((l) => l.id === d);
return f ? f.isLoading : !1;
const g = o.find((y) => y.id === d);
return g ? g.isLoading : !1;
},
[o]
), E = k(
), k = v(
(d) => {
const f = o.find((m) => m.id === d);
if (!f)
const g = o.find((E) => E.id === d);
if (!g)
return [];
const l = f[r];
return l ? o.filter((m) => l.includes(m.id)) : [];
const y = g[r];
return y ? o.filter((E) => y.includes(E.id)) : [];
},
[r, o]
), v = k(
), h = v(
async (d) => {
const f = o.find((l) => l.id === d.id);
if (!f)
const g = o.find((y) => y.id === d.id);
if (!g)
return !1;
if (!f.isLoading) {
if (!p(d.id) && !b(f.id)) {
c(
F(
if (!g.isLoading) {
if (!f(d.id) && !b(g.id)) {
l(
G(
{
...f,
...g,
isLoading: !0

@@ -82,9 +87,9 @@ },

try {
const l = await (t == null ? void 0 : t(f)) || [];
l.forEach((m) => {
i.current.set(m.id, f.level + 1);
}), c(
F(
const y = await (t == null ? void 0 : t(g)) || [];
y.forEach((E) => {
n.current.set(E.id, g.level + 1);
}), l(
G(
{
...f,
...g,
isLoading: !1

@@ -94,15 +99,15 @@ },

...o,
...l.map((m) => A({
entry: m,
...y.map((E) => W({
entry: E,
childField: r,
idLevelMap: i.current
idLevelMap: n.current
}))
]
)
), s.push(f.id), h([...s]);
} catch (l) {
console.error(l), c(
F(
), i.push(g.id), u([...i]);
} catch (y) {
console.error(y), l(
G(
{
...f,
...g,
isLoading: !1

@@ -115,3 +120,3 @@ },

}
u(d.id);
a(d.id);
}

@@ -121,31 +126,31 @@ },

o,
p,
f,
b,
u,
a,
t,
s,
i,
r
]
), C = k(
(d) => L(d.id) ? "loading" : x(d.id) ? p(d.id) ? "collapse" : "expand" : "none",
[L, x, p]
), I = k(() => {
const f = o.filter((l) => l.level === 0).map((l) => l.id);
return n.forEach((l) => {
const m = o.find((K) => K.id === l);
m && m.child_id && m.child_id.forEach((K) => {
f.includes(K) || f.push(K);
), x = v(
(d) => S(d.id) ? "loading" : R(d.id) ? f(d.id) ? "collapse" : "expand" : "none",
[S, R, f]
), w = v(() => {
const g = o.filter((y) => y.level === 0).map((y) => y.id);
return s.forEach((y) => {
const E = o.find((K) => K.id === y);
E && E.child_id && E.child_id.forEach((K) => {
g.includes(K) || g.push(K);
});
}), f;
}, [n, o]);
}), g;
}, [s, o]);
return {
keyIsOpened: p,
onExpandableIconClicked: v,
getExpandableStatusForRow: C,
getChildsForParent: E,
getAllVisibleKeys: I,
getLevelForKey: y
keyIsOpened: f,
onExpandableIconClicked: h,
getExpandableStatusForRow: x,
getChildsForParent: k,
getAllVisibleKeys: w,
getLevelForKey: m
};
};
function A({
function W({
entry: e,

@@ -163,39 +168,39 @@ childField: t,

}
const F = (e, t) => t.map((r) => r.id === e.id ? e : r), te = ({
const G = (e, t) => t.map((r) => r.id === e.id ? e : r), Re = ({
selectionRowKeysProps: e = []
}) => {
const [t, r] = R(
const [t, r] = L(
e
);
Z(() => {
me(() => {
r(e);
}, [e]);
const n = k(
(i) => {
if (t.length === i.length || t.length > 0) {
const s = v(
(n) => {
if (t.length === n.length || t.length > 0) {
r([]);
return;
}
r(i);
r(n);
},
[t, r]
), g = k(
(i, o) => {
o.length !== 0 && r(i ? [.../* @__PURE__ */ new Set([...t, ...o])] : t.filter((c) => !o.includes(c)));
), c = v(
(n, o) => {
o.length !== 0 && r(n ? [.../* @__PURE__ */ new Set([...t, ...o])] : t.filter((l) => !o.includes(l)));
},
[t, r]
), s = k(
(i) => {
), i = v(
(n) => {
if (t.find(
(c) => i.id === c
(l) => n.id === l
) === void 0) {
r([...t, i.id]);
r([...t, n.id]);
return;
}
r([...t.filter((c) => c !== i.id)]);
r([...t.filter((l) => l !== n.id)]);
},
[t, r]
), h = k(
(i) => t.find(
(c) => i.id === c
), u = v(
(n) => t.find(
(l) => n.id === l
) !== void 0,

@@ -206,28 +211,28 @@ [t]

selectedRowKeys: t,
isRowSelected: h,
toggleAllRowsSelected: n,
toggleRowSelected: s,
changeSelected: g
isRowSelected: u,
toggleAllRowsSelected: s,
toggleRowSelected: i,
changeSelected: c
};
}, re = (e, t) => {
const [r, n] = R(null), [g, s] = R(!1), [h, i] = R(null);
return k(
(c, u) => {
if (u.nativeEvent.shiftKey) {
const p = e.findIndex((E) => E === c), b = e.findIndex((E) => E === r), y = e.findIndex(
(E) => E === h
), x = Math.min(p, b), L = Math.max(p, b);
if (x > -1 && L > -1) {
t(g, e.slice(x, L + 1)), y > L && t(
!g,
e.slice(L + 1, y + 1)
), y < x && t(
!g,
e.slice(y, x)
), i(c);
}, we = (e, t) => {
const [r, s] = L(null), [c, i] = L(!1), [u, n] = L(null);
return v(
(l, a) => {
if (a.nativeEvent.shiftKey) {
const f = e.findIndex((k) => k === l), b = e.findIndex((k) => k === r), m = e.findIndex(
(k) => k === u
), R = Math.min(f, b), S = Math.max(f, b);
if (R > -1 && S > -1) {
t(c, e.slice(R, S + 1)), m > S && t(
!c,
e.slice(S + 1, m + 1)
), m < R && t(
!c,
e.slice(m, R)
), n(l);
return;
}
} else
n(c), i(null), s(u.target.checked);
t(u.target.checked, [c]);
s(l), n(null), i(a.target.checked);
t(a.target.checked, [l]);
},

@@ -238,21 +243,21 @@ [

r,
n,
g,
s,
h,
i
c,
i,
u,
n
]
);
}, ne = (e) => {
const [t, r] = R(e), n = k(
(s) => {
if (t && s === t.id)
}, Ee = (e) => {
const [t, r] = L(e), s = v(
(i) => {
if (t && i === t.id)
return t;
},
[t]
), g = k(
(s) => {
), c = v(
(i) => {
if (!t) {
r({
id: s,
id: i,
desc: !1

@@ -262,5 +267,5 @@ });

}
if (t.id !== s) {
if (t.id !== i) {
r({
id: s,
id: i,
desc: !1

@@ -272,3 +277,3 @@ });

r({
id: s,
id: i,
desc: !0

@@ -284,10 +289,10 @@ });

localSorter: t,
getColumnSorter: n,
handleColumnClick: g
getColumnSorter: s,
handleColumnClick: c
};
}, ie = O.div`
}, Ie = ke.div`
overflow-x: auto;
height: ${({ height: e }) => `${e}px` || "auto"};
border-bottom: 1px solid #f0f0f0;
${(e) => U(e.containerStyle ?? {})}
${(e) => be(e.containerStyle ?? {})}

@@ -377,15 +382,15 @@ table {

}
`, N = ({
`, ue = ({
value: e,
onChange: t
}) => {
const r = _.useRef();
return _.useEffect(() => {
const n = r.current;
e === !0 ? (n.checked = !0, n.indeterminate = !1) : e === !1 ? (n.checked = !1, n.indeterminate = !1) : e === null && (n.checked = !1, n.indeterminate = !0);
}), /* @__PURE__ */ a(
const r = B.useRef();
return B.useEffect(() => {
const s = r.current;
e === !0 ? (s.checked = !0, s.indeterminate = !1) : e === !1 ? (s.checked = !1, s.indeterminate = !1) : e === null && (s.checked = !1, s.indeterminate = !0);
}), /* @__PURE__ */ p(
"input",
{
onDoubleClick: (n) => {
n.stopPropagation();
onDoubleClick: (s) => {
s.stopPropagation();
},

@@ -398,16 +403,16 @@ ref: r,

);
}, se = ({
}, Se = ({
onRowSelectionChange: e,
allRowsAreSelected: t,
columns: r,
toggleAllRowsSelected: n,
selectedRowKeys: g,
handleColumnClick: s,
getColumnSorter: h,
sortEnabled: i,
toggleAllRowsSelected: s,
selectedRowKeys: c,
handleColumnClick: i,
getColumnSorter: u,
sortEnabled: n,
readonly: o,
status: c = !1,
headerStyle: u
}) => /* @__PURE__ */ w(D, { children: [
e && !o && /* @__PURE__ */ a(
status: l = !1,
headerStyle: a
}) => /* @__PURE__ */ M(le, { children: [
e && !o && /* @__PURE__ */ p(
"th",

@@ -420,6 +425,6 @@ {

backgroundColor: "#f2f2f2",
...u,
...a,
cursor: "auto"
},
children: /* @__PURE__ */ a(
children: /* @__PURE__ */ p(
"div",

@@ -433,7 +438,7 @@ {

},
children: /* @__PURE__ */ a(
N,
children: /* @__PURE__ */ p(
ue,
{
value: t ? !0 : g.length === 0 ? !1 : null,
onChange: n
value: t ? !0 : c.length === 0 ? !1 : null,
onChange: s
}

@@ -446,12 +451,12 @@ )

),
c && /* @__PURE__ */ a("th", { style: { ...u } }, "th-status"),
r.map((p) => /* @__PURE__ */ a(
l && /* @__PURE__ */ p("th", { style: { ...a } }, "th-status"),
r.map((f) => /* @__PURE__ */ p(
"th",
{
style: { ...u },
onClick: i ? () => {
s(p.key);
style: { ...a },
onClick: n ? () => {
i(f.key);
} : void 0,
children: /* @__PURE__ */ w("div", { className: "ctx", children: [
/* @__PURE__ */ a(
children: /* @__PURE__ */ M("div", { className: "ctx", children: [
/* @__PURE__ */ p(
"div",

@@ -463,8 +468,8 @@ {

justifyContent: "space-between",
...u == null ? void 0 : u.rftLabel
...a == null ? void 0 : a.rftLabel
},
children: p.title
children: f.title
}
),
/* @__PURE__ */ a("div", { style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ a(
/* @__PURE__ */ p("div", { style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ p(
"span",

@@ -474,30 +479,30 @@ {

style: {
visibility: h(p.key) !== void 0 ? void 0 : "hidden",
visibility: u(f.key) !== void 0 ? void 0 : "hidden",
marginLeft: "auto"
},
children: h(p.key) !== void 0 && h(p.key).desc ? " ▼" : " ▲"
children: u(f.key) !== void 0 && u(f.key).desc ? " ▼" : " ▲"
},
p.key
f.key
) })
] })
},
p.key
f.key
))
] }), S = ({
] }), se = ({
column: e,
row: t,
columnIdx: r,
level: n,
getColumnSorter: g,
expandableOpts: s,
getExpandableStatusForRow: h,
onExpandableIconClicked: i,
level: s,
getColumnSorter: c,
expandableOpts: i,
getExpandableStatusForRow: u,
onExpandableIconClicked: n,
onCellRender: o,
rowIsSelected: c,
cellStyle: u
rowIsSelected: l,
cellStyle: a
}) => {
const p = g(e.key) !== void 0 ? {
backgroundColor: c ? "#E6F7FF" : "#fafafa"
} : c ? {
backgroundColor: c ? "#E6F7FF" : void 0
const f = c(e.key) !== void 0 ? {
backgroundColor: l ? "#E6F7FF" : "#fafafa"
} : l ? {
backgroundColor: l ? "#E6F7FF" : void 0
} : {};

@@ -510,20 +515,20 @@ let b;

value: t[e.key]
}) : e.render ? b = e.render(t[e.key]) : b = t[e.key], /* @__PURE__ */ w("td", { style: p, children: [
/* @__PURE__ */ a(
oe,
}) : e.render ? b = e.render(t[e.key]) : b = t[e.key], /* @__PURE__ */ M("td", { style: f, children: [
/* @__PURE__ */ p(
Ke,
{
row: t,
columnIdx: r,
expandableOpts: s,
getExpandableStatusForRow: h,
onExpandableIconClicked: i,
level: n
expandableOpts: i,
getExpandableStatusForRow: u,
onExpandableIconClicked: n,
level: s
}
),
/* @__PURE__ */ w("div", { style: { display: "inline-block", width: "100%", ...u }, children: [
/* @__PURE__ */ a(
/* @__PURE__ */ M("div", { style: { display: "inline-block", width: "100%", ...a }, children: [
/* @__PURE__ */ p(
"div",
{
className: "rft-label",
style: { display: "none", ...u == null ? void 0 : u.rftLabel },
style: { display: "none", ...a == null ? void 0 : a.rftLabel },
children: e.title

@@ -536,22 +541,22 @@ }

};
function oe({
function Ke({
row: e,
columnIdx: t,
expandableOpts: r,
getExpandableStatusForRow: n,
onExpandableIconClicked: g,
level: s
getExpandableStatusForRow: s,
onExpandableIconClicked: c,
level: i
}) {
if (!r)
return null;
const h = n(e);
if (h === "none" || t !== 0)
return /* @__PURE__ */ a("div", { style: { display: "inline-block", width: 19 + s * 25 } });
let i;
return h === "expand" ? i = r.expandIcon : h === "collapse" ? i = r.collapseIcon : h === "loading" && (i = r.loadingIcon), /* @__PURE__ */ a("div", { style: { display: "inline-block" }, children: /* @__PURE__ */ a(
i,
const u = s(e);
if (u === "none" || t !== 0)
return /* @__PURE__ */ p("div", { style: { display: "inline-block", width: 19 + i * 25 } });
let n;
return u === "expand" ? n = r.expandIcon : u === "collapse" ? n = r.collapseIcon : u === "loading" && (n = r.loadingIcon), /* @__PURE__ */ p("div", { style: { display: "inline-block" }, children: /* @__PURE__ */ p(
n,
{
style: { marginRight: 5, marginLeft: s * 25 },
style: { marginRight: 5, marginLeft: i * 25 },
onClick: () => {
g(e);
c(e);
}

@@ -561,3 +566,3 @@ }

}
class j extends _.Component {
class oe extends B.Component {
constructor(t) {

@@ -573,3 +578,3 @@ super(t), this.state = { hasError: !1, error: null, errorInfo: null };

render() {
return this.state.hasError ? /* @__PURE__ */ w(
return this.state.hasError ? /* @__PURE__ */ M(
"div",

@@ -584,6 +589,6 @@ {

children: [
/* @__PURE__ */ a("strong", { style: { color: "red" }, children: "Something went wrong." }),
/* @__PURE__ */ a("details", { style: { whiteSpace: "pre-wrap" }, children: /* @__PURE__ */ w("pre", { children: [
/* @__PURE__ */ p("strong", { style: { color: "red" }, children: "Something went wrong." }),
/* @__PURE__ */ p("details", { style: { whiteSpace: "pre-wrap" }, children: /* @__PURE__ */ M("pre", { children: [
this.state.error && this.state.error.toString(),
/* @__PURE__ */ a("br", {}),
/* @__PURE__ */ p("br", {}),
this.state.errorInfo && this.state.errorInfo.componentStack

@@ -596,66 +601,66 @@ ] }) })

}
const de = ({
const Le = ({
onRowSelectionChange: e,
dataSource: t,
columns: r,
getColumnSorter: n,
onRowStyle: g,
onRowStatus: s,
onRowDoubleClick: h,
isRowSelected: i,
getColumnSorter: s,
onRowStyle: c,
onRowStatus: i,
onRowDoubleClick: u,
isRowSelected: n,
toggleRowSelected: o,
expandableOpts: c,
onExpandableIconClicked: u,
getExpandableStatusForRow: p,
expandableOpts: l,
onExpandableIconClicked: a,
getExpandableStatusForRow: f,
keyIsOpened: b,
getChildsForParent: y,
getLevelForKey: x,
onCellRender: L,
cellStyle: E,
readonly: v
}) => /* @__PURE__ */ a(D, { children: t.filter((C) => x(C.id) === 0).map((C) => P({
row: C,
getChildsForParent: m,
getLevelForKey: R,
onCellRender: S,
cellStyle: k,
readonly: h
}) => /* @__PURE__ */ p(le, { children: t.filter((x) => R(x.id) === 0).map((x) => fe({
row: x,
columns: r,
onRowStyle: g,
onRowStatus: s,
onRowDoubleClick: h,
onRowStyle: c,
onRowStatus: i,
onRowDoubleClick: u,
onRowSelectionChange: e,
isRowSelected: i,
isRowSelected: n,
toggleRowSelected: o,
expandableOpts: c,
getExpandableStatusForRow: p,
onExpandableIconClicked: u,
getColumnSorter: n,
expandableOpts: l,
getExpandableStatusForRow: f,
onExpandableIconClicked: a,
getColumnSorter: s,
keyIsOpened: b,
getChildsForParent: y,
cellStyle: E,
readonly: v
getChildsForParent: m,
cellStyle: k,
readonly: h
})) });
function P({
function fe({
row: e,
columns: t,
onRowDoubleClick: r,
onRowSelectionChange: n,
isRowSelected: g,
toggleRowSelected: s,
expandableOpts: h,
getExpandableStatusForRow: i,
onRowSelectionChange: s,
isRowSelected: c,
toggleRowSelected: i,
expandableOpts: u,
getExpandableStatusForRow: n,
onExpandableIconClicked: o,
getColumnSorter: c,
keyIsOpened: u,
getChildsForParent: p,
getColumnSorter: l,
keyIsOpened: a,
getChildsForParent: f,
onRowStyle: b,
onRowStatus: y,
level: x = 0,
onCellRender: L,
cellStyle: E,
readonly: v
onRowStatus: m,
level: R = 0,
onCellRender: S,
cellStyle: k,
readonly: h
}) {
var f;
const C = b ? b(e) : "", I = g(e);
var g;
const x = b ? b(e) : "", w = c(e);
let d = [
/* @__PURE__ */ w(
/* @__PURE__ */ M(
"tr",
{
style: C,
style: x,
onDoubleClick: () => {

@@ -665,3 +670,3 @@ r == null || r(e);

children: [
n && !v && /* @__PURE__ */ a(
s && !h && /* @__PURE__ */ p(
"td",

@@ -672,9 +677,9 @@ {

position: "sticky",
backgroundColor: I ? "#E6F7FF" : "#f2f2f2",
backgroundColor: w ? "#E6F7FF" : "#f2f2f2",
cursor: "auto"
},
onDoubleClick: (l) => {
l.stopPropagation(), l.preventDefault();
onDoubleClick: (y) => {
y.stopPropagation(), y.preventDefault();
},
children: /* @__PURE__ */ a(
children: /* @__PURE__ */ p(
"div",

@@ -688,8 +693,8 @@ {

},
children: !v && /* @__PURE__ */ a(
N,
children: !h && /* @__PURE__ */ p(
ue,
{
value: I,
onChange: (l) => {
s(e.id, l);
value: w,
onChange: (y) => {
i(e.id, y);
}

@@ -703,4 +708,4 @@ }

),
y && /* @__PURE__ */ a(j, { children: /* @__PURE__ */ a(
S,
m && /* @__PURE__ */ p(oe, { children: /* @__PURE__ */ p(
se,
{

@@ -712,26 +717,26 @@ row: e,

columnIdx: -1,
onCellRender: () => y(e),
expandableOpts: h,
getExpandableStatusForRow: i,
onCellRender: () => m(e),
expandableOpts: u,
getExpandableStatusForRow: n,
onExpandableIconClicked: o,
level: x,
rowIsSelected: I,
cellStyle: E
level: R,
rowIsSelected: w,
cellStyle: k
}
) }, `status-${e.id}`),
t.map((l, m) => /* @__PURE__ */ a(j, { children: /* @__PURE__ */ a(
S,
t.map((y, E) => /* @__PURE__ */ p(oe, { children: /* @__PURE__ */ p(
se,
{
column: l,
columnIdx: m,
column: y,
columnIdx: E,
row: e,
getColumnSorter: c,
expandableOpts: h,
getExpandableStatusForRow: i,
getColumnSorter: l,
expandableOpts: u,
getExpandableStatusForRow: n,
onExpandableIconClicked: o,
level: x,
rowIsSelected: I,
cellStyle: E
level: R,
rowIsSelected: w,
cellStyle: k
}
) }, `${l.key}-${e.id}`))
) }, `${y.key}-${e.id}`))
]

@@ -742,122 +747,122 @@ },

];
return h !== void 0 && u(e.id) && (d = d.concat(
(f = p(e.id)) == null ? void 0 : f.map((l) => P({
row: l.data,
return u !== void 0 && a(e.id) && (d = d.concat(
(g = f(e.id)) == null ? void 0 : g.map((y) => fe({
row: y.data,
columns: t,
onRowStyle: b,
onRowDoubleClick: r,
onRowSelectionChange: n,
isRowSelected: g,
toggleRowSelected: s,
expandableOpts: h,
getExpandableStatusForRow: i,
onRowSelectionChange: s,
isRowSelected: c,
toggleRowSelected: i,
expandableOpts: u,
getExpandableStatusForRow: n,
onExpandableIconClicked: o,
getColumnSorter: c,
keyIsOpened: u,
getChildsForParent: p,
level: l.level,
onCellRender: L,
onRowStatus: y
getColumnSorter: l,
keyIsOpened: a,
getChildsForParent: f,
level: y.level,
onCellRender: S,
onRowStatus: m
}))
)), d;
}
const le = X((e, t) => {
const De = ce((e, t) => {
const {
height: r,
loading: n,
loadingComponent: g,
dataSource: s,
columns: h,
onRowDoubleClick: i,
loading: s,
loadingComponent: c,
dataSource: i,
columns: u,
onRowDoubleClick: n,
onRowStyle: o,
onRowStatus: c,
onRowSelectionChange: u,
onChangeSort: p,
onRowStatus: l,
onRowSelectionChange: a,
onChangeSort: f,
sorter: b,
expandableOpts: y,
onCellRender: x,
readonly: L,
selectionRowKeys: E,
customStyle: v
expandableOpts: m,
onCellRender: R,
readonly: S,
selectionRowKeys: k,
customStyle: h
} = e, {
selectedRowKeys: C,
toggleAllRowsSelected: I,
selectedRowKeys: x,
toggleAllRowsSelected: w,
isRowSelected: d,
changeSelected: f
} = te({
selectionRowKeysProps: E
changeSelected: g
} = Re({
selectionRowKeysProps: k
});
Y(t, () => ({
de(t, () => ({
unselectAll: () => {
I([]);
w([]);
}
}));
const l = re(
s.map((Q) => Q.id),
f
), { localSorter: m, getColumnSorter: K, handleColumnClick: H } = ne(b), {
keyIsOpened: T,
onExpandableIconClicked: z,
getExpandableStatusForRow: B,
getChildsForParent: V,
const y = we(
i.map((U) => U.id),
g
), { localSorter: E, getColumnSorter: K, handleColumnClick: F } = Ee(b), {
keyIsOpened: A,
onExpandableIconClicked: H,
getExpandableStatusForRow: P,
getChildsForParent: j,
getAllVisibleKeys: $,
getLevelForKey: q
} = ee({
dataSource: s,
onFetchChildrenForRecord: y == null ? void 0 : y.onFetchChildrenForRecord,
childField: y == null ? void 0 : y.childField
getLevelForKey: z
} = xe({
dataSource: i,
onFetchChildrenForRecord: m == null ? void 0 : m.onFetchChildrenForRecord,
childField: m == null ? void 0 : m.childField
});
M(() => {
u == null || u(C);
}, [C]), M(() => {
p == null || p(m);
}, [m]);
const G = k(() => C.length === 0 ? !1 : y ? $().length === C.length : s.length === C.length, [s.length, y, C.length]), J = k(() => {
I($());
}, [I, $]);
return n ? g : /* @__PURE__ */ a(
ie,
D(() => {
a == null || a(x);
}, [x]), D(() => {
f == null || f(E);
}, [E]);
const O = v(() => x.length === 0 ? !1 : m ? $().length === x.length : i.length === x.length, [i.length, m, x.length]), q = v(() => {
w($());
}, [w, $]);
return s ? c : /* @__PURE__ */ p(
Ie,
{
height: r,
canClick: i !== void 0,
readonly: L,
containerStyle: v == null ? void 0 : v.containerStyle,
children: /* @__PURE__ */ w("table", { style: v == null ? void 0 : v.tableStyle, children: [
/* @__PURE__ */ a("thead", { children: /* @__PURE__ */ a("tr", { children: /* @__PURE__ */ a(
se,
canClick: n !== void 0,
readonly: S,
containerStyle: h == null ? void 0 : h.containerStyle,
children: /* @__PURE__ */ M("table", { style: h == null ? void 0 : h.tableStyle, children: [
/* @__PURE__ */ p("thead", { children: /* @__PURE__ */ p("tr", { children: /* @__PURE__ */ p(
Se,
{
allRowsAreSelected: G(),
columns: h,
onRowSelectionChange: u,
selectedRowKeys: C,
toggleAllRowsSelected: J,
handleColumnClick: H,
allRowsAreSelected: O(),
columns: u,
onRowSelectionChange: a,
selectedRowKeys: x,
toggleAllRowsSelected: q,
handleColumnClick: F,
getColumnSorter: K,
sortEnabled: y === void 0,
readonly: L,
status: !!c,
headerStyle: v == null ? void 0 : v.headerStyle
sortEnabled: m === void 0,
readonly: S,
status: !!l,
headerStyle: h == null ? void 0 : h.headerStyle
}
) }) }),
/* @__PURE__ */ a("tbody", { children: /* @__PURE__ */ a(
de,
/* @__PURE__ */ p("tbody", { children: /* @__PURE__ */ p(
Le,
{
dataSource: s,
columns: h,
onRowSelectionChange: u,
dataSource: i,
columns: u,
onRowSelectionChange: a,
getColumnSorter: K,
onRowDoubleClick: i,
onRowDoubleClick: n,
onRowStyle: o,
onRowStatus: c,
onRowStatus: l,
isRowSelected: d,
toggleRowSelected: l,
expandableOpts: y,
onExpandableIconClicked: z,
getExpandableStatusForRow: B,
keyIsOpened: T,
getChildsForParent: V,
getLevelForKey: q,
onCellRender: x,
cellStyle: v == null ? void 0 : v.cellStyle,
readonly: L
toggleRowSelected: y,
expandableOpts: m,
onExpandableIconClicked: H,
getExpandableStatusForRow: P,
keyIsOpened: A,
getChildsForParent: j,
getLevelForKey: z,
onCellRender: R,
cellStyle: h == null ? void 0 : h.cellStyle,
readonly: S
}

@@ -869,6 +874,313 @@ ) })

});
le.displayName = "Table";
De.displayName = "Table";
const Te = (e, t) => Ce(
() => e,
[e],
(r, s) => {
const c = r[0], i = s[0], u = c.map((o) => o[t]).sort((o, l) => o.localeCompare(l)).join(","), n = i.map((o) => o[t]).sort((o, l) => o.localeCompare(l)).join(",");
return u === n;
}
), pe = J(
({
value: e,
onChange: t
}) => {
const r = B.useRef();
return D(() => {
const s = r.current;
e === !0 ? (s.checked = !0, s.indeterminate = !1) : e === !1 ? (s.checked = !1, s.indeterminate = !1) : e === null && (s.checked = !1, s.indeterminate = !0);
}), /* @__PURE__ */ p(
"input",
{
style: {
width: "16px",
height: "16px",
border: "1px solid grey",
cursor: "pointer"
},
onDoubleClick: (s) => {
s.stopPropagation();
},
ref: r,
type: "checkbox",
onChange: t,
tabIndex: -1
}
);
}
);
pe.displayName = "HeaderCheckboxComp";
const he = J(
({
selectedRowKeysLength: e,
totalRows: t,
allRowSelected: r,
onHeaderCheckboxChange: s,
allRowSelectedMode: c
}) => {
const i = e === 0, u = e > 0 && t !== e;
let n = !1;
return console.log(
"HeaderCheckbox rendered: ",
e,
t,
r,
c
), c || t === e && t > 0 || r ? n = !0 : i ? n = !1 : u && (n = null), /* @__PURE__ */ p(pe, { value: n, onChange: s });
}
);
he.displayName = "HeaderCheckbox";
const Me = 50, Ne = ({
gridRef: e,
onRowSelectionChange: t,
onAllRowSelectedModeChange: r,
totalRows: s,
allRowSelectedModeProps: c = !1
}) => {
const [i, u] = L(
[]
), [n, o] = L(
c
), l = T(!1), a = T([]), f = T(!1), b = T(null);
D(() => {
l.current = n;
}, [n]), D(() => {
o(c), c && (u([]), f.current = !0);
}, [c]), D(() => {
r == null || r(n);
}, [n]);
const m = v(() => {
var x;
let h = !1;
n ? h = !1 : !n && i.length === 0 ? h = !0 : !n && i.length === s ? h = !1 : (n || i.length > 0) && (h = !0), f.current = !0, (x = e == null ? void 0 : e.current) == null || x.api.forEachNode((w) => {
w.setSelected(h);
}), o(h), b.current && clearTimeout(b.current), b.current = setTimeout(() => {
f.current = !1;
}, 1e3);
}, [n, i.length, s, e]);
D(() => () => {
b.current && clearTimeout(b.current);
}, [m]);
const R = v(
(h) => {
if (f.current) {
t == null || t([]), u([]);
return;
}
o(!1);
let w = h.api.getSelectedNodes().map(
(d) => d.data.id
);
w = w.concat(
a.current
), t == null || t(w), u(w);
},
[t]
), S = v(
ae((h) => {
R == null || R(h);
}, Me),
[R]
), k = v((h) => {
a.current = h;
}, []);
return {
internalSelectedRowKeys: i,
onHeaderCheckboxChange: m,
allRowSelectedMode: n,
onSelectionChangedDebounced: S,
selectedRowKeysPendingToRender: a.current,
setSelectedRowKeysPendingToRender: k
};
}, ie = 50, ye = ce(
(e, t) => {
const {
onRequestData: r,
columns: s,
onRowDoubleClick: c,
onRowSelectionChange: i,
height: u,
onRowStyle: n,
onColumnChanged: o,
onGetColumnsState: l,
onChangeFirstVisibleRowIndex: a,
onGetFirstVisibleRowIndex: f,
onGetSelectedRowKeys: b,
totalRows: m,
onAllRowSelectedModeChange: R,
allRowSelectedMode: S
} = e, k = T(null), h = T(!0), x = T(!1), w = v(
ae((C) => {
o == null || o(C);
}, ie),
[o]
), d = v(
(C) => {
const I = C.api.getColumnState();
w(I);
},
[w]
);
de(t, () => ({
unselectAll: () => {
var C, I;
A([]), (I = (C = k.current) == null ? void 0 : C.api) == null || I.deselectAll();
},
refresh: () => {
var C, I;
(I = (C = k.current) == null ? void 0 : C.api) == null || I.purgeInfiniteCache();
}
}));
const {
onHeaderCheckboxChange: g,
onSelectionChangedDebounced: y,
selectedRowKeysPendingToRender: E,
allRowSelectedMode: K,
internalSelectedRowKeys: F,
setSelectedRowKeysPendingToRender: A
} = Ne({
gridRef: k,
onRowSelectionChange: i,
onAllRowSelectedModeChange: R,
totalRows: m,
allRowSelectedModeProps: S
});
D(() => {
x.current = K;
}, [K]);
const H = Te(s, "key"), P = ne(() => ({}), []), j = ne(() => [
{
checkboxSelection: !0,
suppressMovable: !0,
sortable: !1,
lockPosition: !0,
pinned: "left",
maxWidth: 50,
resizable: !1,
headerComponent: () => /* @__PURE__ */ p(
he,
{
totalRows: m,
selectedRowKeysLength: F.length,
allRowSelected: m === F.length,
allRowSelectedMode: K,
onHeaderCheckboxChange: g
}
)
},
...H.map((C) => ({
field: C.key,
headerName: C.title,
cellRenderer: C.render ? (I) => C.render(I.value) : void 0
}))
], [
K,
H,
F.length,
g,
m
]), $ = v(
async (C) => {
var Y, Z, ee, te;
(Y = k.current) == null || Y.api.showLoadingOverlay();
const { startRow: I, endRow: Q } = C, V = await r(I, Q);
let X = -1;
if (V.length < Q - I && (X = I + V.length), C.successCallback(V, X), x.current)
(Z = k == null ? void 0 : k.current) == null || Z.api.forEachNode((_) => {
_.setSelected(!0);
});
else {
const _ = b == null ? void 0 : b();
A(_ || []), _ && _.length > 0 && ((ee = k == null ? void 0 : k.current) == null || ee.api.forEachNode((N) => {
var re;
(re = N == null ? void 0 : N.data) != null && re.id && _.includes(N.data.id) && (N.setSelected(!0), A(
E.filter(
(ge) => N.data.id && ge !== N.data.id
)
));
}));
}
(te = k.current) == null || te.api.hideOverlay();
},
[
b,
r,
E,
A
]
), z = v(
(C) => {
const I = l == null ? void 0 : l();
I && C.api.applyColumnState({
state: I,
applyOrder: !0
}), C.api.setGridOption("datasource", {
getRows: $
});
},
[$, l]
), O = v(
({ data: C }) => {
c == null || c(C);
},
[c]
), q = v(
(C) => {
const I = f == null ? void 0 : f();
I && C.api.ensureIndexVisible(I, "top");
},
[f]
), U = v(
(C) => {
h.current || a == null || a(
C.api.getFirstDisplayedRowIndex()
), h.current = !1;
},
[a]
);
return /* @__PURE__ */ p(
"div",
{
className: "ag-grid-default-table ag-theme-quartz",
style: { height: u || 600 },
children: /* @__PURE__ */ p(
ve,
{
ref: k,
columnDefs: j,
defaultColDef: P,
onRowDoubleClicked: O,
rowStyle: {
cursor: c ? "pointer" : "auto"
},
getRowStyle: n,
suppressCellFocus: !0,
suppressRowClickSelection: !0,
rowBuffer: 0,
rowSelection: "multiple",
onColumnMoved: d,
onColumnResized: d,
rowModelType: "infinite",
cacheBlockSize: 20,
onSelectionChanged: y,
cacheOverflowSize: 2,
maxConcurrentDatasourceRequests: 1,
infiniteInitialRowCount: 50,
maxBlocksInCache: 10,
onGridReady: z,
onFirstDataRendered: q,
onBodyScroll: U,
blockLoadDebounceMillis: ie
}
)
}
);
}
);
ye.displayName = "InfiniteTable";
const qe = J(ye);
export {
le as Table
qe as InfiniteTable,
De as Table
};
//# sourceMappingURL=react-formiga-table.es.js.map

2

dist/types/index.d.ts

@@ -42,3 +42,3 @@ import { CSSProperties } from "react";

onRowDoubleClick?: (item: any) => void;
onRowSelectionChange?: (selectedRowItems: any[]) => void;
onRowSelectionChange?: (selectedRowKeys: any[]) => void;
sortEnabled?: boolean;

@@ -45,0 +45,0 @@ onChangeSort?: (sorter: Sorter | undefined) => void;

7

package.json
{
"name": "@gisce/react-formiga-table",
"version": "1.2.1",
"version": "1.3.0-alpha.1",
"engines": {

@@ -35,2 +35,5 @@ "node": "20.5.0"

"dependencies": {
"ag-grid-community": "^31.2.1",
"ag-grid-react": "^31.2.1",
"lodash.debounce": "^4.0.8",
"react": "18.2.0",

@@ -40,2 +43,4 @@ "react-dom": "18.2.0",

"styled-components": "5.3.5",
"use-custom-compare": "^1.4.0",
"use-deep-compare": "^1.2.1",
"use-deep-compare-effect": "^1.8.1"

@@ -42,0 +47,0 @@ },

9

src/index.ts
export { Table } from "./components/Table";
export { InfiniteTable } from "./components/InfiniteTable/InfiniteTable";
export type {
InfiniteTableProps,
InfiniteTableRef,
} from "./components/InfiniteTable/InfiniteTable";
export type { ColumnState } from "ag-grid-community";
export type { BodyScrollEvent } from "ag-grid-community";
export * from "./types";

2

src/types/index.ts

@@ -50,3 +50,3 @@ import { CSSProperties } from "react";

onRowDoubleClick?: (item: any) => void;
onRowSelectionChange?: (selectedRowItems: any[]) => void;
onRowSelectionChange?: (selectedRowKeys: any[]) => void;
sortEnabled?: boolean;

@@ -53,0 +53,0 @@ onChangeSort?: (sorter: Sorter | undefined) => void;

dist/index.d.ts.map

Sorry, the diff of this file is not supported yet

dist/react-formiga-table.es.js.map

Sorry, the diff of this file is not supported yet

dist/types/index.d.ts.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc