Skip to content

Update dragHandle to display at the intersection of column and row #3355

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 11 commits into from
Oct 4, 2023
Merged

Update dragHandle to display at the intersection of column and row #3355

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
5b43d85
Hide drag handle if all the cells in a column are readonly
amanmahajan7 Oct 2, 2023
416bde3
Update dragHandle to display at the intersection of column and row
amanmahajan7 Oct 2, 2023
791579b
Merge branch 'main' into am-drag-handle-position
amanmahajan7 Oct 2, 2023
4ded75e
Fix frozen column
amanmahajan7 Oct 2, 2023
e406406
Cleanup
amanmahajan7 Oct 3, 2023
9d3af8c
`marginInlineStart` is only needed on unfrozen columns
amanmahajan7 Oct 3, 2023
413034f
dedupe
amanmahajan7 Oct 3, 2023
b7c3087
Use idx
amanmahajan7 Oct 3, 2023
b816f47
Use placeself and negative margins
amanmahajan7 Oct 3, 2023
bc26649
Remove unused function
amanmahajan7 Oct 3, 2023
edfc89d
Handle colSpan on the last column
amanmahajan7 Oct 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions src/DataGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -838,7 +838,8 @@ function DataGrid<R, SR, K extends Key>(
return;
}

const column = columns[selectedPosition.idx];
const { idx, rowIdx } = selectedPosition;
const column = columns[idx];
if (column.renderEditCell == null || column.editable === false) {
return;
}
Expand All @@ -847,10 +848,12 @@ function DataGrid<R, SR, K extends Key>(

return (
<DragHandle
gridRowStart={headerAndTopSummaryRowsCount + selectedPosition.rowIdx + 1}
gridRowStart={headerAndTopSummaryRowsCount + rowIdx + 1}
rows={rows}
column={column}
columnWidth={columnWidth}
maxColIdx={maxColIdx}
isLastRow={rowIdx === maxRowIdx}
selectedPosition={selectedPosition}
isCellEditable={isCellEditable}
latestDraggedOverRowIdx={latestDraggedOverRowIdx}
Expand Down
31 changes: 21 additions & 10 deletions src/DragHandle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,8 @@ interface Props<R, SR> extends Pick<DataGridProps<R, SR>, 'rows' | 'onRowsChange
gridRowStart: number;
column: CalculatedColumn<R, SR>;
columnWidth: number | string;
maxColIdx: number;
isLastRow: boolean;
selectedPosition: SelectCellState;
latestDraggedOverRowIdx: React.MutableRefObject<number | undefined>;
isCellEditable: (position: Position) => boolean;
Expand All @@ -50,6 +52,8 @@ export default function DragHandle<R, SR>({
rows,
column,
columnWidth,
maxColIdx,
isLastRow,
selectedPosition,
latestDraggedOverRowIdx,
isCellEditable,
Expand Down Expand Up @@ -118,19 +122,26 @@ export default function DragHandle<R, SR>({
}
}

const colSpan = column.colSpan?.({ type: 'ROW', row: rows[rowIdx] }) ?? 1;
const style = getCellStyle(column, colSpan);
function getStyle(): React.CSSProperties {
const colSpan = column.colSpan?.({ type: 'ROW', row: rows[rowIdx] }) ?? 1;
const { insetInlineStart, ...style } = getCellStyle(column, colSpan);
const marginEnd = 'calc(var(--rdg-drag-handle-size) * -0.5 + 1px)';
const isLastColumn = column.idx + colSpan - 1 === maxColIdx;

return {
...style,
gridRowStart,
marginInlineEnd: isLastColumn ? undefined : marginEnd,
marginBlockEnd: isLastRow ? undefined : marginEnd,
insetInlineStart: insetInlineStart
? `calc(${insetInlineStart} + ${columnWidth}px + var(--rdg-drag-handle-size) * -0.5 - 1px)`
: undefined
Comment on lines +136 to +138
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What does this do exactly?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It sets the correct left position for the drag handle when it is frozen.

};
}

return (
<div
style={{
...style,
gridRowStart,
insetInlineStart:
style.insetInlineStart && typeof columnWidth === 'number'
? `calc(${style.insetInlineStart} + ${columnWidth}px - var(--rdg-drag-handle-size))`
: undefined
}}
style={getStyle()}
className={clsx(cellDragHandleClassname, column.frozen && cellDragHandleFrozenClassname)}
onClick={onClick}
onMouseDown={handleMouseDown}
Expand Down