react-konva-grid - npm Package Compare versions

Comparing version 2.5.7 to 2.5.9

dist/Cell.js

@@ -32,3 +32,3 @@ "use strict";
     return (react_1.default.createElement(react_konva_1.Group, { onClick: onClick },
-        react_1.default.createElement(react_konva_1.Rect, { x: x, y: y, height: height, width: width, fill: fill, stroke: stroke, strokeWidth: strokeWidth }),
+        react_1.default.createElement(react_konva_1.Rect, { x: x, y: y, height: height, width: width, fill: fill, stroke: stroke, strokeWidth: strokeWidth, shadowForStrokeEnabled: false }),
         react_1.default.createElement(react_konva_1.Text, { x: x, y: y, height: height, width: width, text: value, fill: textColor, verticalAlign: verticalAlign, align: align, fontFamily: fontFamily, fontSize: fontSize, padding: padding }),
@@ -35,0 +35,0 @@ children));

dist/Grid.d.ts

 import React, { Key } from "react";
 import { Stage } from "react-konva/lib/ReactKonvaCore";
 import { ShapeConfig } from "konva/types/Shape";
+import { StageConfig } from "konva/types/Stage";
 export interface GridProps {
@@ -114,3 +115,15 @@ /**
     onBeforeRenderRow?: (rowIndex: number) => void;
+    /**
+     * Custom grid overlays
+     */
+    children: (props: ChildrenProps) => React.ReactNode;
+    /**
+     * Props that can be injected to Konva stage
+     */
+    stageProps?: Omit<StageConfig, "container">;
 }
+export interface ChildrenProps {
+    x: number;
+    y: number;
+}
 export declare type RefAttribute = {
@@ -192,2 +205,3 @@ ref?: React.MutableRefObject<GridRef>;
     resizeRows: (indexes: number[]) => void;
+    getViewPort: () => ViewPortProps;
 };
@@ -194,0 +208,0 @@ export declare type MergedCellMap = Map<string, AreaProps>;

dist/Grid.js

@@ -32,2 +32,5 @@ "use strict";
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -39,2 +42,3 @@ const react_1 = __importStar(require("react"));
 const utils_1 = require("./utils");
+const tiny_invariant_1 = __importDefault(require("tiny-invariant"));
 const DEFAULT_ESTIMATED_ITEM_SIZE = 50;
@@ -58,3 +62,4 @@ const defaultShadowSettings = {
 const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
-    const { width: containerWidth = 800, height: containerHeight = 600, estimatedColumnWidth, estimatedRowHeight, rowHeight = defaultRowHeight, columnWidth = defaultColumnWidth, rowCount = 0, columnCount = 0, scrollbarSize = 13, onScroll, showScrollbar = true, selectionBackgroundColor = "rgb(14, 101, 235, 0.1)", selectionBorderColor = "#1a73e8", selectionStrokeWidth = 2, selections = [], frozenRows = 0, frozenColumns = 0, itemRenderer = Cell_1.CellRenderer, mergedCells = [], snap = false, scrollThrottleTimeout = 100, onViewChange, selectionRenderer = defaultSelectionRenderer, onBeforeRenderRow, showFrozenShadow = true, shadowSettings = defaultShadowSettings, borderStyles = [] } = props, rest = __rest(props, ["width", "height", "estimatedColumnWidth", "estimatedRowHeight", "rowHeight", "columnWidth", "rowCount", "columnCount", "scrollbarSize", "onScroll", "showScrollbar", "selectionBackgroundColor", "selectionBorderColor", "selectionStrokeWidth", "selections", "frozenRows", "frozenColumns", "itemRenderer", "mergedCells", "snap", "scrollThrottleTimeout", "onViewChange", "selectionRenderer", "onBeforeRenderRow", "showFrozenShadow", "shadowSettings", "borderStyles"]);
+    const { width: containerWidth = 800, height: containerHeight = 600, estimatedColumnWidth, estimatedRowHeight, rowHeight = defaultRowHeight, columnWidth = defaultColumnWidth, rowCount = 0, columnCount = 0, scrollbarSize = 13, onScroll, showScrollbar = true, selectionBackgroundColor = "rgb(14, 101, 235, 0.1)", selectionBorderColor = "#1a73e8", selectionStrokeWidth = 2, selections = [], frozenRows = 0, frozenColumns = 0, itemRenderer = Cell_1.CellRenderer, mergedCells = [], snap = false, scrollThrottleTimeout = 100, onViewChange, selectionRenderer = defaultSelectionRenderer, onBeforeRenderRow, showFrozenShadow = true, shadowSettings = defaultShadowSettings, borderStyles = [], children, stageProps } = props, rest = __rest(props, ["width", "height", "estimatedColumnWidth", "estimatedRowHeight", "rowHeight", "columnWidth", "rowCount", "columnCount", "scrollbarSize", "onScroll", "showScrollbar", "selectionBackgroundColor", "selectionBorderColor", "selectionStrokeWidth", "selections", "frozenRows", "frozenColumns", "itemRenderer", "mergedCells", "snap", "scrollThrottleTimeout", "onViewChange", "selectionRenderer", "onBeforeRenderRow", "showFrozenShadow", "shadowSettings", "borderStyles", "children", "stageProps"]);
+    tiny_invariant_1.default(!(children && typeof children !== "function"), "Children should be a function");
     /* Expose some methods in ref */
@@ -75,2 +80,3 @@ react_1.useImperativeHandle(forwardedRef, () => {
             resizeRows,
+            getViewPort,
         };
@@ -244,2 +250,11 @@ });
     }, [rowStopIndex, columnStopIndex]);
+    /* Get current view port of the grid */
+    const getViewPort = react_1.useCallback(() => {
+        return {
+            rowStartIndex,
+            rowStopIndex,
+            columnStartIndex,
+            columnStopIndex,
+        };
+    }, [rowStartIndex, rowStopIndex, columnStartIndex, columnStopIndex]);
     /* Handle vertical scroll */
@@ -878,5 +893,5 @@ const handleScroll = react_1.useCallback((e) => {
         react_1.default.createElement("div", Object.assign({ onWheel: handleWheel, tabIndex: 1, ref: containerRef }, rest),
-            react_1.default.createElement(ReactKonvaCore_1.Stage, { width: containerWidth, height: containerHeight, ref: stageRef, listening: listenToEvents },
+            react_1.default.createElement(ReactKonvaCore_1.Stage, Object.assign({ width: containerWidth, height: containerHeight, ref: stageRef, listening: listenToEvents }, stageProps),
                 react_1.default.createElement(ReactKonvaCore_1.Layer, null,
-                    react_1.default.createElement(ReactKonvaCore_1.Group, { offsetY: scrollTop, offsetX: scrollLeft },
+                    react_1.default.createElement(ReactKonvaCore_1.Group, { offsetY: scrollTop, offsetX: scrollLeft, perfectDrawEnabled: false },
                         cells,
@@ -901,3 +916,8 @@ mergedCellAreas)),
                         frozenIntersectionMergedCells),
-                    react_1.default.createElement(ReactKonvaCore_1.Group, { offsetY: 0, offsetX: 0, listening: false }, selectionAreasIntersection)))),
+                    react_1.default.createElement(ReactKonvaCore_1.Group, { offsetY: 0, offsetX: 0, listening: false }, selectionAreasIntersection)),
+                children &&
+                    children({
+                        x: -scrollLeft,
+                        y: -scrollTop,
+                    }))),
         showScrollbar ? (react_1.default.createElement(react_1.default.Fragment, null,
@@ -911,2 +931,3 @@ react_1.default.createElement("div", { style: {
                     width: scrollbarSize,
+                    willChange: "transform",
                 }, onScroll: handleScroll, ref: verticalScrollRef },
@@ -925,2 +946,3 @@ react_1.default.createElement("div", { style: {
                     height: scrollbarSize,
+                    willChange: "transform",
                 }, onScroll: handleScrollLeft, ref: horizontalScrollRef },
@@ -927,0 +949,0 @@ react_1.default.createElement("div", { style: {

dist/helpers.d.ts

@@ -56,2 +56,3 @@ import { ItemSizer, InstanceInterface, AreaProps, CellInterface, CellMetaData } from "./Grid";
 export declare function debounce<T extends Function>(cb: T, wait?: number): T;
+export declare function rafThrottle(callback: Function): (e: any) => void;
 export interface AlignmentProps extends Omit<IItemMetaData, "offset"> {
@@ -58,0 +59,0 @@ containerHeight: number;

dist/helpers.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getOffsetForRowAndAlignment = exports.getOffsetForColumnAndAlignment = exports.getOffsetForIndexAndAlignment = exports.debounce = exports.throttle = exports.cellIndentifier = exports.getEstimatedTotalWidth = exports.getEstimatedTotalHeight = exports.getItemMetadata = exports.getColumnWidth = exports.getRowHeight = exports.getColumnOffset = exports.getRowOffset = exports.itemKey = exports.getBoundedCells = exports.getColumnStopIndexForStartIndex = exports.getColumnStartIndexForOffset = exports.getRowStopIndexForStartIndex = exports.getRowStartIndexForOffset = void 0;
+exports.getOffsetForRowAndAlignment = exports.getOffsetForColumnAndAlignment = exports.getOffsetForIndexAndAlignment = exports.rafThrottle = exports.debounce = exports.throttle = exports.cellIndentifier = exports.getEstimatedTotalWidth = exports.getEstimatedTotalHeight = exports.getItemMetadata = exports.getColumnWidth = exports.getRowHeight = exports.getColumnOffset = exports.getRowOffset = exports.itemKey = exports.getBoundedCells = exports.getColumnStopIndexForStartIndex = exports.getColumnStartIndexForOffset = exports.getRowStopIndexForStartIndex = exports.getRowStartIndexForOffset = void 0;
 // type ItemType = "row" | "column";
@@ -320,2 +320,22 @@ var Align;
 exports.debounce = debounce;
+function rafThrottle(callback) {
+    var active = false; // a simple flag
+    var evt; // to keep track of the last event
+    var handler = function () {
+        // fired only when screen has refreshed
+        active = false; // release our flag
+        callback(evt);
+    };
+    return function handleEvent(e) {
+        // the actual event handler
+        evt = e; // save our event at each call
+        evt && evt.persist();
+        if (!active) {
+            // only if we weren't already doing it
+            active = true; // raise the flag
+            requestAnimationFrame(handler); // wait for next screen refresh
+        }
+    };
+}
+exports.rafThrottle = rafThrottle;
 exports.getOffsetForIndexAndAlignment = ({ itemType, containerHeight, containerWidth, rowHeight, columnWidth, columnCount, rowCount, index, align = Align.smart, scrollOffset, instanceProps, scrollbarSize, frozenOffset = 0, }) => {
@@ -322,0 +342,0 @@ const size = itemType === "column" ? containerWidth : containerHeight;

dist/hooks/useEditable.d.ts

@@ -9,2 +9,3 @@ import React from "react";
     onChange?: (value: string, coords: CellInterface) => void;
+    onCancel?: () => void;
     onSubmit?: (value: string, coords: CellInterface, nextCoords?: CellInterface) => void;
@@ -33,3 +34,3 @@ onDelete: (selections: AreaProps[]) => void;
  */
-declare const useEditable: ({ getEditor, gridRef, getValue, onChange, onSubmit, onDelete, selections, onBeforeEdit, }: UseEditableOptions) => EditableResults;
+declare const useEditable: ({ getEditor, gridRef, getValue, onChange, onSubmit, onCancel, onDelete, selections, onBeforeEdit, }: UseEditableOptions) => EditableResults;
 export default useEditable;

dist/hooks/useEditable.js

@@ -58,2 +58,3 @@ "use strict";
             border: "1px #1a73e8 solid",
+            boxShadow: "0 2px 6px 2px rgba(60,64,67,.15)",
             outline: "none",
@@ -79,3 +80,3 @@ }, onChange: (e) => onChange(e.target.value), onKeyDown: (e) => {
  */
-const useEditable = ({ getEditor = getDefaultEditor, gridRef, getValue, onChange, onSubmit, onDelete, selections, onBeforeEdit, }) => {
+const useEditable = ({ getEditor = getDefaultEditor, gridRef, getValue, onChange, onSubmit, onCancel, onDelete, selections = [], onBeforeEdit, }) => {
     const [activeCell, setActiveCell] = react_1.useState(null);
@@ -115,2 +116,5 @@ const [value, setValue] = react_1.useState("");
             return;
+        /* If user has not made any selection yet */
+        if (!selections.length)
+            return;
         const { top: rowIndex, left: columnIndex } = selections[0];
@@ -140,2 +144,4 @@ if (keyCode === useSelection_1.DeleteKeys.Delete || keyCode === useSelection_1.DeleteKeys.BackSpace) {
         setActiveCell(null);
+        /* Keep the focus */
+        gridRef.current.focus();
     }, [value, activeCell]);
@@ -151,2 +157,5 @@ const handleChange = react_1.useCallback((value) => {
         setActiveCell(null);
+        onCancel && onCancel();
+        /* Keep the focus back in the grid */
+        gridRef.current.focus();
     }, []);
@@ -153,0 +162,0 @@ /* Editor */

dist/utils.d.ts

@@ -9,3 +9,3 @@ /// <reference types="react" />
  */
-export declare const createBox: ({ x, y, width, height, fill, stroke, strokeLeftColor, strokeTopColor, strokeRightColor, strokeBottomColor, strokeWidth, strokeTopWidth, strokeRightWidth, strokeBottomWidth, strokeLeftWidth, }: BoxProps) => JSX.Element;
+export declare const createBox: ({ x, y, width, height, fill, stroke, strokeLeftColor, strokeTopColor, strokeRightColor, strokeBottomColor, strokeWidth, strokeTopWidth, strokeRightWidth, strokeBottomWidth, strokeLeftWidth, key, }: BoxProps) => JSX.Element;
 export {};

dist/utils.js

@@ -13,3 +13,3 @@ "use strict";
  */
-exports.createBox = ({ x = 0, y = 0, width = 0, height = 0, fill, stroke, strokeLeftColor = stroke, strokeTopColor = stroke, strokeRightColor = stroke, strokeBottomColor = stroke, strokeWidth = 0, strokeTopWidth = strokeWidth, strokeRightWidth = strokeWidth, strokeBottomWidth = strokeWidth, strokeLeftWidth = strokeWidth, }) => {
+exports.createBox = ({ x = 0, y = 0, width = 0, height = 0, fill, stroke, strokeLeftColor = stroke, strokeTopColor = stroke, strokeRightColor = stroke, strokeBottomColor = stroke, strokeWidth = 0, strokeTopWidth = strokeWidth, strokeRightWidth = strokeWidth, strokeBottomWidth = strokeWidth, strokeLeftWidth = strokeWidth, key, }) => {
     const commonProps = {
@@ -28,3 +28,3 @@ perfectDrawEnabled: false,
     ];
-    return (react_1.default.createElement(react_1.default.Fragment, null,
+    return (react_1.default.createElement(react_1.default.Fragment, { key: key },
         lines,
@@ -31,0 +31,0 @@ fill && (react_1.default.createElement(react_konva_1.Rect, Object.assign({ fill: fill, x: x, y: y, width: width, height: height }, commonProps)))));

package.json

 {
   "name": "react-konva-grid",
   "description": "Declarative React Canvas Grid primitive for Data table, Pivot table, Excel Worksheets",
-  "version": "2.5.7",
+  "version": "2.5.9",
   "main": "dist/index.js",
@@ -6,0 +6,0 @@ "license": "MIT",

src/helpers.ts

@@ -483,2 +483,22 @@ // Utilities extracted from https://github.com/bvaughn/react-window
 
+export function rafThrottle(callback: Function) {
+  var active = false; // a simple flag
+  var evt: any; // to keep track of the last event
+  var handler = function () {
+    // fired only when screen has refreshed
+    active = false; // release our flag
+    callback(evt);
+  };
+  return function handleEvent(e: any) {
+    // the actual event handler
+    evt = e; // save our event at each call
+    evt && evt.persist();
+    if (!active) {
+      // only if we weren't already doing it
+      active = true; // raise the flag
+      requestAnimationFrame(handler); // wait for next screen refresh
+    }
+  };
+}
+
 export interface AlignmentProps extends Omit<IItemMetaData, "offset"> {
@@ -485,0 +505,0 @@ containerHeight: number;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

14753238

increased by0.07%

Number of package files

71

increased by2.9%

Lines of code

20484

increased by1.23%

No dependency changes