react-konva-grid - npm Package Compare versions

Comparing version 3.0.9 to 3.0.10

dist/Grid.js

@@ -41,2 +41,3 @@ "use strict";
 const Selection_1 = __importDefault(require("./Selection"));
+const FillHandle_1 = __importDefault(require("./FillHandle"));
 const utils_1 = require("./utils");
@@ -112,2 +113,11 @@ const tiny_invariant_1 = __importDefault(require("tiny-invariant"));
     /**
+     * Handle mouse wheeel
+     */
+    react_1.useEffect(() => {
+        var _a;
+        (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener("wheel", handleWheel, {
+            passive: true,
+        });
+    }, []);
+    /**
      * Snaps vertical scrollbar to the next/prev visible row
@@ -261,2 +271,8 @@ */
     const getCellCoordsFromOffset = react_1.useCallback((x, y) => {
+        var _a;
+        const rect = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (rect) {
+            x = x - rect.x;
+            y = y - rect.y;
+        }
         const rowIndex = helpers_1.getRowStartIndexForOffset({
@@ -468,3 +484,3 @@ rowHeight,
         var _a, _b;
-        const { deltaX, deltaY, deltaMode } = event.nativeEvent;
+        const { deltaX, deltaY, deltaMode } = event;
         /* If snaps are active */
@@ -491,2 +507,4 @@ if (snap) {
         let dy = deltaY;
+        /* Scroll only in one direction */
+        const isHorizontal = Math.abs(dx) > Math.abs(dy);
         if (deltaMode === 1) {
@@ -497,10 +515,14 @@ dy = dy * scrollbarSize;
             return;
-        const x = (_a = horizontalScrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft;
-        const y = (_b = verticalScrollRef.current) === null || _b === void 0 ? void 0 : _b.scrollTop;
+        const currentScroll = isHorizontal
+            ? (_a = horizontalScrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft : (_b = verticalScrollRef.current) === null || _b === void 0 ? void 0 : _b.scrollTop;
         wheelingRef.current = window.requestAnimationFrame(() => {
             wheelingRef.current = null;
-            if (horizontalScrollRef.current)
-                horizontalScrollRef.current.scrollLeft = x + dx;
-            if (verticalScrollRef.current)
-                verticalScrollRef.current.scrollTop = y + dy;
+            if (isHorizontal) {
+                if (horizontalScrollRef.current)
+                    horizontalScrollRef.current.scrollLeft = currentScroll + dx;
+            }
+            else {
+                if (verticalScrollRef.current)
+                    verticalScrollRef.current.scrollTop = currentScroll + dy;
+            }
         });
@@ -1092,3 +1114,3 @@ }, [
     const fillHandleWidth = 8;
-    const fillhandleComponent = showFillHandle && !isSelectionInProgress ? (react_1.default.createElement(utils_1.FillHandle, Object.assign({}, fillHandleDimension, { stroke: selectionBorderColor, size: fillHandleWidth, onMouseDown: onFillHandleMouseDown }))) : null;
+    const fillhandleComponent = showFillHandle && !isSelectionInProgress ? (react_1.default.createElement(FillHandle_1.default, Object.assign({}, fillHandleDimension, { stroke: selectionBorderColor, size: fillHandleWidth, onMouseDown: onFillHandleMouseDown }))) : null;
     const selectionChildren = (react_1.default.createElement("div", { style: {
@@ -1153,3 +1175,3 @@ pointerEvents: "none",
     return (react_1.default.createElement("div", { style: { position: "relative", width: containerWidth } },
-        react_1.default.createElement("div", Object.assign({ onWheel: handleWheel, tabIndex: 0, ref: containerRef }, rest),
+        react_1.default.createElement("div", Object.assign({ tabIndex: 0, ref: containerRef }, rest),
             react_1.default.createElement(ReactKonvaCore_1.Stage, Object.assign({ width: containerWidth, height: containerHeight, ref: stageRef, listening: listenToEvents }, stageProps), wrapper(stageChildren)),
@@ -1156,0 +1178,0 @@ selectionChildren),

dist/hooks/useCopyPaste.d.ts

@@ -24,3 +24,11 @@ import React from "react";
     onPaste?: (rows: (string | null)[][], activeCell: CellInterface | null) => void;
+    /**
+     * When user tries to cut a selection
+     */
+    onCut: (selection: SelectionArea) => void;
 }
+export interface CopyResults {
+    copy: () => void;
+    paste: () => void;
+}
 /**
@@ -35,3 +43,3 @@ * Copy paste hook
  */
-declare const useCopyPaste: ({ selections, activeCell, getValue, gridRef, onPaste, }: CopyProps) => {};
+declare const useCopyPaste: ({ selections, activeCell, getValue, gridRef, onPaste, onCut, }: CopyProps) => CopyResults;
 export default useCopyPaste;

dist/hooks/useCopyPaste.js

 "use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -15,4 +24,5 @@ const react_1 = require("react");
  */
-const useCopyPaste = ({ selections = [], activeCell = null, getValue, gridRef, onPaste, }) => {
+const useCopyPaste = ({ selections = [], activeCell = null, getValue, gridRef, onPaste, onCut, }) => {
     const selectionRef = react_1.useRef({ selections, activeCell, getValue });
+    const cutSelections = react_1.useRef(null);
     /* Keep selections and activeCell upto date */
@@ -43,2 +53,9 @@ react_1.useEffect(() => {
         });
+        document.addEventListener("cut", (e) => {
+            var _a;
+            if (((_a = gridRef.current) === null || _a === void 0 ? void 0 : _a.container) !== document.activeElement)
+                return;
+            cutSelections.current = currentSelections();
+            handleCopy(e);
+        });
     }, []);
@@ -119,6 +136,32 @@ const handleCopy = react_1.useCallback((e) => {
         onPaste && onPaste(rows, selectionRef.current.activeCell);
+        /* Clear all values in cut */
+        if (cutSelections.current) {
+            onCut && onCut(cutSelections.current);
+            cutSelections.current = null;
+        }
     };
-    return {};
+    /**
+     * User is trying to copy from outisde the app
+     */
+    const handleProgramaticCopy = react_1.useCallback(() => {
+        gridRef.current.focus();
+        document.execCommand("copy");
+    }, []);
+    /**
+     * User is trying to paste from outisde the app
+     */
+    const handleProgramaticPaste = react_1.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        gridRef.current.focus();
+        const text = yield navigator.clipboard.readText();
+        const clipboardData = new DataTransfer();
+        clipboardData.setData(types_1.MimeType.plain, text);
+        const event = new ClipboardEvent("paste", { clipboardData });
+        handlePaste(event);
+    }), []);
+    return {
+        copy: handleProgramaticCopy,
+        paste: handleProgramaticPaste,
+    };
 };
 exports.default = useCopyPaste;
 //# sourceMappingURL=useCopyPaste.js.map

dist/utils.d.ts

@@ -1,6 +0,3 @@
-import React from "react";
+/// <reference types="react" />
 import { ShapeConfig } from "konva/types/Shape";
-export interface BoxProps extends ShapeConfig {
-}
-export declare const FillHandle: React.FC<BoxProps>;
-export declare const createHTMLBox: ({ x, y, width, height, fill, stroke, strokeLeftColor, strokeTopColor, strokeRightColor, strokeBottomColor, strokeWidth, strokeTopWidth, strokeRightWidth, strokeBottomWidth, strokeLeftWidth, key, strokeStyle, }: BoxProps) => JSX.Element;
+export declare const createHTMLBox: ({ x, y, width, height, fill, stroke, strokeLeftColor, strokeTopColor, strokeRightColor, strokeBottomColor, strokeWidth, strokeTopWidth, strokeRightWidth, strokeBottomWidth, strokeLeftWidth, key, strokeStyle, }: ShapeConfig) => JSX.Element;

dist/utils.js

 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -17,20 +6,4 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createHTMLBox = exports.FillHandle = void 0;
+exports.createHTMLBox = void 0;
 const react_1 = __importDefault(require("react"));
-exports.FillHandle = (_a) => {
-    var { x = 0, y = 0, stroke, strokeWidth = 1, size = 8 } = _a, props = __rest(_a, ["x", "y", "stroke", "strokeWidth", "size"]);
-    if (x === 0 || y === 0)
-        return null;
-    return (react_1.default.createElement("div", Object.assign({ style: {
-            position: "absolute",
-            left: x - size / 2 - strokeWidth,
-            top: y - size / 2,
-            width: size,
-            height: size,
-            border: `${strokeWidth}px white solid`,
-            background: stroke,
-            cursor: "crosshair",
-            pointerEvents: "all",
-        } }, props)));
-};
 exports.createHTMLBox = ({ 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, strokeStyle = "solid", }) => {
@@ -37,0 +10,0 @@ const commonProps = {};

package.json

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

src/hooks/useCopyPaste.ts

@@ -1,5 +0,5 @@
-import React, { useCallback, useEffect, useMemo, useRef } from "react";
-import { SelectionProps, CellInterface, GridRef, SelectionArea } from "../Grid";
+import React, { useCallback, useEffect, useRef } from "react";
+import { CellInterface, GridRef, SelectionArea } from "../Grid";
 import { selectionFromActiveCell, prepareClipboardData } from "./../helpers";
-import { KeyCodes, MimeType } from "../types";
+import { MimeType } from "../types";
 
@@ -30,4 +30,13 @@ export interface CopyProps {
   ) => void;
+  /**
+   * When user tries to cut a selection
+   */
+  onCut: (selection: SelectionArea) => void;
 }
 
+export interface CopyResults {
+  copy: () => void;
+  paste: () => void;
+}
+
 /**
@@ -48,4 +57,6 @@ * Copy paste hook
   onPaste,
-}: CopyProps) => {
+  onCut,
+}: CopyProps): CopyResults => {
   const selectionRef = useRef({ selections, activeCell, getValue });
+  const cutSelections = useRef<SelectionArea | null>(null);
 
@@ -75,2 +86,8 @@ /* Keep selections and activeCell upto date */
     });
+
+    document.addEventListener("cut", (e) => {
+      if (gridRef.current?.container !== document.activeElement) return;
+      cutSelections.current = currentSelections();
+      handleCopy(e);
+    });
   }, []);
@@ -151,8 +168,38 @@
     }
+
     onPaste && onPaste(rows, selectionRef.current.activeCell);
+
+    /* Clear all values in cut */
+    if (cutSelections.current) {
+      onCut && onCut(cutSelections.current);
+      cutSelections.current = null;
+    }
   };
 
-  return {};
+  /**
+   * User is trying to copy from outisde the app
+   */
+  const handleProgramaticCopy = useCallback(() => {
+    gridRef.current.focus();
+    document.execCommand("copy");
+  }, []);
+
+  /**
+   * User is trying to paste from outisde the app
+   */
+  const handleProgramaticPaste = useCallback(async () => {
+    gridRef.current.focus();
+    const text = await navigator.clipboard.readText();
+    const clipboardData = new DataTransfer();
+    clipboardData.setData(MimeType.plain, text);
+    const event = new ClipboardEvent("paste", { clipboardData });
+    handlePaste(event);
+  }, []);
+
+  return {
+    copy: handleProgramaticCopy,
+    paste: handleProgramaticPaste,
+  };
 };
 
 export default useCopyPaste;

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

432503

increased by1.63%

Number of package files

70

increased by6.06%

Lines of code

9455

increased by1.64%

No dependency changes