@rowsncolumns/grid 9.0.4 → 13.2.33

package/src/hooks/useSizer.ts

@@ -1,312 +0,0 @@
-import React, { useCallback, useState, useRef, useEffect } from "react";
-import { ViewPortProps, GridRef, CellInterface, ItemSizer } from "./../Grid";
-import {
-  debounce,
-  HiddenType,
-  isNull,
-  autoSizerCanvas,
-  castToString,
-  cellIdentifier,
-} from "./../helpers";
-import invariant from "tiny-invariant";
-
-export interface IProps {
-  /**
-   * Used to access grid functions
-   */
-  gridRef: React.MutableRefObject<GridRef | null>;
-  /**
-   * Value getter for a cell
-   */
-  getValue: (cell: CellInterface) => any;
-  /**
-   * Visible rows when the grid is first visible, Since we do not know how many rows  can fit
-   */
-  initialVisibleRows?: number;
-  /**
-   * Restrict column width by this number
-   */
-  minColumnWidth?: number;
-  /**
-   * Cell padding, used for width calculation
-   */
-  cellSpacing?: number;
-  /**
-   * Scroll timeout
-   */
-  timeout?: number;
-  /**
-   * Calculate width and resize the grid on scroll
-   */
-  resizeOnScroll?: boolean;
-  /**
-   * Font used to calculate width
-   */
-  fontFamily?: string;
-  fontSize?: number;
-  fontWeight?: string;
-  fontStyle?: string;
-  /**
-   * Strategy used to calculate column width
-   * lazy = visible rows
-   * full = all rows
-   *
-   * columns are always lazy
-   */
-  resizeStrategy?: ResizeStrategy;
-  /**
-   * No of rows in teh grid
-   */
-  rowCount?: number;
-  /**
-   * Enable autoresize
-   */
-  autoResize?: boolean;
-  /**
-   * Map of index to size
-   */
-  columnSizes?: SizeType;
-  /**
-   * Hidden rows
-   */
-  isHiddenRow: HiddenType;
-  /**
-   * Hidden columns
-   */
-  isHiddenColumn: HiddenType;
-  /**
-   * Number of frozen rows
-   */
-  frozenRows?: number;
-  /**
-   * Current scaling factor
-   */
-  scale?: number;
-  /**
-   * Get text value
-   */
-  getText: (config: any) => string | undefined;
-}
-
-export type ResizeStrategy = "lazy" | "full";
-
-export interface AutoResizerResults {
-  /**
-   * Column width function consumed by the grid
-   */
-  columnWidth?: ItemSizer;
-  /**
-   * Callback when viewport is changed
-   */
-  onViewChange: (cells: ViewPortProps) => void;
-  /**
-   * Get column width based on resize strategy
-   */
-  getColumnWidth: (columnIndex: number, scale?: number) => number;
-  /**
-   * Text size getter
-   */
-  getTextMetrics: (text: string | number) => TextDimensions;
-}
-
-export interface TextDimensions {
-  width: number;
-  height: number;
-}
-
-export type SizeType = {
-  [key: number]: number;
-};
-
-const defaultGetText = (text: any) => text;
-
-/**
- * Auto sizer hook
- * @param param
- *
- * TODO
- * Dynamically resize columns after user has scrolled down/view port changed ?
- */
-const useAutoSizer = ({
-  gridRef,
-  getValue,
-  initialVisibleRows = 20,
-  cellSpacing = 10,
-  minColumnWidth = 60,
-  timeout = 300,
-  resizeStrategy = "lazy",
-  rowCount,
-  resizeOnScroll = true,
-  fontFamily = "Arial",
-  fontSize = 12,
-  fontWeight = "",
-  fontStyle = "",
-  autoResize = true,
-  columnSizes = {},
-  frozenRows = 0,
-  scale = 1,
-  isHiddenRow,
-  isHiddenColumn,
-  getText = defaultGetText,
-}: IProps): AutoResizerResults => {
-  invariant(
-    !(resizeStrategy === "full" && rowCount === void 0),
-    "Row count should be specified if resize stragtegy is full"
-  );
-
-  const autoSizer = useRef(autoSizerCanvas);
-  const [viewport, setViewport] = useState<ViewPortProps>({
-    rowStartIndex: 0,
-    rowStopIndex: 0,
-    columnStartIndex: 0,
-    columnStopIndex: 0,
-    visibleRowStartIndex: 0,
-    visibleRowStopIndex: 0,
-    visibleColumnStartIndex: 0,
-    visibleColumnStopIndex: 0,
-  });
-  const isMounted = useRef(false);
-  const getValueRef = useRef<typeof getValue>();
-  const viewPortRef = useRef<typeof viewport>();
-  const hiddenRowRef = useRef<typeof isHiddenRow>(isHiddenRow);
-  const handleResize = useCallback(
-    ({ rowIndex, columnIndex }: CellInterface) => {
-      gridRef.current &&
-        gridRef.current.resetAfterIndices({ rowIndex, columnIndex });
-    },
-    []
-  );
-  const debounceResizer = useRef<any>(null);
-
-  useEffect(() => {
-    getValueRef.current = getValue;
-    viewPortRef.current = viewport;
-    hiddenRowRef.current = isHiddenRow;
-  });
-
-  useEffect(() => {
-    isMounted.current = true;
-    debounceResizer.current = debounce(handleResize, timeout);
-  }, []);
-
-  /* Update any styles, fonts if necessary */
-  useEffect(() => {
-    autoSizer.current.setFont({ fontFamily, fontSize, fontWeight, fontStyle });
-  }, [fontFamily, fontSize, fontWeight, fontStyle]);
-
-  const getTextMetrics = useCallback((text: string | number) => {
-    return autoSizer.current.measureText(castToString(text) as string);
-  }, []);
-
-  /**
-   * Get width of a single cell
-   */
-  const getCellWidth = useCallback(
-    (rowIndex: number, columnIndex: number) => {
-      const cellValue =
-        getValueRef.current?.({
-          rowIndex,
-          columnIndex,
-        }) ?? null;
-      let width = cellValue?.spacing ?? 0;
-      /* Check if its null */
-      if (cellValue !== null) {
-        const isCellConfig = typeof cellValue === "object";
-        const text = getText(cellValue);
-        if (cellIdentifier !== void 0 && !isNull(text) && text !== void 0) {
-          /* Reset fonts */
-          autoSizer.current.reset();
-
-          if (isCellConfig) {
-            const isBold = cellValue.bold;
-            autoSizer.current.setFont({
-              fontWeight: isBold ? "bold" : "",
-              fontSize: (cellValue.fontSize || fontSize) * scale,
-              fontFamily: cellValue.fontFamily,
-              fontStyle: cellValue.italic ? "italic" : "",
-            });
-          }
-          const metrics = autoSizer.current.measureText(text);
-          if (metrics) {
-            width += Math.ceil(metrics.width) + cellSpacing;
-          }
-        }
-      }
-      return width;
-    },
-    [scale]
-  );
-
-  /**
-   * Calculate column width
-   */
-  const getColumnWidth = useCallback(
-    (columnIndex: number) => {
-      const { rowStartIndex = 0, rowStopIndex = 0 } = viewPortRef.current ?? {};
-      const visibleRows =
-        resizeStrategy === "full"
-          ? (rowCount as number)
-          : rowStopIndex || initialVisibleRows;
-      let start = resizeStrategy === "full" ? 0 : rowStartIndex;
-      let maxWidth = minColumnWidth;
-
-      /* Calculate for frozen rows */
-      for (let i = 0; i < frozenRows; i++) {
-        if (hiddenRowRef.current?.(i)) {
-          continue;
-        }
-        const width = getCellWidth(i, columnIndex);
-        if (width > maxWidth) maxWidth = width;
-      }
-
-      /* Loop through all visible rows */
-      while (start < visibleRows) {
-        if (hiddenRowRef.current?.(start)) {
-          start++;
-          continue;
-        }
-        const width = getCellWidth(start, columnIndex);
-        if (width > maxWidth) maxWidth = width;
-        start++;
-      }
-
-      return maxWidth / scale;
-    },
-    [viewport, initialVisibleRows, frozenRows, scale]
-  );
-
-  const handleViewChange = useCallback(
-    (cells: ViewPortProps) => {
-      /* Update viewport cells */
-      setViewport(cells);
-
-      /* Check if viewport has changed */
-      if (
-        resizeStrategy === "full" ||
-        !resizeOnScroll ||
-        (cells.rowStartIndex === viewport.rowStartIndex &&
-          cells.columnStartIndex === viewport.columnStartIndex)
-      )
-        return;
-      if (gridRef.current) {
-        /* During first mount, column width is calculated. Do not re-calculate */
-        if (!isMounted.current) return;
-        debounceResizer.current({
-          rowIndex: cells.rowStartIndex,
-          columnIndex: cells.columnStartIndex,
-        });
-      }
-    },
-    [resizeOnScroll, viewport, resizeStrategy]
-  );
-
-  return {
-    ...(autoResize ? { columnWidth: getColumnWidth } : undefined),
-    getColumnWidth,
-    // getRowHeight,
-    onViewChange: handleViewChange,
-    getTextMetrics,
-  };
-};
-
-export default useAutoSizer;

package/src/hooks/useTooltip.tsx

@@ -1,172 +0,0 @@
-import React, {
-  useCallback,
-  useState,
-  useMemo,
-  useRef,
-  useEffect,
-} from "react";
-import { CellInterface, GridRef } from "../Grid";
-import { debounce, throttle } from "../helpers";
-
-export interface TooltipOptions {
-  /**
-   * Tooltip component
-   */
-  getTooltip?: (cell: CellInterface | null) => React.ElementType | null;
-  /**
-   * Grid references
-   */
-  gridRef: React.MutableRefObject<GridRef | null>;
-}
-
-export interface TooltipResults {
-  /**
-   * Tooltip component to inject into the page
-   */
-  tooltipComponent: React.ReactElement | null;
-  /**
-   * Mousemove listener to align tooltip
-   */
-  onMouseMove: ((e: React.MouseEvent<HTMLElement>) => void) | undefined;
-  /**
-   * Mouse leave listener to hide tooltip
-   */
-  onMouseLeave: ((e: React.MouseEvent<HTMLElement>) => void) | undefined;
-}
-
-export interface DefaultTooltipProps {
-  /**
-   * Tooltip x position
-   */
-  x?: number;
-  /**
-   * Tooltip y position
-   */
-  y?: number;
-  width?: number;
-  height?: number;
-  scrollLeft?: number;
-  scrollTop?: number;
-}
-
-const DefaultTooltipComponent: React.FC<DefaultTooltipProps> = ({
-  x = 0,
-  y = 0,
-  scrollLeft = 0,
-  scrollTop = 0,
-  width = 0,
-  height = 0,
-}) => {
-  const posX = x + width - scrollLeft;
-  const posY = y - scrollTop;
-  return (
-    <div
-      style={{
-        position: "absolute",
-        left: 0,
-        top: 0,
-        transform: `translate(${posX}px, ${posY}px)`,
-        maxWidth: 200,
-        minWidth: 160,
-        background: "white",
-        boxShadow: "0 4px 8px 3px rgba(60,64,67,.15)",
-        padding: 12,
-        borderRadius: 4,
-        fontSize: 13,
-      }}
-    >
-      {x}
-    </div>
-  );
-};
-
-const getDefaultTooltip = () => DefaultTooltipComponent;
-
-const useTooltip = ({
-  gridRef,
-  getTooltip = getDefaultTooltip,
-}: TooltipOptions): TooltipResults => {
-  const [activeCell, setActiveCell] = useState<CellInterface | null>(null);
-  const isTooltipActive = useRef(false);
-  const activeCellRef = useRef(activeCell);
-  const [tooltipPosition, setTooltipPosition] = useState<
-    Pick<
-      DefaultTooltipProps,
-      "x" | "y" | "width" | "height" | "scrollLeft" | "scrollTop"
-    >
-  >({});
-  const showTooltip = !!activeCell;
-  const TooltipComponent = useMemo(() => {
-    return getTooltip(activeCell);
-  }, [activeCell, getTooltip]);
-
-  const handleTooltipMouseEnter = useCallback(() => {
-    isTooltipActive.current = true;
-  }, []);
-  const handleTooltipMouseLeave = useCallback(() => {
-    isTooltipActive.current = false;
-    setActiveCell(null);
-  }, []);
-
-  const tooltipComponent =
-    showTooltip && TooltipComponent ? (
-      <TooltipComponent
-        {...tooltipPosition}
-        onMouseEnter={handleTooltipMouseEnter}
-        onMouseLeave={handleTooltipMouseLeave}
-      />
-    ) : null;
-
-  const handleMouseMove = useCallback((e: React.MouseEvent<HTMLElement>) => {
-    if (!gridRef.current) return;
-    const coords = gridRef.current.getCellCoordsFromOffset(
-      e.clientX,
-      e.clientY
-    );
-
-    if (!coords) return;
-    const { rowIndex, columnIndex } = coords;
-    /* Exit if its the same cell */
-    if (
-      activeCellRef.current &&
-      activeCellRef.current.rowIndex === rowIndex &&
-      activeCellRef.current.columnIndex === columnIndex
-    )
-      return;
-
-    const pos = gridRef.current.getCellOffsetFromCoords(coords);
-    const scrollPosition = gridRef.current.getScrollPosition();
-    setTooltipPosition({
-      ...pos,
-      ...scrollPosition,
-    });
-    setActiveCell({ rowIndex, columnIndex });
-  }, []);
-
-  const handleMouseLeave = useCallback(() => {
-    if (isTooltipActive.current) return;
-    setActiveCell(null);
-  }, []);
-
-  /* Raf throttler */
-  const mouseMoveThrottler =
-    useRef<(e: React.MouseEvent<HTMLElement>) => void>();
-  const mouseLeaveThrottler = useRef<() => void>();
-  useEffect(() => {
-    mouseMoveThrottler.current = throttle(handleMouseMove, 100);
-    mouseLeaveThrottler.current = debounce(handleMouseLeave, 2000);
-  }, []);
-
-  /* Update activecell ref */
-  useEffect(() => {
-    activeCellRef.current = activeCell;
-  }, [activeCell]);
-
-  return {
-    tooltipComponent,
-    onMouseMove: mouseMoveThrottler.current,
-    onMouseLeave: mouseLeaveThrottler.current,
-  };
-};
-
-export default useTooltip;

package/src/hooks/useTouch.ts

@@ -1,116 +0,0 @@
-import React, { useCallback, useEffect, useRef } from "react";
-import { GridRef, ScrollCoords } from "../Grid";
-// @ts-ignore
-import { Scroller } from "scroller";
-import { canUseDOM } from "../helpers";
-
-export interface TouchProps {
-  /**
-   * Grid reference to access grid methods
-   */
-  gridRef: React.MutableRefObject<GridRef | null>;
-}
-
-export interface TouchResults {
-  isTouchDevice: boolean;
-  scrollTo: (scrollState: ScrollCoords) => void;
-  scrollToTop: () => void;
-}
-
-/**
- * Enable touch interactions
- * Supports
- * 1. Scrolling
- * 2. Cell selection
- */
-const useTouch = ({ gridRef }: TouchProps): TouchResults => {
-  const scrollerRef = useRef<typeof Scroller | null>(null);
-  const isTouchDevice = useRef<boolean>(false);
-  useEffect(() => {
-    isTouchDevice.current = canUseDOM && "ontouchstart" in window;
-    /* Update dimension */
-    if (isTouchDevice.current) {
-      const options = {
-        scrollingX: true,
-        scrollingY: true,
-        decelerationRate: 0.95,
-        penetrationAcceleration: 0.08,
-      };
-
-      /* Add listeners */
-      gridRef.current?.container?.addEventListener(
-        "touchstart",
-        handleTouchStart
-      );
-      gridRef.current?.container?.addEventListener("touchend", handleTouchEnd);
-      gridRef.current?.container?.addEventListener(
-        "touchmove",
-        handleTouchMove
-      );
-
-      /* Add scroller */
-      scrollerRef.current = new Scroller(handleTouchScroll, options);
-
-      const dims = gridRef.current?.getDimensions();
-      /* Update dimensions */
-      if (dims) updateScrollDimensions(dims);
-    }
-  }, []);
-
-  /* Scroll to x, y coordinate */
-  const scrollTo = useCallback(({ scrollLeft, scrollTop }: ScrollCoords) => {
-    if (scrollerRef.current)
-      scrollerRef.current.scrollTo(scrollLeft, scrollTop);
-  }, []);
-  /* Scrolls to top if mobile */
-  const scrollToTop = useCallback(() => {
-    if (scrollerRef.current) scrollerRef.current.scrollTo(0, 0);
-  }, []);
-
-  const updateScrollDimensions = useCallback(
-    ({
-      containerWidth,
-      containerHeight,
-      estimatedTotalWidth,
-      estimatedTotalHeight,
-    }: {
-      containerWidth: number;
-      containerHeight: number;
-      estimatedTotalWidth: number;
-      estimatedTotalHeight: number;
-    }) => {
-      scrollerRef.current.setDimensions(
-        containerWidth,
-        containerHeight,
-        estimatedTotalWidth,
-        estimatedTotalHeight
-      );
-    },
-    []
-  );
-
-  const handleTouchScroll = useCallback(
-    (scrollLeft: number, scrollTop: number) => {
-      gridRef.current?.scrollTo({ scrollTop, scrollLeft });
-    },
-    []
-  );
-  const handleTouchStart = useCallback((e: globalThis.TouchEvent) => {
-    scrollerRef.current.doTouchStart(e.touches, e.timeStamp);
-  }, []);
-  const handleTouchMove = useCallback((e: globalThis.TouchEvent) => {
-    e.preventDefault();
-    scrollerRef.current.doTouchMove(e.touches, e.timeStamp);
-  }, []);
-  const handleTouchEnd = useCallback((e: globalThis.TouchEvent) => {
-    scrollerRef.current.doTouchEnd(e.timeStamp);
-  }, []);
-
-  return {
-    isTouchDevice: isTouchDevice.current,
-    scrollTo,
-    scrollToTop,
-  };
-};
-
-export default useTouch;