Skip to content

Commit c26df0e

Browse files
authoredFeb 8, 2024
Add resize indicator config option (glideapps#897)
* Add resize indicator config option * Add to dependencies
1 parent 17d3640 commit c26df0e

File tree

9 files changed

+34
-8
lines changed

9 files changed

+34
-8
lines changed
 

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

+2
Original file line numberDiff line numberDiff line change
@@ -827,6 +827,7 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
827827
theme: themeIn,
828828
isOutsideClick,
829829
renderers,
830+
resizeIndicator,
830831
} = p;
831832

832833
const rowMarkersObj = typeof p.rowMarkers === "string" ? undefined : p.rowMarkers;
@@ -3991,6 +3992,7 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
39913992
verticalBorder={mangledVerticalBorder}
39923993
gridRef={gridRef}
39933994
getCellRenderer={getCellRenderer}
3995+
resizeIndicator={resizeIndicator}
39943996
/>
39953997
{renameGroupNode}
39963998
{overlay !== undefined && (

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

+1
Original file line numberDiff line numberDiff line change
@@ -422,6 +422,7 @@ const DataGridDnd: React.FunctionComponent<DataGridDndProps> = p => {
422422
hasAppendRow={p.hasAppendRow}
423423
translateX={p.translateX}
424424
translateY={p.translateY}
425+
resizeIndicator={p.resizeIndicator}
425426
verticalBorder={p.verticalBorder}
426427
width={p.width}
427428
getCellContent={getMangledCellContent}

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

+1
Original file line numberDiff line numberDiff line change
@@ -545,6 +545,7 @@ const DataGridSearch: React.FunctionComponent<DataGridSearchProps> = p => {
545545
onRowMoved={p.onRowMoved}
546546
smoothScrollX={p.smoothScrollX}
547547
smoothScrollY={p.smoothScrollY}
548+
resizeIndicator={p.resizeIndicator}
548549
/>
549550
{searchbox}
550551
</>

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

+1
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,7 @@ export function Simplenotest() {
132132
isResizing={false}
133133
isDragging={false}
134134
theme={mergeAndRealizeTheme(getDataEditorTheme())}
135+
resizeIndicator={"full"}
135136
/>
136137
);
137138
}

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

+15
Original file line numberDiff line numberDiff line change
@@ -290,6 +290,18 @@ export interface DataGridProps {
290290
readonly theme: FullTheme;
291291

292292
readonly getCellRenderer: <T extends InnerGridCell>(cell: T) => CellRenderer<T> | undefined;
293+
294+
/**
295+
* Controls the resize indicator behavior.
296+
*
297+
* - `full` will show the resize indicator on the full height.
298+
* - `header` will show the resize indicator only on the header.
299+
* - `none` will not show the resize indicator.
300+
*
301+
* @defaultValue "full"
302+
* @group Style
303+
*/
304+
readonly resizeIndicator: "full" | "header" | "none" | undefined;
293305
}
294306

295307
type DamageUpdateList = readonly {
@@ -377,6 +389,7 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
377389
smoothScrollY = false,
378390
experimental,
379391
getCellRenderer,
392+
resizeIndicator = "full",
380393
} = p;
381394
const translateX = p.translateX ?? 0;
382395
const translateY = p.translateY ?? 0;
@@ -796,6 +809,7 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
796809
renderStrategy: experimental?.renderStrategy ?? (browserIsSafari.value ? "double-buffer" : "single-buffer"),
797810
getCellRenderer,
798811
minimumCellWidth,
812+
resizeIndicator,
799813
};
800814

801815
// 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,
861875
renderStateProvider,
862876
getCellRenderer,
863877
minimumCellWidth,
878+
resizeIndicator,
864879
]);
865880

866881
const lastDrawRef = React.useRef(draw);

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

+11-8
Original file line numberDiff line numberDiff line change
@@ -165,6 +165,7 @@ export function drawGrid(arg: DrawGridArg, lastArg: DrawGridArg | undefined) {
165165
bufferBCtx,
166166
damage,
167167
minimumCellWidth,
168+
resizeIndicator,
168169
} = arg;
169170
if (width === 0 || height === 0) return;
170171
const doubleBuffer = renderStrategy === "double-buffer";
@@ -721,7 +722,7 @@ export function drawGrid(arg: DrawGridArg, lastArg: DrawGridArg | undefined) {
721722
highlightRedraw?.();
722723
focusRedraw?.();
723724

724-
if (isResizing) {
725+
if (isResizing && resizeIndicator !== "none") {
725726
walkColumns(effectiveCols, 0, translateX, 0, totalHeaderHeight, (c, x) => {
726727
if (c.sourceIndex === resizeCol) {
727728
drawColumnResizeOutline(
@@ -731,13 +732,15 @@ export function drawGrid(arg: DrawGridArg, lastArg: DrawGridArg | undefined) {
731732
totalHeaderHeight + 1,
732733
blend(theme.resizeIndicatorColor ?? theme.accentLight, theme.bgHeader)
733734
);
734-
drawColumnResizeOutline(
735-
targetCtx,
736-
x + c.width,
737-
totalHeaderHeight,
738-
height,
739-
blend(theme.resizeIndicatorColor ?? theme.accentLight, theme.bgCell)
740-
);
735+
if (resizeIndicator === "full") {
736+
drawColumnResizeOutline(
737+
targetCtx,
738+
x + c.width,
739+
totalHeaderHeight,
740+
height,
741+
blend(theme.resizeIndicatorColor ?? theme.accentLight, theme.bgCell)
742+
);
743+
}
741744
return true;
742745
}
743746
return false;

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

+1
Original file line numberDiff line numberDiff line change
@@ -78,4 +78,5 @@ export interface DrawGridArg {
7878
readonly renderStateProvider: RenderStateProvider;
7979
readonly getCellRenderer: GetCellRendererCallback;
8080
readonly minimumCellWidth: number;
81+
readonly resizeIndicator: "full" | "header" | "none";
8182
}

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

+1
Original file line numberDiff line numberDiff line change
@@ -333,6 +333,7 @@ const GridScroller: React.FunctionComponent<ScrollingDataGridProps> = p => {
333333
onRowMoved={p.onRowMoved}
334334
smoothScrollX={p.smoothScrollX}
335335
smoothScrollY={p.smoothScrollY}
336+
resizeIndicator={p.resizeIndicator}
336337
/>
337338
</InfiniteScroller>
338339
);

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

+1
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,7 @@ const basicProps: DataGridProps = {
108108
if (cell.kind === GridCellKind.Custom) return undefined;
109109
return AllCellRenderers.find(x => x.kind === cell.kind) as any;
110110
},
111+
resizeIndicator: "full",
111112
};
112113

113114
const dataGridCanvasId = "data-grid-canvas";

0 commit comments

Comments
 (0)
Failed to load comments.