react-konva-grid - npm Package Compare versions

Comparing version 2.7.11 to 2.7.12

dist/Grid.js

@@ -1000,3 +1000,3 @@ "use strict";
         showScrollbar ? (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement("div", { style: {
+            react_1.default.createElement("div", { tabIndex: -1, style: {
                     height: containerHeight,
@@ -1015,3 +1015,3 @@ overflow: "scroll",
                     } })),
-            react_1.default.createElement("div", { style: {
+            react_1.default.createElement("div", { tabIndex: -1, style: {
                     overflow: "scroll",
@@ -1018,0 +1018,0 @@ position: "absolute",

dist/hooks/useEditable.js

@@ -71,3 +71,3 @@ "use strict";
             if (e.which === types_1.KeyCodes.Tab) {
-                e.preventDefault();
+                // e.preventDefault();
                 onSubmit &&
@@ -103,2 +103,3 @@ onSubmit(inputRef.current.value, cell, nextFocusableCell(cell, types_1.Direction.Right));
     };
+    const focusGrid = () => requestAnimationFrame(() => gridRef.current.focus());
     /**
@@ -189,3 +190,3 @@ * Make a cell editable
             if (selections.length && currentCell && gridRef) {
-                const { bounds } = selections[0];
+                const { bounds } = selections[selections.length - 1];
                 const activeCellBounds = gridRef.current.getCellBounds(currentCell);
@@ -210,3 +211,3 @@ const nextCell = helpers_1.findNextCellWithinBounds(activeCellBounds, bounds, types_1.Movement.downwards);
         /* Keep the focus */
-        gridRef.current.focus();
+        focusGrid();
     }, []);
@@ -227,3 +228,3 @@ const handleMouseDown = react_1.useCallback(() => {
         /* Keep the focus back in the grid */
-        gridRef.current.focus();
+        focusGrid();
     }, []);
@@ -246,2 +247,7 @@ const handleScroll = react_1.useCallback((scrollPos) => {
     }, [position, scrollPosition]);
+    const handleBlur = react_1.useCallback((e) => {
+        if (currentActiveCellRef.current) {
+            handleSubmit(value, currentActiveCellRef.current);
+        }
+    }, [value]);
     const editorComponent = isEditorShown && Editor ? (react_1.default.createElement(Editor
@@ -251,7 +257,3 @@ /* This is the cell that is currently being edited */
         /* This is the cell that is currently being edited */
-        cell: editingCell, activeCell: activeCell, value: value, selections: selections, onChange: handleChange, onSubmit: handleSubmit, onCancel: handleHide, position: cellPositon, nextFocusableCell: nextFocusableCell, onBlur: () => {
-            if (currentActiveCellRef.current) {
-                handleSubmit(value, currentActiveCellRef.current);
-            }
-        } })) : null;
+        cell: editingCell, activeCell: activeCell, value: value, selections: selections, onChange: handleChange, onSubmit: handleSubmit, onCancel: handleHide, position: cellPositon, nextFocusableCell: nextFocusableCell, onBlur: handleBlur })) : null;
     return {
@@ -258,0 +260,0 @@ editorComponent,

dist/hooks/useSelection.d.ts

 import React from "react";
 import { SelectionArea, CellInterface, GridRef } from "./../Grid";
+import { SelectionMode } from "./../types";
 export interface UseSelectionOptions {
@@ -24,2 +25,14 @@ /**
     rowCount?: number;
+    /**
+     * Allow multiple selection
+     */
+    allowMultipleSelection?: boolean;
+    /**
+     * Allow deselect a selected area
+     */
+    allowDeselectSelection?: boolean;
+    /**
+     * Selection mode
+     */
+    selectionMode?: SelectionMode;
 }
@@ -26,0 +39,0 @@ export interface SelectionResults {

dist/hooks/useSelection.js

@@ -14,3 +14,3 @@ "use strict";
 const useSelection = (options) => {
-    const { gridRef, initialActiveCell = null, initialSelections = [], columnCount = 0, rowCount = 0, } = options || {};
+    const { gridRef, initialActiveCell = null, initialSelections = [], columnCount = 0, rowCount = 0, allowMultipleSelection = true, selectionMode = types_1.SelectionMode.single, allowDeselectSelection = true, } = options || {};
     const [activeCell, setActiveCell] = react_1.useState(initialActiveCell);
@@ -20,3 +20,3 @@ const [selections, setSelections] = react_1.useState(initialSelections);
     const selectionEnd = react_1.useRef();
-    const isSelectionMode = react_1.useRef();
+    const isSelecting = react_1.useRef();
     /* New selection */
@@ -129,2 +129,7 @@ const newSelection = (start, end = start) => {
         const isMetaKey = e.nativeEvent.ctrlKey || e.nativeEvent.metaKey;
+        const allowMultiple = selectionMode === types_1.SelectionMode.multiple ||
+            (isMetaKey && allowMultipleSelection);
+        const allowDeselect = allowDeselectSelection;
+        const hasSelections = selections.length > 0;
+        const isDeselecting = isMetaKey && allowDeselect;
         /* Attaching mousemove to document, so we can detect drag move */
@@ -134,3 +139,3 @@ document.addEventListener("mousemove", handleMouseMove);
         /* Activate selection mode */
-        isSelectionMode.current = true;
+        isSelecting.current = true;
         const { rowIndex, columnIndex } = gridRef.current.getCellCoordsFromOffset(e.clientX, e.clientY);
@@ -147,21 +152,19 @@ /**
         }
+        /**
+         * User is adding activeCell to selection
+         */
+        if (isEqualCells(coords, activeCell) && !isDeselecting) {
+            return;
+        }
         /* Command  or Control key */
-        if (isMetaKey) {
-            const hasSelections = selections.length > 0;
+        if (activeCell && allowMultiple) {
             /**
-             * No selections,
-             * but user is adding activeCell to selection
-             */
-            if (!hasSelections && isEqualCells(coords, activeCell)) {
-                return;
-            }
-            /**
-             * User is trying to select multiple selections,
+             * User is manually trying to select multiple selections,
              * So add the current active cell to the list
              */
-            if (!hasSelections) {
+            if (isMetaKey && !hasSelections) {
                 appendSelection(activeCell);
             }
             /**
-             * Check if this cell has already been selected
+             * Check if this cell has already been selected (only for manual deselect)
              * Remove it from selection
@@ -171,15 +174,17 @@ *
              */
-            const cellIndex = cellIndexInSelection(coords, selections);
-            if (cellIndex !== -1) {
-                const newSelection = removeSelectionByIndex(cellIndex);
-                const nextActiveCell = getPossibleActiveCellFromSelections(newSelection);
-                if (nextActiveCell !== null) {
-                    setActiveCell(nextActiveCell);
+            if (isMetaKey && allowDeselect) {
+                const cellIndex = cellIndexInSelection(coords, selections);
+                if (cellIndex !== -1) {
+                    const newSelection = removeSelectionByIndex(cellIndex);
+                    const nextActiveCell = getPossibleActiveCellFromSelections(newSelection);
+                    if (nextActiveCell !== null) {
+                        setActiveCell(nextActiveCell);
+                    }
+                    if (newSelection.length === 1 &&
+                        cellEqualsSelection(nextActiveCell, newSelection)) {
+                        /* Since we only have 1 cell, lets clear the selections and only keep activeCell */
+                        clearSelections();
+                    }
+                    return;
                 }
-                if (newSelection.length === 1 &&
-                    cellEqualsSelection(nextActiveCell, newSelection)) {
-                    /* Since we only have 1 cell, lets clear the selections and only keep activeCell */
-                    clearSelections();
-                }
-                return;
             }
@@ -197,3 +202,3 @@ /**
         newSelection(coords);
-    }, [activeCell, selections]);
+    }, [activeCell, selections, allowMultipleSelection, allowDeselectSelection]);
     /**
@@ -204,3 +209,3 @@ * Mousemove handler
         /* Exit if user is not in selection mode */
-        if (!isSelectionMode.current || !gridRef || !selectionEnd.current)
+        if (!isSelecting.current || !gridRef || !selectionEnd.current)
             return;
@@ -222,3 +227,3 @@ const { rowIndex, columnIndex } = gridRef.current.getCellCoordsFromOffset(e.clientX, e.clientY);
         /* Reset selection mode */
-        isSelectionMode.current = false;
+        isSelecting.current = false;
         /* Remove listener */
@@ -430,3 +435,3 @@ document.removeEventListener("mousemove", handleMouseMove);
                 if (selections.length && activeCell && gridRef) {
-                    const { bounds } = selections[0];
+                    const { bounds } = selections[selections.length - 1];
                     const activeCellBounds = gridRef.current.getCellBounds(activeCell);
@@ -433,0 +438,0 @@ const direction = isShiftKey

dist/types.d.ts

@@ -38,1 +38,5 @@ export declare enum KeyCodes {
 }
+export declare enum SelectionMode {
+    single = "single",
+    multiple = "multiple"
+}

dist/types.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MimeType = exports.Movement = exports.Direction = exports.KeyCodes = void 0;
+exports.SelectionMode = exports.MimeType = exports.Movement = exports.Direction = exports.KeyCodes = void 0;
 var KeyCodes;
@@ -45,2 +45,7 @@ (function (KeyCodes) {
 })(MimeType = exports.MimeType || (exports.MimeType = {}));
+var SelectionMode;
+(function (SelectionMode) {
+    SelectionMode["single"] = "single";
+    SelectionMode["multiple"] = "multiple";
+})(SelectionMode = exports.SelectionMode || (exports.SelectionMode = {}));
 //# sourceMappingURL=types.js.map

package.json

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

src/hooks/useSelection.ts

@@ -9,3 +9,3 @@ import React, { useState, useCallback, useRef } from "react";
 } from "./../helpers";
-import { KeyCodes, Direction, Movement } from "./../types";
+import { KeyCodes, Direction, Movement, SelectionMode } from "./../types";
 
@@ -33,2 +33,14 @@ export interface UseSelectionOptions {
   rowCount?: number;
+  /**
+   * Allow multiple selection
+   */
+  allowMultipleSelection?: boolean;
+  /**
+   * Allow deselect a selected area
+   */
+  allowDeselectSelection?: boolean;
+  /**
+   * Selection mode
+   */
+  selectionMode?: SelectionMode;
 }
@@ -82,2 +94,5 @@
     rowCount = 0,
+    allowMultipleSelection = true,
+    selectionMode = SelectionMode.single,
+    allowDeselectSelection = true,
   } = options || {};
@@ -92,3 +107,3 @@ const [activeCell, setActiveCell] = useState<CellInterface | null>(
   const selectionEnd = useRef<CellInterface>();
-  const isSelectionMode = useRef<boolean>();
+  const isSelecting = useRef<boolean>();
 
@@ -222,2 +237,8 @@ /* New selection */
       const isMetaKey = e.nativeEvent.ctrlKey || e.nativeEvent.metaKey;
+      const allowMultiple =
+        selectionMode === SelectionMode.multiple ||
+        (isMetaKey && allowMultipleSelection);
+      const allowDeselect = allowDeselectSelection;
+      const hasSelections = selections.length > 0;
+      const isDeselecting = isMetaKey && allowDeselect;
 
@@ -229,3 +250,3 @@ /* Attaching mousemove to document, so we can detect drag move */
       /* Activate selection mode */
-      isSelectionMode.current = true;
+      isSelecting.current = true;
 
@@ -249,19 +270,16 @@ const { rowIndex, columnIndex } = gridRef.current.getCellCoordsFromOffset(
 
+      /**
+       * User is adding activeCell to selection
+       */
+      if (isEqualCells(coords, activeCell) && !isDeselecting) {
+        return;
+      }
+
       /* Command  or Control key */
-      if (isMetaKey) {
-        const hasSelections = selections.length > 0;
-
+      if (activeCell && allowMultiple) {
         /**
-         * No selections,
-         * but user is adding activeCell to selection
-         */
-        if (!hasSelections && isEqualCells(coords, activeCell)) {
-          return;
-        }
-
-        /**
-         * User is trying to select multiple selections,
+         * User is manually trying to select multiple selections,
          * So add the current active cell to the list
          */
-        if (!hasSelections) {
+        if (isMetaKey && !hasSelections) {
           appendSelection(activeCell);
@@ -271,3 +289,3 @@ }
         /**
-         * Check if this cell has already been selected
+         * Check if this cell has already been selected (only for manual deselect)
          * Remove it from selection
@@ -277,19 +295,21 @@ *
          */
-        const cellIndex = cellIndexInSelection(coords, selections);
-        if (cellIndex !== -1) {
-          const newSelection = removeSelectionByIndex(cellIndex);
-          const nextActiveCell = getPossibleActiveCellFromSelections(
-            newSelection
-          );
-          if (nextActiveCell !== null) {
-            setActiveCell(nextActiveCell);
+        if (isMetaKey && allowDeselect) {
+          const cellIndex = cellIndexInSelection(coords, selections);
+          if (cellIndex !== -1) {
+            const newSelection = removeSelectionByIndex(cellIndex);
+            const nextActiveCell = getPossibleActiveCellFromSelections(
+              newSelection
+            );
+            if (nextActiveCell !== null) {
+              setActiveCell(nextActiveCell);
+            }
+            if (
+              newSelection.length === 1 &&
+              cellEqualsSelection(nextActiveCell, newSelection)
+            ) {
+              /* Since we only have 1 cell, lets clear the selections and only keep activeCell */
+              clearSelections();
+            }
+            return;
           }
-          if (
-            newSelection.length === 1 &&
-            cellEqualsSelection(nextActiveCell, newSelection)
-          ) {
-            /* Since we only have 1 cell, lets clear the selections and only keep activeCell */
-            clearSelections();
-          }
-          return;
         }
@@ -310,3 +330,3 @@
     },
-    [activeCell, selections]
+    [activeCell, selections, allowMultipleSelection, allowDeselectSelection]
   );
@@ -320,3 +340,3 @@
       /* Exit if user is not in selection mode */
-      if (!isSelectionMode.current || !gridRef || !selectionEnd.current) return;
+      if (!isSelecting.current || !gridRef || !selectionEnd.current) return;
 
@@ -348,3 +368,3 @@ const { rowIndex, columnIndex } = gridRef.current.getCellCoordsFromOffset(
     /* Reset selection mode */
-    isSelectionMode.current = false;
+    isSelecting.current = false;
 
@@ -577,3 +597,3 @@ /* Remove listener */
           if (selections.length && activeCell && gridRef) {
-            const { bounds } = selections[0];
+            const { bounds } = selections[selections.length - 1];
             const activeCellBounds = gridRef.current.getCellBounds(activeCell);
@@ -580,0 +600,0 @@ const direction = isShiftKey

src/types.ts

@@ -41,1 +41,6 @@ export enum KeyCodes {
 }
+
+export enum SelectionMode {
+  single = "single",
+  multiple = "multiple",
+}

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

16884781

increased by0.02%

Lines of code

25396

increased by0.24%

No dependency changes