simple-table-core 0.1.5 → 0.1.6

package/package.json

@@ -1,7 +1,11 @@
 {
   "name": "simple-table-core",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "dependencies": {
     "react": "^18.3.1"
   },

package/.storybook/main.ts

@@ -1,18 +0,0 @@
-import type { StorybookConfig } from "@storybook/react-webpack5";
-
-const config: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
-  addons: [
-    "@storybook/preset-create-react-app",
-    "@storybook/addon-onboarding",
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@chromatic-com/storybook",
-    "@storybook/addon-interactions",
-  ],
-  framework: {
-    name: "@storybook/react-webpack5",
-    options: {},
-  },
-};
-export default config;

package/.storybook/preview.ts

@@ -1,14 +0,0 @@
-import type { Preview } from "@storybook/react";
-
-const preview: Preview = {
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-  },
-};
-
-export default preview;

package/rollup.config.js

@@ -1,27 +0,0 @@
-import babel from "@rollup/plugin-babel";
-import resolve from "@rollup/plugin-node-resolve";
-import postcss from "rollup-plugin-postcss";
-import typescript from "@rollup/plugin-typescript";
-import { terser } from "rollup-plugin-terser";
-
-export default {
-  input: "src/index.tsx",
-  output: {
-    file: "dist/index.js",
-    format: "esm",
-  },
-  plugins: [
-    postcss({
-      plugins: [],
-      minimize: true,
-    }),
-    babel({
-      exclude: "node_modules/**",
-      presets: ["@babel/preset-react"],
-    }),
-    resolve(),
-    typescript(),
-    terser(),
-  ],
-  external: ["react", "react/jsx-runtime"],
-};

package/src/components/Animate.tsx

@@ -1,69 +0,0 @@
-import React, { useState, useLayoutEffect, useEffect } from "react";
-import usePrevious from "../hooks/usePrevious";
-import calculateBoundingBoxes from "../helpers/calculateBoundingBoxes";
-
-interface AnimateProps {
-  allowHorizontalAnimate?: boolean;
-  children: any;
-  pause?: boolean;
-}
-
-const Animate = ({
-  allowHorizontalAnimate = true,
-  children,
-  pause,
-}: AnimateProps) => {
-  const [boundingBox, setBoundingBox] = useState<any>({});
-  const [prevBoundingBox, setPrevBoundingBox] = useState<any>({});
-  const prevChildren = usePrevious(children);
-
-  useLayoutEffect(() => {
-    const newBoundingBox = calculateBoundingBoxes(children);
-    setBoundingBox(newBoundingBox);
-  }, [children]);
-
-  useLayoutEffect(() => {
-    const prevBoundingBox = calculateBoundingBoxes(prevChildren);
-    setPrevBoundingBox(prevBoundingBox);
-  }, [prevChildren]);
-
-  useEffect(() => {
-    if (pause) return;
-    const hasPrevBoundingBox = Object.keys(prevBoundingBox).length;
-
-    if (hasPrevBoundingBox) {
-      React.Children.forEach(children, (child) => {
-        const domNode = child.ref.current;
-        const firstBox = prevBoundingBox[child.key];
-        const lastBox = boundingBox[child.key];
-
-        const changeInX = firstBox.left - lastBox.left;
-        const changeInY = !allowHorizontalAnimate
-          ? firstBox.top - lastBox.top
-          : 0;
-
-        const absoluteChangeInX = Math.abs(changeInX);
-        const absoluteChangeInY = Math.abs(changeInY);
-
-        if (absoluteChangeInX > 10 || absoluteChangeInY > 10) {
-          requestAnimationFrame(() => {
-            // Before the DOM paints, invert child to old position
-            domNode.style.transform = `translate(${changeInX}px, ${changeInY}px)`;
-            domNode.style.transition = "transform 0s";
-
-            requestAnimationFrame(() => {
-              // After the previous frame, remove
-              // the transition to play the animation
-              domNode.style.transform = "";
-              domNode.style.transition = "transform 500ms";
-            });
-          });
-        }
-      });
-    }
-  }, [boundingBox, prevBoundingBox, children, pause, allowHorizontalAnimate]);
-
-  return children;
-};
-
-export default Animate;

package/src/components/SimpleTable/SimpleTable.tsx

@@ -1,165 +0,0 @@
-import {
-  useState,
-  useRef,
-  useEffect,
-  useReducer,
-  ReactNode,
-  useMemo,
-} from "react";
-import useSelection from "../../hooks/useSelection";
-import TableHeader from "./TableHeader";
-import { onSort } from "../../utils/sortUtils";
-import TableBody from "./TableBody";
-import HeaderObject from "../../types/HeaderObject";
-import TableFooter from "./TableFooter";
-import AngleLeftIcon from "../../icons/AngleLeftIcon";
-import AngleRightIcon from "../../icons/AngleRightIcon";
-import "../../styles/simple-table.css";
-
-interface SpreadsheetProps {
-  defaultHeaders: HeaderObject[];
-  enableColumnResizing?: boolean;
-  height?: string;
-  hideFooter?: boolean;
-  nextIcon?: ReactNode;
-  prevIcon?: ReactNode;
-  rows: { [key: string]: string | number | boolean | undefined | null }[];
-  rowsPerPage?: number;
-  shouldPaginate?: boolean;
-}
-
-const SimpleTable = ({
-  defaultHeaders,
-  enableColumnResizing = true,
-  height,
-  hideFooter = false,
-  nextIcon = <AngleRightIcon />,
-  prevIcon = <AngleLeftIcon />,
-  rows,
-  rowsPerPage = 10,
-  shouldPaginate = true,
-}: SpreadsheetProps) => {
-  const [isWidthDragging, setIsWidthDragging] = useState(false);
-  const headersRef = useRef(defaultHeaders);
-  const [sortedRows, setSortedRows] = useState(rows);
-  const [sortConfig, setSortConfig] = useState<{
-    key: HeaderObject;
-    direction: string;
-  } | null>(null);
-  const [, forceUpdate] = useReducer((x) => x + 1, 0);
-
-  const [currentPage, setCurrentPage] = useState(1);
-
-  const tableRef = useRef<HTMLDivElement>(null);
-
-  const shouldDisplayLastColumnCell = useMemo(() => {
-    if (!tableRef.current) return false;
-    const totalColumnWidth = headersRef.current.reduce(
-      (acc, header) => acc + header.width,
-      0
-    );
-    return totalColumnWidth < tableRef.current.clientWidth;
-  }, []);
-
-  const {
-    handleMouseDown,
-    handleMouseOver,
-    handleMouseUp,
-    isSelected,
-    getBorderClass,
-    isTopLeftCell,
-    setSelectedCells,
-  } = useSelection(sortedRows, headersRef.current);
-
-  const handleSort = (columnIndex: number) => {
-    const { sortedData, newSortConfig } = onSort(
-      headersRef.current,
-      sortedRows,
-      sortConfig,
-      columnIndex
-    );
-    setSortedRows(sortedData);
-    setSortConfig(newSortConfig);
-  };
-
-  const onTableHeaderDragEnd = (newHeaders: HeaderObject[]) => {
-    headersRef.current = newHeaders;
-    forceUpdate();
-  };
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      const target = event.target as HTMLElement;
-      if (!target.closest(".st-table-cell")) {
-        setSelectedCells([]);
-      }
-    };
-
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [setSelectedCells]);
-
-  const currentRows = shouldPaginate
-    ? sortedRows.slice(
-        (currentPage - 1) * rowsPerPage,
-        currentPage * rowsPerPage
-      )
-    : sortedRows;
-
-  return (
-    <div
-      ref={tableRef}
-      className="st-table-wrapper"
-      style={height ? { height } : {}}
-    >
-      <div
-        className="st-table"
-        onMouseUp={handleMouseUp}
-        onMouseLeave={handleMouseUp}
-        style={{
-          gridTemplateColumns: `${headersRef.current
-            ?.map((header) => `${header.width}px`)
-            .join(" ")} 1fr`,
-        }}
-      >
-        <TableHeader
-          enableColumnResizing={enableColumnResizing}
-          forceUpdate={forceUpdate}
-          headersRef={headersRef}
-          isWidthDragging={isWidthDragging}
-          onSort={handleSort}
-          onTableHeaderDragEnd={onTableHeaderDragEnd}
-          setIsWidthDragging={setIsWidthDragging}
-          shouldDisplayLastColumnCell={shouldDisplayLastColumnCell}
-        />
-        <TableBody
-          getBorderClass={getBorderClass}
-          handleMouseDown={handleMouseDown}
-          handleMouseOver={handleMouseOver}
-          headers={headersRef.current}
-          isSelected={isSelected}
-          isTopLeftCell={isTopLeftCell}
-          isWidthDragging={isWidthDragging}
-          shouldDisplayLastColumnCell={shouldDisplayLastColumnCell}
-          shouldPaginate={shouldPaginate}
-          sortedRows={currentRows}
-        />
-      </div>
-      {shouldPaginate && (
-        <TableFooter
-          currentPage={currentPage}
-          hideFooter={hideFooter}
-          onPageChange={setCurrentPage}
-          rowsPerPage={rowsPerPage}
-          totalRows={sortedRows.length}
-          nextIcon={nextIcon}
-          prevIcon={prevIcon}
-        />
-      )}
-    </div>
-  );
-};
-
-export default SimpleTable;

package/src/components/SimpleTable/TableBody.tsx

@@ -1,79 +0,0 @@
-import { createRef, Fragment } from "react";
-import TableCell from "./TableCell";
-import Animate from "../Animate";
-import HeaderObject from "../../types/HeaderObject";
-import TableLastColumnCell from "./TableLastColumnCell";
-import TableRowSeparator from "./TableRowSeparator";
-
-interface TableBodyProps {
-  getBorderClass: (rowIndex: number, columnIndex: number) => string;
-  handleMouseDown: (rowIndex: number, columnIndex: number) => void;
-  handleMouseOver: (rowIndex: number, columnIndex: number) => void;
-  headers: HeaderObject[];
-  isSelected: (rowIndex: number, columnIndex: number) => boolean;
-  isTopLeftCell: (rowIndex: number, columnIndex: number) => boolean;
-  isWidthDragging: boolean;
-  shouldDisplayLastColumnCell: boolean;
-  shouldPaginate: boolean;
-  sortedRows: { [key: string]: any }[];
-}
-
-const TableBody = ({
-  getBorderClass,
-  handleMouseDown,
-  handleMouseOver,
-  headers,
-  isSelected,
-  isTopLeftCell,
-  isWidthDragging,
-  shouldDisplayLastColumnCell,
-  shouldPaginate,
-  sortedRows,
-}: TableBodyProps & { shouldDisplayLastColumnCell: boolean }) => {
-  return (
-    <>
-      {sortedRows.map((row, rowIndex) => {
-        return (
-          <Fragment key={row.id}>
-            <Animate
-              allowHorizontalAnimate={shouldPaginate}
-              pause={isWidthDragging}
-            >
-              {headers.map((header, columnIndex) => {
-                let content = row[header.accessor];
-
-                if (header.cellRenderer) {
-                  content = header.cellRenderer(row);
-                }
-
-                return (
-                  <TableCell
-                    borderClass={getBorderClass(rowIndex, columnIndex)}
-                    colIndex={columnIndex}
-                    content={content}
-                    isSelected={isSelected(rowIndex, columnIndex)}
-                    isTopLeftCell={isTopLeftCell(rowIndex, columnIndex)}
-                    key={header.accessor}
-                    onMouseDown={() => handleMouseDown(rowIndex, columnIndex)}
-                    onMouseOver={() => handleMouseOver(rowIndex, columnIndex)}
-                    ref={createRef()}
-                    rowIndex={rowIndex}
-                    isLastRow={rowIndex === sortedRows.length - 1}
-                  />
-                );
-              })}
-              <TableLastColumnCell
-                isLastRow={rowIndex === sortedRows.length - 1}
-                ref={createRef()}
-                visible={shouldDisplayLastColumnCell}
-              />
-            </Animate>
-            {rowIndex !== sortedRows.length - 1 && <TableRowSeparator />}
-          </Fragment>
-        );
-      })}
-    </>
-  );
-};
-
-export default TableBody;

package/src/components/SimpleTable/TableCell.tsx

@@ -1,51 +0,0 @@
-import { forwardRef, LegacyRef } from "react";
-
-interface TableCellProps {
-  rowIndex: number;
-  colIndex: number;
-  content: any;
-  isSelected: boolean;
-  isTopLeftCell: boolean;
-  borderClass: string;
-  onMouseDown: (rowIndex: number, colIndex: number) => void;
-  onMouseOver: (rowIndex: number, colIndex: number) => void;
-  isLastRow: boolean;
-}
-
-const TableCell = forwardRef(
-  (
-    {
-      rowIndex,
-      colIndex,
-      content,
-      isSelected,
-      isTopLeftCell,
-      borderClass,
-      onMouseDown,
-      onMouseOver,
-      isLastRow,
-    }: TableCellProps,
-    ref: LegacyRef<HTMLTableCellElement>
-  ) => {
-    const isOddRow = rowIndex % 2 === 0;
-    return (
-      <div
-        onMouseDown={() => onMouseDown(rowIndex, colIndex)}
-        onMouseOver={() => onMouseOver(rowIndex, colIndex)}
-        ref={ref}
-        className={`st-table-cell ${
-          isSelected
-            ? isTopLeftCell
-              ? `st-table-cell-selected-first-cell ${borderClass}`
-              : `st-table-cell-selected ${borderClass}`
-            : ""
-        } ${isLastRow ? "st-table-cell-last-row" : ""}
-        ${isOddRow ? "st-table-cell-odd-row" : ""}`}
-      >
-        {content}
-      </div>
-    );
-  }
-);
-
-export default TableCell;

package/src/components/SimpleTable/TableFooter.tsx

@@ -1,61 +0,0 @@
-import { ReactNode } from "react";
-
-interface TableFooterProps {
-  currentPage: number;
-  hideFooter?: boolean;
-  nextIcon?: ReactNode;
-  onPageChange: (page: number) => void;
-  prevIcon?: ReactNode;
-  rowsPerPage: number;
-  totalRows: number;
-}
-
-const TableFooter = ({
-  currentPage,
-  hideFooter,
-  nextIcon,
-  onPageChange,
-  prevIcon,
-  rowsPerPage,
-  totalRows,
-}: TableFooterProps) => {
-  const totalPages = Math.ceil(totalRows / rowsPerPage);
-
-  const handlePageChange = (page: number) => {
-    if (page >= 1 && page <= totalPages) {
-      onPageChange(page);
-    }
-  };
-
-  if (hideFooter) return null;
-
-  return (
-    <div className="st-footer">
-      <button
-        className="st-next-prev-btn"
-        onClick={() => handlePageChange(currentPage - 1)}
-        disabled={currentPage === 1}
-      >
-        {prevIcon}
-      </button>
-      <button
-        className="st-next-prev-btn"
-        onClick={() => handlePageChange(currentPage + 1)}
-        disabled={currentPage === totalPages}
-      >
-        {nextIcon}
-      </button>
-      {Array.from({ length: totalPages }, (_, index) => (
-        <button
-          key={index}
-          onClick={() => handlePageChange(index + 1)}
-          className={`st-page-btn ${currentPage === index + 1 ? "active" : ""}`}
-        >
-          {index + 1}
-        </button>
-      ))}
-    </div>
-  );
-};
-
-export default TableFooter;

package/src/components/SimpleTable/TableHeader.tsx

@@ -1,60 +0,0 @@
-import { createRef, Dispatch, SetStateAction, useRef } from "react";
-import Animate from "../Animate";
-import TableHeaderCell from "./TableHeaderCell";
-import HeaderObject from "../../types/HeaderObject";
-import TableLastColumnCell from "./TableLastColumnCell";
-import TableRowSeparator from "./TableRowSeparator";
-
-interface TableHeaderProps {
-  enableColumnResizing: boolean;
-  forceUpdate: () => void;
-  headersRef: React.RefObject<HeaderObject[]>;
-  isWidthDragging: boolean;
-  onSort: (columnIndex: number) => void;
-  onTableHeaderDragEnd: (newHeaders: HeaderObject[]) => void;
-  setIsWidthDragging: Dispatch<SetStateAction<boolean>>;
-  shouldDisplayLastColumnCell: boolean;
-}
-
-const TableHeader = ({
-  enableColumnResizing,
-  forceUpdate,
-  headersRef,
-  isWidthDragging,
-  onSort,
-  onTableHeaderDragEnd,
-  setIsWidthDragging,
-  shouldDisplayLastColumnCell,
-}: TableHeaderProps) => {
-  const draggedHeaderRef = useRef<HeaderObject | null>(null);
-  const hoveredHeaderRef = useRef<HeaderObject | null>(null);
-
-  return (
-    <>
-      <Animate pause={isWidthDragging}>
-        {headersRef.current?.map((header, index) => (
-          <TableHeaderCell
-            draggedHeaderRef={draggedHeaderRef}
-            enableColumnResizing={enableColumnResizing}
-            forceUpdate={forceUpdate}
-            headersRef={headersRef}
-            hoveredHeaderRef={hoveredHeaderRef}
-            index={index}
-            key={header.accessor}
-            onSort={onSort}
-            onTableHeaderDragEnd={onTableHeaderDragEnd}
-            ref={createRef()}
-            setIsWidthDragging={setIsWidthDragging}
-          />
-        ))}
-        <TableLastColumnCell
-          ref={createRef()}
-          visible={shouldDisplayLastColumnCell}
-        />
-      </Animate>
-      <TableRowSeparator />
-    </>
-  );
-};
-
-export default TableHeader;

package/src/components/SimpleTable/TableHeaderCell.tsx

@@ -1,129 +0,0 @@
-import { forwardRef, useRef, SetStateAction, Dispatch, useState } from "react";
-import useTableHeaderCell from "../../hooks/useTableHeaderCell";
-import { throttle } from "../../utils/performanceUtils";
-import HeaderObject from "../../types/HeaderObject";
-
-interface TableHeaderCellProps {
-  draggedHeaderRef: React.MutableRefObject<HeaderObject | null>;
-  enableColumnResizing: boolean;
-  forceUpdate: () => void;
-  headersRef: React.RefObject<HeaderObject[]>;
-  hoveredHeaderRef: React.MutableRefObject<HeaderObject | null>;
-  index: number;
-  onSort: (columnIndex: number) => void;
-  onTableHeaderDragEnd: (newHeaders: HeaderObject[]) => void;
-  setIsWidthDragging: Dispatch<SetStateAction<boolean>>;
-}
-
-const TableHeaderCell = forwardRef<HTMLDivElement, TableHeaderCellProps>(
-  (
-    {
-      draggedHeaderRef,
-      enableColumnResizing,
-      forceUpdate,
-      headersRef,
-      hoveredHeaderRef,
-      index,
-      onSort,
-      onTableHeaderDragEnd,
-      setIsWidthDragging,
-    },
-    ref
-  ) => {
-    const prevDraggingPosition = useRef({ pageX: 0, pageY: 0 });
-    const [isDragging, setIsDragging] = useState(false);
-
-    const header = headersRef.current?.[index];
-
-    const { handleDragStart, handleDragOver, handleDragEnd } =
-      useTableHeaderCell({
-        draggedHeaderRef,
-        headersRef,
-        hoveredHeaderRef,
-        onTableHeaderDragEnd,
-      });
-
-    const handleDragStartWrapper = (header: HeaderObject) => {
-      setIsDragging(true);
-      handleDragStart(header);
-    };
-
-    const handleDragEndWrapper = () => {
-      setIsDragging(false);
-      handleDragEnd();
-    };
-
-    // Throttle the handleDragOver function
-    const throttledHandleDragOver = useRef(
-      throttle((header: HeaderObject) => {
-        handleDragOver(header);
-      }, 100)
-    ).current;
-
-    const handleResizeStart = (e: React.MouseEvent) => {
-      setIsWidthDragging(true);
-      e.preventDefault();
-      const startX = e.clientX;
-      if (!header) return;
-      const startWidth = header.width;
-
-      const throttledMouseMove = throttle((e: MouseEvent) => {
-        const newWidth = Math.max(startWidth + (e.clientX - startX), 10); // Ensure a minimum width
-        if (!header) return;
-        headersRef.current[index].width = newWidth;
-        forceUpdate();
-      }, 10); // Adjust the throttle delay as needed
-
-      const handleMouseUp = () => {
-        document.removeEventListener("mousemove", throttledMouseMove);
-        document.removeEventListener("mouseup", handleMouseUp);
-        setIsWidthDragging(false);
-      };
-
-      document.addEventListener("mousemove", throttledMouseMove);
-      document.addEventListener("mouseup", handleMouseUp);
-    };
-
-    if (!header) return null;
-
-    return (
-      <div
-        className={`st-table-header-cell ${
-          header === hoveredHeaderRef.current ? "st-hovered" : ""
-        } ${isDragging ? "st-dragging" : ""}`}
-        ref={ref}
-        style={{ width: header.width }}
-      >
-        <div
-          className="st-table-header-label"
-          draggable
-          onClick={() => onSort(index)}
-          onDragStart={() => handleDragStartWrapper(header)}
-          onDragOver={(event) => {
-            const { pageX, pageY } = event;
-            if (
-              pageX === prevDraggingPosition.current.pageX &&
-              pageY === prevDraggingPosition.current.pageY
-            ) {
-              return;
-            }
-            prevDraggingPosition.current = { pageX, pageY };
-            event.preventDefault();
-            throttledHandleDragOver(header, event);
-          }}
-          onDragEnd={handleDragEndWrapper}
-        >
-          {header?.label}
-        </div>
-        {enableColumnResizing && (
-          <div
-            className="st-table-header-resize-handle"
-            onMouseDown={handleResizeStart}
-          />
-        )}
-      </div>
-    );
-  }
-);
-
-export default TableHeaderCell;