@dmsi/wedgekit-react 0.0.2

package/dist/components/MobileDataGrid.js

@@ -0,0 +1,125 @@
+import {
+  Theme
+} from "../chunk-I2UVVKQI.js";
+import {
+  Stack
+} from "../chunk-U42SKNR6.js";
+import {
+  Heading3
+} from "../chunk-TYI74BSP.js";
+import {
+  Button
+} from "../chunk-KENSVWOY.js";
+import {
+  Paragraph
+} from "../chunk-K3IKUSZW.js";
+import {
+  Icon
+} from "../chunk-IGQVA7SC.js";
+import "../chunk-KX3O6GJ6.js";
+import "../chunk-ORMEWXMH.js";
+
+// src/components/MobileDataGrid.tsx
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+function MobileDataGrid({
+  columns,
+  data,
+  header,
+  getId,
+  renderLink,
+  renderChevron
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(
+        "rounded",
+        "overflow-hidden",
+        "divide-y divide-border-primary-normal",
+        "border border-border-primary-normal",
+        "overflow-y-scroll scrollbar-thin"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(MobileDataGridHeader, { header }),
+        data.map((item) => /* @__PURE__ */ jsx(
+          MobileDataGridCard,
+          {
+            data: item,
+            columns,
+            renderLink,
+            renderChevron
+          },
+          getId(item)
+        ))
+      ]
+    }
+  );
+}
+function MobileDataGridHeader({ header }) {
+  return /* @__PURE__ */ jsx("div", { className: "sticky top-0", children: /* @__PURE__ */ jsx(Theme, { theme: "brand", children: /* @__PURE__ */ jsx(
+    Stack,
+    {
+      horizontal: true,
+      items: "start",
+      justify: "center",
+      backgroundColor: "background-primary-normal",
+      padding: true,
+      sizing: "component",
+      children: /* @__PURE__ */ jsx(Heading3, { as: "span", color: "text-primary-normal", children: header })
+    }
+  ) }) });
+}
+function MobileDataGridCard({
+  data,
+  columns,
+  renderLink,
+  renderChevron
+}) {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(Stack, { sizing: "component", padding: true, children: [
+      /* @__PURE__ */ jsxs(Stack, { horizontal: true, horizontalMobile: true, items: "center", justify: "between", children: [
+        renderLink && renderLink(data),
+        /* @__PURE__ */ jsxs(Stack, { horizontal: true, horizontalMobile: true, items: "center", justify: "end", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              iconOnly: true,
+              variant: "tertiary",
+              onClick: () => console.log("Edit", data.id),
+              leftIcon: /* @__PURE__ */ jsx(Icon, { name: "docs" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              iconOnly: true,
+              variant: "tertiary",
+              onClick: () => console.log("Edit", data.id),
+              leftIcon: /* @__PURE__ */ jsx(Icon, { name: "swap_vert" })
+            }
+          )
+        ] })
+      ] }),
+      columns.filter((x) => x.show).map((column) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "mb-2 grid grid-cols-2",
+          children: [
+            /* @__PURE__ */ jsxs(Paragraph, { color: "text-secondary-normal", className: "text-left", children: [
+              column.header,
+              ":"
+            ] }),
+            " ",
+            column.cell ? column.cell({ row: data }) : String(data[column.accessorKey])
+          ]
+        },
+        String(column.accessorKey)
+      ))
+    ] }),
+    renderChevron && /* @__PURE__ */ jsx(Stack, { items: "center", justify: "center", horizontal: true, horizontalMobile: true, children: renderChevron(data) })
+  ] });
+}
+export {
+  MobileDataGrid
+};