diff --git a/packages/react-events/docs/Hover.md b/packages/react-events/docs/Hover.md index 1f68edf11bb28..e06559d17952c 100644 --- a/packages/react-events/docs/Hover.md +++ b/packages/react-events/docs/Hover.md @@ -37,16 +37,6 @@ type HoverEvent = { ## Props -### delayHoverEnd: number - -The duration of the delay between when hover ends and when `onHoverEnd` is -called. - -### delayHoverStart: number - -The duration of the delay between when hover starts and when `onHoverStart` is -called. - ### disabled: boolean Disables all `Hover` events. @@ -58,19 +48,15 @@ Called when the element changes hover state (i.e., after `onHoverStart` and ### onHoverEnd: (e: HoverEvent) => void -Called once the element is no longer hovered. It will be cancelled if the -pointer leaves the element before the `delayHoverStart` threshold is exceeded. +Called once the element is no longer hovered. ### onHoverMove: (e: HoverEvent) => void -Called when the pointer moves within the hit bounds of the element. `onHoverMove` is -called immediately and doesn't wait for delayed `onHoverStart`. +Called when the pointer moves within the hit bounds of the element. ### onHoverStart: (e: HoverEvent) => void -Called once the element is hovered. It will not be called if the pointer leaves -the element before the `delayHoverStart` threshold is exceeded. And it will not -be called more than once before `onHoverEnd` is called. +Called once the element is hovered. ### preventDefault: boolean = true diff --git a/packages/react-events/src/dom/Hover.js b/packages/react-events/src/dom/Hover.js index 064a07983f599..29da49f810069 100644 --- a/packages/react-events/src/dom/Hover.js +++ b/packages/react-events/src/dom/Hover.js @@ -24,8 +24,6 @@ type HoverListenerProps = {| type HoverProps = { disabled: boolean, - delayHoverEnd: number, - delayHoverStart: number, preventDefault: boolean, }; @@ -55,9 +53,6 @@ type HoverEvent = {| y: null | number, |}; -const DEFAULT_HOVER_END_DELAY_MS = 0; -const DEFAULT_HOVER_START_DELAY_MS = 0; - const targetEventTypes = [ 'pointerover', 'pointermove', @@ -136,7 +131,7 @@ function dispatchHoverStartEvents( state.hoverEndTimeout = null; } - const activate = () => { + if (!state.isActiveHovered) { state.isActiveHovered = true; const syntheticEvent = createHoverEvent( event, @@ -146,22 +141,6 @@ function dispatchHoverStartEvents( ); context.dispatchEvent('onHoverStart', syntheticEvent, UserBlockingEvent); dispatchHoverChangeEvent(event, context, props, state); - }; - - if (!state.isActiveHovered) { - const delayHoverStart = calculateDelayMS( - props.delayHoverStart, - 0, - DEFAULT_HOVER_START_DELAY_MS, - ); - if (delayHoverStart > 0) { - state.hoverStartTimeout = context.setTimeout(() => { - state.hoverStartTimeout = null; - activate(); - }, delayHoverStart); - } else { - activate(); - } } } @@ -188,7 +167,7 @@ function dispatchHoverEndEvents( state.hoverStartTimeout = null; } - const deactivate = () => { + if (state.isActiveHovered) { state.isActiveHovered = false; const syntheticEvent = createHoverEvent( @@ -202,29 +181,9 @@ function dispatchHoverEndEvents( state.hoverTarget = null; state.ignoreEmulatedMouseEvents = false; state.isTouched = false; - }; - - if (state.isActiveHovered) { - const delayHoverEnd = calculateDelayMS( - props.delayHoverEnd, - 0, - DEFAULT_HOVER_END_DELAY_MS, - ); - if (delayHoverEnd > 0) { - state.hoverEndTimeout = context.setTimeout(() => { - deactivate(); - }, delayHoverEnd); - } else { - deactivate(); - } } } -function calculateDelayMS(delay: ?number, min = 0, fallback = 0) { - const maybeNumber = delay == null ? null : delay; - return Math.max(min, maybeNumber != null ? maybeNumber : fallback); -} - function unmountResponder( context: ReactDOMResponderContext, props: HoverProps, diff --git a/packages/react-events/src/dom/__tests__/Hover-test.internal.js b/packages/react-events/src/dom/__tests__/Hover-test.internal.js index e8408f53a5b4c..31965b412b328 100644 --- a/packages/react-events/src/dom/__tests__/Hover-test.internal.js +++ b/packages/react-events/src/dom/__tests__/Hover-test.internal.js @@ -167,97 +167,6 @@ describe('Hover event responder', () => { ); expect(onHoverStart).not.toBeCalled(); }); - - describe('delayHoverStart', () => { - it('can be configured', () => { - const Component = () => { - useHoverListener({ - onHoverStart: onHoverStart, - }); - return ( -
} - /> - ); - }; - ReactDOM.render(, container); - - ref.current.dispatchEvent(createEvent('pointerover')); - jest.advanceTimersByTime(1999); - expect(onHoverStart).not.toBeCalled(); - jest.advanceTimersByTime(1); - expect(onHoverStart).toHaveBeenCalledTimes(1); - }); - - it('is reset if "pointerout" is dispatched during a delay', () => { - const Component = () => { - useHoverListener({ - onHoverStart: onHoverStart, - }); - return ( -
} - /> - ); - }; - ReactDOM.render(, container); - - ref.current.dispatchEvent(createEvent('pointerover')); - jest.advanceTimersByTime(499); - ref.current.dispatchEvent(createEvent('pointerout')); - jest.advanceTimersByTime(1); - expect(onHoverStart).not.toBeCalled(); - ref.current.dispatchEvent(createEvent('pointerover')); - jest.runAllTimers(); - expect(onHoverStart).toHaveBeenCalledTimes(1); - }); - - it('onHoverStart is called synchronously if delay is 0ms', () => { - const Component = () => { - useHoverListener({ - onHoverStart: onHoverStart, - }); - return ( -
} - /> - ); - }; - ReactDOM.render(, container); - - ref.current.dispatchEvent(createEvent('pointerover')); - expect(onHoverStart).toHaveBeenCalledTimes(1); - }); - - it('onHoverStart is only called once per active hover', () => { - const Component = () => { - useHoverListener({ - onHoverStart: onHoverStart, - }); - return ( -
- } - /> - ); - }; - ReactDOM.render(, container); - - ref.current.dispatchEvent(createEvent('pointerover')); - jest.advanceTimersByTime(500); - expect(onHoverStart).toHaveBeenCalledTimes(1); - ref.current.dispatchEvent(createEvent('pointerout')); - jest.advanceTimersByTime(10); - ref.current.dispatchEvent(createEvent('pointerover')); - jest.runAllTimers(); - expect(onHoverStart).toHaveBeenCalledTimes(1); - }); - }); }); describe('onHoverChange', () => { @@ -399,114 +308,6 @@ describe('Hover event responder', () => { ref.current.dispatchEvent(createEvent('mouseout')); expect(onHoverEnd).not.toBeCalled(); }); - - describe('delayHoverEnd', () => { - it('can be configured', () => { - const Component = () => { - useHoverListener({ - onHoverEnd, - }); - return ( -
} - /> - ); - }; - ReactDOM.render(, container); - - ref.current.dispatchEvent(createEvent('pointerover')); - ref.current.dispatchEvent(createEvent('pointerout')); - jest.advanceTimersByTime(1999); - expect(onHoverEnd).not.toBeCalled(); - jest.advanceTimersByTime(1); - expect(onHoverEnd).toHaveBeenCalledTimes(1); - }); - - it('delayHoverEnd is called synchronously if delay is 0ms', () => { - const Component = () => { - useHoverListener({ - onHoverEnd, - }); - return ( -
} /> - ); - }; - ReactDOM.render(, container); - - ref.current.dispatchEvent(createEvent('pointerover')); - ref.current.dispatchEvent(createEvent('pointerout')); - expect(onHoverEnd).toHaveBeenCalledTimes(1); - }); - - it('onHoverEnd is only called once per active hover', () => { - const Component = () => { - useHoverListener({ - onHoverEnd, - }); - return ( -
} - /> - ); - }; - ReactDOM.render(, container); - - ref.current.dispatchEvent(createEvent('pointerover')); - ref.current.dispatchEvent(createEvent('pointerout')); - jest.advanceTimersByTime(499); - ref.current.dispatchEvent(createEvent('pointerover')); - jest.advanceTimersByTime(100); - ref.current.dispatchEvent(createEvent('pointerout')); - jest.runAllTimers(); - expect(onHoverEnd).toHaveBeenCalledTimes(1); - }); - - it('onHoverEnd is not called if "pointerover" is dispatched during a delay', () => { - const Component = () => { - useHoverListener({ - onHoverEnd, - }); - return ( -
} - /> - ); - }; - ReactDOM.render(, container); - - ref.current.dispatchEvent(createEvent('pointerover')); - ref.current.dispatchEvent(createEvent('pointerout')); - jest.advanceTimersByTime(499); - ref.current.dispatchEvent(createEvent('pointerover')); - jest.advanceTimersByTime(1); - expect(onHoverEnd).not.toBeCalled(); - }); - - it('onHoverEnd is not called if there was no active hover', () => { - const Component = () => { - useHoverListener({ - onHoverEnd, - }); - return ( -
- } - /> - ); - }; - ReactDOM.render(, container); - - ref.current.dispatchEvent(createEvent('pointerover')); - ref.current.dispatchEvent(createEvent('pointerout')); - jest.runAllTimers(); - expect(onHoverEnd).not.toBeCalled(); - }); - }); }); describe('onHoverMove', () => {