{"files":[{"path":"packages\/events\/EventSystemFlags.js","status":"M"},{"path":"packages\/react-dom\/src\/client\/ReactDOMComponent.js","status":"M"},{"path":"packages\/react-dom\/src\/events\/DOMEventResponderSystem.js","status":"M"},{"path":"packages\/react-dom\/src\/events\/EventListener.js","status":"M"},{"path":"packages\/react-dom\/src\/events\/ReactDOMEventListener.js","status":"M"},{"path":"packages\/react-dom\/src\/events\/forks\/EventListener-www.js","status":"M"},{"path":"packages\/react-events\/README.md","status":"M"},{"path":"packages\/react-events\/src\/Focus.js","status":"M"},{"path":"packages\/react-events\/src\/FocusScope.js","status":"M"},{"path":"packages\/react-events\/src\/__tests__\/Press-test.internal.js","status":"M"},{"path":"packages\/shared\/ReactTypes.js","status":"M"},{"path":"scripts\/flow\/environment.js","status":"M"}],"patch":"diff --git a\/packages\/events\/EventSystemFlags.js b\/packages\/events\/EventSystemFlags.js\nindex 2d64878ce7..be5e3544a2 100644\n--- a\/packages\/events\/EventSystemFlags.js\n+++ b\/packages\/events\/EventSystemFlags.js\n@@ -13,5 +13,4 @@ export const PLUGIN_EVENT_SYSTEM = 1;\n export const RESPONDER_EVENT_SYSTEM = 1 << 1;\n export const IS_PASSIVE = 1 << 2;\n export const IS_ACTIVE = 1 << 3;\n-export const IS_CAPTURE = 1 << 4;\n-export const PASSIVE_NOT_SUPPORTED = 1 << 5;\n+export const PASSIVE_NOT_SUPPORTED = 1 << 4;\ndiff --git a\/packages\/react-dom\/src\/client\/ReactDOMComponent.js b\/packages\/react-dom\/src\/client\/ReactDOMComponent.js\nindex 00424efe2c..b354f16801 100644\n--- a\/packages\/react-dom\/src\/client\/ReactDOMComponent.js\n+++ b\/packages\/react-dom\/src\/client\/ReactDOMComponent.js\n@@ -1294,7 +1294,6 @@ export function listenToEventResponderEventTypes(\n for (let i = 0, length = eventTypes.length; i < length; ++i) {\n const targetEventType = eventTypes[i];\n let topLevelType;\n- let capture = false;\n let passive = true;\n \n \/\/ If no event config object is provided (i.e. - only a string),\n@@ -1313,26 +1312,17 @@ export function listenToEventResponderEventTypes(\n const targetEventConfigObject = ((targetEventType: any): {\n name: string,\n passive?: boolean,\n- capture?: boolean,\n });\n topLevelType = targetEventConfigObject.name;\n if (targetEventConfigObject.passive !== undefined) {\n passive = targetEventConfigObject.passive;\n }\n- if (targetEventConfigObject.capture !== undefined) {\n- capture = targetEventConfigObject.capture;\n- }\n }\n- const listeningName = generateListeningKey(\n- topLevelType,\n- passive,\n- capture,\n- );\n+ const listeningName = generateListeningKey(topLevelType, passive);\n if (!listeningSet.has(listeningName)) {\n trapEventForResponderEventSystem(\n element,\n ((topLevelType: any): DOMTopLevelEventType),\n- capture,\n passive,\n );\n listeningSet.add(listeningName);\ndiff --git a\/packages\/react-dom\/src\/events\/DOMEventResponderSystem.js b\/packages\/react-dom\/src\/events\/DOMEventResponderSystem.js\nindex 23133a9ba6..4e9b239695 100644\n--- a\/packages\/react-dom\/src\/events\/DOMEventResponderSystem.js\n+++ b\/packages\/react-dom\/src\/events\/DOMEventResponderSystem.js\n@@ -9,7 +9,6 @@\n import {\n type EventSystemFlags,\n IS_PASSIVE,\n- IS_CAPTURE,\n PASSIVE_NOT_SUPPORTED,\n } from 'events\/EventSystemFlags';\n import type {AnyNativeEvent} from 'events\/PluginModuleType';\n@@ -247,28 +246,22 @@ const eventResponderContext: ReactResponderContext = {\n for (let i = 0; i < rootEventTypes.length; i++) {\n const rootEventType = rootEventTypes[i];\n let name = rootEventType;\n- let capture = false;\n let passive = true;\n \n if (typeof rootEventType !== 'string') {\n const targetEventConfigObject = ((rootEventType: any): {\n name: string,\n passive?: boolean,\n- capture?: boolean,\n });\n name = targetEventConfigObject.name;\n if (targetEventConfigObject.passive !== undefined) {\n passive = targetEventConfigObject.passive;\n }\n- if (targetEventConfigObject.capture !== undefined) {\n- capture = targetEventConfigObject.capture;\n- }\n }\n \n const listeningName = generateListeningKey(\n ((name: any): string),\n passive,\n- capture,\n );\n let rootEventComponents = rootEventTypesToEventComponentInstances.get(\n listeningName,\n@@ -537,27 +530,21 @@ function getTargetEventTypesSet(\n for (let i = 0; i < eventTypes.length; i++) {\n const eventType = eventTypes[i];\n let name = eventType;\n- let capture = false;\n let passive = true;\n \n if (typeof eventType !== 'string') {\n const targetEventConfigObject = ((eventType: any): {\n name: string,\n passive?: boolean,\n- capture?: boolean,\n });\n name = targetEventConfigObject.name;\n if (targetEventConfigObject.passive !== undefined) {\n passive = targetEventConfigObject.passive;\n }\n- if (targetEventConfigObject.capture !== undefined) {\n- capture = targetEventConfigObject.capture;\n- }\n }\n const listeningName = generateListeningKey(\n ((name: any): string),\n passive,\n- capture,\n );\n cachedSet.add(listeningName);\n }\n@@ -640,12 +627,10 @@ function traverseAndHandleEventResponderInstances(\n eventSystemFlags: EventSystemFlags,\n ): void {\n const isPassiveEvent = (eventSystemFlags & IS_PASSIVE) !== 0;\n- const isCaptureEvent = (eventSystemFlags & IS_CAPTURE) !== 0;\n const isPassiveSupported = (eventSystemFlags & PASSIVE_NOT_SUPPORTED) === 0;\n const listeningName = generateListeningKey(\n ((topLevelType: any): string),\n isPassiveEvent || !isPassiveSupported,\n- isCaptureEvent,\n );\n \n \/\/ Trigger event responders in this order:\n@@ -875,29 +860,20 @@ function registerRootEventType(\n eventComponentInstance: ReactEventComponentInstance,\n ): void {\n let name = rootEventType;\n- let capture = false;\n let passive = true;\n \n if (typeof rootEventType !== 'string') {\n const targetEventConfigObject = ((rootEventType: any): {\n name: string,\n passive?: boolean,\n- capture?: boolean,\n });\n name = targetEventConfigObject.name;\n if (targetEventConfigObject.passive !== undefined) {\n passive = targetEventConfigObject.passive;\n }\n- if (targetEventConfigObject.capture !== undefined) {\n- capture = targetEventConfigObject.capture;\n- }\n }\n \n- const listeningName = generateListeningKey(\n- ((name: any): string),\n- passive,\n- capture,\n- );\n+ const listeningName = generateListeningKey(((name: any): string), passive);\n let rootEventComponentInstances = rootEventTypesToEventComponentInstances.get(\n listeningName,\n );\n@@ -928,12 +904,10 @@ function registerRootEventType(\n export function generateListeningKey(\n topLevelType: string,\n passive: boolean,\n- capture: boolean,\n ): string {\n \/\/ Create a unique name for this event, plus its properties. We'll\n \/\/ use this to ensure we don't listen to the same event with the same\n \/\/ properties again.\n const passiveKey = passive ? '_passive' : '_active';\n- const captureKey = capture ? '_capture' : '';\n- return `${topLevelType}${passiveKey}${captureKey}`;\n+ return `${topLevelType}${passiveKey}`;\n }\ndiff --git a\/packages\/react-dom\/src\/events\/EventListener.js b\/packages\/react-dom\/src\/events\/EventListener.js\nindex a44d160e79..7e6161136b 100644\n--- a\/packages\/react-dom\/src\/events\/EventListener.js\n+++ b\/packages\/react-dom\/src\/events\/EventListener.js\n@@ -23,11 +23,14 @@ export function addEventCaptureListener(\n element.addEventListener(eventType, listener, true);\n }\n \n-export function addEventListener(\n+export function addEventCaptureListenerWithPassiveFlag(\n element: Document | Element | Node,\n eventType: string,\n listener: Function,\n- options: {passive: boolean},\n+ passive: boolean,\n ): void {\n- element.addEventListener(eventType, listener, (options: any));\n+ element.addEventListener(eventType, listener, {\n+ capture: true,\n+ passive,\n+ });\n }\ndiff --git a\/packages\/react-dom\/src\/events\/ReactDOMEventListener.js b\/packages\/react-dom\/src\/events\/ReactDOMEventListener.js\nindex f5fa9d3170..813f978ead 100644\n--- a\/packages\/react-dom\/src\/events\/ReactDOMEventListener.js\n+++ b\/packages\/react-dom\/src\/events\/ReactDOMEventListener.js\n@@ -22,14 +22,13 @@ import {\n RESPONDER_EVENT_SYSTEM,\n IS_PASSIVE,\n IS_ACTIVE,\n- IS_CAPTURE,\n PASSIVE_NOT_SUPPORTED,\n } from 'events\/EventSystemFlags';\n \n import {\n addEventBubbleListener,\n addEventCaptureListener,\n- addEventListener,\n+ addEventCaptureListenerWithPassiveFlag,\n } from '.\/EventListener';\n import getEventTarget from '.\/getEventTarget';\n import {getClosestInstanceFromNode} from '..\/client\/ReactDOMComponentTree';\n@@ -168,7 +167,6 @@ export function trapCapturedEvent(\n export function trapEventForResponderEventSystem(\n element: Document | Element | Node,\n topLevelType: DOMTopLevelEventType,\n- capture: boolean,\n passive: boolean,\n ): void {\n if (enableEventAPI) {\n@@ -190,15 +188,18 @@ export function trapEventForResponderEventSystem(\n } else {\n eventFlags |= IS_ACTIVE;\n }\n- if (capture) {\n- eventFlags |= IS_CAPTURE;\n- }\n \/\/ Check if interactive and wrap in interactiveUpdates\n const listener = dispatchEvent.bind(null, topLevelType, eventFlags);\n- addEventListener(element, rawEventName, listener, {\n- capture,\n- passive,\n- });\n+ if (passiveBrowserEventsSupported) {\n+ addEventCaptureListenerWithPassiveFlag(\n+ element,\n+ rawEventName,\n+ listener,\n+ passive,\n+ );\n+ } else {\n+ addEventCaptureListener(element, rawEventName, listener);\n+ }\n }\n }\n \ndiff --git a\/packages\/react-dom\/src\/events\/forks\/EventListener-www.js b\/packages\/react-dom\/src\/events\/forks\/EventListener-www.js\nindex d217a52ce6..99b337f0e7 100644\n--- a\/packages\/react-dom\/src\/events\/forks\/EventListener-www.js\n+++ b\/packages\/react-dom\/src\/events\/forks\/EventListener-www.js\n@@ -12,8 +12,6 @@ const EventListenerWWW = require('EventListener');\n import typeof * as EventListenerType from '..\/EventListener';\n import typeof * as EventListenerShimType from '.\/EventListener-www';\n \n-const NORMAL_PRIORITY = 0;\n-\n export function addEventBubbleListener(\n element: Element,\n eventType: string,\n@@ -30,18 +28,17 @@ export function addEventCaptureListener(\n EventListenerWWW.capture(element, eventType, listener);\n }\n \n-export function addEventListener(\n+export function addEventCaptureListenerWithPassiveFlag(\n element: Element,\n eventType: string,\n listener: Function,\n- options: {passive: boolean},\n+ passive: boolean,\n ): void {\n- EventListenerWWW.listen(\n+ EventListenerWWW.captureWithPassiveFlag(\n element,\n eventType,\n listener,\n- NORMAL_PRIORITY,\n- options,\n+ passive,\n );\n }\n \ndiff --git a\/packages\/react-events\/README.md b\/packages\/react-events\/README.md\nindex 4780b7bf7b..744c0b8715 100644\n--- a\/packages\/react-events\/README.md\n+++ b\/packages\/react-events\/README.md\n@@ -34,7 +34,7 @@ events, and implement a state machine.\n \/\/ types\n type ResponderEventType =\n | string\n- | {name: string, passive?: boolean, capture?: boolean};\n+ | {name: string, passive?: boolean};\n \n type ResponderEvent = {|\n nativeEvent: any,\ndiff --git a\/packages\/react-events\/src\/Focus.js b\/packages\/react-events\/src\/Focus.js\nindex 0ee2908c0e..033a91f4bf 100644\n--- a\/packages\/react-events\/src\/Focus.js\n+++ b\/packages\/react-events\/src\/Focus.js\n@@ -36,8 +36,8 @@ type FocusEvent = {|\n |};\n \n const targetEventTypes = [\n- {name: 'focus', passive: true, capture: true},\n- {name: 'blur', passive: true, capture: true},\n+ {name: 'focus', passive: true},\n+ {name: 'blur', passive: true},\n ];\n \n const rootEventTypes = [\ndiff --git a\/packages\/react-events\/src\/FocusScope.js b\/packages\/react-events\/src\/FocusScope.js\nindex c31e11d8f8..05493f1252 100644\n--- a\/packages\/react-events\/src\/FocusScope.js\n+++ b\/packages\/react-events\/src\/FocusScope.js\n@@ -25,7 +25,7 @@ type FocusScopeState = {\n };\n \n const targetEventTypes = [{name: 'keydown', passive: false}];\n-const rootEventTypes = [{name: 'focus', passive: true, capture: true}];\n+const rootEventTypes = [{name: 'focus', passive: true}];\n \n function focusElement(element: ?HTMLElement) {\n if (element != null) {\ndiff --git a\/packages\/react-events\/src\/__tests__\/Press-test.internal.js b\/packages\/react-events\/src\/__tests__\/Press-test.internal.js\nindex f87b8968bc..1a5d44d86d 100644\n--- a\/packages\/react-events\/src\/__tests__\/Press-test.internal.js\n+++ b\/packages\/react-events\/src\/__tests__\/Press-test.internal.js\n@@ -1269,13 +1269,13 @@ describe('Event responder: Press', () => {\n createPointerEvent('pointerup', {pageX: 10, pageY: 10}),\n );\n expect(events).toEqual([\n- 'pointerdown',\n 'inner: onPressStart',\n 'inner: onPressChange',\n- 'pointerup',\n+ 'pointerdown',\n 'inner: onPressEnd',\n 'inner: onPressChange',\n 'inner: onPress',\n+ 'pointerup',\n ]);\n });\n \ndiff --git a\/packages\/shared\/ReactTypes.js b\/packages\/shared\/ReactTypes.js\nindex 7a28c554a6..72d66cd381 100644\n--- a\/packages\/shared\/ReactTypes.js\n+++ b\/packages\/shared\/ReactTypes.js\n@@ -83,7 +83,7 @@ export type RefObject = {|\n \n export type ReactEventResponderEventType =\n | string\n- | {name: string, passive?: boolean, capture?: boolean};\n+ | {name: string, passive?: boolean};\n \n export type ReactEventResponder = {\n targetEventTypes?: Array,\ndiff --git a\/scripts\/flow\/environment.js b\/scripts\/flow\/environment.js\nindex 153e6b37a8..8a0806c4a9 100644\n--- a\/scripts\/flow\/environment.js\n+++ b\/scripts\/flow\/environment.js\n@@ -39,5 +39,11 @@ declare module 'EventListener' {\n options?: {passive: boolean},\n ) => mixed,\n capture: (target: Element, type: string, callback: Function) => mixed,\n+ captureWithPassiveFlag: (\n+ target: Element,\n+ type: string,\n+ callback: Function,\n+ passive: boolean,\n+ ) => mixed,\n };\n }\n","commit":{"subject":"Event API: use `capture` for all event listeners using experimental responder system (#15526)","authorName":"Dominic Gannaway","authorEmail":"trueadm@users.noreply.github.com","authoredAt":"2019-04-30T11:40:45+01:00","revision":"bd88982fbff117ebc044a33702906c32940c653b","shortRevision":"bd88982fbf"},"parents":["72ca3c60e7c02a4e9ebc6218b144249c6b5639b9"],"body":""}

dillon1000/react

Files changed