diff --git a/packages/react-dom/src/events/DOMEventResponderSystem.js b/packages/react-dom/src/events/DOMEventResponderSystem.js index 6a19728470..58faa75dc7 100644 --- a/packages/react-dom/src/events/DOMEventResponderSystem.js +++ b/packages/react-dom/src/events/DOMEventResponderSystem.js @@ -79,17 +79,17 @@ type PartialEventObject = { type ResponderTimeout = {| id: TimeoutID, - timers: Map, + timers: Map, |}; type ResponderTimer = {| instance: ReactEventComponentInstance, func: () => void, - id: Symbol, + id: number, timeStamp: number, |}; -const activeTimeouts: Map = new Map(); +const activeTimeouts: Map = new Map(); const rootEventTypesToEventComponentInstances: Map< DOMTopLevelEventType | string, Set, @@ -117,6 +117,7 @@ let currentTimeStamp = 0; let currentTimers = new Map(); let currentInstance: null | ReactEventComponentInstance = null; let currentEventQueue: null | EventQueue = null; +let currentTimerIDCounter = 0; const eventResponderContext: ReactResponderContext = { dispatchEvent( @@ -340,14 +341,14 @@ const eventResponderContext: ReactResponderContext = { ((currentInstance: any): ReactEventComponentInstance), ); }, - setTimeout(func: () => void, delay): Symbol { + setTimeout(func: () => void, delay): number { validateResponderContext(); if (currentTimers === null) { currentTimers = new Map(); } let timeout = currentTimers.get(delay); - const timerId = Symbol(); + const timerId = currentTimerIDCounter++; if (timeout === undefined) { const timers = new Map(); const id = setTimeout(() => { @@ -368,7 +369,7 @@ const eventResponderContext: ReactResponderContext = { activeTimeouts.set(timerId, timeout); return timerId; }, - clearTimeout(timerId: Symbol): void { + clearTimeout(timerId: number): void { validateResponderContext(); const timeout = activeTimeouts.get(timerId); @@ -550,7 +551,7 @@ function isFiberHostComponentFocusable(fiber: Fiber): boolean { } function processTimers( - timers: Map, + timers: Map, delay: number, ): void { const timersArr = Array.from(timers.values()); diff --git a/packages/react-events/src/Hover.js b/packages/react-events/src/Hover.js index 9d557ab0ff..b47fa9d66c 100644 --- a/packages/react-events/src/Hover.js +++ b/packages/react-events/src/Hover.js @@ -33,8 +33,8 @@ type HoverState = { isHovered: boolean, isOverTouchHitTarget: boolean, isTouched: boolean, - hoverStartTimeout: null | Symbol, - hoverEndTimeout: null | Symbol, + hoverStartTimeout: null | number, + hoverEndTimeout: null | number, ignoreEmulatedMouseEvents: boolean, }; diff --git a/packages/react-events/src/Press.js b/packages/react-events/src/Press.js index afa71b283f..9e89bc9be0 100644 --- a/packages/react-events/src/Press.js +++ b/packages/react-events/src/Press.js @@ -53,11 +53,11 @@ type PressState = { isLongPressed: boolean, isPressed: boolean, isPressWithinResponderRegion: boolean, - longPressTimeout: null | Symbol, + longPressTimeout: null | number, pointerType: PointerType, pressTarget: null | Element, - pressEndTimeout: null | Symbol, - pressStartTimeout: null | Symbol, + pressEndTimeout: null | number, + pressStartTimeout: null | number, responderRegionOnActivation: null | $ReadOnly<{| bottom: number, left: number, diff --git a/packages/react/src/ReactCreateEventComponent.js b/packages/react/src/ReactCreateEventComponent.js index 70bd83e989..87a1135846 100644 --- a/packages/react/src/ReactCreateEventComponent.js +++ b/packages/react/src/ReactCreateEventComponent.js @@ -11,12 +11,34 @@ import {enableEventAPI} from 'shared/ReactFeatureFlags'; import {REACT_EVENT_COMPONENT_TYPE} from 'shared/ReactSymbols'; +let hasBadMapPolyfill; + +if (__DEV__) { + hasBadMapPolyfill = false; + try { + const frozenObject = Object.freeze({}); + const testMap = new Map([[frozenObject, null]]); + const testSet = new Set([frozenObject]); + // This is necessary for Rollup to not consider these unused. + // https://github.com/rollup/rollup/issues/1771 + // TODO: we can remove these if Rollup fixes the bug. + testMap.set(0, 0); + testSet.add(0); + } catch (e) { + // TODO: Consider warning about bad polyfills + hasBadMapPolyfill = true; + } +} + export function createEventComponent( responder: ReactEventResponder, displayName: string, ): ?ReactEventComponent { if (enableEventAPI) { - if (__DEV__) { + // We use responder as a Map key later on. When we have a bad + // polyfill, then we can't use it as a key as the polyfill tries + // to add a property to the object. + if (__DEV__ && !hasBadMapPolyfill) { Object.freeze(responder); } const eventComponent = { diff --git a/packages/shared/ReactTypes.js b/packages/shared/ReactTypes.js index 5d7b32fe7d..3bfd77ea53 100644 --- a/packages/shared/ReactTypes.js +++ b/packages/shared/ReactTypes.js @@ -187,8 +187,8 @@ export type ReactResponderContext = { requestResponderOwnership: () => boolean, requestGlobalOwnership: () => boolean, releaseOwnership: () => boolean, - setTimeout: (func: () => void, timeout: number) => Symbol, - clearTimeout: (timerId: Symbol) => void, + setTimeout: (func: () => void, timeout: number) => number, + clearTimeout: (timerId: number) => void, getFocusableElementsInScope(): Array, getActiveDocument(): Document, objectAssign: Function,