react-konva-grid - npm Package Compare versions

Comparing version 2.7.6 to 2.7.7

dist/Cell.js

@@ -17,3 +17,3 @@ "use strict";
     var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
     __setModuleDefault(result, mod);
@@ -20,0 +20,0 @@ return result;

dist/Grid.js

@@ -17,3 +17,3 @@ "use strict";
     var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
     __setModuleDefault(result, mod);
@@ -20,0 +20,0 @@ return result;

dist/hooks/useEditable.d.ts

 import React from "react";
 import { CellInterface, ScrollCoords, CellPosition, GridRef, SelectionArea } from "../Grid";
+import { Direction } from "./../types";
 export interface UseEditableOptions {
@@ -7,5 +8,5 @@ getEditor?: (cell: CellInterface | null) => React.ElementType;
     getValue: (cell: CellInterface) => any;
-    onChange?: (value: string, coords: CellInterface) => void;
-    onCancel?: () => void;
-    onSubmit?: (value: string, coords: CellInterface, nextCoords?: CellInterface) => void;
+    onCancel?: (e?: React.KeyboardEvent<HTMLInputElement>) => void;
+    onChange: (value: string, activeCell: CellInterface) => void;
+    onSubmit?: (value: string, activeCell: CellInterface, nextActiveCell?: CellInterface | null) => void;
     onDelete?: (activeCell: CellInterface, selections: SelectionArea[]) => void;
@@ -24,8 +25,9 @@ selections: SelectionArea[];
 export interface EditorProps extends CellInterface {
-    onChange: (value: string) => void;
-    onSubmit?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
-    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onChange: (value: string, activeCell: CellInterface) => void;
+    onSubmit?: (value: string, activeCell: CellInterface, nextActiveCell?: CellInterface | null) => void;
     onCancel?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
     scrollPosition: ScrollCoords;
     position: CellPosition;
+    activeCell: CellInterface;
+    nextFocusableCell: (activeCell: CellInterface, direction?: Direction) => CellInterface | null;
 }
@@ -32,0 +34,0 @@ /**

dist/hooks/useEditable.js

@@ -17,3 +17,3 @@ "use strict";
     var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
     __setModuleDefault(result, mod);
@@ -42,14 +42,8 @@ return result;
 const DefaultEditor = (props) => {
-    const { rowIndex, columnIndex, onChange, onSubmit, onBlur, onCancel, scrollPosition, position } = props, rest = __rest(props, ["rowIndex", "columnIndex", "onChange", "onSubmit", "onBlur", "onCancel", "scrollPosition", "position"]);
+    const { rowIndex, columnIndex, onChange, onSubmit, onCancel, scrollPosition, position, activeCell, nextFocusableCell } = props, rest = __rest(props, ["rowIndex", "columnIndex", "onChange", "onSubmit", "onCancel", "scrollPosition", "position", "activeCell", "nextFocusableCell"]);
     const inputRef = react_1.useRef(null);
-    react_1.useEffect(() => {
-        if (!inputRef.current)
-            return;
-        inputRef.current.focus();
-    }, []);
-    return (react_1.default.createElement("input", Object.assign({ type: "text", ref: inputRef, style: {
+    return (react_1.default.createElement("input", Object.assign({ type: "text", ref: inputRef, autoFocus: true, style: {
             position: "absolute",
             top: position.y,
             left: position.x,
-            transform: `translate3d(-${scrollPosition.scrollLeft}px, -${scrollPosition.scrollTop}px, 0)`,
             width: position.width,
@@ -63,6 +57,9 @@ height: position.height,
             outline: "none",
-        }, onChange: (e) => onChange(e.target.value), onKeyDown: (e) => {
+        }, onChange: (e) => onChange(e.target.value, activeCell), onKeyDown: (e) => {
+            if (!inputRef.current)
+                return;
             // Enter key
             if (e.which === types_1.KeyCodes.Enter) {
-                onSubmit && onSubmit(e);
+                onSubmit &&
+                    onSubmit(inputRef.current.value, activeCell, nextFocusableCell(activeCell, types_1.Direction.Down));
             }
@@ -74,5 +71,6 @@ if (e.which === types_1.KeyCodes.Escape) {
                 e.preventDefault();
-                onSubmit && onSubmit(e);
+                onSubmit &&
+                    onSubmit(inputRef.current.value, activeCell, nextFocusableCell(activeCell, types_1.Direction.Right));
             }
-        }, onBlur: onBlur }, rest)));
+        } }, rest)));
 };
@@ -104,10 +102,2 @@ const getDefaultEditor = (cell) => DefaultEditor;
     };
-    react_1.useEffect(() => {
-        if (!currentActiveCellRef.current)
-            return;
-        /**
-         * Active cell has changed, but submit has not been clicked - currentActiveCellRef
-         */
-        onSubmit && onSubmit(value, currentActiveCellRef.current);
-    }, [activeCell]);
     /**
@@ -172,30 +162,30 @@ * Make a cell editable
     }, [selections, activeCell]);
-    /* Save the value */
-    const handleSubmit = react_1.useCallback((e) => {
+    /**
+     * Get next focusable cell
+     * Respects selection bounds
+     */
+    const nextFocusableCell = react_1.useCallback((currentCell, direction = types_1.Direction.Right) => {
         var _a, _b;
-        if (!activeCell)
-            return;
-        const isTabKeyPressed = e.which === types_1.KeyCodes.Tab;
-        const shiftKey = e.shiftKey;
-        const nextIndex = shiftKey ? -1 : 1;
-        let nextActiveCell = isTabKeyPressed
+        /* Next immediate cell */
+        let nextActiveCell = direction === types_1.Direction.Right
             ? {
-                rowIndex: activeCell.rowIndex,
-                columnIndex: activeCell.columnIndex + nextIndex,
+                rowIndex: currentCell.rowIndex,
+                columnIndex: currentCell.columnIndex + 1,
             }
             : {
-                rowIndex: (((_a = initialActiveCell.current) === null || _a === void 0 ? void 0 : _a.rowIndex) || activeCell.rowIndex) + 1,
-                columnIndex: ((_b = initialActiveCell.current) === null || _b === void 0 ? void 0 : _b.columnIndex) || activeCell.columnIndex,
+                rowIndex: (((_a = initialActiveCell.current) === null || _a === void 0 ? void 0 : _a.rowIndex) || currentCell.rowIndex) +
+                    1,
+                columnIndex: ((_b = initialActiveCell.current) === null || _b === void 0 ? void 0 : _b.columnIndex) ||
+                    currentCell.columnIndex,
             };
-        /* Set previous key */
-        if (isTabKeyPressed && !initialActiveCell.current) {
-            initialActiveCell.current = activeCell;
+        if (direction === types_1.Direction.Right && !initialActiveCell.current) {
+            initialActiveCell.current = currentCell;
         }
-        if (e.which === types_1.KeyCodes.Enter) {
+        if (direction === types_1.Direction.Down) {
             /* Move to the next row + cell */
             initialActiveCell.current = undefined;
             /* If user has selected some cells and active cell is within this selection */
-            if (selections.length && activeCell && gridRef) {
+            if (selections.length && currentCell && gridRef) {
                 const { bounds } = selections[0];
-                const activeCellBounds = gridRef.current.getCellBounds(activeCell);
+                const activeCellBounds = gridRef.current.getCellBounds(currentCell);
                 const nextCell = helpers_1.findNextCellWithinBounds(activeCellBounds, bounds, types_1.Movement.downwards);
@@ -206,9 +196,13 @@ if (nextCell)
         }
+        return nextActiveCell;
+    }, [selections]);
+    /* Save the value */
+    const handleSubmit = react_1.useCallback((value, activeCell, nextActiveCell) => {
+        /* Show editor */
+        hideEditor();
         /* Save the new value */
         onSubmit && onSubmit(value, activeCell, nextActiveCell);
-        /* Show editor */
-        hideEditor();
         /* Keep the focus */
         gridRef.current.focus();
-    }, [value, selections, activeCell]);
+    }, []);
     const handleMouseDown = react_1.useCallback(() => {
@@ -234,4 +228,18 @@ initialActiveCell.current = undefined;
     /* Editor */
-    const Editor = react_1.useMemo(() => getEditor(activeCell), [activeCell]);
-    const editorComponent = isEditorShown ? (react_1.default.createElement(Editor, { value: value, onChange: handleChange, onSubmit: handleSubmit, onBlur: hideEditor, onCancel: handleHide, position: position, scrollPosition: scrollPosition })) : null;
+    const Editor = react_1.useMemo(() => {
+        return activeCell
+            ? getEditor(activeCell) || getDefaultEditor(activeCell)
+            : null;
+    }, [activeCell]);
+    /**
+     * Position of the cell
+     */
+    const cellPositon = react_1.useMemo(() => {
+        return Object.assign(Object.assign({}, position), { x: position.x - scrollPosition.scrollLeft, y: position.y - scrollPosition.scrollTop });
+    }, [position, scrollPosition]);
+    const editorComponent = isEditorShown && Editor ? (react_1.default.createElement(Editor, { activeCell: activeCell, value: value, onChange: handleChange, onSubmit: handleSubmit, onCancel: handleHide, position: cellPositon, onBlur: () => {
+            if (currentActiveCellRef.current) {
+                handleSubmit(value, currentActiveCellRef.current);
+            }
+        }, nextFocusableCell: nextFocusableCell })) : null;
     return {
@@ -238,0 +246,0 @@ editorComponent,

dist/hooks/useSelection.js

@@ -133,4 +133,2 @@ "use strict";
         document.removeEventListener("mouseup", handleMouseUp);
-        if (!selections.length)
-            return;
         /* Update last selection */
@@ -137,0 +135,0 @@ setSelections((prevSelection) => {

dist/hooks/useTooltip.js

@@ -17,3 +17,3 @@ "use strict";
     var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
     __setModuleDefault(result, mod);
@@ -20,0 +20,0 @@ return result;

dist/types.d.ts

@@ -17,3 +17,5 @@ export declare enum KeyCodes {
     Home = 36,
-    End = 35
+    End = 35,
+    PageDown = 34,
+    PageUp = 33
 }
@@ -20,0 +22,0 @@ export declare enum Direction {

dist/types.js

@@ -22,2 +22,4 @@ "use strict";
     KeyCodes[KeyCodes["End"] = 35] = "End";
+    KeyCodes[KeyCodes["PageDown"] = 34] = "PageDown";
+    KeyCodes[KeyCodes["PageUp"] = 33] = "PageUp";
 })(KeyCodes = exports.KeyCodes || (exports.KeyCodes = {}));
@@ -24,0 +26,0 @@ var Direction;

package.json

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

src/hooks/useSelection.ts

@@ -193,4 +193,2 @@ import React, { useState, useCallback, useRef, MouseEvent } from "react";
 
-    if (!selections.length) return;
-
     /* Update last selection */
@@ -197,0 +195,0 @@ setSelections((prevSelection) => {

src/types.ts

@@ -18,2 +18,4 @@ export enum KeyCodes {
   End = 35,
+  PageDown = 34,
+  PageUp = 33,
 }
@@ -20,0 +22,0 @@

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

14870533

increased by0.02%

Lines of code

22201

increased by0.43%

No dependency changes