damien's feedback

mui · Oct 12, 2020 · 9f84db6 · 9f84db6
1 parent 11e65c2
commit 9f84db6
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 27 deletions.
diff --git a/docs/next.config.js b/docs/next.config.js
@@ -17,7 +17,7 @@ const workspaceRoot = path.join(__dirname, '../');
  * concurrent - ReactDOM.createRoot(Element).render(<App />)
  * @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
@@ -92,7 +92,7 @@ export const GridComponent = React.forwardRef<HTMLDivElement, GridComponentProps
     apiRef,
   );
 
-  const onResizeColumn = useColumnResize(columnsHeaderRef, apiRef);
+  const separatorProps = useColumnResize(columnsHeaderRef, apiRef);
   const paginationProps = usePagination(internalRows, internalColumns, internalOptions, apiRef);
 
   React.useEffect(() => {
@@ -220,7 +220,8 @@ export const GridComponent = React.forwardRef<HTMLDivElement, GridComponentProps
                       ref={columnsHeaderRef}
                       columns={internalColumns.visible || []}
                       hasScrollX={!!renderCtx?.hasScrollX}
-                      onResizeColumn={onResizeColumn}
+                      // @ts-expect-error fixed in v5
+                      separatorProps={separatorProps}
                       renderCtx={renderCtx}
                     />
                   </GridColumnsContainer>

diff --git 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<HTMLDivElement>;
 }
 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(
         )}
         <ColumnHeaderSeparator
           resizable={disableColumnResize ? false : Boolean(column.resizable)}
-          onResizeColumn={onResizeColumn}
-          column={column}
+          {...separatorProps}
         />
       </div>
     );

diff --git a/packages/grid/_modules_/grid/components/column-header-separator.tsx b/packages/grid/_modules_/grid/components/column-header-separator.tsx
@@ -1,37 +1,28 @@
 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<HTMLDivElement> {
   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
     <div
       className={classnames('MuiDataGrid-columnSeparator', {
         'MuiDataGrid-resizable': resizable,
       })}
       style={{ minHeight: headerHeight, opacity: showColumnRightBorder ? 0 : 1 }}
-      onMouseDown={handleMouseDown}
+      {...other}
     >
       <Icon className="MuiDataGrid-iconSeparator" />
     </div>

diff --git 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<HTMLDivElement>;
 }
 
 export const ColumnHeaderItemCollection = React.memo(function ColumnHeaderItemCollection(
   props: ColumnHeadersItemCollectionProps,
 ) {
-  const { onResizeColumn, columns } = props;
+  const { separatorProps, columns } = props;
   const items = columns.map((col, idx) => (
-    <ColumnHeaderItem key={col.field} column={col} colIndex={idx} onResizeColumn={onResizeColumn} />
+    <ColumnHeaderItem key={col.field} column={col} colIndex={idx} separatorProps={separatorProps} />
   ));
 
   return <React.Fragment>{items}</React.Fragment>;
@@ -23,13 +23,13 @@ export const ColumnHeaderItemCollection = React.memo(function ColumnHeaderItemCo
 export interface ColumnsHeaderProps {
   columns: Columns;
   hasScrollX: boolean;
-  onResizeColumn: any;
+  separatorProps: React.HTMLAttributes<HTMLDivElement>;
   renderCtx: Partial<RenderContextProps> | null;
 }
 
 export const ColumnsHeader = React.memo(
   React.forwardRef<HTMLDivElement, ColumnsHeaderProps>(
-    ({ 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 }}
         >
           <LeftEmptyCell key="left-empty" width={renderCtx?.leftEmptyWidth} />
-          <ColumnHeaderItemCollection columns={renderedCols} onResizeColumn={onResizeColumn} />
+          <ColumnHeaderItemCollection columns={renderedCols} separatorProps={separatorProps} />
           <RightEmptyCell key="right-empty" width={renderCtx?.rightEmptyWidth} />
         </div>
       );

diff --git 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<HTMLDivElement>, api
     );
   });
 
-  const handleMouseDown = useEventCallback((event, colDef: ColDef) => {
+  const handleMouseDown = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {
     // Only handle left clicks
     if (event.button !== 0) {
       return;
@@ -76,6 +76,10 @@ export const useColumnResize = (columnsRef: React.RefObject<HTMLDivElement>, 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<HTMLDivElement>, api
     };
   }, [stopListening]);
 
-  return handleMouseDown;
+  return React.useMemo(
+    () => ({
+      onMouseDown: handleMouseDown,
+    }),
+    [handleMouseDown],
+  );
 };