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
0
Versions
125
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.6.0-alpha.8 to 1.6.0-alpha.9

1

dist/components/InfiniteTable/useColumnState.d.ts

@@ -14,3 +14,4 @@ import { ColumnState } from "ag-grid-community";

columnsPersistedStateRef: import("react").MutableRefObject<any>;
applyAndUpdateNewState: (state: ColumnState[]) => void;
};
//# sourceMappingURL=useColumnState.d.ts.map

989

dist/react-formiga-table.es.js

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

import { jsx as g, jsxs as P, Fragment as me } from "react/jsx-runtime";
import q, { useState as N, useRef as K, useEffect as _, useCallback as C, forwardRef as ye, useImperativeHandle as ge, memo as Z, useMemo as de } from "react";
import _e from "use-deep-compare-effect";
import Oe from "style-object-to-css-string";
import He from "styled-components";
import { AgGridReact as $e } from "ag-grid-react";
import { jsx as y, jsxs as P, Fragment as Ce } from "react/jsx-runtime";
import Q, { useState as D, useRef as N, useEffect as _, useCallback as g, forwardRef as ge, useImperativeHandle as be, memo as ne, useMemo as pe } from "react";
import Me from "use-deep-compare-effect";
import Pe from "style-object-to-css-string";
import Oe from "styled-components";
import { AgGridReact as _e } from "ag-grid-react";
import "ag-grid-community/styles/ag-grid.css";
import { useCustomCompareMemo as Be } from "use-custom-compare";
import Ce from "lodash/debounce";
import { useDeepCompareCallback as ue } from "use-deep-compare";
const Fe = ({
import { useCustomCompareMemo as $e } from "use-custom-compare";
import He from "lodash/debounce";
import { useDeepCompareCallback as he } from "use-deep-compare";
const Be = ({
dataSource: e,

@@ -16,6 +16,6 @@ onFetchChildrenForRecord: t,

}) => {
const [s, a] = N([]), [i, c] = N([]), r = K(/* @__PURE__ */ new Map()), [o, u] = N(
const [s, a] = D([]), [c, l] = D([]), r = N(/* @__PURE__ */ new Map()), [o, u] = D(
e.map(
(f) => Y({
entry: f,
(d) => ee({
entry: d,
childField: n,

@@ -29,4 +29,4 @@ idLevelMap: r.current

e.map(
(f) => Y({
entry: f,
(d) => ee({
entry: d,
childField: n,

@@ -38,45 +38,45 @@ idLevelMap: r.current

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

@@ -88,9 +88,9 @@ },

try {
const y = await (t == null ? void 0 : t(l)) || [];
y.forEach((I) => {
r.current.set(I.id, l.level + 1);
const C = await (t == null ? void 0 : t(i)) || [];
C.forEach((I) => {
r.current.set(I.id, i.level + 1);
}), u(
G(
te(
{
...l,
...i,
isLoading: !1

@@ -100,3 +100,3 @@ },

...o,
...y.map((I) => Y({
...C.map((I) => ee({
entry: I,

@@ -108,8 +108,8 @@ childField: n,

)
), i.push(l.id), c([...i]);
} catch (y) {
console.error(y), u(
G(
), c.push(i.id), l([...c]);
} catch (C) {
console.error(C), u(
te(
{
...l,
...i,
isLoading: !1

@@ -122,3 +122,3 @@ },

}
p(f.id);
p(d.id);
}

@@ -128,31 +128,31 @@ },

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

@@ -170,12 +170,12 @@ childField: t,

}
const G = (e, t) => t.map((n) => n.id === e.id ? e : n), ze = ({
const te = (e, t) => t.map((n) => n.id === e.id ? e : n), Fe = ({
selectionRowKeysProps: e = []
}) => {
const [t, n] = N(
const [t, n] = D(
e
);
_e(() => {
Me(() => {
n(e);
}, [e]);
const s = C(
const s = g(
(r) => {

@@ -189,3 +189,3 @@ if (t.length === r.length || t.length > 0) {

[t, n]
), a = C(
), a = g(
(r, o) => {

@@ -195,3 +195,3 @@ o.length !== 0 && n(r ? [.../* @__PURE__ */ new Set([...t, ...o])] : t.filter((u) => !o.includes(u)));

[t, n]
), i = C(
), c = g(
(r) => {

@@ -207,3 +207,3 @@ if (t.find(

[t, n]
), c = C(
), l = g(
(r) => t.find(

@@ -216,22 +216,22 @@ (u) => r.id === u

selectedRowKeys: t,
isRowSelected: c,
isRowSelected: l,
toggleAllRowsSelected: s,
toggleRowSelected: i,
toggleRowSelected: c,
changeSelected: a
};
}, Re = (e, t) => {
const [n, s] = N(null), [a, i] = N(!1), [c, r] = N(null);
return C(
}, ze = (e, t) => {
const [n, s] = D(null), [a, c] = D(!1), [l, r] = D(null);
return g(
(u, p) => {
if (p.nativeEvent.shiftKey) {
const m = e.findIndex((x) => x === u), k = e.findIndex((x) => x === n), d = e.findIndex(
(x) => x === c
), v = Math.min(m, k), S = Math.max(m, k);
if (v > -1 && S > -1) {
t(a, e.slice(v, S + 1)), d > S && t(
const h = e.findIndex((S) => S === u), k = e.findIndex((S) => S === n), b = e.findIndex(
(S) => S === l
), m = Math.min(h, k), v = Math.max(h, k);
if (m > -1 && v > -1) {
t(a, e.slice(m, v + 1)), b > v && t(
!a,
e.slice(S + 1, d + 1)
), d < v && t(
e.slice(v + 1, b + 1)
), b < m && t(
!a,
e.slice(d, v)
e.slice(b, m)
), r(u);

@@ -241,3 +241,3 @@ return;

} else
s(u), r(null), i(p.target.checked);
s(u), r(null), c(p.target.checked);
t(p.target.checked, [u]);

@@ -251,19 +251,19 @@ },

a,
i,
c,
l,
r
]
);
}, je = (e) => {
const [t, n] = N(e), s = C(
(i) => {
if (t && i === t.id)
}, Ue = (e) => {
const [t, n] = D(e), s = g(
(c) => {
if (t && c === t.id)
return t;
},
[t]
), a = C(
(i) => {
), a = g(
(c) => {
if (!t) {
n({
id: i,
id: c,
desc: !1

@@ -273,5 +273,5 @@ });

}
if (t.id !== i) {
if (t.id !== c) {
n({
id: i,
id: c,
desc: !1

@@ -283,3 +283,3 @@ });

n({
id: i,
id: c,
desc: !0

@@ -298,7 +298,7 @@ });

};
}, Ue = He.div`
}, je = Oe.div`
overflow-x: auto;
height: ${({ height: e }) => `${e}px` || "auto"};
border-bottom: 1px solid #f0f0f0;
${(e) => Oe(e.containerStyle ?? {})}
${(e) => Pe(e.containerStyle ?? {})}

@@ -388,11 +388,11 @@ table {

}
`, be = ({
`, ke = ({
value: e,
onChange: t
}) => {
const n = q.useRef();
return q.useEffect(() => {
const n = Q.useRef();
return Q.useEffect(() => {
const s = n.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__ */ g(
}), /* @__PURE__ */ y(
"input",

@@ -415,4 +415,4 @@ {

selectedRowKeys: a,
handleColumnClick: i,
getColumnSorter: c,
handleColumnClick: c,
getColumnSorter: l,
sortEnabled: r,

@@ -422,4 +422,4 @@ readonly: o,

headerStyle: p
}) => /* @__PURE__ */ P(me, { children: [
e && !o && /* @__PURE__ */ g(
}) => /* @__PURE__ */ P(Ce, { children: [
e && !o && /* @__PURE__ */ y(
"th",

@@ -435,3 +435,3 @@ {

},
children: /* @__PURE__ */ g(
children: /* @__PURE__ */ y(
"div",

@@ -445,4 +445,4 @@ {

},
children: /* @__PURE__ */ g(
be,
children: /* @__PURE__ */ y(
ke,
{

@@ -458,4 +458,4 @@ value: t ? !0 : a.length === 0 ? !1 : null,

),
u && /* @__PURE__ */ g("th", { style: { ...p } }, "th-status"),
n.map((m) => /* @__PURE__ */ g(
u && /* @__PURE__ */ y("th", { style: { ...p } }, "th-status"),
n.map((h) => /* @__PURE__ */ y(
"th",

@@ -465,6 +465,6 @@ {

onClick: r ? () => {
i(m.key);
c(h.key);
} : void 0,
children: /* @__PURE__ */ P("div", { className: "ctx", children: [
/* @__PURE__ */ g(
/* @__PURE__ */ y(
"div",

@@ -478,6 +478,6 @@ {

},
children: m.title
children: h.title
}
),
/* @__PURE__ */ g("div", { style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ g(
/* @__PURE__ */ y("div", { style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ y(
"span",

@@ -487,14 +487,14 @@ {

style: {
visibility: c(m.key) !== void 0 ? void 0 : "hidden",
visibility: l(h.key) !== void 0 ? void 0 : "hidden",
marginLeft: "auto"
},
children: c(m.key) !== void 0 && c(m.key).desc ? " ▼" : " ▲"
children: l(h.key) !== void 0 && l(h.key).desc ? " ▼" : " ▲"
},
m.key
h.key
) })
] })
},
m.key
h.key
))
] }), fe = ({
] }), me = ({
column: e,

@@ -505,4 +505,4 @@ row: t,

getColumnSorter: a,
expandableOpts: i,
getExpandableStatusForRow: c,
expandableOpts: c,
getExpandableStatusForRow: l,
onExpandableIconClicked: r,

@@ -513,3 +513,3 @@ onCellRender: o,

}) => {
const m = a(e.key) !== void 0 ? {
const h = a(e.key) !== void 0 ? {
backgroundColor: u ? "#E6F7FF" : "#fafafa"

@@ -525,4 +525,4 @@ } : u ? {

value: t[e.key]
}) : e.render ? k = e.render(t[e.key]) : k = t[e.key], /* @__PURE__ */ P("td", { style: m, children: [
/* @__PURE__ */ g(
}) : e.render ? k = e.render(t[e.key]) : k = t[e.key], /* @__PURE__ */ P("td", { style: h, children: [
/* @__PURE__ */ y(
qe,

@@ -532,4 +532,4 @@ {

columnIdx: n,
expandableOpts: i,
getExpandableStatusForRow: c,
expandableOpts: c,
getExpandableStatusForRow: l,
onExpandableIconClicked: r,

@@ -540,3 +540,3 @@ level: s

/* @__PURE__ */ P("div", { style: { display: "inline-block", width: "100%", ...p }, children: [
/* @__PURE__ */ g(
/* @__PURE__ */ y(
"div",

@@ -559,14 +559,14 @@ {

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

@@ -578,3 +578,3 @@ a(e);

}
class pe extends q.Component {
class ye extends Q.Component {
constructor(t) {

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

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

@@ -618,4 +618,4 @@ ] }) })

onRowStyle: a,
onRowStatus: i,
onRowDoubleClick: c,
onRowStatus: c,
onRowDoubleClick: l,
isRowSelected: r,

@@ -625,15 +625,15 @@ toggleRowSelected: o,

onExpandableIconClicked: p,
getExpandableStatusForRow: m,
getExpandableStatusForRow: h,
keyIsOpened: k,
getChildsForParent: d,
getLevelForKey: v,
onCellRender: S,
cellStyle: x,
readonly: h
}) => /* @__PURE__ */ g(me, { children: t.filter((b) => v(b.id) === 0).map((b) => ke({
row: b,
getChildsForParent: b,
getLevelForKey: m,
onCellRender: v,
cellStyle: S,
readonly: f
}) => /* @__PURE__ */ y(Ce, { children: t.filter((x) => m(x.id) === 0).map((x) => ve({
row: x,
columns: n,
onRowStyle: a,
onRowStatus: i,
onRowDoubleClick: c,
onRowStatus: c,
onRowDoubleClick: l,
onRowSelectionChange: e,

@@ -643,11 +643,11 @@ isRowSelected: r,

expandableOpts: u,
getExpandableStatusForRow: m,
getExpandableStatusForRow: h,
onExpandableIconClicked: p,
getColumnSorter: s,
keyIsOpened: k,
getChildsForParent: d,
cellStyle: x,
readonly: h
getChildsForParent: b,
cellStyle: S,
readonly: f
})) });
function ke({
function ve({
row: e,

@@ -658,4 +658,4 @@ columns: t,

isRowSelected: a,
toggleRowSelected: i,
expandableOpts: c,
toggleRowSelected: c,
expandableOpts: l,
getExpandableStatusForRow: r,

@@ -665,17 +665,17 @@ onExpandableIconClicked: o,

keyIsOpened: p,
getChildsForParent: m,
getChildsForParent: h,
onRowStyle: k,
onRowStatus: d,
level: v = 0,
onCellRender: S,
cellStyle: x,
readonly: h
onRowStatus: b,
level: m = 0,
onCellRender: v,
cellStyle: S,
readonly: f
}) {
var l;
const b = k ? k(e) : "", w = a(e);
let f = [
var i;
const x = k ? k(e) : "", w = a(e);
let d = [
/* @__PURE__ */ P(
"tr",
{
style: b,
style: x,
onDoubleClick: () => {

@@ -685,3 +685,3 @@ n == null || n(e);

children: [
s && !h && /* @__PURE__ */ g(
s && !f && /* @__PURE__ */ y(
"td",

@@ -695,6 +695,6 @@ {

},
onDoubleClick: (y) => {
y.stopPropagation(), y.preventDefault();
onDoubleClick: (C) => {
C.stopPropagation(), C.preventDefault();
},
children: /* @__PURE__ */ g(
children: /* @__PURE__ */ y(
"div",

@@ -708,8 +708,8 @@ {

},
children: !h && /* @__PURE__ */ g(
be,
children: !f && /* @__PURE__ */ y(
ke,
{
value: w,
onChange: (y) => {
i(e.id, y);
onChange: (C) => {
c(e.id, C);
}

@@ -723,4 +723,4 @@ }

),
d && /* @__PURE__ */ g(pe, { children: /* @__PURE__ */ g(
fe,
b && /* @__PURE__ */ y(ye, { children: /* @__PURE__ */ y(
me,
{

@@ -732,26 +732,26 @@ row: e,

columnIdx: -1,
onCellRender: () => d(e),
expandableOpts: c,
onCellRender: () => b(e),
expandableOpts: l,
getExpandableStatusForRow: r,
onExpandableIconClicked: o,
level: v,
level: m,
rowIsSelected: w,
cellStyle: x
cellStyle: S
}
) }, `status-${e.id}`),
t.map((y, I) => /* @__PURE__ */ g(pe, { children: /* @__PURE__ */ g(
fe,
t.map((C, I) => /* @__PURE__ */ y(ye, { children: /* @__PURE__ */ y(
me,
{
column: y,
column: C,
columnIdx: I,
row: e,
getColumnSorter: u,
expandableOpts: c,
expandableOpts: l,
getExpandableStatusForRow: r,
onExpandableIconClicked: o,
level: v,
level: m,
rowIsSelected: w,
cellStyle: x
cellStyle: S
}
) }, `${y.key}-${e.id}`))
) }, `${C.key}-${e.id}`))
]

@@ -762,5 +762,5 @@ },

];
return c !== void 0 && p(e.id) && (f = f.concat(
(l = m(e.id)) == null ? void 0 : l.map((y) => ke({
row: y.data,
return l !== void 0 && p(e.id) && (d = d.concat(
(i = h(e.id)) == null ? void 0 : i.map((C) => ve({
row: C.data,
columns: t,

@@ -771,4 +771,4 @@ onRowStyle: k,

isRowSelected: a,
toggleRowSelected: i,
expandableOpts: c,
toggleRowSelected: c,
expandableOpts: l,
getExpandableStatusForRow: r,

@@ -778,10 +778,10 @@ onExpandableIconClicked: o,

keyIsOpened: p,
getChildsForParent: m,
level: y.level,
onCellRender: S,
onRowStatus: d
getChildsForParent: h,
level: C.level,
onCellRender: v,
onRowStatus: b
}))
)), f;
)), d;
}
const Xe = ye((e, t) => {
const Xe = ge((e, t) => {
const {

@@ -791,4 +791,4 @@ height: n,

loadingComponent: a,
dataSource: i,
columns: c,
dataSource: c,
columns: l,
onRowDoubleClick: r,

@@ -798,18 +798,18 @@ onRowStyle: o,

onRowSelectionChange: p,
onChangeSort: m,
onChangeSort: h,
sorter: k,
expandableOpts: d,
onCellRender: v,
readonly: S,
selectionRowKeys: x,
customStyle: h
expandableOpts: b,
onCellRender: m,
readonly: v,
selectionRowKeys: S,
customStyle: f
} = e, {
selectedRowKeys: b,
selectedRowKeys: x,
toggleAllRowsSelected: w,
isRowSelected: f,
changeSelected: l
} = ze({
selectionRowKeysProps: x
isRowSelected: d,
changeSelected: i
} = Fe({
selectionRowKeysProps: S
});
ge(t, () => ({
be(t, () => ({
unselectAll: () => {

@@ -819,70 +819,70 @@ w([]);

}));
const y = Re(
i.map((B) => B.id),
l
), { localSorter: I, getColumnSorter: A, handleColumnClick: F } = je(k), {
keyIsOpened: J,
onExpandableIconClicked: X,
getExpandableStatusForRow: z,
getChildsForParent: R,
getAllVisibleKeys: O,
getLevelForKey: Q
} = Fe({
dataSource: i,
onFetchChildrenForRecord: d == null ? void 0 : d.onFetchChildrenForRecord,
childField: d == null ? void 0 : d.childField
const C = ze(
c.map((j) => j.id),
i
), { localSorter: I, getColumnSorter: K, handleColumnClick: W } = Ue(k), {
keyIsOpened: V,
onExpandableIconClicked: Y,
getExpandableStatusForRow: q,
getChildsForParent: G,
getAllVisibleKeys: H,
getLevelForKey: B
} = Be({
dataSource: c,
onFetchChildrenForRecord: b == null ? void 0 : b.onFetchChildrenForRecord,
childField: b == null ? void 0 : b.childField
});
_(() => {
p == null || p(b);
}, [b]), _(() => {
m == null || m(I);
p == null || p(x);
}, [x]), _(() => {
h == null || h(I);
}, [I]);
const j = C(() => b.length === 0 ? !1 : d ? O().length === b.length : i.length === b.length, [i.length, d, b.length]), H = C(() => {
w(O());
}, [w, O]);
return s ? a : /* @__PURE__ */ g(
Ue,
const U = g(() => x.length === 0 ? !1 : b ? H().length === x.length : c.length === x.length, [c.length, b, x.length]), F = g(() => {
w(H());
}, [w, H]);
return s ? a : /* @__PURE__ */ y(
je,
{
height: n,
canClick: r !== void 0,
readonly: S,
containerStyle: h == null ? void 0 : h.containerStyle,
children: /* @__PURE__ */ P("table", { style: h == null ? void 0 : h.tableStyle, children: [
/* @__PURE__ */ g("thead", { children: /* @__PURE__ */ g("tr", { children: /* @__PURE__ */ g(
readonly: v,
containerStyle: f == null ? void 0 : f.containerStyle,
children: /* @__PURE__ */ P("table", { style: f == null ? void 0 : f.tableStyle, children: [
/* @__PURE__ */ y("thead", { children: /* @__PURE__ */ y("tr", { children: /* @__PURE__ */ y(
We,
{
allRowsAreSelected: j(),
columns: c,
allRowsAreSelected: U(),
columns: l,
onRowSelectionChange: p,
selectedRowKeys: b,
toggleAllRowsSelected: H,
handleColumnClick: F,
getColumnSorter: A,
sortEnabled: d === void 0,
readonly: S,
selectedRowKeys: x,
toggleAllRowsSelected: F,
handleColumnClick: W,
getColumnSorter: K,
sortEnabled: b === void 0,
readonly: v,
status: !!u,
headerStyle: h == null ? void 0 : h.headerStyle
headerStyle: f == null ? void 0 : f.headerStyle
}
) }) }),
/* @__PURE__ */ g("tbody", { children: /* @__PURE__ */ g(
/* @__PURE__ */ y("tbody", { children: /* @__PURE__ */ y(
Je,
{
dataSource: i,
columns: c,
dataSource: c,
columns: l,
onRowSelectionChange: p,
getColumnSorter: A,
getColumnSorter: K,
onRowDoubleClick: r,
onRowStyle: o,
onRowStatus: u,
isRowSelected: f,
toggleRowSelected: y,
expandableOpts: d,
onExpandableIconClicked: X,
getExpandableStatusForRow: z,
keyIsOpened: J,
getChildsForParent: R,
getLevelForKey: Q,
onCellRender: v,
cellStyle: h == null ? void 0 : h.cellStyle,
readonly: S
isRowSelected: d,
toggleRowSelected: C,
expandableOpts: b,
onExpandableIconClicked: Y,
getExpandableStatusForRow: q,
keyIsOpened: V,
getChildsForParent: G,
getLevelForKey: B,
onCellRender: m,
cellStyle: f == null ? void 0 : f.cellStyle,
readonly: v
}

@@ -895,10 +895,10 @@ ) })

Xe.displayName = "Table";
const Qe = (e, t) => Be(
const Qe = (e, t) => $e(
() => e,
[e],
(n, s) => {
const a = n[0], i = s[0], c = a.map((o) => o[t]).sort((o, u) => o.localeCompare(u)).join(","), r = i.map((o) => o[t]).sort((o, u) => o.localeCompare(u)).join(",");
return c === r;
const a = n[0], c = s[0], l = a.map((o) => o[t]).sort((o, u) => o.localeCompare(u)).join(","), r = c.map((o) => o[t]).sort((o, u) => o.localeCompare(u)).join(",");
return l === r;
}
), ve = Z(
), Se = ne(
({

@@ -908,7 +908,7 @@ value: e,

}) => {
const n = q.useRef();
const n = Q.useRef();
return _(() => {
const s = n.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__ */ g(
}), /* @__PURE__ */ y(
"input",

@@ -934,4 +934,4 @@ {

);
ve.displayName = "HeaderCheckboxComp";
const xe = Z(
Se.displayName = "HeaderCheckboxComp";
const xe = ne(
({

@@ -944,5 +944,5 @@ selectedRowKeysLength: e,

}) => {
const i = e === 0, c = e > 0 && t !== e;
const c = e === 0, l = e > 0 && t !== e;
let r = !1;
return a || t === e && t > 0 || n ? r = !0 : i ? r = !1 : c && (r = null), /* @__PURE__ */ g(ve, { value: r, onChange: s });
return a || t === e && t > 0 || n ? r = !0 : c ? r = !1 : l && (r = null), /* @__PURE__ */ y(Se, { value: r, onChange: s });
}

@@ -958,56 +958,56 @@ );

}) => {
const [i, c] = N(
const [c, l] = D(
[]
), [r, o] = N(
), [r, o] = D(
a
), u = K(!1), p = K([]), m = K(!1), k = K(null);
), u = N(!1), p = N([]), h = N(!1), k = N(null);
_(() => {
u.current = r;
}, [r]), _(() => {
o(a), a && (c([]), m.current = !0);
o(a), a && (l([]), h.current = !0);
}, [a]), _(() => {
n == null || n(r);
}, [r]);
const d = C(() => {
var b;
let h = !1;
r ? h = !1 : !r && i.length === 0 ? h = !0 : !r && i.length === s ? h = !1 : (r || i.length > 0) && (h = !0), m.current = !0, (b = e == null ? void 0 : e.current) == null || b.api.forEachNode((w) => {
w.setSelected(h);
}), o(h), k.current && clearTimeout(k.current), k.current = setTimeout(() => {
m.current = !1;
const b = g(() => {
var x;
let f = !1;
r ? f = !1 : !r && c.length === 0 ? f = !0 : !r && c.length === s ? f = !1 : (r || c.length > 0) && (f = !0), h.current = !0, (x = e == null ? void 0 : e.current) == null || x.api.forEachNode((w) => {
w.setSelected(f);
}), o(f), k.current && clearTimeout(k.current), k.current = setTimeout(() => {
h.current = !1;
}, 1e3);
}, [r, i.length, s, e]), v = C(
(h) => {
if (m.current) {
t == null || t([]), c([]);
}, [r, c.length, s, e]), m = g(
(f) => {
if (h.current) {
t == null || t([]), l([]);
return;
}
o(!1);
let w = (h.api.getSelectedNodes() || []).map(
(f) => f.data.id
let w = (f.api.getSelectedNodes() || []).map(
(d) => d.data.id
);
w = w.concat(
p.current
), t == null || t(w), c(w);
), t == null || t(w), l(w);
},
[t]
), S = C(
Ce((h) => {
v == null || v(h);
), v = g(
He((f) => {
m == null || m(f);
}, Ve),
[v]
), x = C((h) => {
p.current = h;
[m]
), S = g((f) => {
p.current = f;
}, []);
return {
internalSelectedRowKeys: i,
onHeaderCheckboxChange: d,
internalSelectedRowKeys: c,
onHeaderCheckboxChange: b,
allRowSelectedMode: r,
onSelectionChangedDebounced: S,
onSelectionChangedDebounced: v,
selectedRowKeysPendingToRender: p.current,
setSelectedRowKeysPendingToRender: x
setSelectedRowKeysPendingToRender: S
};
}, ee = "$status", Se = "$checkbox", we = [Se], Ge = [
...we,
ee
}, re = "$status", we = "$checkbox", Ee = [we], Ge = [
...Ee,
re
], Ze = ({

@@ -1020,6 +1020,6 @@ actualColumnKeys: e,

const n = t.map(
(c) => c.colId
(l) => l.colId
), s = [...e].sort(), a = [
...n.filter(
(c) => !Ge.includes(c)
(l) => !Ge.includes(l)
)

@@ -1029,3 +1029,3 @@ ].sort();

return t;
}, et = 50, tt = ({
}, Re = 50, et = ({
gridRef: e,

@@ -1037,43 +1037,61 @@ containerRef: t,

}) => {
const i = K(!1), c = K(), r = we;
n && r.push(ee);
const o = C(
(d) => {
var x;
const v = d == null ? void 0 : d.reduce(
(h, b) => h + b.getActualWidth(),
const c = N(!1), l = N(), r = Ee;
n && r.push(re);
const o = g(
(m) => {
var f;
const v = m == null ? void 0 : m.reduce(
(x, w) => x + w.getActualWidth(),
0
), S = (x = t == null ? void 0 : t.current) == null ? void 0 : x.clientWidth;
), S = (f = t == null ? void 0 : t.current) == null ? void 0 : f.clientWidth;
return !S || !v ? 0 : S - v;
},
[t]
), u = C((d) => {
), u = g((m) => {
setTimeout(() => {
d();
}, et);
}, []), p = C(() => {
m();
}, Re);
}, []), p = g(() => {
u(() => {
var d;
var m, v;
console.log(
"1- Applying column state: ",
c.current
), (d = e == null ? void 0 : e.current) == null || d.api.applyColumnState({
state: c.current,
l.current
), (m = e == null ? void 0 : e.current) == null || m.api.applyColumnState({
state: l.current,
applyOrder: !0
});
}), console.log(
"Checking state after applyColumnState: ",
(v = e == null ? void 0 : e.current) == null ? void 0 : v.api.getColumnState()
);
});
}, [e, u]), m = ue(() => {
}, [e, u]), h = g(
(m) => {
var v, S;
console.log("3- Applying column state: ", m), l.current = m, (v = e == null ? void 0 : e.current) == null || v.api.applyColumnState({
state: l.current,
applyOrder: !0
}), console.log(
"Checking state after applyColumnState: ",
(S = e == null ? void 0 : e.current) == null ? void 0 : S.api.getColumnState()
);
},
[e]
), k = he(() => {
u(() => {
var S, x, h, b;
var S, f, x, w, d;
(S = e == null ? void 0 : e.current) == null || S.api.autoSizeAllColumns();
const d = (x = e == null ? void 0 : e.current) == null ? void 0 : x.api.getAllGridColumns();
if (!d)
const m = (f = e == null ? void 0 : e.current) == null ? void 0 : f.api.getAllGridColumns();
if (!m)
return;
const v = o(d);
const v = o(m);
if (v > 0) {
const w = v / (d.length - r.length), l = ((h = e == null ? void 0 : e.current) == null ? void 0 : h.api.getColumnState()).map((y) => ({
...y,
width: r.includes(y.colId) ? y.width : y.width + w
const i = v / (m.length - r.length), I = ((x = e == null ? void 0 : e.current) == null ? void 0 : x.api.getColumnState()).map((K) => ({
...K,
width: r.includes(K.colId) ? K.width : K.width + i
}));
console.log("2- Applying column state: ", l), (b = e == null ? void 0 : e.current) == null || b.api.applyColumnState({ state: l });
console.log("2- Applying column state: ", I), (w = e == null ? void 0 : e.current) == null || w.api.applyColumnState({ state: I }), console.log(
"Checking state after applyColumnState: ",
(d = e == null ? void 0 : e.current) == null ? void 0 : d.api.getColumnState()
);
}

@@ -1083,17 +1101,18 @@ });

return {
applyColumnState: ue(() => {
if (c.current = Ze({
actualColumnKeys: s.map((d) => d.key),
applyColumnState: he(() => {
if (l.current = Ze({
actualColumnKeys: s.map((m) => m.key),
persistedColumnState: a == null ? void 0 : a()
}), c.current) {
}), l.current) {
p();
return;
}
!c.current && !i.current && (i.current = !0, m());
}, [m, p, s, a]),
columnsPersistedStateRef: c
!l.current && !c.current && (c.current = !0, k());
}, [k, p, s, a]),
columnsPersistedStateRef: l,
applyAndUpdateNewState: h
};
}, he = 50, Ee = ye(
}, tt = 50, Ie = ge(
(e, t) => {
var re, se;
var ae, de;
const {

@@ -1103,4 +1122,4 @@ onRequestData: n,

onRowDoubleClick: a,
onRowSelectionChange: i,
height: c = 600,
onRowSelectionChange: c,
height: l = 600,
onRowStyle: r,

@@ -1110,65 +1129,70 @@ onColumnChanged: o,

onChangeFirstVisibleRowIndex: p,
onGetFirstVisibleRowIndex: m,
onGetFirstVisibleRowIndex: h,
onGetSelectedRowKeys: k,
totalRows: d,
onAllRowSelectedModeChange: v,
allRowSelectedMode: S,
footer: x,
footerHeight: h = 50,
onRowStatus: b,
totalRows: b,
onAllRowSelectedModeChange: m,
allRowSelectedMode: v,
footer: S,
footerHeight: f = 50,
onRowStatus: x,
statusComponent: w,
hasStatusColumn: f = !1
} = e, l = K(null), y = K(!0), I = K(!1), A = K(null), F = K(!1), J = x ? c + h : c, X = x ? c - h : c, z = C(
Ce((E) => {
var L;
if (!F.current) {
F.current = !0;
return;
}
(L = l.current) == null || L.api.applyColumnState({ state: E }), o == null || o(E);
}, he),
[o]
), R = C(
(E) => {
var $;
console.log({ event: E });
const L = ($ = l == null ? void 0 : l.current) == null ? void 0 : $.api.getColumnState();
z(L);
},
[z]
);
ge(t, () => ({
hasStatusColumn: d = !1
} = e, i = N(null), C = N(!0), I = N(!1), K = N(null), W = N(!1), V = S ? l + f : l, Y = S ? l - f : l;
be(t, () => ({
unselectAll: () => {
var E, L;
U([]), (L = (E = l.current) == null ? void 0 : E.api) == null || L.deselectAll();
F([]), (L = (E = i.current) == null ? void 0 : E.api) == null || L.deselectAll();
},
refresh: () => {
var E, L;
(L = (E = l.current) == null ? void 0 : E.api) == null || L.purgeInfiniteCache();
(L = (E = i.current) == null ? void 0 : E.api) == null || L.purgeInfiniteCache();
}
}));
const {
onHeaderCheckboxChange: O,
onSelectionChangedDebounced: Q,
selectedRowKeysPendingToRender: j,
allRowSelectedMode: H,
internalSelectedRowKeys: B,
setSelectedRowKeysPendingToRender: U
onHeaderCheckboxChange: q,
onSelectionChangedDebounced: G,
selectedRowKeysPendingToRender: H,
allRowSelectedMode: B,
internalSelectedRowKeys: U,
setSelectedRowKeysPendingToRender: F
} = Ye({
gridRef: l,
onRowSelectionChange: i,
onAllRowSelectedModeChange: v,
totalRows: d,
allRowSelectedModeProps: S
gridRef: i,
onRowSelectionChange: c,
onAllRowSelectedModeChange: m,
totalRows: b,
allRowSelectedModeProps: v
});
_(() => {
I.current = H;
}, [H]);
const V = Qe(s, "key"), { applyColumnState: te, columnsPersistedStateRef: Ie } = tt({
gridRef: l,
containerRef: A,
hasStatusColumn: f,
columns: V,
I.current = B;
}, [B]);
const j = Qe(s, "key"), {
applyColumnState: se,
columnsPersistedStateRef: Z,
applyAndUpdateNewState: oe
} = et({
gridRef: i,
containerRef: K,
hasStatusColumn: d,
columns: j,
onGetColumnsState: u
}), Le = de(() => ({}), []), Ke = de(() => {
}), le = g(
(E) => {
if (!W.current) {
W.current = !0;
return;
}
oe(E), o == null || o(E);
},
[oe, o]
), ce = g(
(E) => {
var O;
console.log({ event: E });
const L = (O = i == null ? void 0 : i.current) == null ? void 0 : O.api.getColumnState();
L && le(L);
},
[le]
);
pe(() => ({}), []);
const Le = pe(() => {
const E = {

@@ -1183,25 +1207,26 @@ checkboxSelection: !0,

resizable: !1,
field: Se,
suppressDragLeaveHidesColumns: !0,
headerComponent: () => /* @__PURE__ */ g(
field: we,
headerComponent: () => /* @__PURE__ */ y(
xe,
{
totalRows: d,
selectedRowKeysLength: B.length,
allRowSelected: d === B.length && d > 0,
allRowSelectedMode: H,
onHeaderCheckboxChange: O
totalRows: b,
selectedRowKeysLength: U.length,
allRowSelected: b === U.length && b > 0,
allRowSelectedMode: B,
onHeaderCheckboxChange: q
}
)
}, L = V.map((D) => ({
field: D.key,
}, L = Z.current, O = L == null ? void 0 : L.map((A) => A.colId), $ = j.map((A) => ({
field: A.key,
sortable: !1,
headerName: D.title,
suppressDragLeaveHidesColumns: !0,
cellRenderer: D.render ? (W) => D.render(W.value) : void 0
headerName: A.title,
cellRenderer: A.render ? (z) => A.render(z.value) : void 0
}));
return [
return L && $.sort((A, z) => {
const J = O.indexOf(A.field), X = O.indexOf(z.field);
return J - X;
}), [
E,
...f ? [{
field: ee,
...d ? [{
field: re,
suppressMovable: !0,

@@ -1211,3 +1236,2 @@ sortable: !1,

lockPinned: !0,
suppressDragLeaveHidesColumns: !0,
maxWidth: 30,

@@ -1217,24 +1241,25 @@ pinned: "left",

headerComponent: () => null,
cellRenderer: (D) => w == null ? void 0 : w(D.value)
cellRenderer: (A) => w == null ? void 0 : w(A.value)
}] : [],
...L
...$
];
}, [
H,
V,
f,
B.length,
O,
B,
j,
Z,
d,
U.length,
q,
w,
d
]), ne = C(
b
]), ie = g(
async (E) => {
var oe, le, ie, ce;
(oe = l.current) == null || oe.api.showLoadingOverlay();
const { startRow: L, endRow: $ } = E, D = await n(L, $);
let W = -1;
D.length < $ - L && (W = L + D.length);
const Me = f ? await Promise.all(
D.map(async (T) => {
const M = await (b == null ? void 0 : b(T));
var A, z, J, X;
(A = i.current) == null || A.api.showLoadingOverlay();
const { startRow: L, endRow: O } = E, $ = await n(L, O);
let R = -1;
$.length < O - L && (R = L + $.length);
const ue = d ? await Promise.all(
$.map(async (T) => {
const M = await (x == null ? void 0 : x(T));
return {

@@ -1245,5 +1270,5 @@ ...T,

})
) : D;
if (E.successCallback(Me, W), I.current)
(le = l == null ? void 0 : l.current) == null || le.api.forEachNode((T) => {
) : $;
if (E.successCallback(ue, R), I.current)
(z = i == null ? void 0 : i.current) == null || z.api.forEachNode((T) => {
T.setSelected(!0);

@@ -1253,7 +1278,7 @@ });

const T = k == null ? void 0 : k();
U(T || []), T && T.length > 0 && ((ie = l == null ? void 0 : l.current) == null || ie.api.forEachNode((M) => {
var ae;
(ae = M == null ? void 0 : M.data) != null && ae.id && T.includes(M.data.id) && (M.setSelected(!0), U(
j.filter(
(Pe) => M.data.id && Pe !== M.data.id
F(T || []), T && T.length > 0 && ((J = i == null ? void 0 : i.current) == null || J.api.forEachNode((M) => {
var fe;
(fe = M == null ? void 0 : M.data) != null && fe.id && T.includes(M.data.id) && (M.setSelected(!0), F(
H.filter(
(Te) => M.data.id && Te !== M.data.id
)

@@ -1263,26 +1288,26 @@ ));

}
(ce = l.current) == null || ce.api.hideOverlay(), te();
(X = i.current) == null || X.api.hideOverlay(), se();
},
[
te,
f,
se,
d,
k,
n,
b,
j,
U
x,
H,
F
]
);
console.log("-----"), console.log("InfiniteTable render"), console.log({
internalState: (se = (re = l.current) == null ? void 0 : re.api) == null ? void 0 : se.getColumnState(),
columnsPersistedStateRef: Ie.current
internalState: (de = (ae = i.current) == null ? void 0 : ae.api) == null ? void 0 : de.getColumnState(),
columnsPersistedStateRef: Z.current
}), console.log("-----");
const De = C(
const Ke = g(
(E) => {
E.api.setGridOption("datasource", {
getRows: ne
getRows: ie
});
},
[ne]
), Ae = C(
[ie]
), Ae = g(
({ data: E }) => {

@@ -1292,13 +1317,13 @@ a == null || a(E);

[a]
), Ne = C(
), Ne = g(
(E) => {
const L = m == null ? void 0 : m();
const L = h == null ? void 0 : h();
L && E.api.ensureIndexVisible(L, "top");
},
[m]
), Te = C(
[h]
), De = g(
(E) => {
y.current || p == null || p(
C.current || p == null || p(
E.api.getFirstDisplayedRowIndex()
), y.current = !1;
), C.current = !1;
},

@@ -1313,17 +1338,16 @@ [p]

flexDirection: "column",
height: J
height: V
},
children: [
/* @__PURE__ */ g(
/* @__PURE__ */ y(
"div",
{
ref: A,
ref: K,
className: "ag-grid-default-table ag-theme-quartz",
style: { height: X, width: "100%" },
children: /* @__PURE__ */ g(
$e,
style: { height: Y, width: "100%" },
children: /* @__PURE__ */ y(
_e,
{
ref: l,
columnDefs: Ke,
defaultColDef: Le,
ref: i,
columnDefs: Le,
onRowDoubleClicked: Ae,

@@ -1338,7 +1362,7 @@ rowStyle: {

rowSelection: "multiple",
onDragStopped: R,
onColumnResized: R,
onDragStopped: ce,
onColumnResized: ce,
rowModelType: "infinite",
cacheBlockSize: 20,
onSelectionChanged: Q,
onSelectionChanged: G,
cacheOverflowSize: 2,

@@ -1348,6 +1372,7 @@ maxConcurrentDatasourceRequests: 1,

maxBlocksInCache: 10,
onGridReady: De,
onGridReady: Ke,
onFirstDataRendered: Ne,
onBodyScroll: Te,
blockLoadDebounceMillis: he
onBodyScroll: De,
blockLoadDebounceMillis: tt,
suppressDragLeaveHidesColumns: !0
}

@@ -1357,3 +1382,3 @@ )

),
x && /* @__PURE__ */ g("div", { style: { height: h }, children: x })
S && /* @__PURE__ */ y("div", { style: { height: f }, children: S })
]

@@ -1364,4 +1389,4 @@ }

);
Ee.displayName = "InfiniteTable";
const ft = Z(Ee);
Ie.displayName = "InfiniteTable";
const ft = ne(Ie);
export {

@@ -1368,0 +1393,0 @@ ft as InfiniteTable,

2

package.json
{
"name": "@gisce/react-formiga-table",
"version": "1.6.0-alpha.8",
"version": "1.6.0-alpha.9",
"engines": {

@@ -5,0 +5,0 @@ "node": "20.5.0"

25

src/components/InfiniteTable/useColumnState.ts

@@ -64,5 +64,25 @@ import { Column, ColumnState } from "ag-grid-community";

});
console.log(
"Checking state after applyColumnState: ",
gridRef?.current?.api.getColumnState()!,
);
});
}, [gridRef, runDeferredCallback]);
const applyAndUpdateNewState = useCallback(
(state: ColumnState[]) => {
console.log("3- Applying column state: ", state);
columnsPersistedStateRef.current = state;
gridRef?.current?.api.applyColumnState({
state: columnsPersistedStateRef.current,
applyOrder: true,
});
console.log(
"Checking state after applyColumnState: ",
gridRef?.current?.api.getColumnState()!,
);
},
[gridRef],
);
const applyAutoFitState = useDeepCompareCallback(() => {

@@ -86,2 +106,6 @@ runDeferredCallback(() => {

gridRef?.current?.api.applyColumnState({ state: newState });
console.log(
"Checking state after applyColumnState: ",
gridRef?.current?.api.getColumnState()!,
);
}

@@ -111,3 +135,4 @@ });

columnsPersistedStateRef,
applyAndUpdateNewState,
};
};
dist/components/InfiniteTable/InfiniteTable.d.ts.map

Sorry, the diff of this file is not supported yet

dist/components/InfiniteTable/useColumnState.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

src/components/InfiniteTable/InfiniteTable.tsx

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