From 9f84db6063ffe282f9b5c1da65e511d922477cd5 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Mon, 12 Oct 2020 18:01:58 +0200 Subject: [PATCH] damien's feedback --- docs/next.config.js | 2 +- packages/grid/_modules_/grid/GridComponent.tsx | 5 +++-- .../grid/components/column-header-item.tsx | 7 +++---- .../grid/components/column-header-separator.tsx | 15 +++------------ .../_modules_/grid/components/column-headers.tsx | 12 ++++++------ .../grid/hooks/features/useColumnResize.tsx | 13 +++++++++++-- 6 files changed, 27 insertions(+), 27 deletions(-) diff --git a/docs/next.config.js b/docs/next.config.js index 3a0ca09d9d549..c4118c0676851 100644 --- a/docs/next.config.js +++ b/docs/next.config.js @@ -17,7 +17,7 @@ const workspaceRoot = path.join(__dirname, '../'); * concurrent - ReactDOM.createRoot(Element).render() * @type {ReactRenderMode | 'legacy-strict'} */ -const reactMode = 'legacy-strict'; +const reactMode = 'legacy'; // eslint-disable-next-line no-console console.log(`Using React '${reactMode}' mode.`); diff --git a/packages/grid/_modules_/grid/GridComponent.tsx b/packages/grid/_modules_/grid/GridComponent.tsx index 7575c838940e0..7a16910569918 100644 --- a/packages/grid/_modules_/grid/GridComponent.tsx +++ b/packages/grid/_modules_/grid/GridComponent.tsx @@ -92,7 +92,7 @@ export const GridComponent = React.forwardRef { @@ -220,7 +220,8 @@ export const GridComponent = React.forwardRef diff --git a/packages/grid/_modules_/grid/components/column-header-item.tsx b/packages/grid/_modules_/grid/components/column-header-item.tsx index 441f2d9696c8b..5649ee383206f 100644 --- a/packages/grid/_modules_/grid/components/column-header-item.tsx +++ b/packages/grid/_modules_/grid/components/column-header-item.tsx @@ -11,14 +11,14 @@ import { OptionsContext } from './options-context'; interface ColumnHeaderItemProps { column: ColDef; colIndex: number; - onResizeColumn: any; + separatorProps: React.HTMLAttributes; } const headerAlignPropToCss = { center: 'MuiDataGrid-colCellCenter', right: 'MuiDataGrid-colCellRight', }; export const ColumnHeaderItem = React.memo( - ({ column, colIndex, onResizeColumn }: ColumnHeaderItemProps) => { + ({ column, colIndex, separatorProps }: ColumnHeaderItemProps) => { const api = React.useContext(ApiContext); const { headerHeight, showColumnRightBorder, disableColumnResize } = React.useContext( OptionsContext, @@ -91,8 +91,7 @@ export const ColumnHeaderItem = React.memo( )} ); diff --git a/packages/grid/_modules_/grid/components/column-header-separator.tsx b/packages/grid/_modules_/grid/components/column-header-separator.tsx index 020b3b8b097d7..d07b3c904b9ac 100644 --- a/packages/grid/_modules_/grid/components/column-header-separator.tsx +++ b/packages/grid/_modules_/grid/components/column-header-separator.tsx @@ -1,29 +1,20 @@ import * as React from 'react'; -import { ColDef } from '../models'; import { useIcons } from '../hooks/utils/useIcons'; import { classnames } from '../utils'; import { OptionsContext } from './options-context'; -export interface ColumnHeaderSeparatorProps { - column: ColDef; - onResizeColumn?: any; +export interface ColumnHeaderSeparatorProps extends React.HTMLAttributes { resizable: boolean; } export const ColumnHeaderSeparator = React.memo(function ColumnHeaderSeparator( props: ColumnHeaderSeparatorProps, ) { - const { column, onResizeColumn, resizable } = props; + const { resizable, ...other } = props; const icons = useIcons(); const { showColumnRightBorder, headerHeight } = React.useContext(OptionsContext); const Icon = icons!.columnResize!; - const handleMouseDown = resizable - ? (event) => { - onResizeColumn(event, column); - } - : undefined; - return ( // eslint-disable-next-line jsx-a11y/no-static-element-interactions
diff --git a/packages/grid/_modules_/grid/components/column-headers.tsx b/packages/grid/_modules_/grid/components/column-headers.tsx index d4b16cda3e4a9..df464f093bae9 100644 --- a/packages/grid/_modules_/grid/components/column-headers.tsx +++ b/packages/grid/_modules_/grid/components/column-headers.tsx @@ -6,15 +6,15 @@ import { LeftEmptyCell, RightEmptyCell } from './cell'; export interface ColumnHeadersItemCollectionProps { columns: Columns; - onResizeColumn: any; + separatorProps: React.HTMLAttributes; } export const ColumnHeaderItemCollection = React.memo(function ColumnHeaderItemCollection( props: ColumnHeadersItemCollectionProps, ) { - const { onResizeColumn, columns } = props; + const { separatorProps, columns } = props; const items = columns.map((col, idx) => ( - + )); return {items}; @@ -23,13 +23,13 @@ export const ColumnHeaderItemCollection = React.memo(function ColumnHeaderItemCo export interface ColumnsHeaderProps { columns: Columns; hasScrollX: boolean; - onResizeColumn: any; + separatorProps: React.HTMLAttributes; renderCtx: Partial | null; } export const ColumnsHeader = React.memo( React.forwardRef( - ({ columns, hasScrollX, onResizeColumn, renderCtx }, columnsHeaderRef) => { + ({ columns, hasScrollX, separatorProps, renderCtx }, columnsHeaderRef) => { const wrapperCssClasses = `MuiDataGrid-colCellWrapper ${hasScrollX ? 'scroll' : ''}`; const api = React.useContext(ApiContext); @@ -68,7 +68,7 @@ export const ColumnsHeader = React.memo( style={{ minWidth: renderCtx?.totalSizes?.width }} > - + ); diff --git a/packages/grid/_modules_/grid/hooks/features/useColumnResize.tsx b/packages/grid/_modules_/grid/hooks/features/useColumnResize.tsx index 1d3eed8441d5f..c2be7d8298a14 100644 --- a/packages/grid/_modules_/grid/hooks/features/useColumnResize.tsx +++ b/packages/grid/_modules_/grid/hooks/features/useColumnResize.tsx @@ -67,7 +67,7 @@ export const useColumnResize = (columnsRef: React.RefObject, api ); }); - const handleMouseDown = useEventCallback((event, colDef: ColDef) => { + const handleMouseDown = useEventCallback((event: React.MouseEvent) => { // Only handle left clicks if (event.button !== 0) { return; @@ -76,6 +76,10 @@ export const useColumnResize = (columnsRef: React.RefObject, api // Avoid text selection event.preventDefault(); + colElementRef.current = event.currentTarget.closest('.MuiDataGrid-colCell') as HTMLDivElement; + const field = colElementRef.current.getAttribute('data-field') as string; + const colDef = apiRef.current.getColumnFromField(field); + logger.debug(`Start Resize on col ${colDef.field}`); apiRef.current.publishEvent(COL_RESIZE_START); @@ -117,5 +121,10 @@ export const useColumnResize = (columnsRef: React.RefObject, api }; }, [stopListening]); - return handleMouseDown; + return React.useMemo( + () => ({ + onMouseDown: handleMouseDown, + }), + [handleMouseDown], + ); };