From 6b09f3e1db49bf7d4dde23204ade4d8e511d1e99 Mon Sep 17 00:00:00 2001 From: Bucky Schwarz Date: Thu, 25 Jul 2024 12:42:28 -0400 Subject: [PATCH 1/5] ColumnResizer: change check to allow resizing in Firefox --- src/components/Grid/ColumnResizer.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/Grid/ColumnResizer.tsx b/src/components/Grid/ColumnResizer.tsx index f00abda8..76369410 100644 --- a/src/components/Grid/ColumnResizer.tsx +++ b/src/components/Grid/ColumnResizer.tsx @@ -88,6 +88,7 @@ const ColumnResizer = ({ resizeRef.current.setPointerCapture(pointerRef.current.pointerId); const width = header.scrollWidth + (e.clientX - pointerRef.current.initialClientX); + setResizeCursorPosition(resizeRef.current, e.clientX, width, columnIndex); pointerRef.current.width = Math.max(width, 50); } @@ -104,7 +105,12 @@ const ColumnResizer = ({ onPointerUp={e => { e.preventDefault(); e.stopPropagation(); - if (resizeRef.current && pointerRef.current?.pointerId) { + + if ( + resizeRef.current && + // 0 is a valid pointerId in Firefox + (pointerRef.current?.pointerId || pointerRef.current?.pointerId === 0) + ) { resizeRef.current.releasePointerCapture(pointerRef.current.pointerId); const shouldCallResize = e.clientX !== pointerRef.current.initialClientX; if (shouldCallResize) { From 01416cd506ee4e67950a6773a7e5f4b68a161076 Mon Sep 17 00:00:00 2001 From: Bucky Schwarz Date: Thu, 25 Jul 2024 16:38:58 -0400 Subject: [PATCH 2/5] Change resize calculation to use clientWidth instead of scroll width to fix Firefox --- src/components/Grid/ColumnResizer.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Grid/ColumnResizer.tsx b/src/components/Grid/ColumnResizer.tsx index 76369410..6c174046 100644 --- a/src/components/Grid/ColumnResizer.tsx +++ b/src/components/Grid/ColumnResizer.tsx @@ -48,6 +48,7 @@ const ColumnResizer = ({ e => { e.preventDefault(); e.stopPropagation(); + if (e.detail > 1) { onColumnResize(columnIndex, 0, "auto"); } @@ -87,7 +88,7 @@ const ColumnResizer = ({ if (header) { resizeRef.current.setPointerCapture(pointerRef.current.pointerId); const width = - header.scrollWidth + (e.clientX - pointerRef.current.initialClientX); + header.clientWidth + (e.clientX - pointerRef.current.initialClientX); setResizeCursorPosition(resizeRef.current, e.clientX, width, columnIndex); pointerRef.current.width = Math.max(width, 50); From 7a0aa22c54e80bbf3b37a36abb8c2e90e5d967c7 Mon Sep 17 00:00:00 2001 From: Bucky Schwarz Date: Fri, 26 Jul 2024 11:25:22 -0400 Subject: [PATCH 3/5] Force an active state in styledComponents by storing active state in React --- src/components/Grid/ColumnResizer.tsx | 36 +++++++++++++++++++++------ src/components/Grid/Grid.tsx | 2 +- 2 files changed, 29 insertions(+), 9 deletions(-) diff --git a/src/components/Grid/ColumnResizer.tsx b/src/components/Grid/ColumnResizer.tsx index 6c174046..cae0032a 100644 --- a/src/components/Grid/ColumnResizer.tsx +++ b/src/components/Grid/ColumnResizer.tsx @@ -1,9 +1,15 @@ -import { MouseEventHandler, PointerEventHandler, useCallback, useRef } from "react"; +import { + MouseEventHandler, + PointerEventHandler, + useCallback, + useRef, + useState, +} from "react"; import styled from "styled-components"; import { ColumnResizeFn, SetResizeCursorPositionFn } from "./types"; import throttle from "lodash/throttle"; -const ResizeSpan = styled.div<{ $height: number }>` +const ResizeSpan = styled.div<{ $height: number; $isPressed: boolean }>` top: 0; left: calc(100% - 4px); z-index: 1; @@ -17,10 +23,12 @@ const ResizeSpan = styled.div<{ $height: number }>` &:hover { background: ${({ theme }) => theme.click.grid.header.cell.color.stroke.selectDirect}; } - &:active { - height: 100%; - position: fixed; - } + ${({ $isPressed }) => + $isPressed && + ` + height: 100%; + position: fixed; + `} `; type PointerRefType = { width: number; @@ -42,18 +50,29 @@ const ColumnResizer = ({ }: Props) => { const resizeRef = useRef(null); const pointerRef = useRef(null); + const [isPressed, setIsPressed] = useState(false); const onColumnResize = throttle(onColumnResizeProp, 1000); const onMouseDown: MouseEventHandler = useCallback( e => { e.preventDefault(); e.stopPropagation(); + setIsPressed(true); if (e.detail > 1) { onColumnResize(columnIndex, 0, "auto"); } }, - [columnIndex, onColumnResize] + [columnIndex, onColumnResize, setIsPressed] + ); + + const onMouseUp: MouseEventHandler = useCallback( + e => { + e.stopPropagation(); + + setIsPressed(false); + }, + [setIsPressed] ); const onPointerDown: PointerEventHandler = useCallback( e => { @@ -102,6 +121,7 @@ const ColumnResizer = ({ { e.preventDefault(); @@ -125,7 +145,7 @@ const ColumnResizer = ({ onMouseMove={onMouseMove} onMouseDown={onMouseDown} onClick={e => e.stopPropagation()} - onMouseUp={e => e.stopPropagation()} + onMouseUp={onMouseUp} data-resize /> ); diff --git a/src/components/Grid/Grid.tsx b/src/components/Grid/Grid.tsx index fef156b9..bf78953f 100644 --- a/src/components/Grid/Grid.tsx +++ b/src/components/Grid/Grid.tsx @@ -780,7 +780,7 @@ export const Grid = forwardRef( width={width} /> ); - } + }; return ( Date: Fri, 26 Jul 2024 11:28:55 -0400 Subject: [PATCH 4/5] Fix accessibility issues by assigning grid a tabIndex --- src/components/Grid/Grid.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Grid/Grid.tsx b/src/components/Grid/Grid.tsx index bf78953f..5b02cf2d 100644 --- a/src/components/Grid/Grid.tsx +++ b/src/components/Grid/Grid.tsx @@ -110,6 +110,7 @@ const OuterElementType = forwardRef((props, ref) => (
)); From 8ffe68098dee1a032cd4a33914ae7e23588aed40 Mon Sep 17 00:00:00 2001 From: Bucky Schwarz Date: Fri, 26 Jul 2024 11:29:48 -0400 Subject: [PATCH 5/5] Fix typo in grid test --- src/components/Grid/Grid.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Grid/Grid.test.tsx b/src/components/Grid/Grid.test.tsx index d521f89f..d5e34f4c 100644 --- a/src/components/Grid/Grid.test.tsx +++ b/src/components/Grid/Grid.test.tsx @@ -90,7 +90,7 @@ describe("Grid", () => { expect(lastHeaderCell).toBeNull(); }); - it("should render focussed element", () => { + it("should render focused element", () => { const { queryByTestId, getByText } = renderGrid({}); const rowNumber = getByText("1"); expect(rowNumber).not.toBeNull();