@codex-storage/marketplace-ui-components
Version:
Marketplace UI components for Codex decentralized storage network.
81 lines (80 loc) • 3.08 kB
JavaScript
import { jsxs as d, jsx as e } from "react/jsx-runtime";
import * as m from "react";
import { useState as w, useEffect as b, createElement as S, Fragment as f } from "react";
import { classnames as E } from "../utils/classnames.js";
import { attributes as x } from "../utils/attributes.js";
import '../../assets/Table.css';const y = (t) => /* @__PURE__ */ m.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 20, height: 10, fill: "none", ...t }, /* @__PURE__ */ m.createElement("path", { fill: "#969696", d: "M14.17 7.92 10 3.75 5.83 7.92zm0 4.16L10 16.25l-4.17-4.17z" })), z = (t) => /* @__PURE__ */ m.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 20, height: 10, fill: "none", ...t }, /* @__PURE__ */ m.createElement("path", { fill: "#969696", d: "M14.17-2.08 10-6.25 5.83-2.08zm0 4.16L10 6.25 5.83 2.08z" })), g = (t) => t === "desc" ? "asc" : "desc";
function k({
headers: t,
rows: c,
defaultSortIndex: l = -1,
className: h = ""
}) {
const [a, i] = w([
l,
"desc"
]);
b(() => {
i([l, "desc"]);
}, [l]);
const u = (n) => {
const [s, o] = a;
if (n !== s) {
i([n, "desc"]);
return;
}
const r = g(o);
i(r ? [n, r] : [-1, null]);
};
return /* @__PURE__ */ d(
"div",
{
className: E(
["table"],
[h],
["table--empty", !!c.length]
),
children: [
/* @__PURE__ */ d("table", { children: [
/* @__PURE__ */ e("thead", { children: /* @__PURE__ */ e("tr", { children: t.map((n, s) => {
const [o, r] = Array.isArray(n) ? n : [n], p = s === a[0] ? a[1] : null, v = g(p);
return /* @__PURE__ */ S(
"th",
{
...x(
r ? {
role: "button",
"aria-sort": p === "asc" ? "ascending" : p == null ? "" : "descending"
} : {}
),
key: o,
onClick: () => {
u(s), r == null || r(v);
}
},
/* @__PURE__ */ d("div", { children: [
/* @__PURE__ */ e("span", { children: o }),
r && /* @__PURE__ */ d("span", { className: "sort-icon", children: [
/* @__PURE__ */ e(y, {}),
/* @__PURE__ */ e(z, {})
] })
] })
);
}) }) }),
/* @__PURE__ */ e("tbody", { children: c.map((n, s) => /* @__PURE__ */ e(f, { children: n }, s)) })
] }),
!c.length && /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("p", { children: "No data available." }) })
]
}
);
}
const F = ({ children: t, className: c = "", ...l }) => /* @__PURE__ */ e("td", { className: c, ...l, children: t });
function L({ cells: t, className: c = "", ...l }) {
return /* @__PURE__ */ e("tr", { ...l, className: c, children: t.map((h, a) => /* @__PURE__ */ e(f, { children: h }, a)) });
}
export {
F as Cell,
L as Row,
k as Table
};
//# sourceMappingURL=Table.js.map