iTwin / iTwinUI-react

A react component library for iTwinUI.
https://github.com/iTwin/iTwinUI
Other
84 stars 23 forks source link

feat(Table): Table shift click support #774

Closed r100-stack closed 2 years ago

r100-stack commented 2 years ago

Closes #632

Checklist

TODOs

Screenshots

1. Holding Shift selects rows from the lastSelectedRow to the clicked row (or subrows)
(Expandable Subrows Story)

vokoscreenNG-2022-09-20_08-49-36.webm

2. Doing a shift click resets the previous selection (like Windows File Explorer)
(SelectableMulti Story)

vokoscreenNG-2022-09-20_08-47-48.webm

3. If no row selected before shift clicking, then assume first row is the last selectedRow (like Windows File Explorer)
(Selectable Multi Story)

vokoscreenNG-2022-09-20_08-46-04.webm

4. Text selection is disabled when shift is held (if isSelectable && selectionMode === 'multi') (Selectable Multi Story)

vokoscreenNG-2022-09-20_08-40-30.webm

5. Can select from lower to upper rows also (instead of upper to lower) (Full 2 Story)

vokoscreenNG-2022-09-20_08-51-25.webm

Click to see old screenshot https://user-images.githubusercontent.com/45748283/184366150-0d3ee646-b457-4928-9a7b-89f815a79048.mp4
gretanausedaite commented 2 years ago

Got error when trying to shift select in Full 2 story image

r100-stack commented 2 years ago

Got error when trying to shift select in Full 2 story image

This error is happening when running resetSelection() in selectHandler.ts. This method goes through all the rows and toggles them to false.

const resetSelection = () => {
  instance.rows.forEach((r) => {
    console.log(r);
    r.toggleRowSelected(false);
  });
};

But looks like after the row with id=25, toggleRowSelected() is not there in the row object.

image

I also got such inconsistent behavior in subrows in some of my trial shift selections. i.e. sometimes the subrows of some of the rows don't have all the attributes that a row should have (or usually has). One of the attributes is toggleRowSelected().

I'm not sure why this is happening. Does anyone know why this could be happening? @mayank99

gretanausedaite commented 2 years ago

I'm not sure why this is happening.

Found that this happens because virtualization is enabled.

r100-stack commented 2 years ago

I'm not sure why this is happening.

Found that this happens because virtualization is enabled.

Thanks, I fixed it using what you and Mayank suggested of using instance.toggleAllRowsSelected(false). It works correctly, but I am getting some flickering (not smooth scrolling) when I scroll to a very lower row (e.g. row 70+), especially when I have expanded some sub rows. Is this expected?

vokoscreenNG-2022-08-29_11-16-31.webm