Skip to content
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

Jump to bottom

fix: Ticking tables scrolling back to bottom when not stuck to bottom #1616

Merged
merged 2 commits into from
Nov 2, 2023
Merged

fix: Ticking tables scrolling back to bottom when not stuck to bottom #1616

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3ff134d
Revert "fix: stuck to bottom on filter clear (#1579)"
mattrunyon Nov 2, 2023
3c481ce
Fix 1477 scroll issue
mattrunyon Nov 2, 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
80 changes: 15 additions & 65 deletions packages/grid/src/Grid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,11 +68,6 @@ type LegacyCanvasRenderingContext2D = CanvasRenderingContext2D & {
backingStorePixelRatio?: number;
};

export type StickyOptions = {
shouldStickBottom?: boolean;
shouldStickRight?: boolean;
};

export type GridProps = typeof Grid.defaultProps & {
// Options to set on the canvas
canvasOptions?: CanvasRenderingContext2DSettings;
Expand Down Expand Up @@ -1186,42 +1181,26 @@ class Grid extends PureComponent<GridProps, GridState> {
* @param deltaColumn Number of columns to move the cursor
* @param deltaRow Number of rows to move the cursor
* @param extendSelection True if the current selection should be extended, false to start a new selection
* @param stickyOptions Options for sticky behavior
*/
moveCursor(
deltaColumn: number,
deltaRow: number,
extendSelection: boolean,
stickyOptions?: StickyOptions
extendSelection: boolean
): void {
const { cursorRow, cursorColumn, selectionEndColumn, selectionEndRow } =
this.state;
const column = extendSelection ? selectionEndColumn : cursorColumn;
const row = extendSelection ? selectionEndRow : cursorRow;
if (row === null || column === null) {
const { left, top } = this.state;
this.moveCursorToPosition(
left,
top,
extendSelection,
true,
false,
stickyOptions
);
this.moveCursorToPosition(left, top, extendSelection);
} else {
const { model } = this.props;
const { columnCount, rowCount } = model;

const left = clamp(column + deltaColumn, 0, columnCount - 1);
const top = clamp(row + deltaRow, 0, rowCount - 1);
this.moveCursorToPosition(
left,
top,
extendSelection,
true,
false,
stickyOptions
);
this.moveCursorToPosition(left, top, extendSelection);
}
}

Expand Down Expand Up @@ -1281,15 +1260,13 @@ class Grid extends PureComponent<GridProps, GridState> {
* @param extendSelection Whether to extend the current selection (eg. holding Shift)
* @param keepCursorInView Whether to move the viewport so that the cursor is in view
* @param maximizePreviousRange With this and `extendSelection` true, it will maximize/add to the previous range only, ignoring where the selection was started
* @param stickyOptions Options for sticky behavior
*/
moveCursorToPosition(
column: GridRangeIndex,
row: GridRangeIndex,
extendSelection = false,
keepCursorInView = true,
maximizePreviousRange = false,
stickyOptions?: StickyOptions
maximizePreviousRange = false
): void {
if (!extendSelection) {
this.beginSelection(column, row);
Expand All @@ -1298,7 +1275,7 @@ class Grid extends PureComponent<GridProps, GridState> {
this.moveSelection(column, row, extendSelection, maximizePreviousRange);

if (keepCursorInView) {
this.moveViewToCell(column, row, stickyOptions);
this.moveViewToCell(column, row);
}
}

Expand All @@ -1307,13 +1284,8 @@ class Grid extends PureComponent<GridProps, GridState> {
*
* @param column The column index to bring into view
* @param row The row index to bring into view
* @param stickyOptions Options for sticky behavior
*/
moveViewToCell(
column: GridRangeIndex,
row: GridRangeIndex,
stickyOptions?: StickyOptions
): void {
moveViewToCell(column: GridRangeIndex, row: GridRangeIndex): void {
if (!this.metrics) throw new Error('metrics not set');

const { metricCalculator } = this;
Expand Down Expand Up @@ -1342,41 +1314,27 @@ class Grid extends PureComponent<GridProps, GridState> {
}
}

this.setViewState(
{ top, left, topOffset, leftOffset },
false,
stickyOptions
);
this.setViewState({ top, left, topOffset, leftOffset });
}

/**
* Checks the `top` and `left` properties that are set and updates the isStuckToBottom/Right properties
* Should be called when user interaction occurs
* @param viewState New state properties to set.
* @param forceUpdate Whether to force an update.
* @param stickyOptions Options for sticky behavior
*/

setViewState(
viewState: Partial<GridState>,
forceUpdate = false,
stickyOptions?: StickyOptions
): void {
setViewState(viewState: Partial<GridState>, forceUpdate = false): void {
if (!this.metrics) throw new Error('metrics not set');

const { isStickyBottom, isStickyRight } = this.props;
const { top, left } = viewState;
const { lastTop, lastLeft } = this.metrics;

if (top != null && (stickyOptions?.shouldStickBottom ?? false)) {
this.setState({
isStuckToBottom: isStickyBottom && top >= lastTop,
});
const { lastTop, lastLeft, hasVerticalBar, hasHorizontalBar } =
this.metrics;
if (top != null && hasVerticalBar) {
this.setState({ isStuckToBottom: isStickyBottom && top >= lastTop });
}
if (left != null && (stickyOptions?.shouldStickRight ?? false)) {
this.setState({
isStuckToRight: isStickyRight && left >= lastLeft,
});
if (left != null && hasHorizontalBar) {
this.setState({ isStuckToRight: isStickyRight && left >= lastLeft });
}

this.setState(viewState as GridState);
Expand Down Expand Up @@ -2021,15 +1979,7 @@ class Grid extends PureComponent<GridProps, GridState> {
}
}

const stickyOptions: StickyOptions = {
shouldStickBottom: event.deltaY > 0,
shouldStickRight: event.deltaX > 0,
};
this.setViewState(
{ top, left, leftOffset, topOffset },
false,
stickyOptions
);
this.setViewState({ top, left, leftOffset, topOffset });

event.stopPropagation();
event.preventDefault();
Expand Down
28 changes: 8 additions & 20 deletions packages/grid/src/key-handlers/SelectionKeyHandler.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/* eslint class-methods-use-this: "off" */
import clamp from 'lodash.clamp';
import { EventHandlerResult } from '../EventHandlerResult';
import Grid, { StickyOptions } from '../Grid';
import Grid from '../Grid';
import GridRange from '../GridRange';
import GridUtils from '../GridUtils';
import KeyHandler, { GridKeyboardEvent } from '../KeyHandler';
Expand Down Expand Up @@ -144,11 +144,6 @@ class SelectionKeyHandler extends KeyHandler {
grid.state;
const column = isShiftKey ? selectionEndColumn : cursorColumn;
const row = isShiftKey ? selectionEndRow : cursorRow;
const stickyOptions: StickyOptions = {
shouldStickBottom: deltaRow > 0,
shouldStickRight: deltaColumn > 0,
};

if (isModifierKey) {
const { model } = grid.props;
const { columnCount, rowCount } = model;
Expand All @@ -174,16 +169,14 @@ class SelectionKeyHandler extends KeyHandler {
moveToRow,
isShiftKey,
true,
maximizePreviousRange,
stickyOptions
maximizePreviousRange
);
}
} else {
if (!grid.metrics) throw new Error('grid.metrics are not set');

const { theme } = grid.props;
const { autoSelectRow = false, autoSelectColumn = false } = theme;

if (autoSelectRow && deltaColumn !== 0) {
const { lastLeft } = grid.metrics;
let { left } = grid.state;
Expand All @@ -192,7 +185,7 @@ class SelectionKeyHandler extends KeyHandler {

grid.moveCursorToPosition(left, cursorRow, isShiftKey, false);

grid.setViewState({ left }, false, stickyOptions);
grid.setViewState({ left });
} else if (autoSelectColumn && deltaRow !== 0) {
const { lastTop } = grid.metrics;
let { top } = grid.state;
Expand All @@ -201,9 +194,9 @@ class SelectionKeyHandler extends KeyHandler {

grid.moveCursorToPosition(top, cursorColumn, isShiftKey, false);

grid.setViewState({ top }, false, stickyOptions);
grid.setViewState({ top });
} else {
grid.moveCursor(deltaColumn, deltaRow, isShiftKey, stickyOptions);
grid.moveCursor(deltaColumn, deltaRow, isShiftKey);
}
}
return true;
Expand Down Expand Up @@ -249,8 +242,8 @@ class SelectionKeyHandler extends KeyHandler {
return true;
}

handlePageDown(event: GridKeyboardEvent, grid: Grid): boolean {
const isShiftKey = event.shiftKey;
handlePageDown(e: GridKeyboardEvent, grid: Grid): boolean {
const isShiftKey = e.shiftKey;

if (isShiftKey) {
grid.trimSelectedRanges();
Expand Down Expand Up @@ -286,12 +279,7 @@ class SelectionKeyHandler extends KeyHandler {
isShiftKey,
false
);

const stickyOptions: StickyOptions = {
shouldStickBottom: true,
shouldStickRight: false,
};
grid.setViewState({ top: viewportPosition }, false, stickyOptions);
grid.setViewState({ top: viewportPosition });

return true;
}
Expand Down
Loading