{"parents":["c3cc936dae776e04d56e40b9062c4c25a666c07d"],"commit":{"revision":"958b6173fdcba503a4333d3a2e42c10781201f17","authorName":"Nicolas Gallagher","authorEmail":"nicolasgallagher@gmail.com","subject":"Add delay props to Hover event module (#15325)","authoredAt":"2019-04-05T04:23:51-07:00","shortRevision":"958b6173fd"},"files":[{"path":"packages\/react-events\/src\/Hover.js","status":"M"},{"path":"packages\/react-events\/src\/Swipe.js","status":"M"},{"path":"packages\/react-events\/src\/__tests__\/Hover-test.internal.js","status":"M"}],"patch":"diff --git a\/packages\/react-events\/src\/Hover.js b\/packages\/react-events\/src\/Hover.js\nindex 050a50bda0..2addb3185e 100644\n--- a\/packages\/react-events\/src\/Hover.js\n+++ b\/packages\/react-events\/src\/Hover.js\n@@ -20,9 +20,12 @@ type HoverProps = {\n };\n \n type HoverState = {\n+ isActiveHovered: boolean,\n isHovered: boolean,\n isInHitSlop: boolean,\n isTouched: boolean,\n+ hoverStartTimeout: null | TimeoutID,\n+ hoverEndTimeout: null | TimeoutID,\n };\n \n type HoverEventType = 'hoverstart' | 'hoverend' | 'hoverchange';\n@@ -60,29 +63,67 @@ function createHoverEvent(\n };\n }\n \n+function dispatchHoverChangeEvent(\n+ event: ResponderEvent,\n+ context: ResponderContext,\n+ props: HoverProps,\n+ state: HoverState,\n+): void {\n+ const listener = () => {\n+ props.onHoverChange(state.isActiveHovered);\n+ };\n+ const syntheticEvent = createHoverEvent(\n+ 'hoverchange',\n+ event.target,\n+ listener,\n+ );\n+ context.dispatchEvent(syntheticEvent, {discrete: true});\n+}\n+\n function dispatchHoverStartEvents(\n event: ResponderEvent,\n context: ResponderContext,\n props: HoverProps,\n+ state: HoverState,\n ): void {\n const {nativeEvent, target} = event;\n if (context.isTargetWithinEventComponent((nativeEvent: any).relatedTarget)) {\n return;\n }\n- if (props.onHoverStart) {\n- const syntheticEvent = createHoverEvent(\n- 'hoverstart',\n- target,\n- props.onHoverStart,\n- );\n- context.dispatchEvent(syntheticEvent, {discrete: true});\n+\n+ state.isHovered = true;\n+\n+ if (state.hoverEndTimeout !== null) {\n+ clearTimeout(state.hoverEndTimeout);\n+ state.hoverEndTimeout = null;\n }\n- if (props.onHoverChange) {\n- const listener = () => {\n- props.onHoverChange(true);\n- };\n- const syntheticEvent = createHoverEvent('hoverchange', target, listener);\n- context.dispatchEvent(syntheticEvent, {discrete: true});\n+\n+ const dispatch = () => {\n+ state.isActiveHovered = true;\n+\n+ if (props.onHoverStart) {\n+ const syntheticEvent = createHoverEvent(\n+ 'hoverstart',\n+ target,\n+ props.onHoverStart,\n+ );\n+ context.dispatchEvent(syntheticEvent, {discrete: true});\n+ }\n+ if (props.onHoverChange) {\n+ dispatchHoverChangeEvent(event, context, props, state);\n+ }\n+ };\n+\n+ if (!state.isActiveHovered) {\n+ const delay = calculateDelayMS(props.delayHoverStart, 0, 0);\n+ if (delay > 0) {\n+ state.hoverStartTimeout = context.setTimeout(() => {\n+ state.hoverStartTimeout = null;\n+ dispatch();\n+ }, delay);\n+ } else {\n+ dispatch();\n+ }\n }\n }\n \n@@ -90,35 +131,63 @@ function dispatchHoverEndEvents(\n event: ResponderEvent,\n context: ResponderContext,\n props: HoverProps,\n+ state: HoverState,\n ) {\n const {nativeEvent, target} = event;\n if (context.isTargetWithinEventComponent((nativeEvent: any).relatedTarget)) {\n return;\n }\n- if (props.onHoverEnd) {\n- const syntheticEvent = createHoverEvent(\n- 'hoverend',\n- target,\n- props.onHoverEnd,\n- );\n- context.dispatchEvent(syntheticEvent, {discrete: true});\n+\n+ state.isHovered = false;\n+\n+ if (state.hoverStartTimeout !== null) {\n+ clearTimeout(state.hoverStartTimeout);\n+ state.hoverStartTimeout = null;\n }\n- if (props.onHoverChange) {\n- const listener = () => {\n- props.onHoverChange(false);\n- };\n- const syntheticEvent = createHoverEvent('hoverchange', target, listener);\n- context.dispatchEvent(syntheticEvent, {discrete: true});\n+\n+ const dispatch = () => {\n+ state.isActiveHovered = false;\n+\n+ if (props.onHoverEnd) {\n+ const syntheticEvent = createHoverEvent(\n+ 'hoverend',\n+ target,\n+ props.onHoverEnd,\n+ );\n+ context.dispatchEvent(syntheticEvent, {discrete: true});\n+ }\n+ if (props.onHoverChange) {\n+ dispatchHoverChangeEvent(event, context, props, state);\n+ }\n+ };\n+\n+ if (state.isActiveHovered) {\n+ const delay = calculateDelayMS(props.delayHoverEnd, 0, 0);\n+ if (delay > 0) {\n+ state.hoverEndTimeout = context.setTimeout(() => {\n+ dispatch();\n+ }, delay);\n+ } else {\n+ dispatch();\n+ }\n }\n }\n \n+function calculateDelayMS(delay: ?number, min = 0, fallback = 0) {\n+ const maybeNumber = delay == null ? null : delay;\n+ return Math.max(min, maybeNumber != null ? maybeNumber : fallback);\n+}\n+\n const HoverResponder = {\n targetEventTypes,\n createInitialState() {\n return {\n+ isActiveHovered: false,\n isHovered: false,\n isInHitSlop: false,\n isTouched: false,\n+ hoverStartTimeout: null,\n+ hoverEndTimeout: null,\n };\n },\n onEvent(\n@@ -156,23 +225,22 @@ const HoverResponder = {\n state.isInHitSlop = true;\n return;\n }\n- dispatchHoverStartEvents(event, context, props);\n- state.isHovered = true;\n+ dispatchHoverStartEvents(event, context, props, state);\n }\n break;\n }\n case 'pointerout':\n case 'mouseout': {\n if (state.isHovered && !state.isTouched) {\n- dispatchHoverEndEvents(event, context, props);\n- state.isHovered = false;\n+ dispatchHoverEndEvents(event, context, props, state);\n }\n state.isInHitSlop = false;\n state.isTouched = false;\n break;\n }\n+\n case 'pointermove': {\n- if (!state.isTouched) {\n+ if (state.isHovered && !state.isTouched) {\n if (state.isInHitSlop) {\n if (\n !context.isPositionWithinTouchHitTarget(\n@@ -180,8 +248,7 @@ const HoverResponder = {\n (nativeEvent: any).y,\n )\n ) {\n- dispatchHoverStartEvents(event, context, props);\n- state.isHovered = true;\n+ dispatchHoverStartEvents(event, context, props, state);\n state.isInHitSlop = false;\n }\n } else if (\n@@ -191,17 +258,16 @@ const HoverResponder = {\n (nativeEvent: any).y,\n )\n ) {\n- dispatchHoverEndEvents(event, context, props);\n- state.isHovered = false;\n+ dispatchHoverEndEvents(event, context, props, state);\n state.isInHitSlop = true;\n }\n }\n break;\n }\n+\n case 'pointercancel': {\n if (state.isHovered && !state.isTouched) {\n- dispatchHoverEndEvents(event, context, props);\n- state.isHovered = false;\n+ dispatchHoverEndEvents(event, context, props, state);\n state.isTouched = false;\n }\n break;\ndiff --git a\/packages\/react-events\/src\/Swipe.js b\/packages\/react-events\/src\/Swipe.js\nindex ed211c939e..9d199d9fce 100644\n--- a\/packages\/react-events\/src\/Swipe.js\n+++ b\/packages\/react-events\/src\/Swipe.js\n@@ -104,7 +104,7 @@ const SwipeResponder = {\n case 'mousedown':\n case 'pointerdown': {\n if (!state.isSwiping && !context.hasOwnership()) {\n- let obj = event;\n+ let obj = nativeEvent;\n if (type === 'touchstart') {\n obj = (nativeEvent: any).targetTouches[0];\n state.touchId = obj.identifier;\ndiff --git a\/packages\/react-events\/src\/__tests__\/Hover-test.internal.js b\/packages\/react-events\/src\/__tests__\/Hover-test.internal.js\nindex bd449d8f23..c7cb373a16 100644\n--- a\/packages\/react-events\/src\/__tests__\/Hover-test.internal.js\n+++ b\/packages\/react-events\/src\/__tests__\/Hover-test.internal.js\n@@ -84,8 +84,70 @@ describe('Hover event responder', () => {\n expect(onHoverStart).not.toBeCalled();\n });\n \n- \/\/ TODO: complete delayHoverStart tests\n- \/\/ describe('delayHoverStart', () => {});\n+ describe('delayHoverStart', () => {\n+ it('can be configured', () => {\n+ const element = (\n+ \n+

\n+ <\/Hover>\n+ );\n+ ReactDOM.render(element, container);\n+\n+ ref.current.dispatchEvent(createPointerEvent('pointerover'));\n+ jest.advanceTimersByTime(1999);\n+ expect(onHoverStart).not.toBeCalled();\n+ jest.advanceTimersByTime(1);\n+ expect(onHoverStart).toHaveBeenCalledTimes(1);\n+ });\n+\n+ it('onHoverStart is called synchronously if delay is 0ms', () => {\n+ const element = (\n+ \n+

\n+ <\/Hover>\n+ );\n+ ReactDOM.render(element, container);\n+\n+ ref.current.dispatchEvent(createPointerEvent('pointerover'));\n+ expect(onHoverStart).toHaveBeenCalledTimes(1);\n+ });\n+\n+ it('onHoverStart is only called once per active hover', () => {\n+ const element = (\n+ \n+

\n+ <\/Hover>\n+ );\n+ ReactDOM.render(element, container);\n+\n+ ref.current.dispatchEvent(createPointerEvent('pointerover'));\n+ jest.advanceTimersByTime(500);\n+ expect(onHoverStart).toHaveBeenCalledTimes(1);\n+ ref.current.dispatchEvent(createPointerEvent('pointerout'));\n+ jest.advanceTimersByTime(10);\n+ ref.current.dispatchEvent(createPointerEvent('pointerover'));\n+ jest.runAllTimers();\n+ expect(onHoverStart).toHaveBeenCalledTimes(1);\n+ });\n+\n+ it('onHoverStart is not called if \"pointerout\" is dispatched during a delay', () => {\n+ const element = (\n+ \n+

\n+ <\/Hover>\n+ );\n+ ReactDOM.render(element, container);\n+\n+ ref.current.dispatchEvent(createPointerEvent('pointerover'));\n+ jest.advanceTimersByTime(499);\n+ ref.current.dispatchEvent(createPointerEvent('pointerout'));\n+ jest.advanceTimersByTime(1);\n+ expect(onHoverStart).not.toBeCalled();\n+ });\n+ });\n });\n \n describe('onHoverChange', () => {\n@@ -183,8 +245,87 @@ describe('Hover event responder', () => {\n expect(onHoverEnd).not.toBeCalled();\n });\n \n- \/\/ TODO: complete delayHoverStart tests\n- \/\/ describe('delayHoverEnd', () => {});\n+ describe('delayHoverEnd', () => {\n+ it('can be configured', () => {\n+ const element = (\n+ \n+

\n+ <\/Hover>\n+ );\n+ ReactDOM.render(element, container);\n+\n+ ref.current.dispatchEvent(createPointerEvent('pointerover'));\n+ ref.current.dispatchEvent(createPointerEvent('pointerout'));\n+ jest.advanceTimersByTime(1999);\n+ expect(onHoverEnd).not.toBeCalled();\n+ jest.advanceTimersByTime(1);\n+ expect(onHoverEnd).toHaveBeenCalledTimes(1);\n+ });\n+\n+ it('delayHoverEnd is called synchronously if delay is 0ms', () => {\n+ const element = (\n+ \n+

\n+ <\/Hover>\n+ );\n+ ReactDOM.render(element, container);\n+\n+ ref.current.dispatchEvent(createPointerEvent('pointerover'));\n+ ref.current.dispatchEvent(createPointerEvent('pointerout'));\n+ expect(onHoverEnd).toHaveBeenCalledTimes(1);\n+ });\n+\n+ it('onHoverEnd is only called once per active hover', () => {\n+ const element = (\n+ \n+

\n+ <\/Hover>\n+ );\n+ ReactDOM.render(element, container);\n+\n+ ref.current.dispatchEvent(createPointerEvent('pointerover'));\n+ ref.current.dispatchEvent(createPointerEvent('pointerout'));\n+ jest.advanceTimersByTime(499);\n+ ref.current.dispatchEvent(createPointerEvent('pointerover'));\n+ jest.advanceTimersByTime(100);\n+ ref.current.dispatchEvent(createPointerEvent('pointerout'));\n+ jest.runAllTimers();\n+ expect(onHoverEnd).toHaveBeenCalledTimes(1);\n+ });\n+\n+ it('onHoverEnd is not called if \"pointerover\" is dispatched during a delay', () => {\n+ const element = (\n+ \n+

\n+ <\/Hover>\n+ );\n+ ReactDOM.render(element, container);\n+\n+ ref.current.dispatchEvent(createPointerEvent('pointerover'));\n+ ref.current.dispatchEvent(createPointerEvent('pointerout'));\n+ jest.advanceTimersByTime(499);\n+ ref.current.dispatchEvent(createPointerEvent('pointerover'));\n+ jest.advanceTimersByTime(1);\n+ expect(onHoverEnd).not.toBeCalled();\n+ });\n+\n+ it('onHoverEnd is not called if there was no active hover', () => {\n+ const element = (\n+ \n+

\n+ <\/Hover>\n+ );\n+ ReactDOM.render(element, container);\n+\n+ ref.current.dispatchEvent(createPointerEvent('pointerover'));\n+ ref.current.dispatchEvent(createPointerEvent('pointerout'));\n+ jest.runAllTimers();\n+ expect(onHoverEnd).not.toBeCalled();\n+ });\n+ });\n });\n \n it('expect displayName to show up for event component', () => {\n","body":""}

dillon1000/react

Files changed