Add resize indicator config option (glideapps#897)

* Add resize indicator config option

* Add to dependencies

Author: lukasmasuch

packages/core/src/data-editor/data-editor.tsx

@@ -827,6 +827,7 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
         theme: themeIn,
         isOutsideClick,
         renderers,
+        resizeIndicator,
     } = p;
 
     const rowMarkersObj = typeof p.rowMarkers === "string" ? undefined : p.rowMarkers;
@@ -3991,6 +3992,7 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
                     verticalBorder={mangledVerticalBorder}
                     gridRef={gridRef}
                     getCellRenderer={getCellRenderer}
+                    resizeIndicator={resizeIndicator}
                 />
                 {renameGroupNode}
                 {overlay !== undefined && (

packages/core/src/internal/data-grid-dnd/data-grid-dnd.tsx

@@ -422,6 +422,7 @@ const DataGridDnd: React.FunctionComponent<DataGridDndProps> = p => {
             hasAppendRow={p.hasAppendRow}
             translateX={p.translateX}
             translateY={p.translateY}
+            resizeIndicator={p.resizeIndicator}
             verticalBorder={p.verticalBorder}
             width={p.width}
             getCellContent={getMangledCellContent}

packages/core/src/internal/data-grid-search/data-grid-search.tsx

@@ -545,6 +545,7 @@ const DataGridSearch: React.FunctionComponent<DataGridSearchProps> = p => {
                 onRowMoved={p.onRowMoved}
                 smoothScrollX={p.smoothScrollX}
                 smoothScrollY={p.smoothScrollY}
+                resizeIndicator={p.resizeIndicator}
             />
             {searchbox}
         </>

packages/core/src/internal/data-grid/data-grid.stories.tsx

@@ -132,6 +132,7 @@ export function Simplenotest() {
             isResizing={false}
             isDragging={false}
             theme={mergeAndRealizeTheme(getDataEditorTheme())}
+            resizeIndicator={"full"}
         />
     );
 }

packages/core/src/internal/data-grid/data-grid.tsx

@@ -290,6 +290,18 @@ export interface DataGridProps {
     readonly theme: FullTheme;
 
     readonly getCellRenderer: <T extends InnerGridCell>(cell: T) => CellRenderer<T> | undefined;
+
+    /**
+     * Controls the resize indicator behavior.
+     *
+     * - `full` will show the resize indicator on the full height.
+     * - `header` will show the resize indicator only on the header.
+     * - `none` will not show the resize indicator.
+     *
+     * @defaultValue "full"
+     * @group Style
+     */
+    readonly resizeIndicator: "full" | "header" | "none" | undefined;
 }
 
 type DamageUpdateList = readonly {
@@ -377,6 +389,7 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
         smoothScrollY = false,
         experimental,
         getCellRenderer,
+        resizeIndicator = "full",
     } = p;
     const translateX = p.translateX ?? 0;
     const translateY = p.translateY ?? 0;
@@ -796,6 +809,7 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
             renderStrategy: experimental?.renderStrategy ?? (browserIsSafari.value ? "double-buffer" : "single-buffer"),
             getCellRenderer,
             minimumCellWidth,
+            resizeIndicator,
         };
 
         // This confusing bit of code due to some poor design. Long story short, the damage property is only used
@@ -861,6 +875,7 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
         renderStateProvider,
         getCellRenderer,
         minimumCellWidth,
+        resizeIndicator,
     ]);
 
     const lastDrawRef = React.useRef(draw);

packages/core/src/internal/data-grid/render/data-grid-render.ts

@@ -165,6 +165,7 @@ export function drawGrid(arg: DrawGridArg, lastArg: DrawGridArg | undefined) {
         bufferBCtx,
         damage,
         minimumCellWidth,
+        resizeIndicator,
     } = arg;
     if (width === 0 || height === 0) return;
     const doubleBuffer = renderStrategy === "double-buffer";
@@ -721,7 +722,7 @@ export function drawGrid(arg: DrawGridArg, lastArg: DrawGridArg | undefined) {
     highlightRedraw?.();
     focusRedraw?.();
 
-    if (isResizing) {
+    if (isResizing && resizeIndicator !== "none") {
         walkColumns(effectiveCols, 0, translateX, 0, totalHeaderHeight, (c, x) => {
             if (c.sourceIndex === resizeCol) {
                 drawColumnResizeOutline(
@@ -731,13 +732,15 @@ export function drawGrid(arg: DrawGridArg, lastArg: DrawGridArg | undefined) {
                     totalHeaderHeight + 1,
                     blend(theme.resizeIndicatorColor ?? theme.accentLight, theme.bgHeader)
                 );
-                drawColumnResizeOutline(
-                    targetCtx,
-                    x + c.width,
-                    totalHeaderHeight,
-                    height,
-                    blend(theme.resizeIndicatorColor ?? theme.accentLight, theme.bgCell)
-                );
+                if (resizeIndicator === "full") {
+                    drawColumnResizeOutline(
+                        targetCtx,
+                        x + c.width,
+                        totalHeaderHeight,
+                        height,
+                        blend(theme.resizeIndicatorColor ?? theme.accentLight, theme.bgCell)
+                    );
+                }
                 return true;
             }
             return false;

packages/core/src/internal/data-grid/render/draw-grid-arg.ts

@@ -78,4 +78,5 @@ export interface DrawGridArg {
     readonly renderStateProvider: RenderStateProvider;
     readonly getCellRenderer: GetCellRendererCallback;
     readonly minimumCellWidth: number;
+    readonly resizeIndicator: "full" | "header" | "none";
 }

packages/core/src/internal/scrolling-data-grid/scrolling-data-grid.tsx

@@ -333,6 +333,7 @@ const GridScroller: React.FunctionComponent<ScrollingDataGridProps> = p => {
                 onRowMoved={p.onRowMoved}
                 smoothScrollX={p.smoothScrollX}
                 smoothScrollY={p.smoothScrollY}
+                resizeIndicator={p.resizeIndicator}
             />
         </InfiniteScroller>
     );

packages/core/test/data-grid.test.tsx

@@ -108,6 +108,7 @@ const basicProps: DataGridProps = {
         if (cell.kind === GridCellKind.Custom) return undefined;
         return AllCellRenderers.find(x => x.kind === cell.kind) as any;
     },
+    resizeIndicator: "full",
 };
 
 const dataGridCanvasId = "data-grid-canvas";