react-konva-grid - npm Package Compare versions

Comparing version 2.5.2 to 2.5.3

dist/Grid.d.ts

@@ -107,3 +107,3 @@ import React, { Key } from "react";
 }
-declare type RefAttribute = {
+export declare type RefAttribute = {
     ref?: React.MutableRefObject<GridRef>;
@@ -135,2 +135,6 @@ };
 }
+export interface OptionalCellInterface {
+    rowIndex?: number;
+    columnIndex?: number;
+}
 export interface ViewPortProps {
@@ -149,2 +153,4 @@ rowStartIndex: number;
     estimatedColumnWidth: number;
+    recalcColumnIndexes: number[];
+    recalcRowIndexes: number[];
 }
@@ -178,2 +184,4 @@ export declare type CellMetaDataMap = Record<number, CellMetaData>;
     focus: () => void;
+    resizeColumns: (indexes: number[]) => void;
+    resizeRows: (indexes: number[]) => void;
 };
@@ -180,0 +188,0 @@ export declare type MergedCellMap = Map<string, AreaProps>;

dist/Grid.js

@@ -37,7 +37,2 @@ "use strict";
 const Cell_1 = require("./Cell");
-const defaultRowHeight = () => 20;
-const defaultColumnWidth = () => 60;
-const defaultSelectionRenderer = (props) => {
-    return (react_1.default.createElement(ReactKonvaCore_1.Rect, Object.assign({ shadowForStrokeEnabled: false, listening: false, hitStrokeWidth: 0 }, props)));
-};
 const DEFAULT_ESTIMATED_ITEM_SIZE = 50;
@@ -51,2 +46,7 @@ const defaultShadowSettings = {
 };
+const defaultRowHeight = () => 20;
+const defaultColumnWidth = () => 60;
+const defaultSelectionRenderer = (props) => {
+    return (react_1.default.createElement(ReactKonvaCore_1.Rect, Object.assign({ shadowForStrokeEnabled: false, listening: false, hitStrokeWidth: 0 }, props)));
+};
 /**
@@ -71,2 +71,4 @@ * Grid component using React Konva
             focus: () => { var _a; return (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
+            resizeColumns,
+            resizeRows,
         };
@@ -81,2 +83,4 @@ });
         estimatedRowHeight: estimatedRowHeight || DEFAULT_ESTIMATED_ITEM_SIZE,
+        recalcColumnIndexes: [],
+        recalcRowIndexes: [],
     });
@@ -146,2 +150,29 @@ const stageRef = react_1.useRef(null);
     /**
+     * Resize one or more columns
+     */
+    const resizeColumns = react_1.useCallback((indexes) => {
+        const leftMost = Math.min(...indexes);
+        resetAfterIndices({ columnIndex: leftMost }, false);
+        instanceProps.current.recalcColumnIndexes = indexes;
+        forceRender();
+    }, []);
+    /* Always reset after a render: TODO: Find a better way */
+    react_1.useEffect(() => {
+        if (instanceProps.current.recalcColumnIndexes.length) {
+            instanceProps.current.recalcColumnIndexes.length = 0;
+        }
+        if (instanceProps.current.recalcRowIndexes.length) {
+            instanceProps.current.recalcRowIndexes.length = 0;
+        }
+    });
+    /**
+     * Resize one or more rows
+     */
+    const resizeRows = react_1.useCallback((indexes) => {
+        const topMost = Math.min(...indexes);
+        resetAfterIndices({ rowIndex: topMost }, false);
+        instanceProps.current.recalcRowIndexes = indexes;
+        forceRender();
+    }, []);
+    /**
      * Create a map of merged cells
@@ -148,0 +179,0 @@ * [rowIndex, columnindex] => [parentRowIndex, parentColumnIndex]

dist/helpers.js

@@ -124,3 +124,4 @@ "use strict";
 exports.getItemMetadata = ({ itemType, index, rowHeight, columnWidth, instanceProps, }) => {
-    let itemMetadataMap, itemSize, lastMeasuredIndex;
+    var _a;
+    let itemMetadataMap, itemSize, lastMeasuredIndex, recalcIndexes;
     if (itemType === "column") {
@@ -130,2 +131,3 @@ itemMetadataMap = instanceProps.columnMetadataMap;
         lastMeasuredIndex = instanceProps.lastMeasuredColumnIndex;
+        recalcIndexes = instanceProps.recalcColumnIndexes;
     }
@@ -136,3 +138,5 @@ else {
         lastMeasuredIndex = instanceProps.lastMeasuredRowIndex;
+        recalcIndexes = instanceProps.recalcRowIndexes;
     }
+    const recalcWithinBoundsOnly = recalcIndexes.length > 0;
     if (index > lastMeasuredIndex) {
@@ -145,3 +149,8 @@ let offset = 0;
         for (let i = lastMeasuredIndex + 1; i <= index; i++) {
-            let size = itemSize(i);
+            // Only recalculates specified columns
+            let size = recalcWithinBoundsOnly
+                ? recalcIndexes.includes(i)
+                    ? itemSize(i)
+                    : ((_a = itemMetadataMap[i]) === null || _a === void 0 ? void 0 : _a.size) || itemSize(i)
+                : itemSize(i);
             itemMetadataMap[i] = {
@@ -148,0 +157,0 @@ offset,

dist/hooks/useAutoSizer.d.ts

@@ -12,3 +12,9 @@ import React from "react";
     font?: string;
+    resizeStrategy?: ResizeStrategy;
+    rowCount?: number;
 }
+declare enum ResizeStrategy {
+    "lazy" = "lazy",
+    "full" = "full"
+}
 interface AutoResizerResults {
@@ -25,3 +31,3 @@ columnWidth: ItemSizer;
  */
-declare const useAutoSizer: ({ gridRef, getValue, initialVisibleRows, cellSpacing, minColumnWidth, timeout, resizeOnScroll, font, }: IProps) => AutoResizerResults;
+declare const useAutoSizer: ({ gridRef, getValue, initialVisibleRows, cellSpacing, minColumnWidth, timeout, resizeStrategy, rowCount, resizeOnScroll, font, }: IProps) => AutoResizerResults;
 export default useAutoSizer;

dist/hooks/useAutoSizer.js

 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
 const helpers_1 = require("./../helpers");
+const tiny_invariant_1 = __importDefault(require("tiny-invariant"));
+var ResizeStrategy;
+(function (ResizeStrategy) {
+    ResizeStrategy["lazy"] = "lazy";
+    ResizeStrategy["full"] = "full";
+})(ResizeStrategy || (ResizeStrategy = {}));
 /**
@@ -12,3 +21,4 @@ * Auto sizer hook
  */
-const useAutoSizer = ({ gridRef, getValue, initialVisibleRows = 20, cellSpacing = 10, minColumnWidth = 60, timeout = 300, resizeOnScroll = true, font = "12px Arial", }) => {
+const useAutoSizer = ({ gridRef, getValue, initialVisibleRows = 20, cellSpacing = 10, minColumnWidth = 60, timeout = 300, resizeStrategy = ResizeStrategy.lazy, rowCount, resizeOnScroll = true, font = "12px Arial", }) => {
+    tiny_invariant_1.default(!(resizeStrategy === ResizeStrategy.full && rowCount === void 0), "Row count should be specified if resize stragtegy is full");
     const autoSizer = react_1.useRef(AutoSizerCanvas(font));
@@ -33,3 +43,5 @@ const [viewport, setViewport] = react_1.useState({
         const { rowStartIndex, rowStopIndex } = viewport;
-        const visibleRows = rowStopIndex || initialVisibleRows;
+        const visibleRows = resizeStrategy === ResizeStrategy.full
+            ? rowCount
+            : rowStopIndex || initialVisibleRows;
         let start = rowStartIndex;
@@ -58,3 +70,4 @@ let maxWidth = minColumnWidth;
         /* Check if viewport has changed */
-        if (!resizeOnScroll ||
+        if (resizeStrategy === ResizeStrategy.full ||
+            !resizeOnScroll ||
             (cells.rowStartIndex === viewport.rowStartIndex &&
@@ -72,3 +85,3 @@ cells.columnStartIndex === viewport.columnStartIndex))
         }
-    }, [resizeOnScroll, viewport]);
+    }, [resizeOnScroll, viewport, resizeStrategy]);
     return {
@@ -75,0 +88,0 @@ columnWidth: getColumnWidth,

package.json

 {
   "name": "react-konva-grid",
   "description": "Declarative React Canvas Grid primitive for Data table, Pivot table, Excel Worksheets",
-  "version": "2.5.2",
+  "version": "2.5.3",
   "main": "dist/index.js",
@@ -28,3 +28,4 @@ "license": "MIT",
     "konva": "^6.0.0",
-    "react-konva": "^16.13.0-3"
+    "react-konva": "^16.13.0-3",
+    "tiny-invariant": "^1.1.0"
   },
@@ -31,0 +32,0 @@ "peerDependencies": {

Readme.md

@@ -61,2 +61,6 @@ ## Declarative Canvas Grid with React Konva
 
+#### 3. Zustand - More control over cell level re-rendering
+
+[https://github.com/rmdort/konva-grid/tree/master/examples/zustand](https://github.com/rmdort/konva-grid/tree/master/examples/zustand)
+
 *More examples coming soon.*
@@ -63,0 +67,0 @@

src/helpers.ts

@@ -227,3 +227,3 @@ // Utilities extracted from https://github.com/bvaughn/react-window
 }: IGetItemMetadata): CellMetaData => {
-  let itemMetadataMap, itemSize, lastMeasuredIndex;
+  let itemMetadataMap, itemSize, lastMeasuredIndex, recalcIndexes: number[];
   if (itemType === "column") {
@@ -233,2 +233,3 @@ itemMetadataMap = instanceProps.columnMetadataMap;
     lastMeasuredIndex = instanceProps.lastMeasuredColumnIndex;
+    recalcIndexes = instanceProps.recalcColumnIndexes;
   } else {
@@ -238,4 +239,5 @@ itemMetadataMap = instanceProps.rowMetadataMap;
     lastMeasuredIndex = instanceProps.lastMeasuredRowIndex;
+    recalcIndexes = instanceProps.recalcRowIndexes;
   }
-
+  const recalcWithinBoundsOnly = recalcIndexes.length > 0;
   if (index > lastMeasuredIndex) {
@@ -249,3 +251,8 @@ let offset = 0;
     for (let i = lastMeasuredIndex + 1; i <= index; i++) {
-      let size = itemSize(i);
+      // Only recalculates specified columns
+      let size = recalcWithinBoundsOnly
+        ? recalcIndexes.includes(i)
+          ? itemSize(i)
+          : itemMetadataMap[i]?.size || itemSize(i)
+        : itemSize(i);
 
@@ -252,0 +259,0 @@ itemMetadataMap[i] = {

src/hooks/useAutoSizer.ts

 import React, { useCallback, useState, useRef, useEffect } from "react";
 import { ViewPortProps, GridRef, CellInterface, ItemSizer } from "./../Grid";
 import { debounce } from "./../helpers";
+import invariant from "tiny-invariant";
 
@@ -14,4 +15,11 @@ interface IProps {
   font?: string;
+  resizeStrategy?: ResizeStrategy;
+  rowCount?: number;
 }
 
+enum ResizeStrategy {
+  "lazy" = "lazy",
+  "full" = "full",
+}
+
 interface AutoResizerResults {
@@ -36,5 +44,12 @@ columnWidth: ItemSizer;
   timeout = 300,
+  resizeStrategy = ResizeStrategy.lazy,
+  rowCount,
   resizeOnScroll = true,
   font = "12px Arial",
 }: IProps): AutoResizerResults => {
+  invariant(
+    !(resizeStrategy === ResizeStrategy.full && rowCount === void 0),
+    "Row count should be specified if resize stragtegy is full"
+  );
+
   const autoSizer = useRef(AutoSizerCanvas(font));
@@ -68,3 +83,6 @@ const [viewport, setViewport] = useState<ViewPortProps>({
       const { rowStartIndex, rowStopIndex } = viewport;
-      const visibleRows = rowStopIndex || initialVisibleRows;
+      const visibleRows =
+        resizeStrategy === ResizeStrategy.full
+          ? (rowCount as number)
+          : rowStopIndex || initialVisibleRows;
       let start = rowStartIndex;
@@ -96,4 +114,6 @@ let maxWidth = minColumnWidth;
       setViewport(cells);
+
       /* Check if viewport has changed */
       if (
+        resizeStrategy === ResizeStrategy.full ||
         !resizeOnScroll ||
@@ -113,3 +133,3 @@ (cells.rowStartIndex === viewport.rowStartIndex &&
     },
-    [resizeOnScroll, viewport]
+    [resizeOnScroll, viewport, resizeStrategy]
   );
@@ -116,0 +136,0 @@

No alert changes

Improved metrics

Total package byte prevSize

14727950

increased by0.05%

Lines of code

19855

increased by0.68%

Number of lines in readme file

197

increased by2.07%

Worsened metrics

Dependency count

5

increased by25%

Dependency changes

• + Addedtiny-invariant@^1.1.0

• + Addedtiny-invariant@1.3.3(transitive)