react-datasheet-grid - npm Package Compare versions

Comparing version 3.2.3 to 3.3.0

dist/components/DataSheetGrid.js

@@ -132,3 +132,3 @@ "use strict";
     // @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;
+    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.disableExpandSelection, disableExpandSelection = _v === void 0 ? false : _v, _w = _a.duplicateRow, duplicateRow = _w === void 0 ? DEFAULT_DUPLICATE_ROW : _w, _x = _a.contextMenuComponent, ContextMenuComponent = _x === void 0 ? ContextMenu_1.ContextMenu : _x, _y = _a.disableContextMenu, disableContextMenuRaw = _y === void 0 ? false : _y, _z = _a.onFocus, onFocus = _z === void 0 ? DEFAULT_EMPTY_CALLBACK : _z, _0 = _a.onBlur, onBlur = _0 === void 0 ? DEFAULT_EMPTY_CALLBACK : _0, _1 = _a.onActiveCellChange, onActiveCellChange = _1 === void 0 ? DEFAULT_EMPTY_CALLBACK : _1, _2 = _a.onSelectionChange, onSelectionChange = _2 === void 0 ? DEFAULT_EMPTY_CALLBACK : _2;
     // Display a warning message message when `data` is used instead of `value`
@@ -154,24 +154,28 @@ react_1.useMemo(function () {
     // Default value is 1 for the border
-    var _2 = __read(useDebounceState_1.useDebounceState(1, 100), 2), heightDiff = _2[0], setHeightDiff = _2[1];
+    var _3 = __read(useDebounceState_1.useDebounceState(1, 100), 2), heightDiff = _3[0], setHeightDiff = _3[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 _3 = react_resize_detector_1.useResizeDetector({
+    var _4 = react_resize_detector_1.useResizeDetector({
         targetRef: outerRef,
         refreshMode: 'throttle',
         refreshRate: 100,
-    }), width = _3.width, height = _3.height;
+    }), width = _4.width, height = _4.height;
     setHeightDiff(height ? displayHeight - height : 0);
     var edges = useEdges_1.useEdges(outerRef, width, height);
-    var _4 = useColumnWidths_1.useColumnWidths(columns, width), fullWidth = _4.fullWidth, contentWidth = _4.totalWidth, columnWidths = _4.columnWidths, columnRights = _4.columnRights;
+    var _5 = useColumnWidths_1.useColumnWidths(columns, width), fullWidth = _5.fullWidth, contentWidth = _5.totalWidth, columnWidths = _5.columnWidths, columnRights = _5.columnRights;
     // x,y coordinates of the right click
-    var _5 = __read(react_1.useState(null), 2), contextMenu = _5[0], setContextMenu = _5[1];
+    var _6 = __read(react_1.useState(null), 2), contextMenu = _6[0], setContextMenu = _6[1];
     // Items of the context menu
-    var _6 = __read(react_1.useState([]), 2), contextMenuItems = _6[0], setContextMenuItems = _6[1];
+    var _7 = __read(react_1.useState([]), 2), contextMenuItems = _7[0], setContextMenuItems = _7[1];
     // True when the active cell is being edited
-    var _7 = __read(react_1.useState(false), 2), editing = _7[0], setEditing = _7[1];
+    var _8 = __read(react_1.useState(false), 2), editing = _8[0], setEditing = _8[1];
+    // Number of rows the user is expanding the selection by, always a number, even when not expanding selection
+    var _9 = __read(react_1.useState(0), 2), expandSelectionRowsCount = _9[0], setExpandSelectionRowsCount = _9[1];
+    // When not null, represents the index of the row from which we are expanding
+    var _10 = __read(react_1.useState(null), 2), expandingSelectionFromRowIndex = _10[0], setExpandingSelectionFromRowIndex = _10[1];
     // Highlighted cell, null when not focused
-    var _8 = __read(useDeepEqualState_1.useDeepEqualState(null), 2), activeCell = _8[0], setActiveCell = _8[1];
+    var _11 = __read(useDeepEqualState_1.useDeepEqualState(null), 2), activeCell = _11[0], setActiveCell = _11[1];
     // The selection cell and the active cell are the two corners of the selection, null when nothing is selected
-    var _9 = __read(useDeepEqualState_1.useDeepEqualState(null), 2), selectionCell = _9[0], setSelectionCell = _9[1];
+    var _12 = __read(useDeepEqualState_1.useDeepEqualState(null), 2), selectionCell = _12[0], setSelectionCell = _12[1];
     // Min and max of the current selection (rectangle defined by the active cell and the selection cell), null when nothing is selected
@@ -192,3 +196,3 @@ var selection = react_1.useMemo(function () {
     // Behavior of the selection when the user drags the mouse around
-    var _10 = __read(useDeepEqualState_1.useDeepEqualState({
+    var _13 = __read(useDeepEqualState_1.useDeepEqualState({
         // True when the position of the cursor should impact the columns of the selection
@@ -200,3 +204,11 @@ columns: false,
         active: false,
-    }), 2), selectionMode = _10[0], setSelectionMode = _10[1];
+    }), 2), selectionMode = _13[0], setSelectionMode = _13[1];
+    // Same as expandSelectionRowsCount but is null when we should not be able to expand the selection
+    var expandSelection = disableExpandSelection ||
+        editing ||
+        selectionMode.active ||
+        (activeCell === null || activeCell === void 0 ? void 0 : activeCell.row) === (data === null || data === void 0 ? void 0 : data.length) - 1 ||
+        (selection === null || selection === void 0 ? void 0 : selection.max.row) === (data === null || data === void 0 ? void 0 : data.length) - 1
+        ? null
+        : expandSelectionRowsCount;
     var getInnerBoundingClientRect = useGetBoundingClientRect_1.useGetBoundingClientRect(innerRef);
@@ -622,3 +634,3 @@ var getOuterBoundingClientRect = useGetBoundingClientRect_1.useGetBoundingClientRect(outerRef);
     var onMouseDown = react_1.useCallback(function (event) {
-        var _a;
+        var _a, _b, _c;
         if (contextMenu && contextMenuItems.length) {
@@ -638,2 +650,7 @@ return;
         }
+        if (event.target instanceof HTMLElement &&
+            event.target.className === 'dsg-expand-rows-indicator') {
+            setExpandingSelectionFromRowIndex(Math.max((_b = activeCell === null || activeCell === void 0 ? void 0 : activeCell.row) !== null && _b !== void 0 ? _b : 0, (_c = selection === null || selection === void 0 ? void 0 : selection.max.row) !== null && _c !== void 0 ? _c : 0));
+            return;
+        }
         var clickOnActiveCell = cursorIndex &&
@@ -759,2 +776,47 @@ activeCell &&
     var onMouseUp = react_1.useCallback(function () {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        if (expandingSelectionFromRowIndex !== null) {
+            if (expandSelectionRowsCount > 0 && activeCell) {
+                var copyData = [];
+                var min = (selection === null || selection === void 0 ? void 0 : selection.min) || activeCell;
+                var max = (selection === null || selection === void 0 ? void 0 : selection.max) || activeCell;
+                for (var row = min.row; row <= max.row; ++row) {
+                    copyData.push([]);
+                    for (var col = min.col; col <= max.col; ++col) {
+                        var _l = columns[col + 1].copyValue, copyValue = _l === void 0 ? function () { return null; } : _l;
+                        copyData[row - min.row].push(String((_a = copyValue({ rowData: data[row], rowIndex: row })) !== null && _a !== void 0 ? _a : ''));
+                    }
+                }
+                var newData = __spreadArray([], __read(data));
+                for (var columnIndex = 0; columnIndex < copyData[0].length; columnIndex++) {
+                    var pasteValue = (_b = columns[min.col + columnIndex + 1]) === null || _b === void 0 ? void 0 : _b.pasteValue;
+                    if (pasteValue) {
+                        for (var rowIndex = max.row + 1; rowIndex <= max.row + expandSelectionRowsCount; rowIndex++) {
+                            if (!isCellDisabled({
+                                col: columnIndex + min.col,
+                                row: rowIndex,
+                            })) {
+                                newData[rowIndex] = pasteValue({
+                                    rowData: newData[rowIndex],
+                                    value: copyData[(rowIndex - max.row - 1) % copyData.length][columnIndex],
+                                    rowIndex: rowIndex,
+                                });
+                            }
+                        }
+                    }
+                }
+                onChange(newData);
+                setExpandSelectionRowsCount(0);
+                setActiveCell({
+                    col: Math.min((_c = activeCell === null || activeCell === void 0 ? void 0 : activeCell.col) !== null && _c !== void 0 ? _c : Infinity, (_d = selection === null || selection === void 0 ? void 0 : selection.min.col) !== null && _d !== void 0 ? _d : Infinity),
+                    row: Math.min((_e = activeCell === null || activeCell === void 0 ? void 0 : activeCell.row) !== null && _e !== void 0 ? _e : Infinity, (_f = selection === null || selection === void 0 ? void 0 : selection.min.row) !== null && _f !== void 0 ? _f : Infinity),
+                });
+                setSelectionCell({
+                    col: Math.max((_g = activeCell === null || activeCell === void 0 ? void 0 : activeCell.col) !== null && _g !== void 0 ? _g : 0, (_h = selection === null || selection === void 0 ? void 0 : selection.max.col) !== null && _h !== void 0 ? _h : 0),
+                    row: Math.max((_j = activeCell === null || activeCell === void 0 ? void 0 : activeCell.row) !== null && _j !== void 0 ? _j : 0, (_k = selection === null || selection === void 0 ? void 0 : selection.max.row) !== null && _k !== void 0 ? _k : 0) +
+                        expandSelectionRowsCount,
+                });
+            }
+            setExpandingSelectionFromRowIndex(null);
+        }
         setSelectionMode({
@@ -765,5 +827,28 @@ columns: false,
         });
-    }, [setSelectionMode]);
+    }, [
+        expandingSelectionFromRowIndex,
+        setSelectionMode,
+        expandSelectionRowsCount,
+        activeCell,
+        selection === null || selection === void 0 ? void 0 : selection.min,
+        selection === null || selection === void 0 ? void 0 : selection.max,
+        data,
+        onChange,
+        setActiveCell,
+        setSelectionCell,
+        columns,
+        isCellDisabled,
+    ]);
     useDocumentEventListener_1.useDocumentEventListener('mouseup', onMouseUp);
     var onMouseMove = react_1.useCallback(function (event) {
+        if (expandingSelectionFromRowIndex !== null) {
+            var cursorIndex = getCursorIndex(event);
+            if (cursorIndex) {
+                setExpandSelectionRowsCount(Math.max(0, cursorIndex.row - expandingSelectionFromRowIndex));
+                scrollTo({
+                    col: cursorIndex.col,
+                    row: Math.max(cursorIndex.row, expandingSelectionFromRowIndex),
+                });
+            }
+        }
         if (selectionMode.active) {
@@ -783,2 +868,3 @@ var cursorIndex = getCursorIndex(event);
     }, [
+        scrollTo,
         selectionMode.active,
@@ -792,2 +878,3 @@ selectionMode.columns,
         data.length,
+        expandingSelectionFromRowIndex,
     ]);
@@ -1068,2 +1155,3 @@ useDocumentEventListener_1.useDocumentEventListener('mousemove', onMouseMove);
         isCellDisabled: isCellDisabled,
+        expandSelection: expandSelection,
     });
@@ -1070,0 +1158,0 @@ var contextMenuItemsRef = react_1.useRef(contextMenuItems);

dist/components/HeaderRow.js

@@ -39,5 +39,6 @@ "use strict";
             activeColMax >= i - 1 &&
-            'dsg-cell-header-active', column.headerClassName) }, column.title)); })));
+            'dsg-cell-header-active', column.headerClassName) },
+        react_1.default.createElement("div", { className: "dsg-cell-header-container" }, column.title))); })));
 });
 exports.HeaderRow.displayName = 'HeaderRow';
 //# sourceMappingURL=HeaderRow.js.map

dist/components/SelectionRect.js

@@ -84,3 +84,3 @@ "use strict";
     var _a, _b, _c, _d;
-    var _e = react_1.useContext(SelectionContext_1.SelectionContext), columnWidths = _e.columnWidths, columnRights = _e.columnRights, headerRowHeight = _e.headerRowHeight, selection = _e.selection, rowHeight = _e.rowHeight, activeCell = _e.activeCell, hasStickyRightColumn = _e.hasStickyRightColumn, dataLength = _e.dataLength, viewWidth = _e.viewWidth, viewHeight = _e.viewHeight, contentWidth = _e.contentWidth, edges = _e.edges, isCellDisabled = _e.isCellDisabled, editing = _e.editing;
+    var _e = react_1.useContext(SelectionContext_1.SelectionContext), columnWidths = _e.columnWidths, columnRights = _e.columnRights, headerRowHeight = _e.headerRowHeight, selection = _e.selection, rowHeight = _e.rowHeight, activeCell = _e.activeCell, hasStickyRightColumn = _e.hasStickyRightColumn, dataLength = _e.dataLength, viewWidth = _e.viewWidth, viewHeight = _e.viewHeight, contentWidth = _e.contentWidth, edges = _e.edges, isCellDisabled = _e.isCellDisabled, editing = _e.editing, expandSelection = _e.expandSelection;
     var activeCellIsDisabled = activeCell ? isCellDisabled(activeCell) : false;
@@ -124,2 +124,24 @@ var selectionIsDisabled = react_1.useMemo(function () {
     };
+    var minSelection = (selection === null || selection === void 0 ? void 0 : selection.min) || activeCell;
+    var maxSelection = (selection === null || selection === void 0 ? void 0 : selection.max) || activeCell;
+    var expandRowsIndicator = maxSelection &&
+        expandSelection !== null && {
+        left: columnRights[maxSelection.col] + columnWidths[maxSelection.col + 1],
+        top: rowHeight * (maxSelection.row + 1) + headerRowHeight,
+        transform: "translate(-" + (maxSelection.col < columnWidths.length - (hasStickyRightColumn ? 3 : 2)
+            ? 50
+            : 100) + "%, -" + (maxSelection.row < dataLength - 1 ? 50 : 100) + "%)",
+    };
+    var expandRowsRect = minSelection &&
+        maxSelection &&
+        expandSelection !== null && {
+        width: columnWidths
+            .slice(minSelection.col + 1, maxSelection.col + 2)
+            .reduce(function (a, b) { return a + b; }) + extraPixelH(maxSelection.col),
+        height: rowHeight * expandSelection +
+            extraPixelV(maxSelection.row + expandSelection) -
+            1,
+        left: columnRights[minSelection.col],
+        top: rowHeight * (maxSelection.row + 1) + headerRowHeight + 1,
+    };
     return (react_1.default.createElement(react_1.default.Fragment, null,
@@ -167,5 +189,7 @@ react_1.default.createElement("div", { className: "dsg-scrollable-view-container", style: {
             }), style: activeCellRect })),
-        selectionRect && activeCellRect && (react_1.default.createElement("div", { className: classnames_1.default('dsg-selection-rect', selectionIsDisabled && 'dsg-selection-rect-disabled'), style: __assign(__assign({}, selectionRect), { clipPath: buildClipPath(activeCellRect.top - selectionRect.top, activeCellRect.left - selectionRect.left, activeCellRect.top + activeCellRect.height - selectionRect.top, activeCellRect.left + activeCellRect.width - selectionRect.left) }) }))));
+        selectionRect && activeCellRect && (react_1.default.createElement("div", { className: classnames_1.default('dsg-selection-rect', selectionIsDisabled && 'dsg-selection-rect-disabled'), style: __assign(__assign({}, selectionRect), { clipPath: buildClipPath(activeCellRect.top - selectionRect.top, activeCellRect.left - selectionRect.left, activeCellRect.top + activeCellRect.height - selectionRect.top, activeCellRect.left + activeCellRect.width - selectionRect.left) }) })),
+        expandRowsRect && (react_1.default.createElement("div", { className: classnames_1.default('dsg-expand-rows-rect'), style: expandRowsRect })),
+        expandRowsIndicator && (react_1.default.createElement("div", { className: classnames_1.default('dsg-expand-rows-indicator'), style: expandRowsIndicator }))));
 });
 exports.SelectionRect.displayName = 'SelectionRect';
 //# sourceMappingURL=SelectionRect.js.map

dist/types.d.ts

@@ -113,2 +113,3 @@ import React from 'react';
     };
+    expandSelection: number | null;
 };
@@ -173,2 +174,3 @@ export declare type RowProps<T> = {
     disableContextMenu?: boolean;
+    disableExpandSelection?: boolean;
     contextMenuComponent?: (props: ContextMenuComponentProps) => JSX.Element;
@@ -175,0 +177,0 @@ onFocus?: (opts: {

package.json

 {
   "name": "react-datasheet-grid",
-  "version": "3.2.3",
+  "version": "3.3.0",
   "description": "An Excel-like React component to create beautiful spreadsheets.",
@@ -20,6 +20,6 @@ "main": "dist/index.js",
     "datasheet",
-    "table",
     "excel",
     "airtable",
-    "notion"
+    "notion",
+    "table"
   ],
@@ -26,0 +26,0 @@ "author": "Nicolas Keller (https://github.com/nick-keller)",

README.md

@@ -19,5 +19,6 @@ # react-datasheet-grid
 - Keyboard navigation and shortcuts fully-supported
-- Supports right clicking and custom context menu
-- Supports custom widgets
-- Blazing fast, optimized for speed
+- Supports right-clicking and custom context menu
+- Supports dragging corner to expand selection
+- Easy to extend and implement custom widgets
+- Blazing fast, optimized for speed, minimal renders count
 - Smooth animations
@@ -24,0 +25,0 @@ - Virtualized, supports hundreds of thousands of rows

No alert changes

Improved metrics

Total package byte prevSize

277057

increased by5.02%

Lines of code

3694

increased by3.82%

Number of lines in readme file

74

increased by1.37%

No dependency changes