@rowsncolumns/grid 9.0.4 → 13.2.33

package/src/hooks/useUndo.ts

@@ -1,134 +0,0 @@
-import React, { useReducer, useRef, useCallback, useEffect } from "react";
-import { KeyCodes } from "../types";
-import { focusableNodeNames } from "../helpers";
-
-/**
- * Spec: https://tools.ietf.org/html/rfc6902
- *
- * add, { "op": "add", "path": ["data", "1,2"], "value": "hello world" }
- * remove { "op": "remove", "path": ["data", "1,2"], "value": "hello world" }
- * replace { "op": "replace", "path": ["data", "1,2"], "value": "hello world" }
- * move { "op": "move", "from": "/a/b/c", "path": "/a/b/d" }
- * copy
- */
-
-export interface UndoProps {
-  enableGlobalKeyHandlers?: boolean;
-  onRedo?: (patches: any) => void;
-  onUndo?: (patches: any) => void;
-  identifier?: (patch: any) => any;
-}
-
-export interface UndoManager {
-  undo: () => void;
-  redo: () => void;
-  add: (patches: any) => void;
-  replace: (patches: any, inversePatches: any) => void;
-  canUndo: boolean;
-  canRedo: boolean;
-  onKeyDown?: (e: React.KeyboardEvent<HTMLDivElement>) => void;
-}
-
-export interface PatchInterface<T> {
-  patches: T[];
-  inversePatches: T[];
-}
-
-/**
- * Undo/Redo hook
- * @param
- */
-const useUndo = <T>(props: UndoProps = {}): UndoManager => {
-  const { enableGlobalKeyHandlers, onRedo, onUndo, identifier } = props;
-  const undoStack = useRef<PatchInterface<T>[]>([]);
-  const undoStackPointer = useRef<number>(-1);
-  const [_, forceRender] = useReducer((s) => s + 1, 0);
-
-  useEffect(() => {
-    if (enableGlobalKeyHandlers)
-      document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [enableGlobalKeyHandlers]);
-
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent<HTMLElement> | globalThis.KeyboardEvent) => {
-      /* Is user focused on an input, textarea or select element */
-      if (
-        document.activeElement &&
-        focusableNodeNames.has(document.activeElement?.nodeName)
-      ) {
-        return;
-      }
-      const isMeta = e.metaKey || e.ctrlKey;
-      const isUndo = isMeta && e.which === KeyCodes.Z;
-      const isRedo = (e.shiftKey && isUndo) || e.which === KeyCodes.KEY_Y;
-      if (!isRedo && !isUndo) return;
-      if (isRedo) {
-        handleRedo();
-      } else {
-        handleUndo();
-      }
-    },
-    []
-  );
-
-  const handleUndo = useCallback(() => {
-    if (undoStackPointer.current < 0) return;
-    const patches = undoStack.current[undoStackPointer.current].inversePatches;
-    undoStackPointer.current--;
-    onUndo && onUndo(patches);
-    forceRender();
-  }, []);
-
-  const handleRedo = useCallback(() => {
-    if (undoStackPointer.current === undoStack.current.length - 1) return;
-    undoStackPointer.current++;
-    const patches = undoStack.current[undoStackPointer.current].patches;
-    onRedo && onRedo(patches);
-    forceRender();
-  }, []);
-
-  const addUndoable = useCallback((history: PatchInterface<T>) => {
-    const { patches, inversePatches } = history;
-    const pointer = ++undoStackPointer.current;
-    undoStack.current.length = pointer;
-    undoStack.current[pointer] = { patches, inversePatches };
-    forceRender();
-  }, []);
-
-  /**
-   * Use for async update where you want to replace the last patch
-   */
-  const replaceLastPatch = useCallback(
-    (patches: T[] | undefined, inversePatches: T[] | undefined) => {
-      if (patches === void 0) {
-        return;
-      }
-      const currentStack = undoStack.current;
-      const pointer = undoStackPointer.current;
-      const curPatches = currentStack[pointer];
-
-      if (curPatches?.patches === void 0) {
-        return;
-      }
-      curPatches.patches.push(...patches);
-
-      if (inversePatches && curPatches?.inversePatches) {
-        curPatches.inversePatches.unshift(...inversePatches);
-      }
-    },
-    []
-  );
-
-  return {
-    undo: handleUndo,
-    redo: handleRedo,
-    add: addUndoable,
-    replace: replaceLastPatch,
-    onKeyDown: enableGlobalKeyHandlers ? undefined : handleKeyDown,
-    canUndo: !(undoStackPointer.current < 0),
-    canRedo: !(undoStackPointer.current === undoStack.current.length - 1),
-  };
-};
-
-export default useUndo;

package/src/index.tsx

@@ -1,46 +0,0 @@
-import Grid from "./Grid";
-import { CellRenderer, Cell } from "./Cell";
-import {
-  CellOverlay,
-  CellRenderer as CellOverlayRenderer
-} from "./CellOverlay";
-import useEditable from "./hooks/useEditable";
-import useSelection from "./hooks/useSelection";
-import useTooltip from "./hooks/useTooltip";
-import useSizer from "./hooks/useSizer";
-import useTouch from "./hooks/useTouch";
-import useCopyPaste from "./hooks/useCopyPaste";
-import useUndo from "./hooks/useUndo";
-import usePagination from "./hooks/usePagination";
-import useFilter from "./hooks/useFilter";
-import Image from "./Image";
-import Selection from "./Selection";
-
-export {
-  Grid,
-  CellRenderer,
-  Cell,
-  CellOverlay,
-  useEditable,
-  useSelection,
-  useTooltip,
-  useSizer,
-  useCopyPaste,
-  usePagination,
-  useUndo,
-  useTouch,
-  useFilter,
-  CellOverlayRenderer,
-  Image,
-  Selection
-};
-export default Grid;
-export * from "./Grid";
-export * from "./helpers";
-export * from "./hooks/useFilter";
-export * from "./hooks/useUndo";
-export * from "./hooks/useTooltip";
-export * from "./hooks/useEditable";
-export * from "./hooks/useSelection";
-export * from "./types";
-export * from "./Image";

package/src/tests/Grid.spec.tsx

@@ -1,47 +0,0 @@
-// @ts-nocheck
-import React from "react";
-import Grid from "../Grid";
-import "konva/lib/shapes/Rect";
-import { Rect } from "react-konva";
-import { render } from "@testing-library/react";
-
-describe("Grid", () => {
-  let itemRenderer;
-  let rowHeight;
-  let columnWidth;
-
-  beforeEach(() => {
-    jest.useFakeTimers();
-    itemRenderer = jest.fn((props) => <Rect />);
-    columnWidth = jest.fn((index) => 50 + index);
-    rowHeight = jest.fn((index) => 25 + index);
-  });
-
-  test("renders the grid", () => {
-    const renderGrid = () =>
-      render(
-        <Grid
-          itemRenderer={itemRenderer}
-          rowCount={1}
-          columnCount={1}
-          rowHeight={rowHeight}
-          columnWidth={columnWidth}
-        />
-      );
-    expect(renderGrid).not.toThrow();
-    expect(itemRenderer).toHaveBeenCalled();
-    expect(rowHeight).toHaveBeenCalled();
-    expect(columnWidth).toHaveBeenCalled();
-  });
-
-  test("renders empty grid", () => {
-    const renderGrid = () => render(<Grid itemRenderer={itemRenderer} />);
-    expect(renderGrid).not.toThrow();
-    expect(itemRenderer).not.toHaveBeenCalled();
-  });
-
-  // test("throws error if itemRenderer is not a valid konva element", () => {
-  //   const renderGrid = () => render(<Grid itemRenderer={() => <div />} />);
-  //   expect(renderGrid).toThrow();
-  // });
-});

package/src/tests/helpers.test.ts

@@ -1,292 +0,0 @@
-// @ts-nocheck
-import {
-  getEstimatedTotalWidth,
-  getEstimatedTotalHeight,
-  getBoundedCells,
-  cellIdentifier,
-  extendAreaToMergedCells,
-  areaIntersects,
-  findNextContentfulCell,
-  findLastContentfulCell,
-} from "../helpers";
-import { Direction } from "../types";
-
-describe("getBoundedCells", () => {
-  it("returns empty for undefined area", () => {
-    const cells = getBoundedCells(undefined);
-    expect(cells.size).toBe(0);
-  });
-
-  it("returns accurate top, left, right and bottom indexs", () => {
-    const cells = getBoundedCells({
-      top: 1,
-      right: 5,
-      left: 1,
-      bottom: 5,
-    });
-    expect(cells.has(cellIdentifier(1, 1))).toBeTruthy();
-    expect(cells.has(cellIdentifier(5, 5))).toBeTruthy();
-  });
-});
-
-describe("getEstimatedTotalWidth", () => {
-  it("returns estimated width during initial load", () => {
-    const columnCount = 200;
-    const instanceProps = {
-      lastMeasuredColumnIndex: -1,
-      columnMetadataMap: {},
-      estimatedColumnWidth: 30,
-    };
-
-    expect(getEstimatedTotalWidth(columnCount, instanceProps)).toBe(6000);
-  });
-
-  it("returns correct width", () => {
-    const columnCount = 200;
-    const instanceProps = {
-      lastMeasuredColumnIndex: 1,
-      columnMetadataMap: {
-        0: {
-          offset: 0,
-          size: 20,
-        },
-        1: {
-          offset: 20,
-          size: 70,
-        },
-      },
-      estimatedColumnWidth: 30,
-    };
-
-    expect(getEstimatedTotalWidth(columnCount, instanceProps)).toBe(6030);
-  });
-});
-
-describe("getEstimatedTotalHeight", () => {
-  it("returns estimated height during initial load", () => {
-    const rowCount = 200;
-    const instanceProps = {
-      lastMeasuredRowIndex: -1,
-      rowMetadataMap: {},
-      estimatedRowHeight: 30,
-    };
-
-    expect(getEstimatedTotalHeight(rowCount, instanceProps)).toBe(6000);
-  });
-
-  it("returns correct height after load", () => {
-    const rowCount = 200;
-    const instanceProps = {
-      lastMeasuredRowIndex: 0,
-      rowMetadataMap: {
-        0: {
-          offset: 0,
-          size: 20,
-        },
-        1: {
-          offset: 20,
-          size: 70,
-        },
-      },
-      estimatedRowHeight: 30,
-    };
-
-    expect(getEstimatedTotalHeight(rowCount, instanceProps)).toBe(5990);
-  });
-});
-
-describe("extendAreaToMergedCells", () => {
-  it("expands to merged cells", () => {
-    const mergedCells = [
-      {
-        top: 2,
-        left: 2,
-        right: 5,
-        bottom: 5,
-      },
-    ];
-    const originalArea = {
-      top: 2,
-      left: 1,
-      bottom: 2,
-      right: 3,
-    };
-    const area = extendAreaToMergedCells(originalArea, mergedCells);
-    expect(area.bottom).toBe(5);
-    expect(area.right).toBe(5);
-  });
-});
-
-describe("areaIntersects", () => {
-  it("checks if two areas intersects", () => {
-    const area1 = {
-      top: 2,
-      left: 1,
-      right: 3,
-      bottom: 4,
-    };
-    const area2 = {
-      top: 5,
-      left: 2,
-      bottom: 3,
-      right: 2,
-    };
-
-    expect(areaIntersects(area1, area2)).toBeFalsy();
-  });
-  it("returns true for intersecting area", () => {
-    const area1 = {
-      top: 2,
-      left: 1,
-      right: 3,
-      bottom: 4,
-    };
-    const area2 = {
-      top: 2,
-      left: 2,
-      bottom: 3,
-      right: 2,
-    };
-
-    expect(areaIntersects(area1, area2)).toBeTruthy();
-  });
-});
-
-describe("findNextContentfulCell", () => {
-  let activeCell, cell;
-  it("returns last cell if no contentful cell is found", () => {
-    activeCell = { rowIndex: 1, columnIndex: 2 };
-    const getValue = () => null;
-    cell = findNextContentfulCell(
-      activeCell,
-      getValue,
-      undefined,
-      Direction.Down,
-      20
-    );
-    expect(cell.rowIndex).toBe(20);
-
-    activeCell = { rowIndex: 10, columnIndex: 2 };
-    cell = findNextContentfulCell(
-      activeCell,
-      getValue,
-      undefined,
-      Direction.Up,
-      1
-    );
-    expect(cell.rowIndex).toBe(1);
-
-    activeCell = { rowIndex: 10, columnIndex: 5 };
-    cell = findNextContentfulCell(
-      activeCell,
-      getValue,
-      undefined,
-      Direction.Left,
-      1
-    );
-    expect(cell.columnIndex).toBe(1);
-
-    activeCell = { rowIndex: 10, columnIndex: 5 };
-    cell = findNextContentfulCell(
-      activeCell,
-      getValue,
-      undefined,
-      Direction.Right,
-      100
-    );
-    expect(cell.columnIndex).toBe(100);
-  });
-
-  it("returns next cell with content", () => {
-    activeCell = { rowIndex: 1, columnIndex: 2 };
-    const getValue = (cell) => {
-      if (cell.rowIndex == 5) return "hello";
-      return null;
-    };
-    cell = findNextContentfulCell(
-      activeCell,
-      getValue,
-      undefined,
-      Direction.Down,
-      20
-    );
-    expect(cell.rowIndex).toBe(5);
-  });
-});
-
-describe("findLastContentfulCell", () => {
-  let activeCell, cell;
-  it("returns last cell if no contentful cell is found", () => {
-    activeCell = { rowIndex: 1, columnIndex: 2 };
-    let getValue = (cell) => {
-      if (cell.rowIndex === 5) return null;
-      return "hello";
-    };
-    cell = findLastContentfulCell(
-      activeCell,
-      getValue,
-      undefined,
-      Direction.Down,
-      20
-    );
-    expect(cell.rowIndex).toBe(4);
-
-    activeCell = { rowIndex: 20, columnIndex: 2 };
-    getValue = (cell) => {
-      if (cell.rowIndex === 5) return null;
-      return "hello";
-    };
-    cell = findLastContentfulCell(
-      activeCell,
-      getValue,
-      undefined,
-      Direction.Up,
-      1
-    );
-    expect(cell.rowIndex).toBe(6);
-
-    activeCell = { rowIndex: 1, columnIndex: 2 };
-    getValue = (cell) => {
-      if (cell.columnIndex === 5) return null;
-      return "hello";
-    };
-    cell = findLastContentfulCell(
-      activeCell,
-      getValue,
-      undefined,
-      Direction.Right,
-      10
-    );
-    expect(cell.columnIndex).toBe(4);
-
-    activeCell = { rowIndex: 1, columnIndex: 20 };
-    getValue = (cell) => {
-      if (cell.columnIndex === 5) return null;
-      return "hello";
-    };
-    cell = findLastContentfulCell(
-      activeCell,
-      getValue,
-      undefined,
-      Direction.Left,
-      1
-    );
-    expect(cell.columnIndex).toBe(6);
-  });
-
-  it("returns same cell if its already in the edge", () => {
-    const activeCell = { rowIndex: 1, columnIndex: 2 };
-    const getValue = (cell) => {
-      if (cell.rowIndex === 5) return "hello";
-      return null;
-    };
-    const cell = findLastContentfulCell(
-      activeCell,
-      getValue,
-      undefined,
-      Direction.Down,
-      20
-    );
-    expect(cell.rowIndex).toBe(1);
-  });
-});

package/src/tests/usePagination.test.ts

@@ -1,28 +0,0 @@
-// @ts-nocheck
-import { renderHook, act } from "@testing-library/react-hooks";
-import usePagination from "../hooks/usePagination";
-
-describe("usePagination", () => {
-  let options = { pageSize: 10, total: 100 };
-  it("is a function", () => {
-    expect(typeof usePagination).toBe("function");
-  });
-
-  it("sets initialPage to 1", () => {
-    const { result } = renderHook(() => usePagination(options));
-    expect(result.current.currentPage).toBe(1);
-    expect(result.current.totalPages).toBe(10);
-  });
-
-  it("updates currentPage", () => {
-    const { result } = renderHook(() => usePagination(options));
-    act(() => result.current.nextPage());
-    expect(result.current.currentPage).toBe(2);
-    act(() => result.current.goToPage(3));
-    expect(result.current.currentPage).toBe(3);
-    act(() => result.current.goToLast());
-    expect(result.current.currentPage).toBe(10);
-    act(() => result.current.goToFirst());
-    expect(result.current.currentPage).toBe(1);
-  });
-});

package/src/tests/useSelection.test.ts

@@ -1,27 +0,0 @@
-import { renderHook } from "@testing-library/react-hooks";
-import useSelection from "./../hooks/useSelection";
-
-describe("useSelection", () => {
-  it("is a function", () => {
-    expect(typeof useSelection).toBe("function");
-  });
-
-  it("sets initialselection to be empty", () => {
-    // @ts-ignore
-    const { result } = renderHook(() => useSelection({}));
-    expect(result.current.selections).toStrictEqual([]);
-  });
-
-  it("picks up initialselection", () => {
-    const initialSelections = [
-      { bounds: { top: 0, left: 0, right: 0, bottom: 0 } },
-    ];
-    const { result } = renderHook(() =>
-      // @ts-ignore
-      useSelection({
-        initialSelections,
-      })
-    );
-    expect(result.current.selections).toStrictEqual(initialSelections);
-  });
-});

package/src/tests/useUndo.test.ts

@@ -1,73 +0,0 @@
-import { renderHook, act } from "@testing-library/react-hooks";
-import useUndo, { PatchInterface } from "./../hooks/useUndo";
-
-type Patch = any;
-
-describe("useUndo", () => {
-  it("is a function", () => {
-    expect(typeof useUndo).toBe("function");
-  });
-
-  it("initializes with falsy canUndo and canRedo", () => {
-    const { result } = renderHook(() => useUndo());
-    expect(result.current.canRedo).toBeFalsy;
-    expect(result.current.canUndo).toBeFalsy;
-  });
-
-  it("can add add to stack", () => {
-    const { result } = renderHook(() => useUndo({}));
-    const patch: PatchInterface<Patch> = {
-      patches: [{ op: "replace", value: "b", path: ["hello"] }],
-      inversePatches: [{ op: "replace", value: "a", path: ["hello"] }],
-    };
-
-    act(() => {
-      result.current.add(patch);
-    });
-    expect(result.current.canUndo).toBeTruthy();
-  });
-
-  it("can add undo and redo", () => {
-    const { result } = renderHook(() => useUndo({}));
-    const patch: PatchInterface<Patch> = {
-      patches: [{ op: "replace", value: "b", path: ["hello"] }],
-      inversePatches: [{ op: "replace", value: "a", path: ["hello"] }],
-    };
-
-    act(() => {
-      result.current.add(patch);
-    });
-    expect(result.current.canUndo).toBeTruthy();
-    act(() => {
-      result.current.undo();
-    });
-    expect(result.current.canUndo).toBeFalsy();
-    expect(result.current.canRedo).toBeTruthy();
-  });
-
-  it("calls onundo and onredo", () => {
-    const onUndo = jest.fn();
-    const onRedo = jest.fn();
-    const { result } = renderHook(() => useUndo({ onUndo, onRedo }));
-    const patch: PatchInterface<Patch> = {
-      patches: [{ op: "replace", value: "b", path: ["hello"] }],
-      inversePatches: [{ op: "replace", value: "a", path: ["hello"] }],
-    };
-
-    act(() => {
-      result.current.add(patch);
-    });
-    expect(result.current.canUndo).toBeTruthy();
-    act(() => {
-      result.current.undo();
-    });
-    expect(onUndo).toBeCalled();
-    expect(onUndo).toBeCalledTimes(1);
-
-    act(() => {
-      result.current.redo();
-    });
-    expect(onRedo).toBeCalled();
-    expect(onRedo).toBeCalledTimes(1);
-  });
-});