react-box-tools
Version:
Box tools react components, utils and hooks
217 lines (216 loc) • 6.87 kB
JavaScript
import { jsx as e, jsxs as C, Fragment as I } from "react/jsx-runtime";
import { c as T } from "./clsx-DG-5vF7T.js";
import { createContext as F, forwardRef as $, useImperativeHandle as B, useContext as A, useState as x, useMemo as E, useEffect as z } from "react";
import "./form-CzgKUHW5.js";
import { C as O } from "./checkbox-DlLonBBr.js";
import { b as H, A as L, a as U } from "./ArrowUpSorted-2O0jLD_f.js";
import { T as D } from "./textbox-Blgrv9lz.js";
const y = F({
columnKeys: [],
filters: {},
filterValue: () => {
},
columns: {},
groups: [],
dataGrid: [],
selectedRows: /* @__PURE__ */ new Set(),
selectAll: () => {
},
sortedColumn: "",
sort: () => {
},
sortOrder: "asc",
selectRow: () => {
}
}), Z = {
dataGrid: []
}, _ = $(
({ columns: n, columnGroup: r, data: d, selection: l, children: a, className: w }, g) => {
const c = M({
columns: n,
columnGroup: r,
data: d
}), b = {
...c,
columnKeys: c.columnKeys,
selection: l
};
return B(
g,
() => ({
dataGrid: c.dataGrid
}),
[c.dataGrid]
), /* @__PURE__ */ e(y.Provider, { value: b, children: /* @__PURE__ */ e("table", { className: T(`table ${w}`), children: a(c) }) });
}
), ee = ({ children: n, className: r }) => {
const {
columns: d,
groups: l,
columnKeys: a,
selectAll: w,
selectedRows: g,
dataGrid: c,
sortedColumn: b,
sort: f,
sortOrder: S,
selection: h
} = A(y);
return /* @__PURE__ */ C("thead", { className: T(`${r}`), children: [
l.length > 0 && /* @__PURE__ */ C("tr", { className: "group-row", children: [
h && /* @__PURE__ */ e("td", {}),
l.map((m, N) => {
const v = m.columns.length;
return v === 0 ? /* @__PURE__ */ e("td", {}, N) : /* @__PURE__ */ e("th", { scope: "col", colSpan: v, children: /* @__PURE__ */ e("div", { className: "content", children: m.value }) }, N);
})
] }),
/* @__PURE__ */ C("tr", { className: "header-row", children: [
h && /* @__PURE__ */ e("td", { scope: "col", children: /* @__PURE__ */ e("div", { className: "selection-col", children: /* @__PURE__ */ e(
O,
{
checked: g.size === c.length,
onChange: w
}
) }) }),
a.map((m, N) => {
const v = d[m];
return /* @__PURE__ */ e("th", { scope: "col", children: /* @__PURE__ */ C("div", { className: "content", children: [
d[m].shortable && /* @__PURE__ */ e(
"div",
{
onClick: () => {
f(m);
},
children: b === m ? S === "asc" ? /* @__PURE__ */ e(H, {}) : /* @__PURE__ */ e(L, {}) : /* @__PURE__ */ e(U, {})
}
),
v.text
] }) }, N);
})
] }),
/* @__PURE__ */ C("tr", { className: "control-row", children: [
h && /* @__PURE__ */ e("td", { className: "selection-col" }),
a.map((m, N) => {
const v = d[m];
return /* @__PURE__ */ e("td", { className: "content", children: v.control }, N);
})
] }),
n && /* @__PURE__ */ e("tr", { children: n })
] });
};
function te({ data: n, children: r, className: d }) {
const { columnKeys: l, selection: a, dataGrid: w, selectRow: g } = A(y), c = n || w;
return /* @__PURE__ */ C("tbody", { className: T(`${d}`), children: [
c.map((b, f) => /* @__PURE__ */ C("tr", { className: "data-row", children: [
a && /* @__PURE__ */ e("td", { className: "selection-col", children: /* @__PURE__ */ e(
O,
{
checked: b.id.selected ?? !1,
onChange: () => {
g(b);
}
}
) }),
l.map((S, h) => /* @__PURE__ */ e("td", { className: "content", children: b[S].value }, h))
] }, f)),
r && /* @__PURE__ */ e("tr", { children: r })
] });
}
function se({ data: n, children: r, className: d }) {
const { columnKeys: l, selection: a } = A(y);
return /* @__PURE__ */ C("tfoot", { className: T(`${d}`), children: [
n && /* @__PURE__ */ C("tr", { children: [
a && /* @__PURE__ */ e("th", {}),
l.map((w, g) => /* @__PURE__ */ e("th", { children: n[w].value }, g))
] }),
r,
/* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e(
"td",
{
colSpan: a ? l.length + 1 : l.length
}
) })
] });
}
const le = ({ name: n, children: r }) => {
const { filterValue: d } = A(y), l = (a) => {
d(n, a);
};
return /* @__PURE__ */ e(I, { children: r ? r({ filterValue: l }) : /* @__PURE__ */ e(D, { onChange: (a) => l(a.target.value) }) });
};
function M({ columns: n, columnGroup: r, data: d }) {
const [l, a] = x(
Object.keys(n)
), [w, g] = x([]), [c, b] = x(null), [f, S] = x("asc"), [h, m] = x({}), [N, v] = x(
/* @__PURE__ */ new Set()
), G = (t) => {
n[t].shortable && (t === c ? S(f === "asc" ? "desc" : "asc") : (b(t), S("asc")));
}, V = (t, u) => {
m((s) => ({
...s,
[t]: u
}));
}, j = () => {
v((t) => {
const u = new Set(t);
return t.size === R.length ? (R.forEach((s) => {
s.id.selected = !1;
}), /* @__PURE__ */ new Set()) : (R.forEach((s) => {
s.id.selected = !0, u.add(s.id.value);
}), u);
});
}, k = (t) => {
const u = t.id.value;
v((s) => {
const o = new Set(s);
return o.has(u) ? (o.delete(u), t.id.selected = !1) : (o.add(u), t.id.selected = !0), o;
});
}, R = E(() => {
const t = d.filter((u) => Object.keys(h).every((s) => {
var p, K;
const o = (p = h[s]) == null ? void 0 : p.toLowerCase(), i = (K = u[s].value) == null ? void 0 : K.toString().toLowerCase();
return i == null ? void 0 : i.includes(o ?? "");
}));
return c ? [...t].sort((s, o) => {
const i = s[c].value ?? "", p = o[c].value ?? "";
return i === null || i === "" ? f === "asc" ? -1 : 1 : p === null || p === "" ? f === "asc" ? 1 : -1 : f === "asc" ? i < p ? -1 : i > p ? 1 : 0 : i > p ? -1 : i < p ? 1 : 0;
}) : t;
}, [d, h, c, f]);
return z(() => {
if (r) {
let t = l.map((o) => ({
value: o,
columns: []
}));
Object.keys(r).map((o) => {
const i = r[o];
return t = [...t.filter((K) => !i.columns.includes(K.value)), i], null;
});
let s = [];
t.map((o) => (o.columns.length === 0 ? s = [...s, o.value] : s = [...s, ...o.columns], null)), g(t), a(s);
}
}, [r, l]), {
dataGrid: R,
selectedRows: N,
sort: G,
filterValue: V,
selectAll: j,
selectRow: k,
columnKeys: l,
sortedColumn: c,
sortOrder: f,
filters: h,
groups: w,
columns: n
};
}
export {
le as ColumnFilter,
_ as Table,
te as TableBody,
y as TableContext,
se as TableFoot,
ee as TableHead,
Z as tableRefInit,
M as useTable
};