react-konva-grid - npm Package Compare versions

Comparing version 2.4.1 to 2.4.2

dist/Grid.d.ts

@@ -109,5 +109,2 @@ import React, { Key } from "react";
 };
-export declare type ForceUpdateType = {
-    shouldForceUpdate?: boolean;
-};
 export declare type RenderComponent = React.FC<RendererProps>;
@@ -163,3 +160,3 @@ export interface CellPosition extends Pick<ShapeConfig, "x" | "y" | "width" | "height"> {
     stage: typeof Stage | null;
-    resetAfterIndices: (coords: CellInterface & ForceUpdateType) => void;
+    resetAfterIndices: (coords: CellInterface, shouldForceUpdate?: boolean) => void;
     getScrollPosition: () => ScrollCoords;
@@ -166,0 +163,0 @@ isMergedCell: (coords: CellInterface) => boolean;

dist/Grid.js

@@ -121,3 +121,3 @@ "use strict";
     /* Redraw grid imperatively */
-    const resetAfterIndices = react_1.useCallback(({ columnIndex, rowIndex, shouldForceUpdate = true, }) => {
+    const resetAfterIndices = react_1.useCallback(({ columnIndex, rowIndex }, shouldForceUpdate = true) => {
         if (typeof columnIndex === "number") {
@@ -124,0 +124,0 @@ instanceProps.current.lastMeasuredColumnIndex = Math.min(instanceProps.current.lastMeasuredColumnIndex, columnIndex - 1);

dist/hooks/useAutoSizer.d.ts

@@ -11,2 +11,3 @@ import React from "react";
     resizeOnScroll?: boolean;
+    font?: string;
 }
@@ -24,3 +25,3 @@ interface AutoResizerResults {
  */
-declare const useAutoSizer: ({ gridRef, getValue, initialVisibleRows, cellSpacing, minColumnWidth, timeout, resizeOnScroll, }: IProps) => AutoResizerResults;
+declare const useAutoSizer: ({ gridRef, getValue, initialVisibleRows, cellSpacing, minColumnWidth, timeout, resizeOnScroll, font, }: IProps) => AutoResizerResults;
 export default useAutoSizer;

dist/hooks/useAutoSizer.js

@@ -12,4 +12,4 @@ "use strict";
  */
-const useAutoSizer = ({ gridRef, getValue, initialVisibleRows = 20, cellSpacing = 10, minColumnWidth = 40, timeout = 300, resizeOnScroll = true, }) => {
-    const autoSizer = react_1.useRef(AutoSizerCanvas());
+const useAutoSizer = ({ gridRef, getValue, initialVisibleRows = 20, cellSpacing = 10, minColumnWidth = 40, timeout = 300, resizeOnScroll = true, font = "12px Arial", }) => {
+    const autoSizer = react_1.useRef(AutoSizerCanvas(font));
     const [viewport, setViewport] = react_1.useState({
@@ -21,7 +21,11 @@ rowStartIndex: 0,
     });
+    const isMounted = react_1.useRef(false);
     const debounceResizer = react_1.useRef(helpers_1.debounce(({ rowIndex, columnIndex }) => gridRef.current.resetAfterIndices({ rowIndex, columnIndex }), timeout));
+    react_1.useEffect(() => {
+        isMounted.current = true;
+    }, []);
     /* Update any styles, fonts if necessary */
     react_1.useEffect(() => {
-        autoSizer.current.setFont();
-    }, []);
+        autoSizer.current.setFont(font);
+    }, [font]);
     const getValueRef = react_1.useRef(getValue);
@@ -54,6 +58,11 @@ /* Keep it in sync */
     const handleViewChange = react_1.useCallback((cells) => {
-        if (!resizeOnScroll)
+        if (!resizeOnScroll ||
+            (cells.rowStartIndex === viewport.rowStartIndex &&
+                cells.columnStartIndex === viewport.columnStartIndex))
             return;
         setViewport(cells);
         if (gridRef.current) {
+            /* During first mount, column width is calculated. Do not re-calculate */
+            if (!isMounted.current)
+                return;
             debounceResizer.current({
@@ -64,3 +73,3 @@ rowIndex: cells.rowStartIndex,
         }
-    }, [resizeOnScroll]);
+    }, [resizeOnScroll, viewport]);
     return {
@@ -72,3 +81,3 @@ columnWidth: getColumnWidth,
 /* Canvas element */
-const AutoSizerCanvas = (defaultFont = "12px Arial") => {
+const AutoSizerCanvas = (defaultFont) => {
     const canvas = document.createElement("canvas");
@@ -75,0 +84,0 @@ const context = canvas.getContext("2d");

package.json

 {
   "name": "react-konva-grid",
   "description": "Canvas grid to render large set of tabular data with virtualization.",
-  "version": "2.4.1",
+  "version": "2.4.2",
   "main": "dist/index.js",
@@ -6,0 +6,0 @@ "license": "MIT",

src/hooks/useAutoSizer.ts

@@ -13,2 +13,3 @@ import React, { useCallback, useState, useRef, useEffect } from "react";
   resizeOnScroll?: boolean;
+  font?: string;
 }
@@ -36,4 +37,5 @@
   resizeOnScroll = true,
+  font = "12px Arial",
 }: IProps): AutoResizerResults => {
-  const autoSizer = useRef(AutoSizerCanvas());
+  const autoSizer = useRef(AutoSizerCanvas(font));
   const [viewport, setViewport] = useState<ViewPortProps>({
@@ -45,2 +47,3 @@ rowStartIndex: 0,
   });
+  const isMounted = useRef(false);
   const debounceResizer = useRef(
@@ -54,7 +57,11 @@ debounce(
 
-  /* Update any styles, fonts if necessary */
   useEffect(() => {
-    autoSizer.current.setFont();
+    isMounted.current = true;
   }, []);
 
+  /* Update any styles, fonts if necessary */
+  useEffect(() => {
+    autoSizer.current.setFont(font);
+  }, [font]);
+
   const getValueRef = useRef(getValue);
@@ -93,5 +100,12 @@ /* Keep it in sync */
     (cells: ViewPortProps) => {
-      if (!resizeOnScroll) return;
+      if (
+        !resizeOnScroll ||
+        (cells.rowStartIndex === viewport.rowStartIndex &&
+          cells.columnStartIndex === viewport.columnStartIndex)
+      )
+        return;
       setViewport(cells);
       if (gridRef.current) {
+        /* During first mount, column width is calculated. Do not re-calculate */
+        if (!isMounted.current) return;
         debounceResizer.current({
@@ -103,3 +117,3 @@ rowIndex: cells.rowStartIndex,
     },
-    [resizeOnScroll]
+    [resizeOnScroll, viewport]
   );
@@ -114,3 +128,3 @@
 /* Canvas element */
-const AutoSizerCanvas = (defaultFont = "12px Arial") => {
+const AutoSizerCanvas = (defaultFont: string) => {
   const canvas = <HTMLCanvasElement>document.createElement("canvas");
@@ -117,0 +131,0 @@ const context = canvas.getContext("2d");

No alert changes

Improved metrics

Total package byte prevSize

14674554

increased by0.01%

Lines of code

18523

increased by0.1%

No dependency changes