@frui.ts/dataviews
Version:
View components for data display
185 lines (184 loc) • 7.78 kB
JavaScript
import { observer as c } from "mobx-react-lite";
import i, { useState as v, useEffect as w } from "react";
import { getSortingDirection as F, SortingDirection as E } from "@frui.ts/data";
import { combineClassNames as g } from "@frui.ts/helpers";
function T({ column: e, context: t }) {
var l, a;
return e.headerFormatter ? /* @__PURE__ */ i.createElement(i.Fragment, null, e.headerFormatter({ key: "list-header", column: e, context: t })) : /* @__PURE__ */ i.createElement("th", { scope: "row", className: e.headerClassName }, ((l = e.responsiveTitleFactory) == null ? void 0 : l.call(e, t)) ?? e.responsiveTitle ?? ((a = e.titleFactory) == null ? void 0 : a.call(e, t)) ?? e.title);
}
function P({ item: e, columns: t, context: l }) {
return /* @__PURE__ */ i.createElement("tbody", null, t.filter((a) => a.responsiveVisible !== !1).map((a, r) => {
const d = a.property ?? r, n = a.property ? e[a.property] : void 0, s = a.responsiveTitle !== !1;
return /* @__PURE__ */ i.createElement("tr", { key: d }, s && /* @__PURE__ */ i.createElement(T, { column: a, context: l }), /* @__PURE__ */ i.createElement("td", { colSpan: s ? 1 : 2 }, a.cellFormatter ? a.cellFormatter({ key: d, value: n, item: e, column: a, context: l }) : a.valueFormatter ? a.valueFormatter({ value: n, item: e, column: a, context: l }) : n));
}));
}
const p = c(P), S = {};
function C(e) {
return /* @__PURE__ */ i.createElement("table", { id: e.id, className: e.className }, e.items.map((t) => /* @__PURE__ */ i.createElement(p, { key: String(t[e.itemKey]), item: t, columns: e.columns, context: e.context })));
}
C.defaultProps = S;
const R = c(C);
function W(e, t) {
const l = F(e, t);
return l ? l === E.Descending ? "sort-indicator desc" : "sort-indicator asc" : "sort-indicator";
}
function k(e) {
const t = e.wrapperType ?? "tr", l = e.itemCellType ?? "th", { context: a } = e;
return /* @__PURE__ */ i.createElement(t, { ...e.wrapperProps }, e.columns.map((r, d) => {
const n = r.property ?? d;
return r.headerFormatter ? r.headerFormatter({ key: n, column: r, context: a }) : e.pagingFilter && r.sortable && r.property ? /* @__PURE__ */ i.createElement(
l,
{
key: n,
className: r.headerClassName ? `sortable ${r.headerClassName}` : "sortable",
onClick: () => {
var s;
return void ((s = e.onColumnSort) == null ? void 0 : s.call(e, r));
},
...e.itemCellProps
},
r.titleFactory ? r.titleFactory(a) : r.title,
/* @__PURE__ */ i.createElement("span", { className: W(e.pagingFilter, r.property) })
) : /* @__PURE__ */ i.createElement(l, { key: n, className: r.headerClassName, ...e.itemCellProps }, r.titleFactory ? r.titleFactory(a) : r.title);
}));
}
const D = c(k);
function H(e) {
const t = e.wrapperType ?? "tr", l = e.itemCellType ?? "td", { context: a } = e, { columns: r, item: d, itemCellProps: n } = e;
return /* @__PURE__ */ i.createElement(t, { ...e.wrapperProps }, r.map((s, o) => {
var f;
const m = s.property ?? o, y = s.property ? d[s.property] : void 0;
return s.cellFormatter ? s.cellFormatter({ key: m, value: y, item: d, column: s, context: a }) : /* @__PURE__ */ i.createElement(
l,
{
key: m,
className: s.cellClassName,
...n,
...(f = s.cellProps) == null ? void 0 : f.call(s, { value: y, item: d, column: s, context: a })
},
s.valueFormatter ? s.valueFormatter({ value: y, item: d, column: s, context: a }) : y
);
}));
}
const x = c(H), I = {
displayHeader: !0
};
function N(e) {
const t = e.wrapperType ?? "table", l = e.bodyWrapperType ?? "tbody";
return /* @__PURE__ */ i.createElement(t, { id: e.id, ...e.wrapperProps }, e.displayHeader && /* @__PURE__ */ i.createElement(
D,
{
columns: e.columns,
context: e.context,
pagingFilter: e.pagingFilter,
onColumnSort: e.onColumnSort,
wrapperType: e.headWrapperType,
wrapperProps: e.headWrapperProps,
itemCellType: e.headCellType,
itemCellProps: e.headCellProps
}
), /* @__PURE__ */ i.createElement(l, { ...e.bodyWrapperProps }, e.items.map((a) => /* @__PURE__ */ i.createElement(
x,
{
key: String(a[e.itemKey]),
item: a,
columns: e.columns,
context: e.context,
wrapperType: e.itemWrapperType,
wrapperProps: e.itemWrapperProps,
itemCellType: e.itemCellType,
itemCellProps: e.itemCellProps
}
))));
}
N.defaultProps = I;
const Q = c(N);
function L(e, t) {
const l = F(e, t);
return l ? l === E.Descending ? "sort-indicator desc" : "sort-indicator asc" : "sort-indicator";
}
function $(e) {
return /* @__PURE__ */ i.createElement("tr", { className: e.className }, e.columns.map((t, l) => {
const a = t.property ?? l;
return t.headerFormatter ? t.headerFormatter({ key: a, column: t, context: e.context }) : e.pagingFilter && t.sortable && t.property ? /* @__PURE__ */ i.createElement(
"th",
{
key: a,
className: t.headerClassName ? `sortable ${t.headerClassName}` : "sortable",
onClick: () => {
var r;
return void ((r = e.onColumnSort) == null ? void 0 : r.call(e, t));
}
},
t.titleFactory ? t.titleFactory(e.context) : t.title,
/* @__PURE__ */ i.createElement("span", { className: L(e.pagingFilter, t.property) })
) : /* @__PURE__ */ i.createElement("th", { key: a, className: t.headerClassName }, t.titleFactory ? t.titleFactory(e.context) : t.title);
}));
}
const u = c($);
function z({ item: e, columns: t, context: l, rowProps: a }) {
return /* @__PURE__ */ i.createElement("tr", { ...a == null ? void 0 : a(e, l) }, t.map((r, d) => {
var o;
const n = r.property ?? d, s = r.property ? e[r.property] : void 0;
return r.cellFormatter ? r.cellFormatter({ key: n, value: s, item: e, column: r, context: l }) : /* @__PURE__ */ i.createElement("td", { key: n, className: r.cellClassName, ...(o = r.cellProps) == null ? void 0 : o.call(r, { value: s, item: e, column: r, context: l }) }, r.valueFormatter ? r.valueFormatter({ value: s, item: e, column: r, context: l }) : s);
}));
}
const K = c(z), B = {
displayHeader: !0
};
function b(e) {
return /* @__PURE__ */ i.createElement("table", { id: e.id, className: e.className }, e.displayHeader && /* @__PURE__ */ i.createElement("thead", null, /* @__PURE__ */ i.createElement(
u,
{
columns: e.columns,
context: e.context,
pagingFilter: e.pagingFilter,
onColumnSort: e.onColumnSort,
className: e.headerRowClassName
}
)), /* @__PURE__ */ i.createElement("tbody", null, e.items.map((t) => /* @__PURE__ */ i.createElement(
K,
{
key: String(t[e.itemKey]),
item: t,
columns: e.columns,
context: e.context,
rowProps: e.rowProps
}
))));
}
b.defaultProps = B;
const V = c(b);
function j() {
return document.body.clientWidth || document.documentElement.clientWidth || window.innerWidth;
}
const q = {
widthBreakpoint: 576,
listModeClassName: "table-list-view"
};
function h({
widthBreakpoint: e,
listModeClassName: t,
onModeChanged: l,
...a
}) {
const [r, d] = v("table");
return w(() => {
const n = () => {
const s = j() < e ? "list" : "table";
s !== r && (l == null || l(s), d(s));
};
return n(), window.addEventListener("resize", n), () => {
window.removeEventListener("resize", n);
};
}), r === "list" ? /* @__PURE__ */ i.createElement(R, { ...a, className: g(a.className, t) }) : /* @__PURE__ */ i.createElement(V, { ...a });
}
h.defaultProps = q;
const U = c(h);
export {
R as DataList,
Q as DataRepeater,
V as DataTable,
U as ResponsiveTable
};
//# sourceMappingURL=index.es.js.map