@stokr/components-library 3.0.16 → 3.0.17

package/dist/components/AdminDashboard/Table/ReactTable.js

@@ -0,0 +1,266 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+import React__default, { useId, useState, useCallback } from "react";
+import { useTable, useExpanded, usePagination } from "react-table";
+import stdin_default$1 from "../../Pagination/PaginationControls.js";
+import { Styles, TableWrap, StyledReactTable } from "./Table.styles.js";
+const INTERACTIVE_ELEMENTS = ["button", "a", "input", "select", "textarea", "label"];
+const isInteractiveElement = (element) => {
+  let current = element;
+  while (current && current.tagName !== "TR") {
+    const tagName = current.tagName?.toLowerCase();
+    if (INTERACTIVE_ELEMENTS.includes(tagName)) {
+      return true;
+    }
+    const role = current.getAttribute?.("role");
+    if (role === "button" || role === "link") {
+      return true;
+    }
+    if (current.dataset?.clickable === "true") {
+      return true;
+    }
+    current = current.parentElement;
+  }
+  return false;
+};
+function ReactTable(props) {
+  const {
+    columns,
+    data,
+    subColumns,
+    blue = false,
+    noPagination = true,
+    withSubTable = false,
+    isSubTable = false,
+    customTdStyles,
+    customThStyles,
+    customRowHoverStyles,
+    customRowHoverContent,
+    customRowStyles,
+    customTableStyles,
+    tableWrapStyles,
+    getRowDataCy,
+    // Function to generate data-cy attribute: (rowData, rowIndex) => string
+    // Row click handler: (rowData, rowIndex, event) => void
+    // Will NOT trigger if clicking on buttons, links, inputs, etc.
+    onRowClick,
+    // Custom expanded content renderer: (row, toggleExpanded) => ReactNode
+    // If provided, this will be used instead of the sub-table
+    renderExpandedContent,
+    // Header click handler: (column, event) => void
+    // Called when a header cell is clicked (useful for sorting/filtering)
+    // Won't trigger if clicking on interactive elements inside header
+    onHeaderClick,
+    // Render custom header content: (column, defaultContent) => ReactNode
+    // Allows wrapping/replacing header content (e.g., add sort icons, dropdowns)
+    renderHeaderContent,
+    //instead of passing the subData, we pass a function that will calculate the subData
+    //subData must be part of the data array (an array or whatever)
+    //calculateSubData is a function that receives the row and returns the subData
+    //it is used only when the row is expanded
+    calculateSubData
+  } = props;
+  const tableId = useId();
+  const [hoveredRowIndex, setHoveredRowIndex] = useState(null);
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    prepareRow,
+    visibleColumns,
+    page,
+    // page contains only the rows for the active page
+    gotoPage,
+    setPageSize,
+    state: { pageIndex, pageSize }
+  } = useTable(
+    {
+      columns,
+      data,
+      initialState: {
+        pageIndex: 0,
+        pageSize: isSubTable ? 1e4 : 10
+      }
+    },
+    useExpanded,
+    usePagination
+  );
+  const [inputPageSize, setInputPageSize] = useState(isSubTable ? 1e4 : 10);
+  React__default.useEffect(() => {
+    setInputPageSize(pageSize);
+  }, [pageSize]);
+  const handleRowClick = useCallback(
+    (row, rowIndex, event) => {
+      if (!onRowClick) return;
+      if (isInteractiveElement(event.target)) {
+        return;
+      }
+      onRowClick(row.original, rowIndex, event);
+    },
+    [onRowClick]
+  );
+  const renderCellContent = (cell, rowIndex, rowData) => {
+    if (customRowHoverContent && hoveredRowIndex === rowIndex) {
+      const hoverContent = customRowHoverContent(cell.column.id, rowIndex, rowData);
+      if (hoverContent !== void 0) {
+        return hoverContent;
+      }
+    }
+    return cell.render("Cell");
+  };
+  const shouldEnableExpand = withSubTable || renderExpandedContent;
+  const handleHeaderClick = useCallback(
+    (column, event) => {
+      if (column.onHeaderClick) {
+        if (!isInteractiveElement(event.target)) {
+          column.onHeaderClick(column, event);
+        }
+        return;
+      }
+      if (!onHeaderClick) return;
+      if (isInteractiveElement(event.target)) {
+        return;
+      }
+      onHeaderClick(column, event);
+    },
+    [onHeaderClick]
+  );
+  const renderHeader = (column) => {
+    const defaultContent = column.render("Header");
+    if (renderHeaderContent) {
+      return renderHeaderContent(column, defaultContent);
+    }
+    return defaultContent;
+  };
+  const isHeaderClickable = (column) => {
+    return column.onHeaderClick || onHeaderClick;
+  };
+  return /* @__PURE__ */ jsxs(Styles, { children: [
+    /* @__PURE__ */ jsx(TableWrap, { style: tableWrapStyles, children: /* @__PURE__ */ jsxs(StyledReactTable, { ...getTableProps(), customTableStyles, children: [
+      /* @__PURE__ */ jsx("thead", { children: headerGroups.map((headerGroup, index) => {
+        const { key } = headerGroup.getHeaderGroupProps();
+        return /* @__PURE__ */ jsx(StyledReactTable.Tr, { children: headerGroup.headers.map((column) => {
+          const cellStyles = customThStyles ? customThStyles(column) : {};
+          const clickable = isHeaderClickable(column);
+          const headerProps = column.getHeaderProps({
+            className: column.collapse ? "collapse" : "",
+            style: {
+              ...cellStyles,
+              ...clickable ? { cursor: "pointer" } : {}
+            }
+          });
+          const { key: _headerKey, ref: _headerRef, ...restHeaderProps } = headerProps;
+          return /* @__PURE__ */ jsx(
+            StyledReactTable.Th,
+            {
+              ...restHeaderProps,
+              blue,
+              width: column.width,
+              minWidth: column.minWidth,
+              maxWidth: column.maxWidth,
+              onClick: clickable ? (e) => handleHeaderClick(column, e) : void 0,
+              children: renderHeader(column)
+            },
+            column.id
+          );
+        }) }, `${key}-${index.toString()}`);
+      }) }),
+      /* @__PURE__ */ jsx("tbody", { ...getTableBodyProps(), children: page.map((row, i) => {
+        prepareRow(row);
+        row.getRowProps({
+          "data-cy": getRowDataCy ? getRowDataCy(row.original, i) : void 0
+        });
+        const rowKey = `${tableId}-${row.id}-${i}`;
+        return /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            StyledReactTable.Tr,
+            {
+              customRowHoverStyles,
+              customRowStyles,
+              rowIndex: i,
+              rowData: row.original,
+              onMouseEnter: () => setHoveredRowIndex(i),
+              onMouseLeave: () => setHoveredRowIndex(null),
+              onClick: (e) => handleRowClick(row, i, e),
+              style: onRowClick ? { cursor: "pointer" } : void 0,
+              children: row.cells.map((cell) => {
+                const cellStyles = customTdStyles ? customTdStyles(i, row.original, cell.column) : {};
+                const rawExpandProps = shouldEnableExpand ? cell.row.getToggleRowExpandedProps() : {};
+                const { key: _expandKey, ref: _expandRef, ...expandProps } = rawExpandProps;
+                const cellProps = cell.getCellProps({
+                  className: cell.column.collapse ? "collapse" : "",
+                  style: { ...cellStyles }
+                });
+                const { key: _cellKey, ref: _cellRef, ...restCellProps } = cellProps;
+                return /* @__PURE__ */ jsx(
+                  StyledReactTable.Td,
+                  {
+                    ...expandProps,
+                    title: "",
+                    ...restCellProps,
+                    blue,
+                    width: cell.column.width,
+                    minWidth: cell.column.minWidth,
+                    maxWidth: cell.column.maxWidth,
+                    children: renderCellContent(cell, i, row.original)
+                  },
+                  `${rowKey}-${cell.column.id}`
+                );
+              })
+            },
+            rowKey
+          ),
+          renderExpandedContent && row.isExpanded && /* @__PURE__ */ jsx(StyledReactTable.Tr, { children: /* @__PURE__ */ jsx(StyledReactTable.Td, { colSpan: visibleColumns.length, subTable: true, children: renderExpandedContent(row, row.toggleRowExpanded) }) }, `${rowKey}-expanded`),
+          withSubTable && !renderExpandedContent && row.isExpanded && /* @__PURE__ */ jsx(StyledReactTable.Tr, { children: /* @__PURE__ */ jsx(StyledReactTable.Td, { colSpan: visibleColumns.length, subTable: true, children: /* @__PURE__ */ jsx(ReactTable, { columns: subColumns, data: calculateSubData(row), noPagination: true, isSubTable: true }) }) }, `${rowKey}-sub`)
+        ] }, rowKey);
+      }) })
+    ] }) }),
+    !noPagination && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+      stdin_default$1,
+      {
+        currentPage: pageIndex + 1,
+        totalCount: data.length,
+        pageSize,
+        onPageChange: (_page) => gotoPage(_page - 1),
+        inputPageSize,
+        setInputPageSize,
+        setPageSize
+      }
+    ) })
+  ] });
+}
+ReactTable.propTypes = {
+  columns: PropTypes.array.isRequired,
+  data: PropTypes.array.isRequired,
+  subColumns: PropTypes.array,
+  calculateSubData: PropTypes.func,
+  blue: PropTypes.bool,
+  noPagination: PropTypes.bool,
+  withSubTable: PropTypes.bool,
+  isSubTable: PropTypes.bool,
+  customRowHoverStyles: PropTypes.func,
+  customRowHoverContent: PropTypes.func,
+  customRowStyles: PropTypes.func,
+  customTableStyles: PropTypes.func,
+  tableWrapStyles: PropTypes.object,
+  customTdStyles: PropTypes.func,
+  customThStyles: PropTypes.func,
+  getRowDataCy: PropTypes.func,
+  // (rowData, rowIndex) => string
+  onRowClick: PropTypes.func,
+  // (rowData, rowIndex, event) => void
+  renderExpandedContent: PropTypes.func,
+  // (row, toggleExpanded) => ReactNode
+  onHeaderClick: PropTypes.func,
+  // (column, event) => void
+  renderHeaderContent: PropTypes.func
+  // (column, defaultContent) => ReactNode
+};
+var stdin_default = ReactTable;
+export {
+  ReactTable,
+  StyledReactTable,
+  Styles,
+  TableWrap,
+  stdin_default as default
+};

package/dist/components/AdminDashboard/Table/ReactTableWrapper.js

@@ -0,0 +1,65 @@
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import stdin_default from "./ReactTable.js";
+import { TableDropdownIcon } from "./Table.styles.js";
+import PropTypes from "prop-types";
+const renderCell = ({ row }) => (
+  // Use Cell to render an expander for dropdown cell.
+  // We can use the getToggleRowExpandedProps prop-getter
+  // to build the expander. (moved to the whole row to make it easier to click)
+  /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(TableDropdownIcon, { isActive: row.isExpanded }) })
+);
+const ReactTableWrapper = (props) => {
+  const { columns, data, subColumns, blue = false, noPagination = false, withSubTable = false, ...restProps } = props;
+  const makeNewColumns = (columnData) => {
+    if (!columnData || !Array.isArray(columnData)) return [];
+    return columnData.map((column) => {
+      if (column.key === "dropdown" || column.accessor === "dropdown") {
+        return {
+          Header: () => null,
+          id: column.key || column.accessor,
+          Cell: renderCell
+        };
+      }
+      return {
+        Header: column.label || column.Header,
+        accessor: column.key || column.accessor,
+        ...column
+      };
+    });
+  };
+  const memoizedColumns = React__default.useMemo(() => makeNewColumns(columns), [columns]);
+  const memoizedData = React__default.useMemo(() => data, [data]);
+  const memoizedSubColumns = React__default.useMemo(() => subColumns ? makeNewColumns(subColumns) : void 0, [subColumns]);
+  return /* @__PURE__ */ jsx(
+    stdin_default,
+    {
+      columns: memoizedColumns,
+      data: memoizedData,
+      subColumns: memoizedSubColumns,
+      blue,
+      noPagination,
+      withSubTable,
+      ...restProps
+    }
+  );
+};
+ReactTableWrapper.propTypes = {
+  columns: PropTypes.arrayOf(
+    PropTypes.shape({
+      key: PropTypes.string,
+      label: PropTypes.string
+    })
+  ).isRequired,
+  data: PropTypes.array.isRequired,
+  subColumns: PropTypes.array,
+  calculateSubData: PropTypes.func,
+  blue: PropTypes.bool,
+  noPagination: PropTypes.bool,
+  withSubTable: PropTypes.bool,
+  customTdStyles: PropTypes.func,
+  customThStyles: PropTypes.func
+};
+export {
+  ReactTableWrapper
+};

package/dist/components/AdminDashboard/Table/Table.js

@@ -0,0 +1,123 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { PureComponent } from "react";
+import PropTypes from "prop-types";
+import stdin_default from "../../ComponentScroll/ComponentScroll.js";
+import { Container, HeadWrapper, StyledTable, Head, Row, Column, TableWrapper, Body } from "./Table.styles.js";
+const OptionalScroll = ({ children, maxHeight = 500, noScroll = false, onScroll }) => {
+  if (noScroll) {
+    return children;
+  }
+  return /* @__PURE__ */ jsx(
+    stdin_default,
+    {
+      autoHeight: maxHeight !== 0,
+      autoHeightMax: maxHeight || void 0,
+      offset: 4,
+      barPadding: 8,
+      topPadding: 48,
+      handleScroll: onScroll,
+      children
+    }
+  );
+};
+OptionalScroll.propTypes = {
+  children: PropTypes.node.isRequired,
+  maxHeight: PropTypes.number.isRequired,
+  noScroll: PropTypes.bool.isRequired,
+  onScroll: PropTypes.func.isRequired
+};
+class Table extends PureComponent {
+  componentDidMount() {
+    this.setColumnsWidth();
+    window.addEventListener("resize", this.onResize);
+  }
+  componentWillUnmount() {
+    clearTimeout(this.resizeTimeout);
+    window.removeEventListener("resize", this.onResize);
+  }
+  onResize = () => {
+    clearTimeout(this.resizeTimeout);
+    this.resizeTimeout = setTimeout(this.setColumnsWidth, 200);
+  };
+  setColumnsWidth = () => {
+    const headColumns = this.headTableEl.children[0].children[0].children;
+    const bodyColumns = this.bodyTableEl.children[0].children[0].children;
+    Array.prototype.forEach.call(bodyColumns, (column, columnKey) => {
+      bodyColumns[columnKey].style.width = "";
+    });
+    this.headTableEl.style.width = "";
+    Array.prototype.forEach.call(bodyColumns, (column, columnKey) => {
+      headColumns[columnKey].style.width = `${column.offsetWidth}px`;
+      bodyColumns[columnKey].style.width = `${column.offsetWidth}px`;
+    });
+    this.headTableEl.style.width = `${this.bodyTableEl.offsetWidth}px`;
+  };
+  onScroll = (e) => {
+    if (!e) return;
+    this.headTableWrapperEl.scrollLeft = e.target.scrollLeft;
+  };
+  render() {
+    const { columns, data, maxHeight, noScroll } = this.props;
+    const columnsProps = {};
+    columns.map((column) => {
+      columnsProps[column.key] = {
+        width: column.width,
+        align: column.align,
+        marginLeft: column.marginLeft
+      };
+      return column;
+    });
+    return /* @__PURE__ */ jsxs(Container, { children: [
+      /* @__PURE__ */ jsx(
+        HeadWrapper,
+        {
+          ref: (el) => {
+            this.headTableWrapperEl = el;
+          },
+          children: /* @__PURE__ */ jsx(
+            StyledTable,
+            {
+              ref: (el) => {
+                this.headTableEl = el;
+              },
+              children: /* @__PURE__ */ jsx(Head, { children: /* @__PURE__ */ jsx(Row, { children: columns.map((column) => /* @__PURE__ */ jsx(Column, { align: column.align, children: column.label }, column.key)) }) })
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(TableWrapper, { children: /* @__PURE__ */ jsx(OptionalScroll, { maxHeight, noScroll, onScroll: this.onScroll, children: /* @__PURE__ */ jsxs(
+        StyledTable,
+        {
+          ref: (el) => {
+            this.bodyTableEl = el;
+          },
+          children: [
+            /* @__PURE__ */ jsx(Head, { hidden: true, children: /* @__PURE__ */ jsx(Row, { children: columns.map((column) => /* @__PURE__ */ jsx(
+              Column,
+              {
+                colWidth: column.width,
+                minWidth: column.minWidth,
+                maxWidth: column.maxWidth,
+                align: column.align,
+                children: column.label
+              },
+              column.key
+            )) }) }),
+            /* @__PURE__ */ jsx(Body, { children: data.map((row) => /* @__PURE__ */ jsx(Row, { children: Object.keys(row).map(
+              (columnKey) => columnsProps[columnKey] && /* @__PURE__ */ jsx(Column, { align: columnsProps[columnKey].align, children: row[columnKey] }, columnKey)
+            ) }, row.id)) })
+          ]
+        }
+      ) }) })
+    ] });
+  }
+}
+Table.propTypes = {
+  columns: PropTypes.arrayOf(Object).isRequired,
+  data: PropTypes.arrayOf(Object).isRequired,
+  maxHeight: PropTypes.number,
+  noScroll: PropTypes.bool
+};
+export {
+  Table
+};