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

Fix resize #59

Merged
merged 7 commits into from
Jul 9, 2020
Merged

Fix resize #59

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e78c2fd
Fix resize issue with padding
dtassone Jul 9, 2020
2e67ec1
Update packages/grid/x-grid-modules/src/hooks/features/useColumnResiz…
dtassone Jul 9, 2020
46bc98e
Update packages/storybook/src/stories/grid-style.stories.tsx
dtassone Jul 9, 2020
22b09f0
prettier fix
dtassone Jul 9, 2020
8709ffe
Merge branch 'fixResize' of github.com:mui-org/material-ui-x into fix…
dtassone Jul 9, 2020
88972bb
fix suggestion issue
dtassone Jul 9, 2020
4556a0c
Merge branch 'master' into fixResize
dtassone Jul 9, 2020
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
56 changes: 28 additions & 28 deletions packages/grid/x-grid-modules/src/hooks/features/useColumnResize.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -17,34 +17,34 @@ export const useColumnResize = (
) => {
const logger = useLogger('useColumnResize');

const isResizing = useRef<boolean>(false);
const isLastColumn = useRef<boolean>(false);
const mouseLeftTimeout = useRef<any>();
const stopResizeEventTimeout = useRef<any>();
const isResizing = React.useRef<boolean>(false);
const isLastColumn = React.useRef<boolean>(false);
const mouseLeftTimeout = React.useRef<any>();
const stopResizeEventTimeout = React.useRef<any>();

const currentColDefRef = useRef<ColDef>();
const currentColElem = useRef<HTMLDivElement>();
const currentColPosition = useRef<number>();
const currentColPreviousWidth = useRef<number>();
const currentColCellsElems = useRef<NodeListOf<Element>>();
const currentColDefRef = React.useRef<ColDef>();
const currentColElem = React.useRef<HTMLDivElement>();
const currentColPosition = React.useRef<number>();
const currentColPreviousWidth = React.useRef<number>();
const currentColCellsElems = React.useRef<NodeListOf<Element>>();

const dataContainerElemRef = useRef<HTMLDivElement>();
const dataContainerPreviousWidth = useRef<number>();
const scrollOffset = useRef<number>(0);
const resizingMouseMove = useRef<{ x: number; y: number }>();
const dataContainerElemRef = React.useRef<HTMLDivElement>();
const dataContainerPreviousWidth = React.useRef<number>();
const scrollOffset = React.useRef<number>(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;
Expand All @@ -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;
Expand All @@ -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) {
Expand Down Expand Up @@ -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 &&
Expand All @@ -151,10 +149,12 @@ export const useColumnResize = (
}
}, [headerHeight, logger, stopResize, updateWidth]);

const handleMouseMove = useCallback(
(event: React.MouseEvent<HTMLElement>): void => {
const handleMouseMove = React.useCallback(
(ev: MouseEvent): void => {
Copy link
Member Author

Choose a reason for hiding this comment

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

we committed a wrong type, when we reviewed. Fix now :)

Copy link
Member

Choose a reason for hiding this comment

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

Oh right, sorry. I didn't check the context. The event comes from the DOM, it's not a synthetic one.

For this case, we went with the following convention: nativeEvent. This will prevent future confusion. It was changed in mui/material-ui#21610 (comment) (I already took care of updating the main repository to follow this pattern, hopefully I didn't miss any cases).

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;
Expand All @@ -170,7 +170,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;
Expand All @@ -197,7 +197,7 @@ export const useColumnResize = (
stopResize,
]);

useEffect(() => {
React.useEffect(() => {
return () => {
clearTimeout(mouseLeftTimeout.current);
clearTimeout(stopResizeEventTimeout.current);
Expand Down