@sio-group/ui-datatable 0.1.0

package/dist/index.js

@@ -0,0 +1,620 @@
+// src/components/DefaultSortIcon.tsx
+import { jsx } from "react/jsx-runtime";
+var DefaultSortIcon = ({
+  direction,
+  active
+}) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    style: { opacity: active ? 1 : 0.3, fontSize: "0.7em" },
+    "aria-hidden": "true",
+    children: direction === "asc" ? "\u25B2" : "\u25BC"
+  }
+);
+
+// src/components/DataTableHeader.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var DataTableHeader = ({
+  columns,
+  onSort,
+  sortValue,
+  hasActionMenu,
+  renderSortIcon
+}) => {
+  const handleSort = (column) => {
+    if (!onSort) return;
+    if (!sortValue || sortValue.name !== column.name) {
+      onSort({ name: column.name, direction: "asc" });
+    } else if (sortValue.direction === "asc") {
+      onSort({ ...sortValue, direction: "desc" });
+    } else {
+      onSort(null);
+    }
+  };
+  return /* @__PURE__ */ jsx2("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+    hasActionMenu && /* @__PURE__ */ jsx2("th", { "aria-label": "Actions" }),
+    columns.map((column) => /* @__PURE__ */ jsx2(
+      "th",
+      {
+        onClick: () => column.sort && handleSort(column),
+        className: [column.className, column.sort ? "sort" : null].filter(Boolean).join(" "),
+        style: column.style,
+        children: /* @__PURE__ */ jsxs("span", { children: [
+          /* @__PURE__ */ jsx2("span", { className: "label", children: column.label }),
+          column.sort && /* @__PURE__ */ jsx2("span", { className: "icons", children: renderSortIcon ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            renderSortIcon("asc", sortValue?.name === column.name && sortValue?.direction === "asc"),
+            renderSortIcon("desc", sortValue?.name === column.name && sortValue?.direction === "desc")
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx2(
+              DefaultSortIcon,
+              {
+                direction: "asc",
+                active: sortValue?.name === column.name && sortValue?.direction === "asc"
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              DefaultSortIcon,
+              {
+                direction: "desc",
+                active: sortValue?.name === column.name && sortValue?.direction === "desc"
+              }
+            )
+          ] }) })
+        ] })
+      },
+      String(column.name)
+    ))
+  ] }) });
+};
+
+// src/hooks/useDataTable.ts
+import { useMemo, useState } from "react";
+var useDataTable = ({
+  data,
+  pagination,
+  onSearch,
+  onSort,
+  onPaginate,
+  searchValue,
+  sortValue,
+  clientPageSize,
+  clientSearchKeys
+}) => {
+  const isControlled = pagination !== void 0;
+  const showPagination = isControlled ? !!onPaginate : !!clientPageSize;
+  const showSearch = isControlled ? !!onSearch : !!clientSearchKeys?.length;
+  const [clientSearch, setClientSearch] = useState("");
+  const [clientSort, setClientSort] = useState(null);
+  const [clientPage, setClientPage] = useState(1);
+  const handleSearch = (query) => {
+    if (isControlled) {
+      onSearch?.(query);
+    } else {
+      setClientSearch(query);
+      setClientPage(1);
+    }
+  };
+  const handleSort = (sort) => {
+    if (isControlled) {
+      onSort?.(sort);
+    } else {
+      setClientSort(sort);
+    }
+  };
+  const handlePaginate = (page) => {
+    if (isControlled) {
+      onPaginate?.(page);
+    } else {
+      setClientPage(page);
+    }
+  };
+  const processedData = useMemo(() => {
+    if (isControlled) return data;
+    let result = [...data];
+    if (clientSearch && clientSearchKeys?.length) {
+      result = result.filter(
+        (item) => clientSearchKeys.some(
+          (key) => String(item[key]).toLowerCase().includes(clientSearch.toLowerCase())
+        )
+      );
+    }
+    if (clientSort) {
+      result.sort((a, b) => {
+        const aVal = String(a[clientSort.name]);
+        const bVal = String(b[clientSort.name]);
+        return clientSort.direction === "asc" ? aVal.localeCompare(bVal) : bVal.localeCompare(aVal);
+      });
+    }
+    return result;
+  }, [data, clientSearch, clientSort, isControlled]);
+  const paginationMeta = useMemo(() => {
+    if (isControlled || !clientPageSize) return pagination;
+    const pageSize = clientPageSize;
+    const total = processedData.length;
+    const pageCount = Math.ceil(total / pageSize);
+    const from = (clientPage - 1) * pageSize;
+    return {
+      currentPage: clientPage,
+      pageCount,
+      total,
+      from: from + 1,
+      to: Math.min(from + pageSize, total)
+    };
+  }, [isControlled, pagination, processedData, clientPage, clientPageSize]);
+  const pagedData = useMemo(() => {
+    if (isControlled || !clientPageSize) return data;
+    const pageSize = clientPageSize;
+    const from = (clientPage - 1) * pageSize;
+    return processedData.slice(from, from + pageSize);
+  }, [isControlled, processedData, clientPage, clientPageSize]);
+  return {
+    pagedData,
+    paginationMeta,
+    showPagination,
+    showSearch,
+    handleSearch,
+    handleSort,
+    handlePaginate,
+    currentSort: isControlled ? sortValue : clientSort,
+    currentSearch: isControlled ? searchValue : clientSearch
+  };
+};
+
+// src/components/DataTable.tsx
+import { Pagination } from "@sio-group/ui-pagination";
+
+// src/components/ActionCell.tsx
+import { Button } from "@sio-group/ui-core";
+import { useEffect, useRef, useState as useState2 } from "react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var ActionCell = ({
+  actionMenu,
+  item,
+  renderMenuIcon
+}) => {
+  const dropdownRef = useRef(null);
+  const triggerRef = useRef(null);
+  const [isOpen, setIsOpen] = useState2(false);
+  const positionDropdown = () => {
+    if (dropdownRef.current && triggerRef.current) {
+      const rect = triggerRef.current.getBoundingClientRect();
+      dropdownRef.current.style.left = `${rect.left}px`;
+      dropdownRef.current.style.top = `${rect.top}px`;
+    }
+  };
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleOutside = (e) => {
+      if (dropdownRef.current?.contains(e.target)) return;
+      setIsOpen(false);
+    };
+    document.addEventListener("mousedown", handleOutside, false);
+    document.addEventListener("wheel", handleOutside, false);
+    return () => {
+      document.removeEventListener("mousedown", handleOutside, false);
+      document.removeEventListener("wheel", handleOutside, false);
+    };
+  }, [isOpen]);
+  const renderButton = ({ label, name, icon, onClick }, showLabel) => /* @__PURE__ */ jsxs2(
+    Button,
+    {
+      onClick: () => onClick(item),
+      variant: "secondary",
+      className: "",
+      ariaLabel: label,
+      children: [
+        icon && /* @__PURE__ */ jsx3("span", { children: icon }),
+        showLabel && /* @__PURE__ */ jsx3("span", { children: label })
+      ]
+    },
+    name
+  );
+  return /* @__PURE__ */ jsx3("td", { className: "action-cel", children: actionMenu?.type === "inline" ? /* @__PURE__ */ jsx3("div", { className: "action-group", children: actionMenu.actions.map((action) => renderButton(action, false)) }) : /* @__PURE__ */ jsxs2(
+    "section",
+    {
+      className: "action-dropdown",
+      ref: triggerRef,
+      children: [
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            className: "btn--link btn--default",
+            "aria-label": "Acties",
+            "aria-expanded": isOpen,
+            "aria-haspopup": "menu",
+            onClick: () => {
+              setIsOpen(!isOpen);
+              positionDropdown();
+            },
+            children: renderMenuIcon ? renderMenuIcon() : "\u22EE"
+          }
+        ),
+        isOpen && /* @__PURE__ */ jsx3(
+          "div",
+          {
+            className: "action-dropdown__menu",
+            ref: dropdownRef,
+            role: "menu",
+            children: actionMenu?.actions.map((action) => renderButton(action, true))
+          }
+        )
+      ]
+    }
+  ) });
+};
+
+// src/components/cell-types/EmptyCell.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var EmptyCell = () => /* @__PURE__ */ jsx4("span", { className: "empty", "aria-label": "empty" });
+
+// src/components/cell-types/BooleanCell.tsx
+import { Button as Button2 } from "@sio-group/ui-core";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var BooleanCell = ({
+  column,
+  value,
+  item,
+  updateData
+}) => /* @__PURE__ */ jsx5(
+  Button2,
+  {
+    color: value ? "success" : "error",
+    variant: column.format === "button" ? "primary" : "link",
+    onClick: () => updateData?.(item.id, {
+      [column.name]: !value
+    }),
+    ariaLabel: String(column.name),
+    children: value ? "\u2713" : "\u2717"
+  }
+);
+
+// src/utils/render-value.tsx
+import { Link, Pill } from "@sio-group/ui-core";
+
+// src/utils/render-object.tsx
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+var renderObject = (obj) => {
+  const entries = Object.entries(obj);
+  if (!entries.length) return /* @__PURE__ */ jsx6(EmptyCell, {});
+  return /* @__PURE__ */ jsx6(Fragment2, { children: entries.map(([key, val]) => /* @__PURE__ */ jsxs3("div", { children: [
+    /* @__PURE__ */ jsxs3("span", { children: [
+      key,
+      ": "
+    ] }),
+    /* @__PURE__ */ jsx6("span", { children: String(val) })
+  ] }, key)) });
+};
+
+// src/components/cell-types/DateCell.tsx
+var DateCell = ({
+  column,
+  value
+}) => new Date(value).toLocaleString("nl-BE", {
+  timeZone: "Europe/Brussels",
+  year: "numeric",
+  month: "2-digit",
+  day: "2-digit",
+  ...column.format === "datetime" ? {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit"
+  } : {},
+  hour12: false
+}).replace(/\//g, "-");
+
+// src/utils/is-pill-value.ts
+var isPillValue = (val) => typeof val === "object" && val !== null && "status" in val && "label" in val;
+
+// src/components/cell-types/InlineInputCell.tsx
+import { useEffect as useEffect2, useState as useState3 } from "react";
+import { Button as Button3 } from "@sio-group/ui-core";
+import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+var InlineInputCell = ({
+  column,
+  formField,
+  item,
+  value,
+  updateData
+}) => {
+  const [showEdit, setShowEdit] = useState3(false);
+  const [fieldValue, setFieldValue] = useState3(String(value));
+  const [isValid, setIsValid] = useState3(true);
+  const handleCancel = () => {
+    setShowEdit(false);
+    setFieldValue(String(value));
+  };
+  const handleSave = async () => {
+    updateData?.(item.id, { [formField.name]: fieldValue });
+    setFieldValue(String(value));
+    setShowEdit(false);
+  };
+  useEffect2(() => {
+    let bool = true;
+    if (formField.required) {
+      bool = fieldValue !== null && fieldValue !== "";
+    }
+    setIsValid(bool);
+  }, [fieldValue]);
+  useEffect2(() => {
+    const handleEsc = (e) => {
+      if (e.key === "Escape") setShowEdit(false);
+    };
+    document.addEventListener("keydown", handleEsc);
+    return () => document.removeEventListener("keydown", handleEsc);
+  }, [setShowEdit]);
+  return /* @__PURE__ */ jsx7(Fragment3, { children: showEdit ? /* @__PURE__ */ jsxs4("form", { noValidate: true, children: [
+    formField.type === "select" || formField.type === "radio" ? /* @__PURE__ */ jsx7(
+      "select",
+      {
+        id: formField.name,
+        name: formField.name,
+        value: fieldValue,
+        onChange: (e) => setFieldValue(e.target.value),
+        autoFocus: true,
+        children: formField?.options?.map((option) => {
+          const val = typeof option === "string" ? option : option.value;
+          const label = typeof option === "string" ? option : option.label;
+          return /* @__PURE__ */ jsx7("option", { value: val, children: label }, val);
+        })
+      }
+    ) : /* @__PURE__ */ jsx7(
+      "input",
+      {
+        type: "text",
+        id: formField.name,
+        name: formField.name,
+        value: fieldValue,
+        onChange: (e) => setFieldValue(e.target.value),
+        autoFocus: true
+      }
+    ),
+    /* @__PURE__ */ jsxs4("div", { className: "btn-group", children: [
+      /* @__PURE__ */ jsx7(
+        Button3,
+        {
+          type: "submit",
+          variant: "link",
+          color: "success",
+          onClick: handleSave,
+          ariaLabel: "inline edit field",
+          disabled: !isValid,
+          label: "\u2713"
+        }
+      ),
+      /* @__PURE__ */ jsx7(
+        Button3,
+        {
+          type: "button",
+          variant: "link",
+          color: "error",
+          onClick: handleCancel,
+          ariaLabel: "inline edit field",
+          label: "\u2717"
+        }
+      )
+    ] })
+  ] }) : /* @__PURE__ */ jsxs4(Fragment3, { children: [
+    value,
+    /* @__PURE__ */ jsx7(
+      Button3,
+      {
+        variant: "link",
+        onClick: () => setShowEdit(true),
+        ariaLabel: "inline edit field",
+        children: /* @__PURE__ */ jsxs4(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "16",
+            height: "16",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [
+              /* @__PURE__ */ jsx7("path", { d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }),
+              /* @__PURE__ */ jsx7("path", { d: "M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" })
+            ]
+          }
+        )
+      }
+    )
+  ] }) });
+};
+
+// src/utils/render-value.tsx
+import { Fragment as Fragment4, jsx as jsx8 } from "react/jsx-runtime";
+var renderValue = ({ value, column, item, formFields, updateData }) => {
+  const formatKey = typeof column.format === "object" ? column.format.key : void 0;
+  const formField = formFields?.find((f) => f.name === column.name);
+  if (formField) {
+    return /* @__PURE__ */ jsx8(
+      InlineInputCell,
+      {
+        column,
+        value,
+        item,
+        formField,
+        updateData
+      }
+    );
+  }
+  if (value === null || value === void 0) return /* @__PURE__ */ jsx8(EmptyCell, {});
+  if (Array.isArray(value) && !value.length) return /* @__PURE__ */ jsx8(EmptyCell, {});
+  if (column.format === "boolean" || column.format === "button") {
+    return /* @__PURE__ */ jsx8(
+      BooleanCell,
+      {
+        column,
+        value,
+        item,
+        updateData
+      }
+    );
+  }
+  if (column.format === "datetime" || column.format === "date") {
+    return /* @__PURE__ */ jsx8(
+      DateCell,
+      {
+        column,
+        value
+      }
+    );
+  }
+  if (column.format === "pill" && isPillValue(value)) {
+    return /* @__PURE__ */ jsx8(Pill, { status: value.status, label: value.label });
+  }
+  if (column.format === "email") {
+    return /* @__PURE__ */ jsx8(Link, { to: `mailto:${value}`, children: String(value) });
+  }
+  if (Array.isArray(value)) {
+    return /* @__PURE__ */ jsx8(Fragment4, { children: value.map((x, i) => /* @__PURE__ */ jsx8("div", { children: typeof x === "object" && x !== null ? formatKey ? String(x[formatKey] ?? "") : renderObject(x) : String(x) }, i)) });
+  }
+  if (typeof value === "object") {
+    return formatKey ? String(value[formatKey] ?? "") : renderObject(value);
+  }
+  return String(value);
+};
+
+// src/components/TableCell.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var TableCell = ({
+  column,
+  item,
+  formFields,
+  updateData
+}) => {
+  const cellValue = item[column.name];
+  return /* @__PURE__ */ jsx9("td", { className: column.className ?? "", children: renderValue({ value: cellValue, column, item, formFields, updateData }) });
+};
+
+// src/components/DataTableBody.tsx
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+var DataTableBody = ({
+  item,
+  columns,
+  actionMenu,
+  formFields,
+  updateData,
+  renderMenuIcon
+}) => {
+  return /* @__PURE__ */ jsxs5("tr", { children: [
+    actionMenu && /* @__PURE__ */ jsx10(
+      ActionCell,
+      {
+        actionMenu,
+        item,
+        renderMenuIcon
+      }
+    ),
+    columns.map((column) => /* @__PURE__ */ jsx10(
+      TableCell,
+      {
+        column,
+        item,
+        formFields,
+        updateData
+      },
+      `${String(column.name)}-${item.id}`
+    ))
+  ] });
+};
+
+// src/components/DataTableControls.tsx
+import { useState as useState4 } from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var DataTableControls = ({
+  currentSearch,
+  handleSearch,
+  entity
+}) => {
+  const [focused, setFocused] = useState4(false);
+  return /* @__PURE__ */ jsx11("div", { className: "datatable__controls", children: /* @__PURE__ */ jsx11("div", { className: `form-field${currentSearch ? " form-field--has-value" : ""}${focused ? " form-field--focused" : ""}`, children: /* @__PURE__ */ jsx11("div", { className: "form-field__control", children: /* @__PURE__ */ jsx11(
+    "input",
+    {
+      className: "search",
+      type: "search",
+      value: currentSearch ?? "",
+      onChange: (e) => handleSearch(e.target.value),
+      placeholder: `Zoeken in ${entity?.label.toLowerCase() ?? "tabel"}`,
+      "aria-label": `Zoeken in ${entity?.label.toLowerCase() ?? "tabel"}`,
+      onFocus: () => setFocused(true),
+      onBlur: () => setFocused(false)
+    }
+  ) }) }) });
+};
+
+// src/components/DataTable.tsx
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+var DataTable = ({
+  columns,
+  entity,
+  actionMenu,
+  renderMenuIcon,
+  onUpdate,
+  formFields,
+  renderSortIcon,
+  emptyMessage = "Nog geen data",
+  striped = false,
+  hover = false,
+  style,
+  ...props
+}) => {
+  const {
+    pagedData,
+    paginationMeta,
+    showPagination,
+    showSearch,
+    handleSearch,
+    handleSort,
+    handlePaginate,
+    currentSort,
+    currentSearch
+  } = useDataTable(props);
+  return /* @__PURE__ */ jsxs6("div", { className: "datatable", style, children: [
+    showSearch && /* @__PURE__ */ jsx12(
+      DataTableControls,
+      {
+        currentSearch,
+        handleSearch,
+        entity
+      }
+    ),
+    /* @__PURE__ */ jsx12("div", { className: "datatable__wrapper", children: /* @__PURE__ */ jsxs6("table", { className: [striped && "striped", hover && "hover"].filter(Boolean).join(" "), children: [
+      /* @__PURE__ */ jsx12(
+        DataTableHeader,
+        {
+          columns,
+          onSort: handleSort,
+          sortValue: currentSort,
+          hasActionMenu: !!actionMenu?.actions?.length,
+          renderSortIcon
+        }
+      ),
+      /* @__PURE__ */ jsx12("tbody", { children: pagedData.length ? pagedData.map((item) => /* @__PURE__ */ jsx12(
+        DataTableBody,
+        {
+          item,
+          columns,
+          actionMenu,
+          formFields,
+          updateData: onUpdate,
+          renderMenuIcon
+        },
+        item.id
+      )) : /* @__PURE__ */ jsx12("tr", { children: /* @__PURE__ */ jsx12("td", { colSpan: columns.length + (actionMenu?.actions?.length ? 1 : 0), children: /* @__PURE__ */ jsx12("div", { className: "empty-state", children: emptyMessage }) }) }) })
+    ] }) }),
+    showPagination && paginationMeta && /* @__PURE__ */ jsx12(
+      Pagination,
+      {
+        ...paginationMeta,
+        onPaginate: handlePaginate
+      }
+    )
+  ] });
+};
+export {
+  DataTable
+};