@monolith-forensics/monolith-ui 1.0.0

package/src/DataGrid/DataGrid.js

@@ -0,0 +1,729 @@
+import {
+  ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  Row,
+  SortingState,
+  useReactTable,
+  createColumnHelper,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
+} from "@tanstack/react-table";
+import { useMemo, useState } from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { useRef } from "react";
+import { useReducer } from "react";
+import styled from "@emotion/styled";
+import NorthIcon from "@mui/icons-material/North";
+import SouthIcon from "@mui/icons-material/South";
+import FilterListIcon from "@mui/icons-material/FilterList";
+import Menu, { MenuItem } from "../Menu";
+import moment from "moment";
+import {
+  getDateFormat,
+  monolithMoment,
+} from "../../../../../utils/date-format";
+import { useEffect } from "react";
+import CheckBox from "../CheckBox";
+
+const clearFiltersEvent = new Event("clearFilters");
+
+const columnShape = {
+  dataField: "string",
+  caption: "string",
+  dataType: "string",
+  visible: "boolean",
+  cellRender: "function",
+  allowResizing: "boolean",
+  allowSorting: "boolean",
+  allowReordering: "boolean",
+  showInColumnChooser: "boolean",
+};
+
+const DataGrid = ({
+  dataGridRef,
+  data = [],
+  columns = [],
+  columnChooser,
+  ...props
+}) => {
+  const tableContainerRef = useRef();
+  const [gridData, setGridData] = useState(() => [...data]);
+  const [sorting, setSorting] = useState([]);
+  const [columnResizeMode, setColumnResizeMode] = useState("onChange");
+  const [globalFilter, setGlobalFilter] = useState("");
+  const [columnOrder, setColumnOrder] = useState([]);
+  const [columnFilters, setColumnFilters] = useState([]);
+  const [columnVisibility, setColumnVisibility] = useState({});
+  const [rowSelection, setRowSelection] = useState({});
+
+  //Create columns from data with column helper
+  const gridColumns = useMemo(
+    () => createColumnDefs(data, columns, props),
+    [data, columns]
+  );
+
+  const table = useReactTable({
+    data: gridData,
+    columns: gridColumns,
+    columnResizeMode,
+    state: {
+      sorting,
+      columnFilters,
+      globalFilter,
+      columnOrder,
+      columnVisibility,
+      rowSelection,
+    },
+    onSortingChange: setSorting,
+    onRowSelectionChange: setRowSelection,
+    onColumnVisibilityChange: setColumnVisibility,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValues(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnOrderChange: setColumnOrder,
+    onColumnFiltersChange: setColumnFilters,
+    onGlobalFilterChange: setGlobalFilter,
+    // debugTable: true,
+    // debugHeaders: true,
+    // debugColumns: true,
+  });
+
+  const { rows } = table.getRowModel();
+
+  const rowVirtualizer = useVirtualizer({
+    count: data.length,
+    getScrollElement: () => tableContainerRef.current,
+    estimateSize: (i) => 37,
+    overscan: 5,
+  });
+
+  useEffect(() => {
+    if (dataGridRef)
+      dataGridRef.current = {
+        clearFilters: () => {
+          document.dispatchEvent(clearFiltersEvent);
+          table.resetColumnFilters();
+        },
+      };
+  }, []);
+
+  return (
+    <TableContainer ref={tableContainerRef} width={props.width}>
+      <ColumnChooser parentEl={columnChooser} columns={columns} table={table} />
+      <Table>
+        <TableHead>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableHeaderRow key={headerGroup.id}>
+              {headerGroup.headers.map((header) => (
+                <TableHeaderCell
+                  key={header.id}
+                  header={header}
+                  columnFilters={columnFilters}
+                >
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                </TableHeaderCell>
+              ))}
+            </TableHeaderRow>
+          ))}
+        </TableHead>
+        <TableBody>
+          {/* {rowVirtualizer.getVirtualItems().map((virtualRow) => {
+            const row = rows[virtualRow.index];
+            return (
+              <TableRow key={row.id}>
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell key={cell.id} row={row} cell={cell}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+              </TableRow>
+            );
+          })} */}
+          {table.getRowModel().rows.map((row) => (
+            <TableRow key={row.id}>
+              {row.getVisibleCells().map((cell) => (
+                <TableCell key={cell.id} row={row} cell={cell}>
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+};
+
+const ColumnChooser = styled(
+  ({ className, table, columns, parentEl, ...props }) => {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [selections, setSelections] = useState(
+      columns.map((c) => c.dataField)
+    );
+
+    const open = Boolean(anchorEl);
+
+    const leafColumns = useMemo(
+      () =>
+        table
+          .getAllLeafColumns()
+          .map((tcol) => {
+            tcol.caption =
+              columns.find((col) => col.dataField === tcol.id)?.caption || null;
+            return tcol;
+          })
+          .filter((tcol) => !!tcol.caption),
+      [table]
+    );
+
+    const handleClick = (event) => {
+      event.stopPropagation();
+      setAnchorEl(event.target);
+    };
+
+    const handleClose = () => {
+      setAnchorEl(null);
+    };
+
+    const handleSelect = (event) => {
+      setSelections((prev) => {
+        let newState;
+        if (prev.includes(event.id)) {
+          newState = prev.filter((item) => item !== event.id);
+        } else {
+          newState = [...prev, event.id];
+        }
+        event.toggleVisibility();
+        return newState;
+      });
+    };
+
+    useEffect(() => {
+      parentEl?.current?.addEventListener("click", handleClick);
+
+      return () => {
+        parentEl?.current?.removeEventListener("click", handleClick);
+      };
+    }, []);
+
+    return (
+      <div className={className}>
+        <Menu
+          anchorEl={anchorEl}
+          open={open}
+          onClose={handleClose}
+          onItemSelect={handleSelect}
+          dropDownStyle={{ padding: 10 }}
+        >
+          {leafColumns.map((item) => {
+            const isChecked = selections.includes(item.id);
+            return (
+              <MenuItem
+                key={item.id}
+                onClick={handleClose}
+                data={item}
+                style={{
+                  margin: "5px 0px",
+                  display: "flex",
+                  alignItems: "center",
+                }}
+              >
+                <div>
+                  <CheckBox
+                    checked={isChecked}
+                    onChange={() => handleSelect(item)}
+                    style={{ marginRight: 5 }}
+                  />
+                </div>
+                <div>{item.caption}</div>
+              </MenuItem>
+            );
+          })}
+        </Menu>
+      </div>
+    );
+  }
+)((props) => ({}));
+
+const allPossibleFormats = [
+  "D MMMM YYYY",
+  "D MMMM YYYY HH:mm",
+  "DD-MM-YY",
+  "DD-MM-YYYY",
+  "DD.MM.YYYY",
+  "DD.MM.YYYY HH:mm",
+  "DD/MM/YY",
+  "DD/MM/YYYY",
+  "DD/MM/YYYY HH:mm:ss",
+  "HH:mm:ss",
+  "M/D/YYYY",
+  "D/M/YYYY",
+  "D/M/YYYY HH:mm:ss",
+  "D/M/YYYY HH:mm",
+  "MM-DD-YY",
+  "MM-DD-YYYY",
+  "MM-DD-YYYY HH:mm:ss",
+  "MM/DD/YY",
+  "MM/DD/YYYY",
+  "MM/DD/YYYY HH:mm:ss",
+  "MMM D YYYY",
+  "MMM D YYYY LT",
+  "MMMM Do YYYY",
+  "MMMM Do YYYY LT",
+  "YYYY-DD-MM HH:mm:ss",
+  "YYYY-MM",
+  "YYYY-MM-DD",
+  "YYYY-MM-DD HH:mm",
+  "YYYY-MM-DD HH:mm:ss",
+  "YYYY-MM-DD LT",
+  "YYYY-MM-DD h:mm:ss A",
+  "YYYY-MM-DDTHH:mm:ssZ",
+  "ddd, MMM D YYYY LT",
+  "dddd D MMMM YYYY HH:mm",
+  "dddd, MMMM Do YYYY LT",
+  "YYYY-MM-DD HH:mm:ss.SSS",
+  "YYYY-MM-DD HH:mm:ss.SSSZ",
+  "YYYY-MM-DDTHH:mm:ss.SSSZ",
+  "YYYY-MM-DDTHH:mm:ss.SSZ",
+  "YYYY-MM-DDTHH:mm:ssZ",
+];
+
+const isValidTimestamp = (timestamp) => {
+  const currentFormat = getDateFormat();
+  const date = moment(timestamp, allPossibleFormats, true).toDate();
+  return date instanceof Date && !isNaN(date);
+};
+
+const filterFn = (row, columnId, value, addMeta) => {
+  const column = row.columns[columnId];
+  const cell = row.cells[columnId];
+  const cellValue = cell.value;
+  const cellValueString = cellValue.toString();
+  const cellValueLowerCase = cellValueString.toLowerCase();
+  const valueLowerCase = value.toLowerCase();
+  const isMatch = cellValueLowerCase.includes(valueLowerCase);
+  if (isMatch) {
+    addMeta({ cell, column });
+  }
+  return isMatch;
+};
+
+const createColumnDefs = (data, columns, props) => {
+  const columnHelper = createColumnHelper();
+  let columnDefs = [];
+
+  if (props?.enableSelection) {
+    columnDefs.push({
+      id: "select",
+      caption: "select",
+      columnType: "select",
+      enableFilter: false,
+      enableSorting: false,
+      header: ({ table }) => (
+        <CheckBox
+          checked={table.getIsAllRowsSelected()}
+          indeterminate={table.getIsSomeRowsSelected()}
+          onChange={(e) => table.toggleAllRowsSelected()}
+        />
+      ),
+      cell: ({ row }) => (
+        <CheckBox
+          checked={row.getIsSelected()}
+          indeterminate={row.getIsSomeSelected()}
+          onChange={(e) => row.toggleSelected()}
+        />
+      ),
+    });
+  }
+
+  if (columns.length > 0) {
+    columnDefs = [
+      ...columnDefs,
+      ...columns.map((column) => {
+        return columnHelper.accessor(column.dataField, {
+          id: column.dataField,
+          header: () => <>{column.caption || column.dataField || ""}</>,
+          cell: (info) => {
+            if (column.cellRender) return column.cellRender(info.getValue());
+            const value = info.getValue();
+            // if value is a date
+            if (isValidTimestamp(value)) {
+              return monolithMoment({
+                timestamp: value,
+                includeTime: true,
+              });
+            }
+            return value;
+          },
+          filterFn: (row, columnId, filterValue) => {
+            if (filterValue.length === 0) return true;
+            return filterValue.includes(row.getValue(columnId));
+          },
+          //   sortingFn: (a, b) => {
+          //     const aDate = a?.length > 5 && moment(a).isValid();
+          //     const bDate = b?.length > 5 && moment(b).isValid();
+          //     if (aDate && bDate) {
+          //       return moment(a).toDate() - moment(b).toDate();
+          //     }
+          //     return a - b;
+          //   },
+        });
+      }),
+    ];
+  } else {
+    const keys = Object.keys(data[0]);
+    columnDefs = keys.map((key) => {
+      return columnHelper.accessor(key, {
+        id: key,
+        header: () => <>{key}</>,
+        cell: (info) => {
+          const value = info.getValue();
+          // if value is a date
+          if (isValidTimestamp(value)) {
+            return monolithMoment({ timestamp: value, includeTime: true });
+          } else return value;
+        },
+        //   sortingFn: (a, b) => {
+        //     const aDate = a?.length > 5 && moment(a).isValid();
+        //     const bDate = b?.length > 5 && moment(b).isValid();
+        //     if (aDate && bDate) {
+        //       return moment(a).toDate() - moment(b).toDate();
+        //     }
+        //     return a - b;
+        //   },
+      });
+    });
+  }
+
+  return columnDefs;
+};
+
+const FilterButton = styled(({ children, className, ...props }) => {
+  return (
+    <div className={className}>
+      <FilterListIcon
+        className="filter-icon"
+        onClick={(e) => {
+          e.stopPropagation();
+          props.onClick(e);
+        }}
+      />
+    </div>
+  );
+})`
+  //   outline: 1px solid red;
+  padding: 0px;
+  border-radius: 3px;
+  .filter-icon {
+    font-size: 15px;
+    &:hover {
+        cursor: pointer;
+        // background-color: ${({ theme }) => theme.palette.action.hover};
+  }
+`;
+
+const ColumnFilter = styled(({ children, className, ...props }) => {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [filterValue, setFilterValue] = useState([]);
+  const open = Boolean(anchorEl);
+
+  if (props.header.column.getCanFilter() === false) return null;
+
+  const dataList = useMemo(() => {
+    return Array.from(props.header.column.getFacetedUniqueValues().keys())
+      .filter((item) => !!item)
+      .sort();
+  }, [props.header.column.getFacetedUniqueValues()]);
+
+  const handleClick = (event) => {
+    event.stopPropagation();
+    setAnchorEl(event.target);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const handleSelect = (event) => {
+    setFilterValue((prev) => {
+      let newState;
+      if (prev.includes(event)) {
+        newState = prev.filter((item) => item !== event);
+      } else {
+        newState = [...prev, event];
+      }
+      props.header.column.setFilterValue(newState);
+      return newState;
+    });
+  };
+
+  useEffect(() => {
+    const resetFilter = () => setFilterValue([]);
+
+    document.addEventListener("clearFilters", resetFilter);
+    return () => {
+      document.removeEventListener("clearFilters", resetFilter);
+    };
+  }, []);
+
+  return (
+    <div className={className}>
+      <FilterButton onClick={handleClick} />
+      <Menu
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        onItemSelect={handleSelect}
+        dropDownStyle={{ padding: 10 }}
+      >
+        {dataList.map((item) => {
+          const isChecked = filterValue.includes(item);
+          return (
+            <MenuItem
+              key={item}
+              onClick={handleClose}
+              data={item}
+              style={{
+                margin: "5px 0px",
+                display: "flex",
+                alignItems: "center",
+              }}
+            >
+              <div>
+                <CheckBox
+                  checked={isChecked}
+                  onChange={() => handleSelect(item)}
+                  style={{ marginRight: 5 }}
+                />
+              </div>
+              <div>{item}</div>
+            </MenuItem>
+          );
+        })}
+      </Menu>
+    </div>
+  );
+})``;
+
+const TableContainer = styled.div`
+  max-height: calc(100vh - 220px);
+  overflow-y: auto;
+  //   max-width: fit-content;
+  max-width: ${({ width }) => width || "100%"};
+  //   padding: 3px;
+  ::-webkit-scrollbar-corner {
+    background-color: transparent;
+  }
+`;
+
+const Table = styled(({ children, ...props }) => {
+  return <table {...props}>{children}</table>;
+})`
+  border-collapse: separate;
+  border-spacing: 0;
+  min-width: max-content;
+  width: 100%;
+  font-size: 10px;
+  th {
+    border-top: 1px solid ${(props) => props.theme.palette.divider};
+    border-bottom: 1px solid ${(props) => props.theme.palette.divider};
+    // border-right: 1px solid ${(props) => props.theme.palette.divider};
+    min-width: 100px;
+    padding: 10px 25px;
+    text-align: left;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  th:first-child,
+  td:first-child {
+    border-left: 1px solid ${(props) => props.theme.palette.divider};
+  }
+  th:last-child,
+  td:last-child {
+    border-right: 1px solid ${(props) => props.theme.palette.divider};
+  }
+  td {
+    min-width: 100px;
+    padding: 10px;
+    border-bottom: 1px solid ${(props) => props.theme.palette.divider};
+    // border-right: 1px solid ${(props) => props.theme.palette.divider};
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`;
+
+Table.displayName = "Table";
+
+const TableHead = styled(({ children, ...props }) => {
+  return <thead {...props}>{children}</thead>;
+})`
+  user-select: none;
+`;
+
+TableHead.displayName = "TableHead";
+
+const TableBody = styled(({ children, ...props }) => {
+  return <tbody {...props}>{children}</tbody>;
+})((props) => ({
+  height: props.height,
+}));
+
+TableBody.displayName = "TableBody";
+
+const TableHeaderRow = styled(({ className, children, row }) => {
+  return <tr className={className}>{children}</tr>;
+})`
+  position: sticky;
+  top: 0;
+  border: 1px solid ${(props) => props.theme.palette.divider};
+`;
+
+TableHeaderRow.displayName = "TableHeaderRow";
+
+const TableHeaderCell = styled(
+  ({ className, header, table, children, ...props }) => {
+    if (header.column.columnDef.columnType === "select") {
+      return <th className={className + " select"}>{children}</th>;
+    }
+
+    return (
+      <th
+        className={className}
+        onClick={header.column.getToggleSortingHandler()}
+      >
+        <div className="th-container">
+          <div>{children}</div>
+          {{
+            asc: <NorthIcon style={{ fontSize: 12, marginLeft: 5 }} />,
+            desc: <SouthIcon style={{ fontSize: 12, marginLeft: 5 }} />,
+          }[header.column.getIsSorted()] ?? (
+            <div style={{ width: 12, fontSize: 12, marginLeft: 5 }}></div>
+          )}
+          <div className="th-actions">
+            <ColumnFilter
+              header={header}
+              table={table}
+              columnFilters={props.columnFilters}
+            />
+          </div>
+          <div
+            className={`resizer ${
+              header.column.getIsResizing() ? "isResizing" : ""
+            }`}
+            onMouseDown={header.getResizeHandler()}
+            onClick={(e) => e.stopPropagation()}
+            onTouchStart={header.getResizeHandler()}
+          ></div>
+        </div>
+      </th>
+    );
+  }
+)`
+  background-color: ${(props) => props.theme.palette.background.default};
+  cursor: pointer;
+  position: relative;
+  width: ${(props) => props.header.getSize()}px;
+  .th-container {
+    display: flex;
+    align-items: center;
+    // justify-content: space-between;
+  }
+  .th-actions {
+    display: flex;
+    align-items: center;
+    margin-left: auto;
+    // justify-content: space-between;
+  }
+  &.select {
+    max-width: 50px;
+    min-width: 50px;
+    padding-left: 10px;
+  }
+  &:hover {
+    background-color: ${(props) => props.theme.palette.dataGrid.hover};
+  }
+  .resizer {
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 100%;
+    width: 5px;
+    background-color: ${(props) => props.theme.palette.divider};
+    cursor: col-resize;
+    user-select: none;
+    touch-action: none;
+    opacity: 0;
+    &.isResizing {
+      opacity: 1;
+      background: ${(props) => props.theme.palette.primary.main};
+    }
+  }
+`;
+
+TableHeaderCell.displayName = "TableHeaderCell";
+
+const TableRow = styled(({ className, children, row }) => {
+  const rowRef = useRef(null);
+  const handleRowClick = (e) => {
+    if (rowRef.current.classList.contains("selected")) {
+      rowRef.current.classList.remove("selected");
+      return;
+    }
+    document.querySelector("tr.selected")?.classList.remove("selected");
+
+    rowRef.current.classList.add("selected");
+  };
+
+  return (
+    <tr ref={rowRef} className={className} onClick={handleRowClick}>
+      {children}
+    </tr>
+  );
+})((props) => ({
+  cursor: "pointer",
+  // change background color when row hovered
+  "&:hover": {
+    backgroundColor: props.theme.palette.dataGrid.hover,
+  },
+  "&.selected": {
+    backgroundColor: props.theme.palette.dataGrid.hover,
+  },
+}));
+
+TableRow.displayName = "TableRow";
+
+const TableCell = styled(({ className, children, ...props }) => {
+  const isSelectCell = props.cell.column.columnDef.columnType === "select";
+  const rowSelected = isSelectCell && props.row.getIsSelected();
+
+  return (
+    <>
+      {useMemo(() => {
+        return (
+          <td className={className + `${isSelectCell ? " select" : ""}`}>
+            {children}
+          </td>
+        );
+      }, [rowSelected])}
+    </>
+  );
+})`
+  &.select {
+    max-width: 50px;
+    min-width: 50px;
+  }
+`;
+
+TableCell.displayName = "TableCell";
+
+export default DataGrid;