@rowsncolumns/grid - npm Package Compare versions

Comparing version 7.0.1 to 8.0.0

dist/Grid.d.ts

@@ -348,2 +348,4 @@ import React, { Key } from "react";
     };
+    getRowOffset: (index: number) => number;
+    getColumnOffset: (index: number) => number;
 };
@@ -350,0 +352,0 @@ export declare type MergedCellMap = Map<string, AreaProps>;

dist/hooks/useEditable.d.ts

@@ -92,3 +92,11 @@ import React from "react";
     onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement | HTMLDivElement>) => void;
+    /**
+     * Sync callback before a cell is edited
+     */
     onBeforeEdit?: (coords: CellInterface) => void;
+    /**
+     * If true, Once the editor is active, it will be always visible.
+     * Editor will not scroll with the grid
+     */
+    sticky?: boolean;
 }
@@ -189,3 +197,3 @@ export interface EditableResults {
      */
-    scrollPosition?: ScrollCoords;
+    scrollPosition: ScrollCoords;
     /**
@@ -207,2 +215,22 @@ * Next cell that should receive focus
     maxWidth?: string | number;
+    /**
+     * Max editor height
+     */
+    maxHeight?: string | number;
+    /**
+     * Indicates if the cell is part of frozen row
+     */
+    isFrozenRow?: boolean;
+    /**
+     * Indicates if the cell is part of frozen column
+     */
+    isFrozenColumn?: boolean;
+    /**
+     * Frozen row offset
+     */
+    frozenRowOffset?: number;
+    /**
+     * Frozen column offset
+     */
+    frozenColumnOffset?: number;
 }
@@ -213,3 +241,3 @@ /**
  */
-declare const useEditable: ({ getEditor, gridRef, getValue, onChange, onSubmit, onCancel, onDelete, selections, activeCell, canEdit, frozenRows, frozenColumns, hideOnBlur, isHiddenRow, isHiddenColumn, rowCount, columnCount, selectionTopBound, selectionBottomBound, selectionLeftBound, selectionRightBound, editorProps, onBeforeEdit, onKeyDown, }: UseEditableOptions) => EditableResults;
+declare const useEditable: ({ getEditor, gridRef, getValue, onChange, onSubmit, onCancel, onDelete, selections, activeCell, canEdit, frozenRows, frozenColumns, hideOnBlur, isHiddenRow, isHiddenColumn, rowCount, columnCount, selectionTopBound, selectionBottomBound, selectionLeftBound, selectionRightBound, editorProps, onBeforeEdit, onKeyDown, sticky, }: UseEditableOptions) => EditableResults;
 export default useEditable;

dist/hooks/useEditable.js

@@ -30,6 +30,5 @@ "use strict";
 const DefaultEditor = (props) => {
-    const { onChange, onSubmit, onCancel, position, cell, nextFocusableCell, value = "", activeCell, autoFocus = true, onKeyDown, ...rest } = props;
+    const { onChange, onSubmit, onCancel, position, cell, nextFocusableCell, value = "", activeCell, autoFocus = true, onKeyDown, selections, scrollPosition, maxWidth, maxHeight, isFrozenRow, isFrozenColumn, frozenRowOffset, frozenColumnOffset, ...rest } = props;
     const borderWidth = 2;
     const padding = 10; /* 2 + 1 + 1 + 2 + 2 */
-    const textSizer = react_1.useRef(helpers_1.autoSizerCanvas);
     const inputRef = react_1.useRef(null);
@@ -39,3 +38,3 @@ const { x = 0, y = 0, width = 0, height = 0 } = position;
         var _a;
-        const textWidth = ((_a = textSizer.current.measureText(text)) === null || _a === void 0 ? void 0 : _a.width) || 0;
+        const textWidth = ((_a = helpers_1.autoSizerCanvas.measureText(text)) === null || _a === void 0 ? void 0 : _a.width) || 0;
         return Math.max(textWidth + padding, width + borderWidth / 2);
@@ -112,4 +111,4 @@ }, [width]);
  */
-const useEditable = ({ getEditor = getDefaultEditor, gridRef, getValue, onChange, onSubmit, onCancel, onDelete, selections = [], activeCell, canEdit = defaultCanEdit, frozenRows = 0, frozenColumns = 0, hideOnBlur = true, isHiddenRow = defaultIsHidden, isHiddenColumn = defaultIsHidden, rowCount, columnCount, selectionTopBound = 0, selectionBottomBound = rowCount - 1, selectionLeftBound = 0, selectionRightBound = columnCount - 1, editorProps, onBeforeEdit, onKeyDown, }) => {
-    var _a, _b;
+const useEditable = ({ getEditor = getDefaultEditor, gridRef, getValue, onChange, onSubmit, onCancel, onDelete, selections = [], activeCell, canEdit = defaultCanEdit, frozenRows = 0, frozenColumns = 0, hideOnBlur = true, isHiddenRow = defaultIsHidden, isHiddenColumn = defaultIsHidden, rowCount, columnCount, selectionTopBound = 0, selectionBottomBound = rowCount - 1, selectionLeftBound = 0, selectionRightBound = columnCount - 1, editorProps, onBeforeEdit, onKeyDown, sticky = false, }) => {
+    var _a, _b, _c, _d, _e, _f;
     const [isEditorShown, setShowEditor] = react_1.useState(false);
@@ -158,3 +157,3 @@ const [value, setValue] = react_1.useState("");
     const makeEditable = react_1.useCallback((coords, initialValue, autoFocus = true) => {
-        var _a;
+        var _a, _b, _c;
         if (!gridRef.current)
@@ -165,4 +164,5 @@ return;
         /* Check if its the same cell */
-        if (helpers_1.isEqualCells(coords, currentActiveCellRef.current))
+        if (helpers_1.isEqualCells(coords, currentActiveCellRef.current)) {
             return;
+        }
         /* Call on before edit */
@@ -180,3 +180,9 @@ if (canEdit(coords)) {
             const value = initialValue || cellValue || "";
-            const cellPosition = getCellPosition(pos, scrollPosition);
+            const cellPosition = sticky
+                ? // Editor is rendered outside the <Grid /> component
+                    // If the user has scrolled down, and then activate the editor, we will need to adjust the position
+                    // of the sticky editor accordingly
+                    // Subsequent scroll events has no effect, cos of sticky option
+                    getCellPosition(pos, scrollPosition)
+                : pos;
             /**
@@ -187,4 +193,4 @@ * Set max editor ref based on grid container
             maxEditorDimensionsRef.current = {
-                height: containerHeight - cellPosition.y,
-                width: containerWidth - cellPosition.x,
+                height: containerHeight - ((_b = cellPosition.y) !== null && _b !== void 0 ? _b : 0),
+                width: containerWidth - ((_c = cellPosition.x) !== null && _c !== void 0 ? _c : 0),
             };
@@ -201,6 +207,12 @@ /**
             setAutoFocus(autoFocus);
+            setScrollPosition(scrollPosition);
             setPosition(cellPosition);
             showEditor();
         }
-    }, [frozenRows, frozenColumns, onBeforeEdit, canEdit]);
+    }, [frozenRows, frozenColumns, onBeforeEdit, canEdit, sticky]);
+    /* Frozen flags */
+    const isFrozenRow = currentActiveCellRef.current &&
+        ((_a = currentActiveCellRef.current) === null || _a === void 0 ? void 0 : _a.rowIndex) < frozenRows;
+    const isFrozenColumn = currentActiveCellRef.current &&
+        ((_b = currentActiveCellRef.current) === null || _b === void 0 ? void 0 : _b.columnIndex) < frozenColumns;
     /**
@@ -212,7 +224,4 @@ * Get current cell position based on scroll position
     const getCellPosition = (position, scrollPosition) => {
-        var _a, _b;
         if (!currentActiveCellRef.current)
             return { x: 0, y: 0 };
-        const isFrozenRow = ((_a = currentActiveCellRef.current) === null || _a === void 0 ? void 0 : _a.rowIndex) < frozenRows;
-        const isFrozenColumn = ((_b = currentActiveCellRef.current) === null || _b === void 0 ? void 0 : _b.columnIndex) < frozenColumns;
         return {
@@ -429,5 +438,26 @@ ...position,
     }, []);
+    const finalCellPosition = react_1.useMemo(() => {
+        /**
+         * Since the editor is sticky,
+         * we dont need to adjust the position,
+         * as scrollposition wont move the editor
+         *
+         * When the editor is first active, in makeEditable,
+         * we accomodate for the initial scrollPosition
+         */
+        if (sticky) {
+            return position;
+        }
+        /**
+         * If editor is not sticky, keep adjusting
+         * its position to accomodate for scroll
+         */
+        return getCellPosition(position, scrollPosition);
+    }, [sticky, position, scrollPosition, frozenColumns, frozenRows]);
+    /* Get offset of frozen rows and columns */
+    const frozenRowOffset = (_c = gridRef.current) === null || _c === void 0 ? void 0 : _c.getRowOffset(frozenRows);
+    const frozenColumnOffset = (_d = gridRef.current) === null || _d === void 0 ? void 0 : _d.getColumnOffset(frozenColumns);
     const editorComponent = isEditorShown && Editor ? (react_1.default.createElement(Editor, Object.assign({}, editorProps === null || editorProps === void 0 ? void 0 : editorProps(), { 
         /* This is the cell that is currently being edited */
-        cell: editingCell, activeCell: activeCell, autoFocus: autoFocus, value: value, selections: selections, onChange: handleChange, onSubmit: handleSubmit, onCancel: handleCancel, position: position, scrollPosition: scrollPosition, nextFocusableCell: nextFocusableCell, onBlur: handleBlur, onKeyDown: onKeyDown, maxWidth: (_a = maxEditorDimensionsRef.current) === null || _a === void 0 ? void 0 : _a.width, maxHeight: (_b = maxEditorDimensionsRef.current) === null || _b === void 0 ? void 0 : _b.height }))) : null;
+        cell: editingCell, activeCell: activeCell, autoFocus: autoFocus, value: value, selections: selections, onChange: handleChange, onSubmit: handleSubmit, onCancel: handleCancel, position: finalCellPosition, scrollPosition: scrollPosition, nextFocusableCell: nextFocusableCell, onBlur: handleBlur, onKeyDown: onKeyDown, maxWidth: (_e = maxEditorDimensionsRef.current) === null || _e === void 0 ? void 0 : _e.width, maxHeight: (_f = maxEditorDimensionsRef.current) === null || _f === void 0 ? void 0 : _f.height, isFrozenRow: isFrozenRow, isFrozenColumn: isFrozenColumn, frozenRowOffset: frozenRowOffset, frozenColumnOffset: frozenColumnOffset }))) : null;
     return {
@@ -434,0 +464,0 @@ editorComponent,

dist/utils.d.ts

@@ -8,2 +8,2 @@ import { ShapeConfig } from "konva/types/Shape";
 export declare const createCanvasBox: ({ x, y, width, height, fill, stroke, strokeLeftColor, strokeTopColor, strokeRightColor, strokeBottomColor, strokeWidth, strokeTopWidth, strokeRightWidth, strokeBottomWidth, strokeLeftWidth, dash, dashEnabled, lineCap, key, }: ShapeConfig) => JSX.Element;
-export declare const createHTMLBox: ({ x, y, width, height, fill, stroke, strokeLeftColor, strokeTopColor, strokeRightColor, strokeBottomColor, strokeWidth, strokeTopWidth, strokeRightWidth, strokeBottomWidth, strokeLeftWidth, key, strokeStyle, fillOpacity, draggable, isDragging, borderCoverWidth, type, bounds, ...props }: SelectionProps) => JSX.Element;
+export declare const createHTMLBox: ({ x, y, width, height, fill, stroke, strokeLeftColor, strokeTopColor, strokeRightColor, strokeBottomColor, strokeWidth, strokeTopWidth, strokeRightWidth, strokeBottomWidth, strokeLeftWidth, key, strokeStyle, fillOpacity, draggable, isDragging, borderCoverWidth, type, bounds, activeCell, ...props }: SelectionProps) => JSX.Element;

dist/utils.js

@@ -32,3 +32,3 @@ "use strict";
 exports.createCanvasBox = createCanvasBox;
-const 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", fillOpacity = 1, draggable, isDragging, borderCoverWidth = 5, type, bounds, ...props }) => {
+const 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", fillOpacity = 1, draggable, isDragging, borderCoverWidth = 5, type, bounds, activeCell, ...props }) => {
     const lineStyles = {
@@ -35,0 +35,0 @@ borderWidth: 0,

package.json

 {
   "name": "@rowsncolumns/grid",
   "description": "Declarative React Canvas Grid primitive for Data table, Pivot table, Excel Worksheets",
-  "version": "7.0.1",
+  "version": "8.0.0",
   "main": "dist/index.js",
@@ -46,3 +46,3 @@ "license": "MIT",
   },
-  "gitHead": "843c7971d550d11bfda09edc3a34de64d0cc9d8f"
+  "gitHead": "cf2f869e9959ecd0317ab90dbd172a0689a74ead"
 }

No alert changes

Worsened metrics

Total package byte prevSize

714413

decreased by-3.26%

Lines of code

15641

decreased by-4.64%

No dependency changes