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

[DataGrid] Refactor useGridColumnReorder #1299

Merged
merged 4 commits into from
Mar 31, 2021
Merged

[DataGrid] Refactor useGridColumnReorder #1299

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
edbd9ea
[DataGrid] Refactor useGridColumnReorder
m4theushw Mar 25, 2021
c93b6e6
Add onColumnOrderChange option handler
m4theushw Mar 31, 2021
438916a
Remove useGridApiOptionHandler
m4theushw Mar 31, 2021
efa6a5f
Use strings instead of constants in the docs
m4theushw Mar 31, 2021
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
13 changes: 7 additions & 6 deletions docs/pages/api-docs/data-grid.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,12 +49,13 @@ import { DataGrid } from '@material-ui/data-grid';
| <span class="prop-name">onCellEnter</span> | <span class="prop-type">(param: GridCellParams, event: React.MouseEvent) => void</span> | | Callback fired when a mouse enter event comes from a cell element. |
| <span class="prop-name">onCellLeave</span> | <span class="prop-type">(param: GridCellParams, event: React.MouseEvent) => void</span> | | Callback fired when a mouse leave event comes from a cell element. |
| <span class="prop-name">onCellModeChange</span> | <span class="prop-type">(params: GridCellModeChangeParams) => void | | Callback fired when the cell mode changed. |
| <span class="prop-name">onColumnHeaderClick</span> | <span class="prop-type">(param: GridColParams, event: React.MouseEvent) => void</span> | | Callback fired when a click event comes from a column header element. |
| <span class="prop-name">onColumnHeaderDoubleClick</span> | <span class="prop-type">(param: GridColParams, event: React.MouseEvent) => void</span> | | Callback fired when a double click event comes from a column header element. |
| <span class="prop-name">onColumnHeaderOver</span> | <span class="prop-type">(param: GridColParams, event: React.MouseEvent) => void</span> | | Callback fired when a mouseover event comes from a column header element. |
| <span class="prop-name">onColumnHeaderOut</span> | <span class="prop-type">(param: GridColParams, event: React.MouseEvent) => void</span> | | Callback fired when a mouseout event comes from a column header element. |
| <span class="prop-name">onColumnHeaderEnter</span> | <span class="prop-type">(param: GridColParams, event: React.MouseEvent) => void</span> | | Callback fired when a mouse enter event comes from a column header element. |
| <span class="prop-name">onColumnHeaderLeave</span> | <span class="prop-type">(param: GridColParams, event: React.MouseEvent) => void</span> | | Callback fired when a mouse leave event comes from a column header element. |
| <span class="prop-name">onColumnHeaderClick</span> | <span class="prop-type">(param: GridColumnHeaderParams, event: React.MouseEvent) => void</span> | | Callback fired when a click event comes from a column header element. |
| <span class="prop-name">onColumnHeaderDoubleClick</span> | <span class="prop-type">(param: GridColumnHeaderParams, event: React.MouseEvent) => void</span> | | Callback fired when a double click event comes from a column header element. |
| <span class="prop-name">onColumnHeaderOver</span> | <span class="prop-type">(param: GridColumnHeaderParams, event: React.MouseEvent) => void</span> | | Callback fired when a mouseover event comes from a column header element. |
| <span class="prop-name">onColumnHeaderOut</span> | <span class="prop-type">(param: GridColumnHeaderParams, event: React.MouseEvent) => void</span> | | Callback fired when a mouseout event comes from a column header element. |
| <span class="prop-name">onColumnHeaderEnter</span> | <span class="prop-type">(param: GridColumnHeaderParams, event: React.MouseEvent) => void</span> | | Callback fired when a mouse enter event comes from a column header element. |
| <span class="prop-name">onColumnHeaderLeave</span> | <span class="prop-type">(param: GridColumnHeaderParams, event: React.MouseEvent) => void</span> | | Callback fired when a mouse leave event comes from a column header element. |
| <span class="prop-name">onColumnOrderChange</span> | <span class="prop-type">(param: GridColumnOrderChangeParams, event: React.MouseEvent) => void</span> | | Callback fired when a column is reordered. |
| <span class="prop-name">onError</span> | <span class="prop-type">(args: any) => void</span> | | Callback fired when an exception is thrown in the grid, or when the `showError` API method is called. |
| <span class="prop-name">onEditCellChange</span> | <span class="prop-type">(params: GridEditCellParams) => void</span> | | Callback fired when the edit cell value changed. |
| <span class="prop-name">onEditCellChangeCommitted</span> | <span class="prop-type">(params: GridEditCellParams) => void</span> | | Callback fired when the cell changes are committed. |
Expand Down
13 changes: 7 additions & 6 deletions docs/pages/api-docs/x-grid.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,12 +52,13 @@ import { XGrid } from '@material-ui/x-grid';
| <span class="prop-name">onCellEnter</span> | <span class="prop-type">(param: GridCellParams, event: React.MouseEvent) => void</span> | | Callback fired when a mouse enter event comes from a cell element. |
| <span class="prop-name">onCellLeave</span> | <span class="prop-type">(param: GridCellParams, event: React.MouseEvent) => void</span> | | Callback fired when a mouse leave event comes from a cell element. |
| <span class="prop-name">onCellModeChange</span> | <span class="prop-type">(params: GridCellModeChangeParams) => void | | Callback fired when the cell mode changed. |
| <span class="prop-name">onColumnHeaderClick</span> | <span class="prop-type">(param: GridColParams, event: React.MouseEvent) => void</span> | | Callback fired when a click event comes from a column header element. |
| <span class="prop-name">onColumnHeaderDoubleClick</span> | <span class="prop-type">(param: GridColParams, event: React.MouseEvent) => void</span> | | Callback fired when a double click event comes from a column header element. |
| <span class="prop-name">onColumnHeaderOver</span> | <span class="prop-type">(param: GridColParams, event: React.MouseEvent) => void</span> | | Callback fired when a mouseover event comes from a column header element. |
| <span class="prop-name">onColumnHeaderOut</span> | <span class="prop-type">(param: GridColParams, event: React.MouseEvent) => void</span> | | Callback fired when a mouseout event comes from a column header element. |
| <span class="prop-name">onColumnHeaderEnter</span> | <span class="prop-type">(param: GridColParams, event: React.MouseEvent) => void</span> | | Callback fired when a mouse enter event comes from a column header element. |
| <span class="prop-name">onColumnHeaderLeave</span> | <span class="prop-type">(param: GridColParams, event: React.MouseEvent) => void</span> | | Callback fired when a mouse leave event comes from a column header element. |
| <span class="prop-name">onColumnHeaderClick</span> | <span class="prop-type">(param: GridColumnHeaderParams, event: React.MouseEvent) => void</span> | | Callback fired when a click event comes from a column header element. |
| <span class="prop-name">onColumnHeaderDoubleClick</span> | <span class="prop-type">(param: GridColumnHeaderParams, event: React.MouseEvent) => void</span> | | Callback fired when a double click event comes from a column header element. |
| <span class="prop-name">onColumnHeaderOver</span> | <span class="prop-type">(param: GridColumnHeaderParams, event: React.MouseEvent) => void</span> | | Callback fired when a mouseover event comes from a column header element. |
| <span class="prop-name">onColumnHeaderOut</span> | <span class="prop-type">(param: GridColumnHeaderParams, event: React.MouseEvent) => void</span> | | Callback fired when a mouseout event comes from a column header element. |
| <span class="prop-name">onColumnHeaderEnter</span> | <span class="prop-type">(param: GridColumnHeaderParams, event: React.MouseEvent) => void</span> | | Callback fired when a mouse enter event comes from a column header element. |
| <span class="prop-name">onColumnHeaderLeave</span> | <span class="prop-type">(param: GridColumnHeaderParams, event: React.MouseEvent) => void</span> | | Callback fired when a mouse leave event comes from a column header element. |
| <span class="prop-name">onColumnOrderChange</span> | <span class="prop-type">(param: GridColumnOrderChangeParams, event: React.MouseEvent) => void</span> | | Callback fired when a column is reordered. |
| <span class="prop-name">onError</span> | <span class="prop-type">(args: any) => void</span> | | Callback fired when an exception is thrown in the grid, or when the `showError` API method is called. |
| <span class="prop-name">onEditCellChange</span> | <span class="prop-type">(params: GridEditCellParams) => void</span> | | Callback fired when the edit cell value changed. |
| <span class="prop-name">onEditCellChangeCommitted</span> | <span class="prop-type">(params: GridEditCellParams) => void</span> | | Callback fired when the cell changes are committed. |
Expand Down
10 changes: 5 additions & 5 deletions docs/src/pages/components/data-grid/columns/columns.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,11 +150,11 @@ To disable column reordering, set the prop `disableColumnReorder={true}`.

In addition, column reordering emits the following events that can be imported:

- `COL_REORDER_START`: emitted when dragging of a header cell starts.
- `COL_REORDER_DRAG_ENTER`: emitted when the cursor enters another header cell while dragging.
- `COL_REORDER_DRAG_OVER`: emitted when dragging a header cell over another header cell.
- `COL_REORDER_DRAG_OVER_HEADER`: emitted when dragging a header cell over the `ColumnsHeader` component.
- `COL_REORDER_STOP`: emitted when dragging of a header cell stops.
- `columnReordering:dragStart`: emitted when dragging of a header cell starts.
- `columnReordering:dragEnter`: emitted when the cursor enters another header cell while dragging.
- `columnReordering:dragOver`: emitted when dragging a header cell over another header cell.
- `columnReordering:dragOverHeader`: emitted when dragging a header cell over the `ColumnsHeader` component.
- `columnReordering:dragEnd`: emitted when dragging of a header cell stops.

{{"demo": "pages/components/data-grid/columns/ColumnOrderingGrid.js", "disableAd": true, "bg": "inline"}}

Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/data-grid/rendering/rendering.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ const columns: GridColDef[] = [
field: 'date',
width: 150,
type: 'date',
renderHeader: (params: GridColParams) => (
renderHeader: (params: GridColumnHeaderParams) => (
<strong>
{'Birthday '}
<span role="img" aria-label="enjoy">
Expand Down
4 changes: 2 additions & 2 deletions packages/grid/_modules_/grid/components/GridCheckboxRenderer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@ import { useGridSelector } from '../hooks/features/core/useGridSelector';
import { visibleSortedGridRowsSelector } from '../hooks/features/filter/gridFilterSelector';
import { gridRowCountSelector } from '../hooks/features/rows/gridRowsSelector';
import { selectedGridRowsCountSelector } from '../hooks/features/selection/gridSelectionSelector';
import { GridColParams } from '../models/params/gridColParams';
import { GridColumnHeaderParams } from '../models/params/gridColumnHeaderParams';
import { GridCellParams } from '../models/params/gridCellParams';
import { GridApiContext } from './GridApiContext';

export const GridHeaderCheckbox: React.FC<GridColParams> = () => {
export const GridHeaderCheckbox: React.FC<GridColumnHeaderParams> = () => {
Copy link
Member

Choose a reason for hiding this comment

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

A note for the future self (outside of the scope of this PR) and Matheus, React.FC is wrong, the component has no children prop

Copy link
Member Author

Choose a reason for hiding this comment

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

True, another PR to update all components that don't use children would be good.

Copy link
Member

@oliviertassinari oliviertassinari Mar 31, 2021 •
edited
Loading

Choose a reason for hiding this comment

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

@m4theushw Do you want to open a new issue for keeping track of it? I'm not saying it's a priority but, that it would be great to handle it, at some point. Some of these components are public, hence hurt the developers using them.

Copy link
Member Author

Choose a reason for hiding this comment

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

#1325

const apiRef = React.useContext(GridApiContext);
const visibleRows = useGridSelector(apiRef, visibleSortedGridRowsSelector);

Expand Down
8 changes: 4 additions & 4 deletions packages/grid/_modules_/grid/components/GridScrollArea.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from 'react';
import {
GRID_COL_REORDER_START,
GRID_COL_REORDER_STOP,
GRID_COLUMN_REORDER_START,
GRID_COLUMN_REORDER_DRAG_END,
GRID_ROWS_SCROLL,
} from '../constants/eventsConstants';
import { useGridApiEventHandler } from '../hooks/root/useGridApiEventHandler';
Expand Down Expand Up @@ -69,8 +69,8 @@ export const GridScrollArea = React.memo(function GridScrollArea(props: ScrollAr
}, []);

useGridApiEventHandler(api as GridApiRef, GRID_ROWS_SCROLL, handleScrolling);
useGridApiEventHandler(api as GridApiRef, GRID_COL_REORDER_START, toggleDragging);
useGridApiEventHandler(api as GridApiRef, GRID_COL_REORDER_STOP, toggleDragging);
useGridApiEventHandler(api as GridApiRef, GRID_COLUMN_REORDER_START, toggleDragging);
useGridApiEventHandler(api as GridApiRef, GRID_COLUMN_REORDER_DRAG_END, toggleDragging);

return dragging ? (
<div
Expand Down
42 changes: 19 additions & 23 deletions packages/grid/_modules_/grid/components/columnHeaders/GridColumnHeaderItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@ import {
GRID_COLUMN_HEADER_LEAVE,
GRID_COLUMN_HEADER_OUT,
GRID_COLUMN_HEADER_OVER,
GRID_COLUMN_REORDER_DRAG_ENTER,
GRID_COLUMN_REORDER_DRAG_OVER,
GRID_COLUMN_REORDER_START,
GRID_COLUMN_REORDER_DRAG_END,
} from '../../constants/eventsConstants';
import { GridColDef, GRID_NUMBER_COLUMN_TYPE } from '../../models/colDef/index';
import { GridOptions } from '../../models/gridOptions';
Expand Down Expand Up @@ -64,22 +68,6 @@ export const GridColumnHeaderItem = ({
});
}

const onDragStart = React.useCallback(
(event) => apiRef!.current.onColItemDragStart(column, event.currentTarget),
[apiRef, column],
);
const onDragEnter = React.useCallback((event) => apiRef!.current.onColItemDragEnter(event), [
apiRef,
]);
const onDragOver = React.useCallback(
(event) =>
apiRef!.current.onColItemDragOver(column, {
x: event.clientX,
y: event.clientY,
}),
[apiRef, column],
);

const publish = React.useCallback(
(eventName: string) => (event: React.MouseEvent) =>
apiRef!.current.publishEvent(
Copy link
Member

Choose a reason for hiding this comment

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

You need to publish the event with params. For cell, we have GridCellParams, could you add GridColumnHeaderParams please

Expand All @@ -102,6 +90,16 @@ export const GridColumnHeaderItem = ({
[publish],
);

const draggableEventHandlers = React.useMemo(
() => ({
onDragStart: publish(GRID_COLUMN_REORDER_START),
onDragEnter: publish(GRID_COLUMN_REORDER_DRAG_ENTER),
onDragOver: publish(GRID_COLUMN_REORDER_DRAG_OVER),
onDragEnd: publish(GRID_COLUMN_REORDER_DRAG_END),
}),
[publish],
);

const cssClasses = classnames(
GRID_HEADER_CELL_CSS_CLASS,
column.headerClassName,
Expand All @@ -116,12 +114,6 @@ export const GridColumnHeaderItem = ({
},
);

const dragConfig = {
draggable: !disableColumnReorder,
onDragStart,
onDragEnter,
onDragOver,
};
const width = column.width!;

let ariaSort: any;
Expand Down Expand Up @@ -159,7 +151,11 @@ export const GridColumnHeaderItem = ({
{...ariaSort}
{...mouseEventsHandlers}
>
<div className="MuiDataGrid-colCell-draggable" {...dragConfig}>
<div
className="MuiDataGrid-colCell-draggable"
draggable={!disableColumnReorder}
{...draggableEventHandlers}
>
{!disableColumnMenu && isColumnNumeric && !column.disableColumnMenu && columnMenuIconButton}
<div className="MuiDataGrid-colCellTitleContainer">
{isColumnNumeric && columnTitleIconButtons}
Expand Down
10 changes: 9 additions & 1 deletion packages/grid/_modules_/grid/components/columnHeaders/GridColumnHeaders.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,9 @@ import { GridEmptyCell } from '../cell/GridEmptyCell';
import { GridScrollArea } from '../GridScrollArea';
import { GridColumnHeadersItemCollection } from './GridColumnHeadersItemCollection';
import { gridDensityHeaderHeightSelector } from '../../hooks/features/density/densitySelector';
import { gridColumnReorderDragColSelector } from '../../hooks/features/columnReorder/columnReorderSelector';
import { gridContainerSizesSelector } from '../../hooks/root/gridContainerSizesSelector';
import { GRID_COLUMN_REORDER_DRAG_OVER_HEADER } from '../../constants/eventsConstants';

export const gridScrollbarStateSelector = (state: GridState) => state.scrollBar;

Expand All @@ -24,6 +26,7 @@ export const GridColumnsHeader = React.forwardRef<HTMLDivElement, {}>(function G
const headerHeight = useGridSelector(apiRef, gridDensityHeaderHeightSelector);
const renderCtx = useGridSelector(apiRef, renderStateSelector).renderContext;
const { hasScrollX } = useGridSelector(apiRef, gridScrollbarStateSelector);
const dragCol = useGridSelector(apiRef, gridColumnReorderDragColSelector);
const wrapperCssClasses = `MuiDataGrid-colCellWrapper ${hasScrollX ? 'scroll' : ''}`;

const renderedCols = React.useMemo(() => {
Expand All @@ -35,7 +38,12 @@ export const GridColumnsHeader = React.forwardRef<HTMLDivElement, {}>(function G

const handleDragOver =
!disableColumnReorder && apiRef
? (event) => apiRef.current.onColHeaderDragOver(event, ref as React.RefObject<HTMLElement>)
? (event) =>
apiRef.current.publishEvent(
GRID_COLUMN_REORDER_DRAG_OVER_HEADER,
apiRef.current.getColumnHeaderParams(dragCol),
event,
)
: undefined;

return (
Expand Down
12 changes: 7 additions & 5 deletions packages/grid/_modules_/grid/constants/eventsConstants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,11 +57,13 @@ export const GRID_ROWS_SCROLL_END = 'scroll:rowEnd';
export const GRID_COL_RESIZE_START = 'colResizing:start';
export const GRID_COL_RESIZE_STOP = 'colResizing:stop';

export const GRID_COL_REORDER_START = 'colReordering:dragStart';
export const GRID_COL_REORDER_DRAG_OVER_HEADER = 'colReordering:dragOverHeader';
export const GRID_COL_REORDER_DRAG_OVER = 'colReordering:dragOver';
export const GRID_COL_REORDER_DRAG_ENTER = 'colReordering:dragEnter';
export const GRID_COL_REORDER_STOP = 'colReordering:dragStop';
export const GRID_COLUMN_ORDER_CHANGE = 'columnOrderChange';

export const GRID_COLUMN_REORDER_START = 'columnReordering:dragStart';
export const GRID_COLUMN_REORDER_DRAG_OVER_HEADER = 'columnReordering:dragOverHeader';
export const GRID_COLUMN_REORDER_DRAG_OVER = 'columnReordering:dragOver';
export const GRID_COLUMN_REORDER_DRAG_ENTER = 'columnReordering:dragEnter';
export const GRID_COLUMN_REORDER_DRAG_END = 'columnReordering:dragEnd';

export const GRID_ROWS_UPDATED = 'rowsUpdated';
export const GRID_ROWS_SET = 'rowsSet';
Expand Down
Loading