Refactor header components #1837

amanmahajan7 · 2019-12-05T22:24:16Z

Remove cellMetaData
Render visible header cells.
Remove setScrollLeft method and use scrollLeft prop to freeze columns in IE
Simplify HeaderRow component
- Add FilterRow component and move all the filter logic to it
- Use component composition to handle sorting and resizing
Remove scrollToRowIndex prop and add a new scrollToRow method. scrollToRowIndex only works if new value is different
Fix unit tests

Co-Authored-By: qili26 <25043398+qili26@users.noreply.github.com>

Simplify scroll to row/column logic

rozeskjm · 2019-12-12T17:46:08Z

Got bored did you? 😉

amanmahajan7

@MayhemYDG @qili26 this is ready for review

amanmahajan7 · 2019-12-12T22:33:40Z

packages/react-data-grid/src/Cell.tsx

 }: CellProps<R>) {
+  const position: Position = { idx, rowIdx };
+
+  function selectCell(openEditor?: boolean) {


I added eventBus prop as it easier to pass it down instead of all the event handlers. It also works better with memo as we do not have to use useCallback everywhere

amanmahajan7 · 2019-12-12T22:34:05Z

packages/react-data-grid/src/DataGrid.tsx

@@ -92,8 +91,6 @@ export interface DataGridProps<R, K extends keyof R> {
  rowsCount: number;
  /** The minimum height of the grid in pixels */
  minHeight?: number;
-  /** When set, grid will scroll to this row index */
-  scrollToRowIndex?: number;


This is the only breaking change in this PR

amanmahajan7 · 2019-12-12T22:37:35Z

packages/react-data-grid/src/HeaderCell.tsx

-    if (node) {
-      node.style.transform = 'none';
-    }
+  if (column.sortable) {


I think composition makes this code cleaner and easier to maintain and we can add another if (draggable) block in the future. It will be nice to completely drop react-dnd dependency if possible

I think it's still worth using the react-dnd as it provides some features that we don't want to rework. I have a PR to upgrade it by using v10, will assign you for review later.

amanmahajan7 · 2019-12-12T22:39:00Z

packages/react-data-grid/src/SummaryRowRenderer.tsx

  colOverscanEndIdx,
  colOverscanStartIdx,
  columnMetrics,
  idx,
  rowData,
  rowHeight,
-  scrollLeft
+  scrollLeft,
+  eventBus
 }: SummaryRowRendererProps<R, K>) {
  return (
    <Row<R>


Do we need this component? It does not have any logic and just forwards the props

Unfortunately we still need it right now, as we use refs on rows in canvas, check the getRowColumns method.
Hopefully we can get rid of this in the future.

amanmahajan7 · 2019-12-12T22:41:19Z

packages/react-data-grid/src/common/types.ts

 | 'expandableOptions'
 | 'isRowSelected'
 | 'onRowSelectionChange'
 | 'isSummaryRow'
+| 'onDeleteSubRow'
+| 'onCellExpand'
+| 'getCellActions'


I am not sure why we added these props but SubRows and CellActions can be handled via a custom formatter

amanmahajan7 · 2019-12-12T22:42:56Z

packages/react-data-grid/src/masks/InteractionMasks.tsx

  };

-  onCommit = (args: CommitEvent<R>): void => {
-    this.props.onCommit(args);


onCommit and onDragHandleDoubleClick call onGridRowsUpdated so I just moved the logic here

…or-header

nstepien

Haven't reviewed everything yet, this PR is quite big.

nstepien · 2019-12-13T14:30:39Z

packages/react-data-grid/src/utils/viewportUtils.ts

@@ -1,4 +1,5 @@
 import { CalculatedColumn, ColumnMetrics } from '../common/types';
+import { isFrozen } from './columnUtils';


We should just remove isFrozen now that we don't use immutable stuff anymore, and use column.frozen directly.

I agree, let's tackle this in a follow up PR

nstepien · 2019-12-13T14:43:45Z

packages/react-data-grid/src/SummaryRowRenderer.tsx

  colOverscanEndIdx,
  colOverscanStartIdx,
  columnMetrics,
  idx,
  rowData,
  rowHeight,
-  scrollLeft
+  scrollLeft,
+  eventBus
 }: SummaryRowRendererProps<R, K>) {
  return (
    <Row<R>


Unfortunately we still need it right now, as we use refs on rows in canvas, check the getRowColumns method.
Hopefully we can get rid of this in the future.

nstepien · 2019-12-13T14:47:43Z

packages/react-data-grid/src/RowGroup.tsx

@@ -52,9 +52,9 @@ export default forwardRef<HTMLDivElement, Props<any>>(function RowGroup(props, r
      <Renderer {...props} ref={ref} onRowExpandClick={onRowExpandClick} onRowExpandToggle={onRowExpandToggle} />
    </div>
  );
-});
+}) as <R>(props: Props<R>) => JSX.Element;


Do we not use the ref?

We do pass the ref but I am not too sure if it is needed or not. We need to check if renderBaseRow is needed anymore or not. IIRC renderBaseRow was added because there was no easy way to forward the ref earlier

nstepien · 2019-12-13T14:56:34Z

packages/react-data-grid/src/DataGrid.tsx

  ...props
 }: DataGridProps<R, K>, ref: React.Ref<DataGridHandle>) {
  const [columnWidths, setColumnWidths] = useState(() => new Map<keyof R, number>());
-  const [eventBus] = useState(() => new EventBus());
+  const [scrollLeft, setScrollLeft] = useState(0);


I'm not a fan of re-rendering the root component on each scrollLeft update. It probably doesn't matter too much, we'll see.

I profiled it and It has not affected the performance. The only extra work is rendering the header cells on scroll which is minimal as we are only rendering the visible cells now. If that becomes an issue then we can memoized the header cells as well. I am not sure if there is another way to share the horizontal range

packages/react-data-grid/src/DataGrid.tsx

packages/react-data-grid/src/FilterRow.tsx

nstepien · 2019-12-13T15:55:02Z

packages/react-data-grid/src/Row.tsx

-    }
-
-    return cellElements;
+    return getViewportColumns(columns, colOverscanStartIdx, colOverscanEndIdx)


Don't we pre-filter the visible columns now? We should only pass the visible columns so we don't have to call getViewportColumns in each Row component, wdyt?

I thought about it but decided to keep this PR simple. viewportColumns is recomputed when scrollLeft is changed so it may break memoization. Let's revisit it in the future

nstepien · 2019-12-14T00:39:36Z

Looks like I accidentally force-pushed on your branch, not sure how. I've fixed it back to how it was.

nstepien · 2019-12-14T18:09:01Z

packages/react-data-grid/src/Cell.tsx

  function handleCellClick() {
-    cellMetaData.onCellClick({ idx, rowIdx });
+    selectCell();
+    onRowClick?.(rowIdx, rowData, column);


Wonder if we should add a new event for this, and subscribe to it in a parent component so we don't have to pass down the prop to each cell.

We probably can but lets revisit it. I was thinking of using useReducer and pass down dispatch instead of eventBus, not sure if it is possible but it uses more of less the same pattern.

packages/react-data-grid/src/HeaderCell.tsx

nstepien · 2019-12-14T19:05:27Z

packages/react-data-grid/src/HeaderCell.tsx

-      'rdg-cell-frozen': colIsFrozen,
-      'rdg-cell-frozen-last': colIsFrozen && column.idx === this.props.lastFrozenColumnIndex
-    }, this.props.className, column.cellClass);
+  if (typeof scrollLeft === 'number') {


Do we not need to check if the column is frozen here as well?
We seem to do it in FilterRow.tsx and Row.tsx.

We need to check it as we set scrollLeft on frozen columns only. FilterRow does not use HeaderCell component or the Row component, it directly renders the filter component. We can probably do some clean up and extract this common logic somewhere

packages/react-data-grid/src/RowGroup.tsx

packages/react-data-grid/src/common/cells/headerCells/ResizableHeaderCell.tsx

nstepien · 2019-12-14T23:06:53Z

@amanmahajan7 Feel free to merge it.

amanmahajan7 and others added 21 commits November 17, 2019 10:57

Remove interactionMasksMetaData prop

4847d5c

Replace onCellSelected, onCellDeSelected props with onSelectedCellChange

eb4bfe5

Remove getValidFilterValues prop

324eaf5

Add filters and onFiltersChange props

bebd82f

Remove cellMetaData from Header

d6b6087

Remove onCellCopyPaste prop

daccd6d

Add onSelectedCellRangeChange prop

2d41602

Cleanup filter example

39c1cbc

Fix tests

7f72e10

Simplify onDragHandleDoubleClick

f70b0f8

Tiny cleanup

81e34b4

Add enableCellDragAndDrop prop

4c17b64

Simplify onGridRowsUpdated

f03d2d8

Cleanup mouseup handler for range selection

fdcfc06

Simply multiSelection

2f7a330

Co-Authored-By: qili26 <25043398+qili26@users.noreply.github.com>

Update example to show deselected cell

5a20c66

Merge branch 'canary' into am-cleanup-props

410fa30

Use optional chaining to cleanup code

6256eaf

Merge branch 'canary' into am-cleanup-props

bac47e8

Merge branch 'canary' into am-cleanup-props

5f5d7a1

Refactor header components

0ec2e56

amanmahajan7 requested review from nstepien and qili26 December 5, 2019 22:24

amanmahajan7 self-assigned this Dec 5, 2019

amanmahajan7 added 6 commits December 6, 2019 13:44

Merge branch 'canary' into am-cleanup-props

4d76bae

Use optional chaining

0979df9

Kill cellMetaData

2ca71f4

Cleanup RowRenderer props

73a5a3f

Remove scrollToRowIndex prop

79093c2

Simplify scroll to row/column logic

Code cleanup

7187998

amanmahajan7 added 2 commits December 10, 2019 16:34

Render visible header cells

cb041ff

Fix column index

8a08dc6

amanmahajan7 added 2 commits December 12, 2019 15:17

Fix unit tests

3d90907

Cleanup ImperativeHandle logic

3d769dd

amanmahajan7 marked this pull request as ready for review December 12, 2019 22:25

amanmahajan7 commented Dec 12, 2019

View reviewed changes

nstepien changed the base branch from am-cleanup-props to pre-canary December 13, 2019 11:45

nstepien added 3 commits December 13, 2019 11:52

Merge remote-tracking branch 'origin/am-cleanup-props' into am-refact…

3361e12

…or-header

Merge remote-tracking branch 'origin/pre-canary' into am-cleanup-props

b029a97

Merge branch 'am-cleanup-props' into am-refactor-header

2bf9d86

nstepien requested changes Dec 13, 2019

View reviewed changes

amanmahajan7 added 3 commits December 13, 2019 11:51

Address comments

a5ae2f3

Merge branch 'pre-canary' into am-refactor-header

327a05f

Address comments

d1a3f11

amanmahajan7 requested a review from nstepien December 13, 2019 19:56

nstepien force-pushed the am-refactor-header branch from d1a3f11 to 2bf9d86 Compare December 13, 2019 21:37

nstepien requested changes Dec 14, 2019

View reviewed changes

amanmahajan7 added 3 commits December 14, 2019 14:51

Use currentTarget instead of ref

6e2950d

Remove SimpleCellRenderer formatter and use column.name directly

ea43db0

Cleanup ref

a27c963

nstepien approved these changes Dec 14, 2019

View reviewed changes

amanmahajan7 merged commit 6a2bac4 into pre-canary Dec 14, 2019

amanmahajan7 deleted the am-refactor-header branch December 14, 2019 23:42

paul-altyfc mentioned this pull request May 12, 2020

Hide a column v7.0-canary.16 #2033

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refactor header components #1837

Refactor header components #1837

amanmahajan7 commented Dec 5, 2019 •

edited

Loading

rozeskjm commented Dec 12, 2019

amanmahajan7 left a comment

amanmahajan7 Dec 12, 2019 •

edited

Loading

amanmahajan7 Dec 12, 2019

amanmahajan7 Dec 12, 2019 •

edited

Loading

qili26 Dec 13, 2019

amanmahajan7 Dec 12, 2019 •

edited

Loading

nstepien Dec 13, 2019

amanmahajan7 Dec 12, 2019

amanmahajan7 Dec 12, 2019

nstepien left a comment

nstepien Dec 13, 2019

amanmahajan7 Dec 13, 2019

nstepien Dec 13, 2019

nstepien Dec 13, 2019

amanmahajan7 Dec 13, 2019

nstepien Dec 13, 2019

amanmahajan7 Dec 13, 2019

nstepien Dec 13, 2019

amanmahajan7 Dec 13, 2019

nstepien commented Dec 14, 2019 •

edited

Loading

nstepien Dec 14, 2019

amanmahajan7 Dec 14, 2019

nstepien Dec 14, 2019

amanmahajan7 Dec 14, 2019

nstepien commented Dec 14, 2019

		@@ -1,4 +1,5 @@
		import { CalculatedColumn, ColumnMetrics } from '../common/types';
		import { isFrozen } from './columnUtils';

Refactor header components #1837

Refactor header components #1837

Conversation

amanmahajan7 commented Dec 5, 2019 • edited Loading

rozeskjm commented Dec 12, 2019

amanmahajan7 left a comment

Choose a reason for hiding this comment

amanmahajan7 Dec 12, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

amanmahajan7 Dec 12, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

amanmahajan7 Dec 12, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nstepien left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nstepien commented Dec 14, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nstepien commented Dec 14, 2019

amanmahajan7 commented Dec 5, 2019 •

edited

Loading

amanmahajan7 Dec 12, 2019 •

edited

Loading

amanmahajan7 Dec 12, 2019 •

edited

Loading

amanmahajan7 Dec 12, 2019 •

edited

Loading

nstepien commented Dec 14, 2019 •

edited

Loading