react-datasheet-grid - npm Package Compare versions

Comparing version 2.0.7 to 2.0.8

dist/components/DataSheetGrid.d.ts

@@ -1,5 +0,7 @@
-/// <reference types="react" />
-import { DataSheetGridProps } from '../types';
+import React from 'react';
+import { DataSheetGridProps, DataSheetGridRef } from '../types';
 import '../style.css';
-export declare const DataSheetGrid: <T extends unknown>(props: DataSheetGridProps<T>) => JSX.Element;
+export declare const DataSheetGrid: <T extends unknown>(props: DataSheetGridProps<T> & {
+    ref?: React.ForwardedRef<DataSheetGridRef> | undefined;
+}) => JSX.Element;
 //# sourceMappingURL=DataSheetGrid.d.ts.map

dist/components/DataSheetGrid.js

@@ -114,2 +114,3 @@ "use strict";
 var copyPasting_1 = require("../utils/copyPasting");
+var typeCheck_1 = require("../utils/typeCheck");
 var DEFAULT_DATA = [];
@@ -127,3 +128,3 @@ var DEFAULT_COLUMNS = [];
 };
-exports.DataSheetGrid = react_1.default.memo(function (_a) {
+exports.DataSheetGrid = react_1.default.memo(react_1.default.forwardRef(function (_a, ref) {
     var _b, _c, _d, _e;
@@ -304,3 +305,5 @@ var _f = _a.data, data = _f === void 0 ? DEFAULT_DATA : _f, _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.isRowEmpty, isRowEmpty = _s === void 0 ? DEFAULT_IS_ROW_EMPTY : _s, _t = _a.contextMenuComponent, ContextMenuComponent = _t === void 0 ? ContextMenu_1.ContextMenu : _t, _u = _a.disableContextMenu, disableContextMenuRaw = _u === void 0 ? false : _u;
                 columnWidths[cell.col + 1] +
-                (hasStickyRightColumn ? columnWidths[columnWidths.length - 1] : 0) -
+                (hasStickyRightColumn
+                    ? columnWidths[columnWidths.length - 1]
+                    : 0) -
                 width +
@@ -626,3 +629,4 @@ 1;
         }
-        if ((!(event.shiftKey && activeCell) || rightClick) && data.length > 0) {
+        if ((!(event.shiftKey && activeCell) || rightClick) &&
+            data.length > 0) {
             setActiveCell(cursorIndex && {
@@ -1003,2 +1007,20 @@ col: (rightClickInSelection || rightClickOnSelectedHeaders) &&
     var itemSize = react_1.useCallback(function (index) { return (index === 0 ? headerRowHeight : rowHeight); }, [headerRowHeight, rowHeight]);
+    react_1.useImperativeHandle(ref, function () { return ({
+        activeCell: activeCell,
+        selection: selection !== null && selection !== void 0 ? selection : (activeCell ? { min: activeCell, max: activeCell } : null),
+        setSelection: function (value) {
+            var selection = typeCheck_1.getSelection(value, columns.length - (hasStickyRightColumn ? 2 : 1), data.length);
+            setActiveCell((selection === null || selection === void 0 ? void 0 : selection.min) || null);
+            setEditing(false);
+            setSelectionMode({ columns: false, active: false, rows: false });
+            setSelectionCell((selection === null || selection === void 0 ? void 0 : selection.max) || null);
+        },
+        setActiveCell: function (value) {
+            var cell = typeCheck_1.getCell(value, columns.length - (hasStickyRightColumn ? 2 : 1), data.length);
+            setActiveCell(cell);
+            setEditing(false);
+            setSelectionMode({ columns: false, active: false, rows: false });
+            setSelectionCell(null);
+        },
+    }); });
     return (react_1.default.createElement("div", null,
@@ -1024,3 +1046,3 @@ react_1.default.createElement("div", { tabIndex: rawColumns.length && data.length ? 0 : undefined, onFocus: function (e) {
         contextMenu && contextMenuItems.length > 0 && (react_1.default.createElement(ContextMenuComponent, { clientX: contextMenu.x, clientY: contextMenu.y, items: contextMenuItems, close: function () { return setContextMenu(null); } }))));
-});
+}));
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -1027,0 +1049,0 @@ // @ts-ignore

dist/components/StaticDataSheetGrid.d.ts

@@ -1,4 +0,6 @@
-/// <reference types="react" />
-import { DataSheetGridProps } from '../types';
-export declare const StaticDataSheetGrid: <T extends unknown>({ columns, gutterColumn, stickyRightColumn, addRowsComponent, createRow, duplicateRow, isRowEmpty, ...rest }: DataSheetGridProps<T>) => JSX.Element;
+import { DataSheetGridProps, DataSheetGridRef } from '../types';
+import React from 'react';
+export declare const StaticDataSheetGrid: <T extends unknown>(props: DataSheetGridProps<T> & {
+    ref?: React.ForwardedRef<DataSheetGridRef> | undefined;
+}) => JSX.Element;
 //# sourceMappingURL=StaticDataSheetGrid.d.ts.map

dist/components/StaticDataSheetGrid.js

@@ -48,3 +48,3 @@ "use strict";
 var react_2 = __importDefault(require("react"));
-var StaticDataSheetGrid = function (_a) {
+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, isRowEmpty = _a.isRowEmpty, rest = __rest(_a, ["columns", "gutterColumn", "stickyRightColumn", "addRowsComponent", "createRow", "duplicateRow", "isRowEmpty"]);
@@ -60,5 +60,4 @@ var _b = __read(react_1.useState({
     }), 1), staticProps = _b[0];
-    return react_2.default.createElement(DataSheetGrid_1.DataSheetGrid, __assign({}, staticProps, rest));
-};
-exports.StaticDataSheetGrid = StaticDataSheetGrid;
+    return react_2.default.createElement(DataSheetGrid_1.DataSheetGrid, __assign({}, staticProps, rest, { ref: ref }));
+});
 //# sourceMappingURL=StaticDataSheetGrid.js.map

dist/index.d.ts

 /// <reference types="react" />
-import { Column as ColumnBase, CellComponent as CellComponentBase, CellProps as CellPropsBase, DataSheetGridProps as DataSheetGridPropsBase, AddRowsComponentProps as AddRowsComponentPropsBase, SimpleColumn as SimpleColumnBase, ContextMenuComponentProps as ContextMenuComponentPropsBase, ContextMenuItem as ContextMenuItemBase } from './types';
+import { Column as ColumnBase, CellComponent as CellComponentBase, CellProps as CellPropsBase, DataSheetGridProps as DataSheetGridPropsBase, AddRowsComponentProps as AddRowsComponentPropsBase, SimpleColumn as SimpleColumnBase, ContextMenuComponentProps as ContextMenuComponentPropsBase, ContextMenuItem as ContextMenuItemBase, DataSheetGridRef as DataSheetGridRefBase } from './types';
 export declare type Column<T = any, C = any> = Partial<ColumnBase<T, C>>;
@@ -11,4 +11,9 @@ export declare type CellComponent<T = any, C = any> = CellComponentBase<T, C>;
 export declare type ContextMenuItem = ContextMenuItemBase;
-export declare const DynamicDataSheetGrid: <T extends unknown>(props: DataSheetGridPropsBase<T>) => JSX.Element;
-export declare const DataSheetGrid: <T extends unknown>({ columns, gutterColumn, stickyRightColumn, addRowsComponent, createRow, duplicateRow, isRowEmpty, ...rest }: DataSheetGridPropsBase<T>) => JSX.Element;
+export declare type DataSheetGridRef = DataSheetGridRefBase;
+export declare const DynamicDataSheetGrid: <T extends unknown>(props: DataSheetGridPropsBase<T> & {
+    ref?: import("react").ForwardedRef<DataSheetGridRefBase> | undefined;
+}) => JSX.Element;
+export declare const DataSheetGrid: <T extends unknown>(props: DataSheetGridPropsBase<T> & {
+    ref?: import("react").ForwardedRef<DataSheetGridRefBase> | undefined;
+}) => JSX.Element;
 export { textColumn } from './columns/textColumn';
@@ -15,0 +20,0 @@ export { checkboxColumn } from './columns/checkboxColumn';

dist/types.d.ts

@@ -160,2 +160,8 @@ import React from 'react';
 };
+export declare type DataSheetGridRef = {
+    activeCell: Cell | null;
+    selection: Selection | null;
+    setActiveCell: (activeCell: Cell | null) => void;
+    setSelection: (selection: Selection | null) => void;
+};
 //# sourceMappingURL=types.d.ts.map

package.json

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

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

238534

increased by2.76%

Number of package files

131

increased by3.15%

Lines of code

3262

increased by2.39%

No dependency changes