@cfx-dev/ui-components 2.0.3 → 2.0.4

package/dist/components/Table/Table.js

@@ -1,60 +1,79 @@
-import { jsx as e, jsxs as n } from "react/jsx-runtime";
-import o, { useState as d } from "react";
-import { G as R } from "../../iconBase-C6DV9qqL.js";
-import '../../assets/Table.css';function x(r) {
-  return R({ tag: "svg", attr: { viewBox: "0 0 320 512" }, child: [{ tag: "path", attr: { d: "M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41z" } }] })(r);
-}
-function L(r) {
-  return R({ tag: "svg", attr: { viewBox: "0 0 320 512" }, child: [{ tag: "path", attr: { d: "M279 224H41c-21.4 0-32.1-25.9-17-41L143 64c9.4-9.4 24.6-9.4 33.9 0l119 119c15.2 15.1 4.5 41-16.9 41z" } }] })(r);
-}
-const z = "_selectedRow_1jg2j_23", w = {
-  "table-responsive": "_table-responsive_1jg2j_1",
-  selectedRow: z
+import { jsx as o, jsxs as i } from "react/jsx-runtime";
+import f, { useState as m } from "react";
+import O from "../Checkbox/Checkbox.js";
+import j from "../IconButton/IconButton.js";
+import '../../assets/Table.css';const x = "_pointer_19b0f_18", A = "_selectedRow_19b0f_22", E = "_headerContent_19b0f_40", z = "_sortButton_19b0f_47", l = {
+  "table-responsive": "_table-responsive_19b0f_1",
+  pointer: x,
+  selectedRow: A,
+  headerContent: E,
+  sortButton: z
 };
-function G({
-  headers: r = [],
-  data: _ = [],
-  includeRadio: p = !1,
-  onSelectChange: l,
-  dataContainer: u,
-  useSort: h = !1,
-  sortBy: j,
-  sortOrder: y = "asc",
-  onSortChange: i
+function F({
+  headers: u = [],
+  data: B = [],
+  includeRadio: r = !1,
+  onSelectChange: c,
+  dataContainer: b,
+  useSort: n = !1,
+  sortBy: k,
+  sortOrder: v = "asc",
+  onSortChange: d
 }) {
-  const [m, f] = d(null), [b, g] = d(j), [v, B] = d(y), k = (t) => {
-    const c = b === t && v === "asc" ? "desc" : "asc";
-    g(t), B(c), i == null || i(t, c);
-  }, O = o.useCallback((t) => {
-    f(parseInt(t.target.value, 10)), l == null || l(parseInt(t.target.value, 10));
-  }, [f, l]);
-  return /* @__PURE__ */ e("div", { className: w.table, children: /* @__PURE__ */ n("table", { children: [
-    /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ n("tr", { children: [
-      p && /* @__PURE__ */ e("th", { children: "Select Row" }),
-      r.map((t, s) => /* @__PURE__ */ n("th", { onClick: () => h && k(t), children: [
-        t,
-        h && b === t && /* @__PURE__ */ e("span", { children: v === "asc" ? /* @__PURE__ */ e(L, {}) : /* @__PURE__ */ e(x, {}) })
-      ] }, `header-${s}`))
+  const [p, y] = m(null), [R, w] = m(k), [$, N] = m(v), _ = (e) => {
+    const t = R === e && $ === "asc" ? "desc" : "asc";
+    w(e), N(t), d == null || d(e, t);
+  }, h = f.useCallback(
+    (e, s) => {
+      if (typeof e == "boolean") {
+        const t = e ? s : null;
+        y(t), t !== null && (c == null || c(t));
+      }
+    },
+    [c]
+  );
+  return /* @__PURE__ */ o("div", { className: l.tableResponsive, children: /* @__PURE__ */ i("table", { children: [
+    /* @__PURE__ */ o("thead", { children: /* @__PURE__ */ i("tr", { children: [
+      r && /* @__PURE__ */ o("th", { "aria-label": "Select Row" }),
+      u.map((e, s) => /* @__PURE__ */ o(
+        "th",
+        {
+          className: n ? l.pointer : "",
+          onClick: () => n && _(e),
+          children: /* @__PURE__ */ i("div", { className: l.headerContent, children: [
+            e,
+            n && /* @__PURE__ */ o(
+              j,
+              {
+                className: l.sortButton,
+                color: "secondary",
+                name: "Sort",
+                onClick: n ? () => _(e) : void 0
+              }
+            )
+          ] })
+        },
+        `header-${s}`
+      ))
     ] }) }),
-    /* @__PURE__ */ e("tbody", { children: _.map((t, s) => /* @__PURE__ */ n(
+    /* @__PURE__ */ o("tbody", { children: B.map((e, s) => /* @__PURE__ */ i(
       "tr",
       {
-        className: m === s ? w.selectedRow : "",
+        className: `${p === s ? l.selectedRow : ""} ${r ? l.pointer : ""}`,
+        onClick: r ? () => h(!0, s) : void 0,
         children: [
-          p && /* @__PURE__ */ e("td", { children: /* @__PURE__ */ e(
-            "input",
+          r && /* @__PURE__ */ o("td", { children: /* @__PURE__ */ o(
+            O,
             {
-              type: "radio",
-              name: "tableRowSelect",
-              value: s,
-              checked: m === s,
-              onChange: O,
-              "aria-label": `${s}`
+              size: "small",
+              onCheckedChange: (t) => h(t, s),
+              "aria-label": `${s}`,
+              checked: p === s
             }
           ) }),
-          t.map((c, $) => {
+          e.map((t, C) => {
             let a;
-            return o.isValidElement(c) ? a = c : u ? a = o.createElement(u, { item: c }) : a = String(c), /* @__PURE__ */ e("td", { children: a }, `item-${$}`);
+            return f.isValidElement(t) ? a = t : b ? a = f.createElement(b, { item: t }) : a = String(t), /* @__PURE__ */ o("td", { children: a }, `item-${C}`);
           })
         ]
       },
@@ -63,5 +82,5 @@ function G({
   ] }) });
 }
 export {
-  G as Table
+  F as Table
 };

package/dist/components/Table/TableShowcase.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+
+declare function TableShowcase(): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof TableShowcase>;
+export default _default;

package/dist/components/Table/TableShowcase.js

@@ -0,0 +1,55 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import d from "react";
+import { Badge as l } from "../Badge/Badge.js";
+import { Flex as a } from "../Layout/Flex/Flex.js";
+import "../Interactive/Interactive.js";
+import { Scrollable as c } from "../Layout/Scrollable/Scrollable.js";
+import "../Layout/Scrollable/VirtualScrollable.js";
+import { Text as r } from "../Text/Text.js";
+import { Table as o } from "./Table.js";
+const i = [
+  [
+    "Cell 1",
+    "Cell 2",
+    "Cell 3",
+    new Date(2023, 0, 1).toLocaleDateString(),
+    /* @__PURE__ */ e(l, { color: "error", children: "Error" }, "1")
+  ],
+  ["Cell 4", "Cell 5", "Cell 6", new Date(2023, 1, 1).toLocaleDateString(), /* @__PURE__ */ e(l, { children: "Badge" }, "2")],
+  ["Cell 7", "Cell 8", "Cell 9", new Date(2023, 2, 1).toLocaleDateString(), /* @__PURE__ */ e(l, { children: "Badge" }, "3")],
+  ["Cell 4", "Cell 5", "Cell 6", new Date(2023, 1, 1).toLocaleDateString(), /* @__PURE__ */ e(l, { children: "Badge" }, "2")],
+  ["Cell 7", "Cell 8", "Cell 9", new Date(2023, 2, 1).toLocaleDateString(), /* @__PURE__ */ e(l, { children: "Badge" }, "3")],
+  ["Cell 4", "Cell 5", "Cell 6", new Date(2023, 1, 1).toLocaleDateString(), /* @__PURE__ */ e(l, { children: "Badge" }, "2")],
+  ["Cell 7", "Cell 8", "Cell 9", new Date(2023, 2, 1).toLocaleDateString(), /* @__PURE__ */ e(l, { children: "Badge" }, "3")],
+  ["Cell 4", "Cell 5", "Cell 6", new Date(2023, 1, 1).toLocaleDateString(), /* @__PURE__ */ e(l, { children: "Badge" }, "2")],
+  ["Cell 7", "Cell 8", "Cell 9", new Date(2023, 2, 1).toLocaleDateString(), /* @__PURE__ */ e(l, { children: "Badge" }, "3")],
+  ["Cell 4", "Cell 5", "Cell 6", new Date(2023, 1, 1).toLocaleDateString(), /* @__PURE__ */ e(l, { children: "Badge" }, "2")],
+  ["Cell 7", "Cell 8", "Cell 9", new Date(2023, 2, 1).toLocaleDateString(), /* @__PURE__ */ e(l, { children: "Badge" }, "3")],
+  ["Cell 4", "Cell 5", "Cell 6", new Date(2023, 1, 1).toLocaleDateString(), /* @__PURE__ */ e(l, { children: "Badge" }, "2")],
+  ["Cell 7", "Cell 8", "Cell 9", new Date(2023, 2, 1).toLocaleDateString(), /* @__PURE__ */ e(l, { children: "Badge" }, "3")]
+], n = ["Header 1", "Header 2", "Header 3", "Date", "Item"];
+function C() {
+  return /* @__PURE__ */ t(a, { gap: "large", vertical: !0, children: [
+    /* @__PURE__ */ t(a, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(r, { children: "Table" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(o, { includeRadio: !0, headers: n, data: i }) })
+    ] }),
+    /* @__PURE__ */ t(a, { fullWidth: !0, vertical: !0, children: [
+      /* @__PURE__ */ e(r, { children: "Table with scroll" }),
+      /* @__PURE__ */ e(
+        "div",
+        {
+          style: {
+            height: "400px",
+            overflow: "hidden"
+          },
+          children: /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(o, { includeRadio: !0, headers: n, data: i }) })
+        }
+      )
+    ] })
+  ] });
+}
+const B = d.memo(C);
+export {
+  B as default
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cfx-dev/ui-components",
   "private": false,
-  "version": "2.0.3",
+  "version": "2.0.4",
   "type": "module",
   "license": "MIT",
   "main": "dist/main.js",

package/dist/iconBase-C6DV9qqL.js

@@ -1,60 +0,0 @@
-import i from "react";
-var s = {
-  color: void 0,
-  size: void 0,
-  className: void 0,
-  style: void 0,
-  attr: void 0
-}, f = i.createContext && i.createContext(s), l = function() {
-  return l = Object.assign || function(e) {
-    for (var n, t = 1, r = arguments.length; t < r; t++) {
-      n = arguments[t];
-      for (var a in n) Object.prototype.hasOwnProperty.call(n, a) && (e[a] = n[a]);
-    }
-    return e;
-  }, l.apply(this, arguments);
-}, y = function(e, n) {
-  var t = {};
-  for (var r in e) Object.prototype.hasOwnProperty.call(e, r) && n.indexOf(r) < 0 && (t[r] = e[r]);
-  if (e != null && typeof Object.getOwnPropertySymbols == "function") for (var a = 0, r = Object.getOwnPropertySymbols(e); a < r.length; a++)
-    n.indexOf(r[a]) < 0 && Object.prototype.propertyIsEnumerable.call(e, r[a]) && (t[r[a]] = e[r[a]]);
-  return t;
-};
-function m(e) {
-  return e && e.map(function(n, t) {
-    return i.createElement(n.tag, l({
-      key: t
-    }, n.attr), m(n.child));
-  });
-}
-function h(e) {
-  return function(n) {
-    return i.createElement(g, l({
-      attr: l({}, e.attr)
-    }, n), m(e.child));
-  };
-}
-function g(e) {
-  var n = function(t) {
-    var r = e.attr, a = e.size, c = e.title, d = y(e, ["attr", "size", "title"]), o = a || t.size || "1em", u;
-    return t.className && (u = t.className), e.className && (u = (u ? u + " " : "") + e.className), i.createElement("svg", l({
-      stroke: "currentColor",
-      fill: "currentColor",
-      strokeWidth: "0"
-    }, t.attr, r, d, {
-      className: u,
-      style: l(l({
-        color: e.color || t.color
-      }, t.style), e.style),
-      height: o,
-      width: o,
-      xmlns: "http://www.w3.org/2000/svg"
-    }), c && i.createElement("title", null, c), e.children);
-  };
-  return f !== void 0 ? i.createElement(f.Consumer, null, function(t) {
-    return n(t);
-  }) : n(s);
-}
-export {
-  h as G
-};