Skip to content

Commit

Permalink
Event API: normalize event timeStamp property to be in event system (#…
Browse files Browse the repository at this point in the history 
…15598)
  • Loading branch information
@trueadm
trueadm authored May 9, 2019
1 parent 3669b90 commit e33e32d
Show file tree
Hide file tree
Showing 8 changed files with 80 additions and 76 deletions.
27 changes: 21 additions & 6 deletions packages/react-dom/src/events/DOMEventResponderSystem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ type ResponderTimer = {|
instance: ReactEventComponentInstance,
func: () => void,
id: Symbol,
timeStamp: number,
|};

const activeTimeouts: Map<Symbol, ResponderTimeout> = new Map();
Expand All @@ -90,6 +91,7 @@ const responderOwners: Map<
> = new Map();
let globalOwner = null;

let currentTimeStamp = 0;
let currentTimers = new Map();
let currentInstance: null | ReactEventComponentInstance = null;
let currentEventQueue: null | EventQueue = null;
Expand All @@ -101,11 +103,11 @@ const eventResponderContext: ReactResponderContext = {
{discrete}: ReactResponderDispatchEventOptions,
): void {
validateResponderContext();
const {target, type} = possibleEventObject;
const {target, type, timeStamp} = possibleEventObject;

if (target == null || type == null) {
if (target == null || type == null || timeStamp == null) {
throw new Error(
'context.dispatchEvent: "target" and "type" fields on event object are required.',
'context.dispatchEvent: "target", "timeStamp", and "type" fields on event object are required.',
);
}
if (__DEV__) {
Expand Down Expand Up @@ -313,7 +315,7 @@ const eventResponderContext: ReactResponderContext = {
if (timeout === undefined) {
const timers = new Map();
const id = setTimeout(() => {
processTimers(timers);
processTimers(timers, delay);
}, delay);
timeout = {
id,
Expand All @@ -325,6 +327,7 @@ const eventResponderContext: ReactResponderContext = {
instance: ((currentInstance: any): ReactEventComponentInstance),
func,
id: timerId,
timeStamp: currentTimeStamp,
});
activeTimeouts.set(timerId, timeout);
return timerId;
Expand Down Expand Up @@ -408,6 +411,9 @@ const eventResponderContext: ReactResponderContext = {
}
return currentTarget;
},
getTimeStamp(): number {
return currentTimeStamp;
},
};

function isTargetWithinEventComponent(target: Element | Document): boolean {
Expand Down Expand Up @@ -478,13 +484,17 @@ function isFiberHostComponentFocusable(fiber: Fiber): boolean {
);
}

function processTimers(timers: Map<Symbol, ResponderTimer>): void {
function processTimers(
timers: Map<Symbol, ResponderTimer>,
delay: number,
): void {
const timersArr = Array.from(timers.values());
currentEventQueue = createEventQueue();
try {
for (let i = 0; i < timersArr.length; i++) {
const {instance, func, id} = timersArr[i];
const {instance, func, id, timeStamp} = timersArr[i];
currentInstance = instance;
currentTimeStamp = timeStamp + delay;
try {
func();
} finally {
Expand All @@ -496,6 +506,7 @@ function processTimers(timers: Map<Symbol, ResponderTimer>): void {
currentTimers = null;
currentInstance = null;
currentEventQueue = null;
currentTimeStamp = 0;
}
}

Expand Down Expand Up @@ -861,8 +872,11 @@ export function dispatchEventForResponderEventSystem(
const previousEventQueue = currentEventQueue;
const previousInstance = currentInstance;
const previousTimers = currentTimers;
const previousTimeStamp = currentTimeStamp;
currentTimers = null;
currentEventQueue = createEventQueue();
// We might want to control timeStamp another way here
currentTimeStamp = (nativeEvent: any).timeStamp;
try {
traverseAndHandleEventResponderInstances(
topLevelType,
Expand All @@ -876,6 +890,7 @@ export function dispatchEventForResponderEventSystem(
currentTimers = previousTimers;
currentInstance = previousInstance;
currentEventQueue = previousEventQueue;
currentTimeStamp = previousTimeStamp;
}
}
}
Expand Down
6 changes: 6 additions & 0 deletions packages/react-dom/src/events/__tests__/DOMEventResponderSystem-test.internal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -422,6 +422,7 @@ describe('DOMEventResponderSystem', () => {
target: event.target,
type: 'magicclick',
phase: 'bubble',
timeStamp: context.getTimeStamp(),
};
context.dispatchEvent(syntheticEvent, props.onMagicClick, {
discrete: true,
Expand All @@ -434,6 +435,7 @@ describe('DOMEventResponderSystem', () => {
target: event.target,
type: 'magicclick',
phase: 'capture',
timeStamp: context.getTimeStamp(),
};
context.dispatchEvent(syntheticEvent, props.onMagicClick, {
discrete: true,
Expand Down Expand Up @@ -477,6 +479,7 @@ describe('DOMEventResponderSystem', () => {
target: event.target,
type: 'press',
phase,
timeStamp: context.getTimeStamp(),
};
context.dispatchEvent(pressEvent, props.onPress, {discrete: true});

Expand All @@ -486,6 +489,7 @@ describe('DOMEventResponderSystem', () => {
target: event.target,
type: 'longpress',
phase,
timeStamp: context.getTimeStamp(),
};
context.dispatchEvent(longPressEvent, props.onLongPress, {
discrete: true,
Expand All @@ -497,6 +501,7 @@ describe('DOMEventResponderSystem', () => {
target: event.target,
type: 'longpresschange',
phase,
timeStamp: context.getTimeStamp(),
};
context.dispatchEvent(longPressChangeEvent, props.onLongPressChange, {
discrete: true,
Expand Down Expand Up @@ -901,6 +906,7 @@ describe('DOMEventResponderSystem', () => {
const syntheticEvent = {
target: event.target,
type: 'click',
timeStamp: context.getTimeStamp(),
};
context.dispatchEvent(syntheticEvent, props.onClick, {
discrete: true,
Expand Down
5 changes: 4 additions & 1 deletion packages/react-events/src/Drag.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,18 +50,21 @@ type DragEventType = 'dragstart' | 'dragend' | 'dragchange' | 'dragmove';
type DragEvent = {|
target: Element | Document,
type: DragEventType,
timeStamp: number,
diffX?: number,
diffY?: number,
|};

function createDragEvent(
context: ReactResponderContext,
type: DragEventType,
target: Element | Document,
eventData?: EventData,
): DragEvent {
return {
target,
type,
timeStamp: context.getTimeStamp(),
...eventData,
};
}
Expand All @@ -75,7 +78,7 @@ function dispatchDragEvent(
eventData?: EventData,
): void {
const target = ((state.dragTarget: any): Element | Document);
const syntheticEvent = createDragEvent(name, target, eventData);
const syntheticEvent = createDragEvent(context, name, target, eventData);
context.dispatchEvent(syntheticEvent, listener, {discrete});
}

Expand Down
23 changes: 17 additions & 6 deletions packages/react-events/src/Focus.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ type FocusEventType = 'focus' | 'blur' | 'focuschange' | 'focusvisiblechange';
type FocusEvent = {|
target: Element | Document,
type: FocusEventType,
timeStamp: number,
|};

const targetEventTypes = [
Expand All @@ -56,12 +57,14 @@ const rootEventTypes = [
];

function createFocusEvent(
context: ReactResponderContext,
type: FocusEventType,
target: Element | Document,
): FocusEvent {
return {
target,
type,
timeStamp: context.getTimeStamp(),
};
}

Expand All @@ -72,21 +75,25 @@ function dispatchFocusInEvents(
) {
const target = ((state.focusTarget: any): Element | Document);
if (props.onFocus) {
const syntheticEvent = createFocusEvent('focus', target);
const syntheticEvent = createFocusEvent(context, 'focus', target);
context.dispatchEvent(syntheticEvent, props.onFocus, {discrete: true});
}
if (props.onFocusChange) {
const listener = () => {
props.onFocusChange(true);
};
const syntheticEvent = createFocusEvent('focuschange', target);
const syntheticEvent = createFocusEvent(context, 'focuschange', target);
context.dispatchEvent(syntheticEvent, listener, {discrete: true});
}
if (props.onFocusVisibleChange && state.isLocalFocusVisible) {
const listener = () => {
props.onFocusVisibleChange(true);
};
const syntheticEvent = createFocusEvent('focusvisiblechange', target);
const syntheticEvent = createFocusEvent(
context,
'focusvisiblechange',
target,
);
context.dispatchEvent(syntheticEvent, listener, {discrete: true});
}
}
Expand All @@ -98,14 +105,14 @@ function dispatchFocusOutEvents(
) {
const target = ((state.focusTarget: any): Element | Document);
if (props.onBlur) {
const syntheticEvent = createFocusEvent('blur', target);
const syntheticEvent = createFocusEvent(context, 'blur', target);
context.dispatchEvent(syntheticEvent, props.onBlur, {discrete: true});
}
if (props.onFocusChange) {
const listener = () => {
props.onFocusChange(false);
};
const syntheticEvent = createFocusEvent('focuschange', target);
const syntheticEvent = createFocusEvent(context, 'focuschange', target);
context.dispatchEvent(syntheticEvent, listener, {discrete: true});
}
dispatchFocusVisibleOutEvent(context, props, state);
Expand All @@ -121,7 +128,11 @@ function dispatchFocusVisibleOutEvent(
const listener = () => {
props.onFocusVisibleChange(false);
};
const syntheticEvent = createFocusEvent('focusvisiblechange', target);
const syntheticEvent = createFocusEvent(
context,
'focusvisiblechange',
target,
);
context.dispatchEvent(syntheticEvent, listener, {discrete: true});
state.isLocalFocusVisible = false;
}
Expand Down
7 changes: 7 additions & 0 deletions packages/react-events/src/Hover.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ type HoverEventType = 'hoverstart' | 'hoverend' | 'hoverchange' | 'hovermove';
type HoverEvent = {|
target: Element | Document,
type: HoverEventType,
timeStamp: number,
|};

const DEFAULT_HOVER_END_DELAY_MS = 0;
Expand All @@ -60,12 +61,14 @@ if (typeof window !== 'undefined' && window.PointerEvent === undefined) {
}

function createHoverEvent(
context: ReactResponderContext,
type: HoverEventType,
target: Element | Document,
): HoverEvent {
return {
target,
type,
timeStamp: context.getTimeStamp(),
};
}

Expand All @@ -79,6 +82,7 @@ function dispatchHoverChangeEvent(
props.onHoverChange(bool);
};
const syntheticEvent = createHoverEvent(
context,
'hoverchange',
((state.hoverTarget: any): Element | Document),
);
Expand Down Expand Up @@ -115,6 +119,7 @@ function dispatchHoverStartEvents(

if (props.onHoverStart) {
const syntheticEvent = createHoverEvent(
context,
'hoverstart',
((target: any): Element | Document),
);
Expand Down Expand Up @@ -174,6 +179,7 @@ function dispatchHoverEndEvents(

if (props.onHoverEnd) {
const syntheticEvent = createHoverEvent(
context,
'hoverend',
((target: any): Element | Document),
);
Expand Down Expand Up @@ -311,6 +317,7 @@ const HoverResponder = {
} else {
if (props.onHoverMove && state.hoverTarget !== null) {
const syntheticEvent = createHoverEvent(
context,
'hovermove',
state.hoverTarget,
);
Expand Down
Loading

0 comments on commit e33e32d

Please sign in to comment.