From e78c2fdc8bf72a9d4b9c4036637c997a400cecd0 Mon Sep 17 00:00:00 2001 From: damien Date: Thu, 9 Jul 2020 17:54:17 +0200 Subject: [PATCH 1/5] Fix resize issue with padding --- .../src/hooks/features/useColumnResize.tsx | 19 ++++++++++++------- .../src/stories/grid-style.stories.tsx | 11 +++++++++++ 2 files changed, 23 insertions(+), 7 deletions(-) diff --git a/packages/grid/x-grid-modules/src/hooks/features/useColumnResize.tsx b/packages/grid/x-grid-modules/src/hooks/features/useColumnResize.tsx index 234a55be402ef..3ca097cab7e92 100644 --- a/packages/grid/x-grid-modules/src/hooks/features/useColumnResize.tsx +++ b/packages/grid/x-grid-modules/src/hooks/features/useColumnResize.tsx @@ -6,7 +6,7 @@ import { findCellElementsFromCol, findDataContainerFromCurrent } from '../../uti import { useStateRef } from '../utils/useStateRef'; import { GridApiRef } from '../../models'; -const MIN_COL_WIDTH = 30; +const MIN_COL_WIDTH = 50; const MOUSE_LEFT_TIMEOUT = 1000; // TODO improve experience for last column @@ -72,8 +72,6 @@ export const useColumnResize = ( const stopResize = useCallback((): void => { isResizing.current = false; - - // setColResizing(undefined); currentColPosition.current = undefined; currentColElem.current = undefined; currentColCellsElems.current = undefined; @@ -130,6 +128,8 @@ export const useColumnResize = ( } }, []); const handleMouseLeave = useCallback((): void => { + console.log(` LEFT = resizingMouseMove: ${JSON.stringify(resizingMouseMove.current) } `); + if ( isLastColumn.current && resizingMouseMove.current && @@ -140,21 +140,26 @@ export const useColumnResize = ( logger.debug(`Mouse left and same row, so extending last column width of 100`); // we are resizing the last column outside the window - updateWidth(currentColDefRef.current.width! + 100); + updateWidth(currentColDefRef.current.width! + 10); mouseLeftTimeout.current = setTimeout(() => { stopResize(); }, MOUSE_LEFT_TIMEOUT); } else if (isResizing) { - stopResize(); + mouseLeftTimeout.current = setTimeout(() => { + stopResize(); + }, MOUSE_LEFT_TIMEOUT); } }, [headerHeight, logger, stopResize, updateWidth]); const handleMouseMove = useCallback( (ev: any): void => { if (isResizing.current) { - resizingMouseMove.current = { x: ev.clientX, y: ev.clientY }; + const rect = ev.currentTarget.getBoundingClientRect(); + resizingMouseMove.current = { x: ev.clientX - rect.left, y: ev.clientY - rect.top }; + + const offsetLeft = !isLastColumn.current ? rect.left: scrollOffset.current * -1; - let newWidth = ev.clientX + scrollOffset.current - currentColPosition.current!; + let newWidth = ev.clientX - offsetLeft - currentColPosition.current!; newWidth = newWidth > MIN_COL_WIDTH ? newWidth : MIN_COL_WIDTH; updateWidth(newWidth); } diff --git a/packages/storybook/src/stories/grid-style.stories.tsx b/packages/storybook/src/stories/grid-style.stories.tsx index 2f8327b71a0ca..f51f34dbb3992 100644 --- a/packages/storybook/src/stories/grid-style.stories.tsx +++ b/packages/storybook/src/stories/grid-style.stories.tsx @@ -180,3 +180,14 @@ export const ColumnCellRenderer = () => { ); }; +export const ColumnCellRendererWithPadding = () => { + const rows = useMemo(() => getRows(), []); + const cols = useMemo(() => getColumns(), []); + cols[5].cellRenderer = params => ; + + return ( +
+ +
+ ); +}; \ No newline at end of file From 2e67ec1b88577e31f38ea67da0034835d2b22597 Mon Sep 17 00:00:00 2001 From: damien tassone Date: Thu, 9 Jul 2020 18:02:45 +0200 Subject: [PATCH 2/5] Update packages/grid/x-grid-modules/src/hooks/features/useColumnResize.tsx Co-authored-by: Olivier Tassinari --- .../grid/x-grid-modules/src/hooks/features/useColumnResize.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/grid/x-grid-modules/src/hooks/features/useColumnResize.tsx b/packages/grid/x-grid-modules/src/hooks/features/useColumnResize.tsx index 3ca097cab7e92..5435a6fe319fe 100644 --- a/packages/grid/x-grid-modules/src/hooks/features/useColumnResize.tsx +++ b/packages/grid/x-grid-modules/src/hooks/features/useColumnResize.tsx @@ -152,7 +152,7 @@ export const useColumnResize = ( }, [headerHeight, logger, stopResize, updateWidth]); const handleMouseMove = useCallback( - (ev: any): void => { + (event: React.MouseEvent): void => { if (isResizing.current) { const rect = ev.currentTarget.getBoundingClientRect(); resizingMouseMove.current = { x: ev.clientX - rect.left, y: ev.clientY - rect.top }; From 46bc98e7766122ed02aa1d133faaa5f0e48c9f22 Mon Sep 17 00:00:00 2001 From: damien tassone Date: Thu, 9 Jul 2020 18:07:10 +0200 Subject: [PATCH 3/5] Update packages/storybook/src/stories/grid-style.stories.tsx Co-authored-by: Olivier Tassinari --- packages/storybook/src/stories/grid-style.stories.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/storybook/src/stories/grid-style.stories.tsx b/packages/storybook/src/stories/grid-style.stories.tsx index f51f34dbb3992..9f0288e5d2b30 100644 --- a/packages/storybook/src/stories/grid-style.stories.tsx +++ b/packages/storybook/src/stories/grid-style.stories.tsx @@ -186,8 +186,8 @@ export const ColumnCellRendererWithPadding = () => { cols[5].cellRenderer = params => ; return ( -
+
); -}; \ No newline at end of file +}; From 22b09f0248090547d2b3be1ce7f85ca02f64ca1a Mon Sep 17 00:00:00 2001 From: damien Date: Thu, 9 Jul 2020 18:08:13 +0200 Subject: [PATCH 4/5] prettier fix --- .../x-grid-modules/src/hooks/features/useColumnResize.tsx | 4 ++-- packages/storybook/src/stories/grid-style.stories.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/grid/x-grid-modules/src/hooks/features/useColumnResize.tsx b/packages/grid/x-grid-modules/src/hooks/features/useColumnResize.tsx index 3ca097cab7e92..c0a4bd29ede48 100644 --- a/packages/grid/x-grid-modules/src/hooks/features/useColumnResize.tsx +++ b/packages/grid/x-grid-modules/src/hooks/features/useColumnResize.tsx @@ -128,7 +128,7 @@ export const useColumnResize = ( } }, []); const handleMouseLeave = useCallback((): void => { - console.log(` LEFT = resizingMouseMove: ${JSON.stringify(resizingMouseMove.current) } `); + console.log(` LEFT = resizingMouseMove: ${JSON.stringify(resizingMouseMove.current)} `); if ( isLastColumn.current && @@ -157,7 +157,7 @@ export const useColumnResize = ( const rect = ev.currentTarget.getBoundingClientRect(); resizingMouseMove.current = { x: ev.clientX - rect.left, y: ev.clientY - rect.top }; - const offsetLeft = !isLastColumn.current ? rect.left: scrollOffset.current * -1; + const offsetLeft = !isLastColumn.current ? rect.left : scrollOffset.current * -1; let newWidth = ev.clientX - offsetLeft - currentColPosition.current!; newWidth = newWidth > MIN_COL_WIDTH ? newWidth : MIN_COL_WIDTH; diff --git a/packages/storybook/src/stories/grid-style.stories.tsx b/packages/storybook/src/stories/grid-style.stories.tsx index f51f34dbb3992..160e8faeae7d9 100644 --- a/packages/storybook/src/stories/grid-style.stories.tsx +++ b/packages/storybook/src/stories/grid-style.stories.tsx @@ -186,8 +186,8 @@ export const ColumnCellRendererWithPadding = () => { cols[5].cellRenderer = params => ; return ( -
+
); -}; \ No newline at end of file +}; From 88972bb3b86dc8ad202ba695afac99fc4ca44175 Mon Sep 17 00:00:00 2001 From: damien Date: Thu, 9 Jul 2020 18:35:20 +0200 Subject: [PATCH 5/5] fix suggestion issue --- .../src/hooks/features/useColumnResize.tsx | 55 +++++++++---------- 1 file changed, 27 insertions(+), 28 deletions(-) diff --git a/packages/grid/x-grid-modules/src/hooks/features/useColumnResize.tsx b/packages/grid/x-grid-modules/src/hooks/features/useColumnResize.tsx index bedeec3164906..515c8ca150425 100644 --- a/packages/grid/x-grid-modules/src/hooks/features/useColumnResize.tsx +++ b/packages/grid/x-grid-modules/src/hooks/features/useColumnResize.tsx @@ -1,4 +1,4 @@ -import { useCallback, useEffect, useRef } from 'react'; +import * as React from 'react'; import { ColDef } from '../../models/colDef'; import { ScrollParams, useLogger } from '../utils'; import { COL_RESIZE_START, COL_RESIZE_STOP, SCROLLING } from '../../constants/eventsConstants'; @@ -17,34 +17,34 @@ export const useColumnResize = ( ) => { const logger = useLogger('useColumnResize'); - const isResizing = useRef(false); - const isLastColumn = useRef(false); - const mouseLeftTimeout = useRef(); - const stopResizeEventTimeout = useRef(); + const isResizing = React.useRef(false); + const isLastColumn = React.useRef(false); + const mouseLeftTimeout = React.useRef(); + const stopResizeEventTimeout = React.useRef(); - const currentColDefRef = useRef(); - const currentColElem = useRef(); - const currentColPosition = useRef(); - const currentColPreviousWidth = useRef(); - const currentColCellsElems = useRef>(); + const currentColDefRef = React.useRef(); + const currentColElem = React.useRef(); + const currentColPosition = React.useRef(); + const currentColPreviousWidth = React.useRef(); + const currentColCellsElems = React.useRef>(); - const dataContainerElemRef = useRef(); - const dataContainerPreviousWidth = useRef(); - const scrollOffset = useRef(0); - const resizingMouseMove = useRef<{ x: number; y: number }>(); + const dataContainerElemRef = React.useRef(); + const dataContainerPreviousWidth = React.useRef(); + const scrollOffset = React.useRef(0); + const resizingMouseMove = React.useRef<{ x: number; y: number }>(); - const onScrollHandler = useCallback((params: ScrollParams) => { + const onScrollHandler = React.useCallback((params: ScrollParams) => { scrollOffset.current = params.left; }, []); // eslint-disable-next-line consistent-return - useEffect(() => { + React.useEffect(() => { if (apiRef && apiRef.current) { return apiRef.current.registerEvent(SCROLLING, onScrollHandler); } }, [apiRef, onScrollHandler]); - const handleMouseDown = useCallback( + const handleMouseDown = React.useCallback( (col: ColDef): void => { if (!apiRef || !apiRef.current) { return; @@ -70,7 +70,7 @@ export const useColumnResize = ( [apiRef, columnsRef, logger], ); - const stopResize = useCallback((): void => { + const stopResize = React.useCallback((): void => { isResizing.current = false; currentColPosition.current = undefined; currentColElem.current = undefined; @@ -90,7 +90,7 @@ export const useColumnResize = ( }, 200); }, [apiRef, logger]); - const updateWidth = useCallback( + const updateWidth = React.useCallback( (newWidth: number) => { logger.debug(`Updating width to ${newWidth} for col ${currentColDefRef.current!.field}`); if (currentColDefRef.current) { @@ -122,14 +122,12 @@ export const useColumnResize = ( [apiRef, logger], ); - const handleMouseEnter = useCallback((): void => { + const handleMouseEnter = React.useCallback((): void => { if (mouseLeftTimeout.current != null) { clearTimeout(mouseLeftTimeout.current); } }, []); - const handleMouseLeave = useCallback((): void => { - console.log(` LEFT = resizingMouseMove: ${JSON.stringify(resizingMouseMove.current)} `); - + const handleMouseLeave = React.useCallback((): void => { if ( isLastColumn.current && resizingMouseMove.current && @@ -151,10 +149,11 @@ export const useColumnResize = ( } }, [headerHeight, logger, stopResize, updateWidth]); - const handleMouseMove = useCallback( - (event: React.MouseEvent): void => { + const handleMouseMove = React.useCallback( + (ev: MouseEvent): void => { if (isResizing.current) { - const rect = ev.currentTarget.getBoundingClientRect(); + const target = ev.currentTarget! as HTMLDivElement; + const rect = target.getBoundingClientRect(); resizingMouseMove.current = { x: ev.clientX - rect.left, y: ev.clientY - rect.top }; const offsetLeft = !isLastColumn.current ? rect.left : scrollOffset.current * -1; @@ -170,7 +169,7 @@ export const useColumnResize = ( // This a hack due to the limitation of react as I cannot put columnsRef in the dependency array of the effect adding the Event listener const columnsRefState = useStateRef(columnsRef); // eslint-disable-next-line consistent-return - useEffect(() => { + React.useEffect(() => { if (columnsRef && columnsRef.current) { logger.info('Adding resizing event listener'); const columnsRefEvents = columnsRef.current; @@ -197,7 +196,7 @@ export const useColumnResize = ( stopResize, ]); - useEffect(() => { + React.useEffect(() => { return () => { clearTimeout(mouseLeftTimeout.current); clearTimeout(stopResizeEventTimeout.current);