diff --git a/src/components/Grid/ColumnResizer.tsx b/src/components/Grid/ColumnResizer.tsx index f00abda8..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,17 +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 => { @@ -87,7 +107,8 @@ 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); } @@ -100,11 +121,17 @@ const ColumnResizer = ({ { 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) { @@ -118,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.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(); diff --git a/src/components/Grid/Grid.tsx b/src/components/Grid/Grid.tsx index fef156b9..5b02cf2d 100644 --- a/src/components/Grid/Grid.tsx +++ b/src/components/Grid/Grid.tsx @@ -110,6 +110,7 @@ const OuterElementType = forwardRef((props, ref) => (
)); @@ -780,7 +781,7 @@ export const Grid = forwardRef( width={width} /> ); - } + }; return (