react-datasheet-grid - npm Package Compare versions

Comparing version 3.1.2 to 3.2.0

dist/components/DataSheetGrid.js

@@ -120,3 +120,3 @@ "use strict";
 var DEFAULT_CREATE_ROW = function () { return ({}); };
-var DEFAULT_ON_CHANGE = function () { return null; };
+var DEFAULT_EMPTY_CALLBACK = function () { return null; };
 var DEFAULT_DUPLICATE_ROW = function (_a) {
@@ -128,4 +128,15 @@ var rowData = _a.rowData;
 exports.DataSheetGrid = react_1.default.memo(react_1.default.forwardRef(function (_a, ref) {
-    var _b, _c, _d, _e;
-    var _f = _a.data, data = _f === void 0 ? DEFAULT_DATA : _f, className = _a.className, style = _a.style, _g = _a.height, maxHeight = _g === void 0 ? 400 : _g, _h = _a.onChange, onChange = _h === void 0 ? DEFAULT_ON_CHANGE : _h, _j = _a.columns, rawColumns = _j === void 0 ? DEFAULT_COLUMNS : _j, _k = _a.rowHeight, rowHeight = _k === void 0 ? 40 : _k, _l = _a.headerRowHeight, headerRowHeight = _l === void 0 ? rowHeight : _l, gutterColumn = _a.gutterColumn, stickyRightColumn = _a.stickyRightColumn, _m = _a.addRowsComponent, AddRowsComponent = _m === void 0 ? AddRows_1.AddRows : _m, _o = _a.createRow, createRow = _o === void 0 ? DEFAULT_CREATE_ROW : _o, _p = _a.autoAddRow, autoAddRow = _p === void 0 ? false : _p, _q = _a.lockRows, lockRows = _q === void 0 ? false : _q, _r = _a.duplicateRow, duplicateRow = _r === void 0 ? DEFAULT_DUPLICATE_ROW : _r, _s = _a.contextMenuComponent, ContextMenuComponent = _s === void 0 ? ContextMenu_1.ContextMenu : _s, _t = _a.disableContextMenu, disableContextMenuRaw = _t === void 0 ? false : _t;
+    var _b, _c, _d, _e, _f, _g, _h, _j;
+    var 
+    // Data is deprecated but still supported, value should be used instead
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    deprecatedValue = _a.data, _k = _a.value, data = _k === void 0 ? deprecatedValue !== null && deprecatedValue !== void 0 ? deprecatedValue : DEFAULT_DATA : _k, className = _a.className, style = _a.style, _l = _a.height, maxHeight = _l === void 0 ? 400 : _l, _m = _a.onChange, onChange = _m === void 0 ? DEFAULT_EMPTY_CALLBACK : _m, _o = _a.columns, rawColumns = _o === void 0 ? DEFAULT_COLUMNS : _o, _p = _a.rowHeight, rowHeight = _p === void 0 ? 40 : _p, _q = _a.headerRowHeight, headerRowHeight = _q === void 0 ? rowHeight : _q, gutterColumn = _a.gutterColumn, stickyRightColumn = _a.stickyRightColumn, _r = _a.addRowsComponent, AddRowsComponent = _r === void 0 ? AddRows_1.AddRows : _r, _s = _a.createRow, createRow = _s === void 0 ? DEFAULT_CREATE_ROW : _s, _t = _a.autoAddRow, autoAddRow = _t === void 0 ? false : _t, _u = _a.lockRows, lockRows = _u === void 0 ? false : _u, _v = _a.duplicateRow, duplicateRow = _v === void 0 ? DEFAULT_DUPLICATE_ROW : _v, _w = _a.contextMenuComponent, ContextMenuComponent = _w === void 0 ? ContextMenu_1.ContextMenu : _w, _x = _a.disableContextMenu, disableContextMenuRaw = _x === void 0 ? false : _x, _y = _a.onFocus, onFocus = _y === void 0 ? DEFAULT_EMPTY_CALLBACK : _y, _z = _a.onBlur, onBlur = _z === void 0 ? DEFAULT_EMPTY_CALLBACK : _z, _0 = _a.onActiveCellChange, onActiveCellChange = _0 === void 0 ? DEFAULT_EMPTY_CALLBACK : _0, _1 = _a.onSelectionChange, onSelectionChange = _1 === void 0 ? DEFAULT_EMPTY_CALLBACK : _1;
+    // Display a warning message message when `data` is used instead of `value`
+    react_1.useMemo(function () {
+        if (deprecatedValue !== undefined) {
+            console.warn('Property `data` of <DataSheetGrid /> is deprecated, please use `value` instead.');
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
     var disableContextMenu = disableContextMenuRaw || lockRows;
@@ -143,24 +154,24 @@ var columns = useColumns_1.useColumns(rawColumns, gutterColumn, stickyRightColumn);
     }, [headerRowHeight, rowHeight]);
-    var _u = __read(useDebounceState_1.useDebounceState(0, 100), 2), heightDiff = _u[0], setHeightDiff = _u[1];
+    var _2 = __read(useDebounceState_1.useDebounceState(0, 100), 2), heightDiff = _2[0], setHeightDiff = _2[1];
     // Height of the list (including scrollbars and borders) to display
     var displayHeight = Math.min(maxHeight, headerRowHeight + data.length * rowHeight + heightDiff);
     // Width and height of the scrollable area
-    var _v = react_resize_detector_1.useResizeDetector({
+    var _3 = react_resize_detector_1.useResizeDetector({
         targetRef: outerRef,
         refreshMode: 'throttle',
         refreshRate: 100,
-    }), width = _v.width, height = _v.height;
+    }), width = _3.width, height = _3.height;
     setHeightDiff(height ? displayHeight - height : 0);
     var edges = useEdges_1.useEdges(outerRef, width, height);
-    var _w = useColumnWidths_1.useColumnWidths(columns, width), fullWidth = _w.fullWidth, contentWidth = _w.totalWidth, columnWidths = _w.columnWidths, columnRights = _w.columnRights;
+    var _4 = useColumnWidths_1.useColumnWidths(columns, width), fullWidth = _4.fullWidth, contentWidth = _4.totalWidth, columnWidths = _4.columnWidths, columnRights = _4.columnRights;
     // x,y coordinates of the right click
-    var _x = __read(react_1.useState(null), 2), contextMenu = _x[0], setContextMenu = _x[1];
+    var _5 = __read(react_1.useState(null), 2), contextMenu = _5[0], setContextMenu = _5[1];
     // Items of the context menu
-    var _y = __read(react_1.useState([]), 2), contextMenuItems = _y[0], setContextMenuItems = _y[1];
+    var _6 = __read(react_1.useState([]), 2), contextMenuItems = _6[0], setContextMenuItems = _6[1];
     // True when the active cell is being edited
-    var _z = __read(react_1.useState(false), 2), editing = _z[0], setEditing = _z[1];
+    var _7 = __read(react_1.useState(false), 2), editing = _7[0], setEditing = _7[1];
     // Highlighted cell, null when not focused
-    var _0 = __read(useDeepEqualState_1.useDeepEqualState(null), 2), activeCell = _0[0], setActiveCell = _0[1];
+    var _8 = __read(useDeepEqualState_1.useDeepEqualState(null), 2), activeCell = _8[0], setActiveCell = _8[1];
     // The selection cell and the active cell are the two corners of the selection, null when nothing is selected
-    var _1 = __read(useDeepEqualState_1.useDeepEqualState(null), 2), selectionCell = _1[0], setSelectionCell = _1[1];
+    var _9 = __read(useDeepEqualState_1.useDeepEqualState(null), 2), selectionCell = _9[0], setSelectionCell = _9[1];
     // Min and max of the current selection (rectangle defined by the active cell and the selection cell), null when nothing is selected
@@ -181,3 +192,3 @@ var selection = react_1.useMemo(function () {
     // Behavior of the selection when the user drags the mouse around
-    var _2 = __read(useDeepEqualState_1.useDeepEqualState({
+    var _10 = __read(useDeepEqualState_1.useDeepEqualState({
         // True when the position of the cursor should impact the columns of the selection
@@ -189,3 +200,3 @@ columns: false,
         active: false,
-    }), 2), selectionMode = _2[0], setSelectionMode = _2[1];
+    }), 2), selectionMode = _10[0], setSelectionMode = _10[1];
     var getInnerBoundingClientRect = useGetBoundingClientRect_1.useGetBoundingClientRect(innerRef);
@@ -1073,4 +1084,4 @@ var getOuterBoundingClientRect = useGetBoundingClientRect_1.useGetBoundingClientRect(outerRef);
     react_1.useImperativeHandle(ref, function () { return ({
-        activeCell: activeCell,
-        selection: selection !== null && selection !== void 0 ? selection : (activeCell ? { min: activeCell, max: activeCell } : null),
+        activeCell: typeCheck_1.getCellWithId(activeCell, columns),
+        selection: typeCheck_1.getSelectionWithId(selection !== null && selection !== void 0 ? selection : (activeCell ? { min: activeCell, max: activeCell } : null), columns),
         setSelection: function (value) {
@@ -1091,2 +1102,53 @@ var selection = typeCheck_1.getSelection(value, columns.length - (hasStickyRightColumn ? 2 : 1), data.length, columns);
     }); });
+    // Used to remember the last non-null value of active cell
+    var lastActiveCellRef = react_1.useRef(activeCell);
+    lastActiveCellRef.current = activeCell !== null && activeCell !== void 0 ? activeCell : lastActiveCellRef.current;
+    var callbacksRef = react_1.useRef({
+        onFocus: onFocus,
+        onBlur: onBlur,
+        onActiveCellChange: onActiveCellChange,
+        onSelectionChange: onSelectionChange,
+    });
+    callbacksRef.current.onFocus = onFocus;
+    callbacksRef.current.onBlur = onBlur;
+    callbacksRef.current.onActiveCellChange = onActiveCellChange;
+    callbacksRef.current.onSelectionChange = onSelectionChange;
+    react_1.useEffect(function () {
+        if (lastActiveCellRef.current) {
+            if (editing) {
+                callbacksRef.current.onFocus({
+                    cell: typeCheck_1.getCellWithId(lastActiveCellRef.current, columns),
+                });
+            }
+            else {
+                callbacksRef.current.onBlur({
+                    cell: typeCheck_1.getCellWithId(lastActiveCellRef.current, columns),
+                });
+            }
+        }
+    }, [editing, columns]);
+    react_1.useEffect(function () {
+        callbacksRef.current.onActiveCellChange({
+            cell: typeCheck_1.getCellWithId(activeCell, columns),
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [activeCell === null || activeCell === void 0 ? void 0 : activeCell.col, activeCell === null || activeCell === void 0 ? void 0 : activeCell.row, columns]);
+    react_1.useEffect(function () {
+        callbacksRef.current.onSelectionChange({
+            selection: typeCheck_1.getSelectionWithId(selection !== null && selection !== void 0 ? selection : (activeCell ? { min: activeCell, max: activeCell } : null), columns),
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        (_f = selection === null || selection === void 0 ? void 0 : selection.min.col) !== null && _f !== void 0 ? _f : activeCell === null || activeCell === void 0 ? void 0 : activeCell.col,
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        (_g = selection === null || selection === void 0 ? void 0 : selection.min.row) !== null && _g !== void 0 ? _g : activeCell === null || activeCell === void 0 ? void 0 : activeCell.row,
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        (_h = selection === null || selection === void 0 ? void 0 : selection.max.col) !== null && _h !== void 0 ? _h : activeCell === null || activeCell === void 0 ? void 0 : activeCell.col,
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        (_j = selection === null || selection === void 0 ? void 0 : selection.max.row) !== null && _j !== void 0 ? _j : activeCell === null || activeCell === void 0 ? void 0 : activeCell.row,
+        activeCell === null || activeCell === void 0 ? void 0 : activeCell.col,
+        activeCell === null || activeCell === void 0 ? void 0 : activeCell.row,
+        columns,
+    ]);
     return (react_1.default.createElement("div", { className: className, style: style },
@@ -1093,0 +1155,0 @@ react_1.default.createElement("div", { ref: beforeTabIndexRef, tabIndex: rawColumns.length && data.length ? 0 : undefined, onFocus: function (e) {

dist/components/StaticDataSheetGrid.js

@@ -49,3 +49,3 @@ "use strict";
 exports.StaticDataSheetGrid = react_2.default.forwardRef(function (_a, ref) {
-    var columns = _a.columns, gutterColumn = _a.gutterColumn, stickyRightColumn = _a.stickyRightColumn, addRowsComponent = _a.addRowsComponent, createRow = _a.createRow, duplicateRow = _a.duplicateRow, rest = __rest(_a, ["columns", "gutterColumn", "stickyRightColumn", "addRowsComponent", "createRow", "duplicateRow"]);
+    var columns = _a.columns, gutterColumn = _a.gutterColumn, stickyRightColumn = _a.stickyRightColumn, addRowsComponent = _a.addRowsComponent, createRow = _a.createRow, duplicateRow = _a.duplicateRow, style = _a.style, onFocus = _a.onFocus, onBlur = _a.onBlur, onActiveCellChange = _a.onActiveCellChange, onSelectionChange = _a.onSelectionChange, rest = __rest(_a, ["columns", "gutterColumn", "stickyRightColumn", "addRowsComponent", "createRow", "duplicateRow", "style", "onFocus", "onBlur", "onActiveCellChange", "onSelectionChange"]);
     var _b = __read(react_1.useState({
@@ -58,2 +58,7 @@ columns: columns,
         duplicateRow: duplicateRow,
+        style: style,
+        onFocus: onFocus,
+        onBlur: onBlur,
+        onActiveCellChange: onActiveCellChange,
+        onSelectionChange: onSelectionChange,
     }), 1), staticProps = _b[0];
@@ -60,0 +65,0 @@ return react_2.default.createElement(DataSheetGrid_1.DataSheetGrid, __assign({}, staticProps, rest, { ref: ref }));

dist/types.d.ts

@@ -153,3 +153,3 @@ import React from 'react';
 export declare type DataSheetGridProps<T> = {
-    data?: T[];
+    value?: T[];
     style?: React.CSSProperties;
@@ -166,3 +166,3 @@ className?: string;
     createRow?: () => T;
-    duplicateRow?: ({ rowData }: {
+    duplicateRow?: (opts: {
         rowData: T;
@@ -175,18 +175,39 @@ rowIndex: number;
     contextMenuComponent?: (props: ContextMenuComponentProps) => JSX.Element;
+    onFocus?: (opts: {
+        cell: CellWithId;
+    }) => void;
+    onBlur?: (opts: {
+        cell: CellWithId;
+    }) => void;
+    onActiveCellChange?: (opts: {
+        cell: CellWithId | null;
+    }) => void;
+    onSelectionChange?: (opts: {
+        selection: SelectionWithId | null;
+    }) => void;
 };
-declare type IdCell = {
+declare type CellWithIdInput = {
     col: number | string;
     row: number;
 };
-declare type IdSelection = {
-    min: IdCell;
-    max: IdCell;
+declare type SelectionWithIdInput = {
+    min: CellWithIdInput;
+    max: CellWithIdInput;
 };
+export declare type CellWithId = {
+    colId?: string;
+    col: number;
+    row: number;
+};
+export declare type SelectionWithId = {
+    min: CellWithId;
+    max: CellWithId;
+};
 export declare type DataSheetGridRef = {
-    activeCell: Cell | null;
-    selection: Selection | null;
-    setActiveCell: (activeCell: IdCell | null) => void;
-    setSelection: (selection: IdSelection | null) => void;
+    activeCell: CellWithId | null;
+    selection: SelectionWithId | null;
+    setActiveCell: (activeCell: CellWithIdInput | null) => void;
+    setSelection: (selection: SelectionWithIdInput | null) => void;
 };
 export {};
 //# sourceMappingURL=types.d.ts.map

dist/utils/typeCheck.d.ts

@@ -1,4 +0,6 @@
-import { Cell, Column, Selection } from '../types';
+import { Cell, CellWithId, Column, Selection, SelectionWithId } from '../types';
 export declare const getCell: (value: any, colMax: number, rowMax: number, columns: Column<any, any>[]) => Cell | null;
+export declare const getCellWithId: (cell: Cell | null, columns: Column<any, any>[]) => CellWithId;
 export declare const getSelection: (value: any, colMax: number, rowMax: number, columns: Column<any, any>[]) => Selection | null;
+export declare const getSelectionWithId: (selection: Selection | null, columns: Column<any, any>[]) => SelectionWithId | null;
 //# sourceMappingURL=typeCheck.d.ts.map

dist/utils/typeCheck.js

 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getSelection = exports.getCell = void 0;
+exports.getSelectionWithId = exports.getSelection = exports.getCellWithId = exports.getCell = void 0;
 var getCell = function (value, colMax, rowMax, columns) {
@@ -22,2 +33,7 @@ if (value === null || !colMax || !rowMax) {
 exports.getCell = getCell;
+var getCellWithId = function (cell, columns) {
+    return cell
+        ? __assign(__assign({}, cell), { colId: columns[cell.col + 1].id }) : null;
+};
+exports.getCellWithId = getCellWithId;
 var getSelection = function (value, colMax, rowMax, columns) {
@@ -40,2 +56,11 @@ if (value === null || !colMax || !rowMax) {
 exports.getSelection = getSelection;
+var getSelectionWithId = function (selection, columns) {
+    return selection
+        ? {
+            min: exports.getCellWithId(selection.min, columns),
+            max: exports.getCellWithId(selection.max, columns),
+        }
+        : null;
+};
+exports.getSelectionWithId = getSelectionWithId;
 //# sourceMappingURL=typeCheck.js.map

package.json

 {
   "name": "react-datasheet-grid",
-  "version": "3.1.2",
+  "version": "3.2.0",
   "description": "An Excel-like React component to create beautiful spreadsheets.",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -64,3 +64,3 @@ # react-datasheet-grid
     <DataSheetGrid
-      data={data}
+      value={data}
       onChange={setData}
@@ -67,0 +67,0 @@ columns={columns}

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

263401

increased by3.94%

Lines of code

3555

increased by3.37%

No dependency changes