Add ability to restrict column span range selections

glideapps · Mar 13, 2024 · cd45444 · cd45444
1 parent f1a9b55
commit cd45444
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 3 deletions.
diff --git a/packages/core/src/cells/loading-cell.tsx b/packages/core/src/cells/loading-cell.tsx
@@ -35,6 +35,10 @@ export const loadingCellRenderer: InternalCellRenderer<LoadingCell> = {
         }
 
         const hpad = theme.cellHorizontalPadding;
+        if (width + hpad * 2 >= rect.width) {
+            width = rect.width - hpad * 2 - 1;
+        }
+
         const rectHeight = cell.skeletonHeight ?? Math.min(18, rect.height - 2 * theme.cellVerticalPadding);
 
         roundedRect(

diff --git a/packages/core/src/data-editor/data-editor.tsx b/packages/core/src/data-editor/data-editor.tsx
@@ -395,6 +395,12 @@ export interface DataEditorProps extends Props, Pick<DataGridSearchProps, "image
      */
     readonly rowSelect?: "none" | "single" | "multi";
 
+    /** Controls if range selection is allowed to span columns.
+     * @group Selection
+     * @defaultValue `true`
+     */
+    readonly rangeSelectionColumnSpanning?: boolean;
+
     /** Sets the initial scroll Y offset.
      * @see {@link scrollOffsetX}
      * @group Advanced
@@ -764,6 +770,7 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
         editorBloom,
         onHeaderClicked,
         onColumnProposeMove,
+        rangeSelectionColumnSpanning = true,
         spanRangeBehavior = "default",
         onGroupHeaderClicked,
         onCellContextMenu,
@@ -1033,7 +1040,8 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
         rangeSelectionBlending,
         columnSelectionBlending,
         rowSelectionBlending,
-        rangeSelect
+        rangeSelect,
+        rangeSelectionColumnSpanning
     );
 
     const mergedTheme = React.useMemo(() => {

diff --git a/packages/core/src/docs/examples/add-data.stories.tsx b/packages/core/src/docs/examples/add-data.stories.tsx
@@ -57,6 +57,7 @@ export const AddData: React.VFC = () => {
             {...defaultProps}
             getCellContent={getCellContent}
             columns={cols}
+            rangeSelectionColumnSpanning={false}
             rowMarkers={"both"}
             onPaste={true} // we want to allow paste to just call onCellEdited
             onCellEdited={setCellValue} // Sets the mock cell content

diff --git a/packages/core/src/internal/data-grid/use-selection-behavior.ts b/packages/core/src/internal/data-grid/use-selection-behavior.ts
@@ -13,7 +13,8 @@ export function useSelectionBehavior(
     rangeBehavior: SelectionBlending,
     columnBehavior: SelectionBlending,
     rowBehavior: SelectionBlending,
-    rangeSelect: "none" | "cell" | "rect" | "multi-cell" | "multi-rect"
+    rangeSelect: "none" | "cell" | "rect" | "multi-cell" | "multi-rect",
+    rangeSelectionColumnSpanning: boolean
 ) {
     // if append is true, the current range will be added to the rangeStack
     const setCurrent = React.useCallback(
@@ -34,6 +35,18 @@ export function useSelectionBehavior(
                     },
                 };
             }
+
+            if (!rangeSelectionColumnSpanning && value !== undefined && value.range.width > 1) {
+                value = {
+                    ...value,
+                    range: {
+                        ...value.range,
+                        width: 1,
+                        x: value.cell[0],
+                    },
+                };
+            }
+
             const rangeMixable = rangeBehavior === "mixed" && (append || trigger === "drag");
             const allowColumnCoSelect = columnBehavior === "mixed" && rangeMixable;
             const allowRowCoSelect = rowBehavior === "mixed" && rangeMixable;
@@ -61,7 +74,15 @@ export function useSelectionBehavior(
             }
             setGridSelection(newVal, expand);
         },
-        [columnBehavior, gridSelection, rangeBehavior, rangeSelect, rowBehavior, setGridSelection]
+        [
+            columnBehavior,
+            gridSelection,
+            rangeBehavior,
+            rangeSelect,
+            rangeSelectionColumnSpanning,
+            rowBehavior,
+            setGridSelection,
+        ]
     );
 
     const setSelectedRows = React.useCallback(