Skip to content

Commit

Permalink
Add additional event API responder surfaces (#15248)
Browse files Browse the repository at this point in the history
* Add rest of event modules + small fixes
  • Loading branch information
trueadm authored Mar 29, 2019
1 parent 700f17b commit a41b217
Show file tree
Hide file tree
Showing 14 changed files with 659 additions and 14 deletions.
9 changes: 7 additions & 2 deletions packages/events/EventTypes.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@

import SyntheticEvent from 'events/SyntheticEvent';
import type {AnyNativeEvent} from 'events/PluginModuleType';
import type {ReactEventResponderEventType} from 'shared/ReactTypes';

export type EventResponderContext = {
event: AnyNativeEvent,
Expand All @@ -30,8 +31,12 @@ export type EventResponderContext = {
isTargetOwned: EventTarget => boolean,
isTargetWithinEventComponent: EventTarget => boolean,
isPositionWithinTouchHitTarget: (x: number, y: number) => boolean,
addRootEventTypes: (rootEventTypes: Array<string>) => void,
removeRootEventTypes: (rootEventTypes: Array<string>) => void,
addRootEventTypes: (
rootEventTypes: Array<ReactEventResponderEventType>,
) => void,
removeRootEventTypes: (
rootEventTypes: Array<ReactEventResponderEventType>,
) => void,
requestOwnership: (target: EventTarget | null) => boolean,
releaseOwnership: (target: EventTarget | null) => boolean,
};
34 changes: 28 additions & 6 deletions packages/react-dom/src/events/DOMEventResponderSystem.js
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ const targetEventTypeCached: Map<
Array<ReactEventResponderEventType>,
Set<DOMTopLevelEventType>,
> = new Map();
const targetOwnership: Map<EventTarget, Fiber> = new Map();

type EventListener = (event: SyntheticEvent) => void;

Expand Down Expand Up @@ -204,16 +205,37 @@ DOMEventResponderContext.prototype.isPositionWithinTouchHitTarget = function() {
// TODO
};

DOMEventResponderContext.prototype.isTargetOwned = function() {
// TODO
DOMEventResponderContext.prototype.isTargetOwned = function(
targetElement: Element | Node,
): boolean {
const targetDoc = targetElement.ownerDocument;
return targetOwnership.has(targetDoc);
};

DOMEventResponderContext.prototype.requestOwnership = function() {
// TODO
DOMEventResponderContext.prototype.requestOwnership = function(
targetElement: Element | Node,
): boolean {
const targetDoc = targetElement.ownerDocument;
if (targetOwnership.has(targetDoc)) {
return false;
}
targetOwnership.set(targetDoc, this._fiber);
return true;
};

DOMEventResponderContext.prototype.releaseOwnership = function() {
// TODO
DOMEventResponderContext.prototype.releaseOwnership = function(
targetElement: Element | Node,
): boolean {
const targetDoc = targetElement.ownerDocument;
if (!targetOwnership.has(targetDoc)) {
return false;
}
const owner = targetOwnership.get(targetDoc);
if (owner === this._fiber || owner === this._fiber.alternate) {
targetOwnership.delete(targetDoc);
return true;
}
return false;
};

function getTargetEventTypes(
Expand Down
14 changes: 14 additions & 0 deletions packages/react-events/drag.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow
*/

'use strict';

const Drag = require('./src/Drag');

module.exports = Drag.default || Drag;
14 changes: 14 additions & 0 deletions packages/react-events/focus.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow
*/

'use strict';

const Focus = require('./src/Focus');

module.exports = Focus.default || Focus;
7 changes: 7 additions & 0 deletions packages/react-events/npm/drag.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
'use strict';

if (process.env.NODE_ENV === 'production') {
module.exports = require('./cjs/react-events-drag.production.min.js');
} else {
module.exports = require('./cjs/react-events-drag.development.js');
}
7 changes: 7 additions & 0 deletions packages/react-events/npm/focus.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
'use strict';

if (process.env.NODE_ENV === 'production') {
module.exports = require('./cjs/react-events-focus.production.min.js');
} else {
module.exports = require('./cjs/react-events-focus.development.js');
}
7 changes: 7 additions & 0 deletions packages/react-events/npm/swipe.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
'use strict';

if (process.env.NODE_ENV === 'production') {
module.exports = require('./cjs/react-events-swipe.production.min.js');
} else {
module.exports = require('./cjs/react-events-swipe.development.js');
}
5 changes: 5 additions & 0 deletions packages/react-events/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,11 @@
"LICENSE",
"README.md",
"press.js",
"hover.js",
"focus.js",
"swipe.js",
"drag.js",
"index.js",
"build-info.json",
"cjs/",
"umd/"
Expand Down
187 changes: 187 additions & 0 deletions packages/react-events/src/Drag.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,187 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow
*/

import type {EventResponderContext} from 'events/EventTypes';
import {REACT_EVENT_COMPONENT_TYPE} from 'shared/ReactSymbols';

const targetEventTypes = ['pointerdown', 'pointercancel'];
const rootEventTypes = ['pointerup', {name: 'pointermove', passive: false}];

type DragState = {
dragTarget: null | EventTarget,
isPointerDown: boolean,
isDragging: boolean,
startX: number,
startY: number,
x: number,
y: number,
};

// In the case we don't have PointerEvents (Safari), we listen to touch events
// too
if (typeof window !== 'undefined' && window.PointerEvent === undefined) {
targetEventTypes.push('touchstart', 'touchend', 'mousedown', 'touchcancel');
rootEventTypes.push('mouseup', 'mousemove', {
name: 'touchmove',
passive: false,
});
}

function dispatchDragEvent(
context: EventResponderContext,
name: string,
listener: (e: Object) => void,
state: DragState,
discrete: boolean,
eventData?: {
diffX: number,
diffY: number,
},
): void {
context.dispatchEvent(name, listener, state.dragTarget, discrete, eventData);
}

const DragResponder = {
targetEventTypes,
createInitialState(): DragState {
return {
dragTarget: null,
isPointerDown: false,
isDragging: false,
startX: 0,
startY: 0,
x: 0,
y: 0,
};
},
handleEvent(
context: EventResponderContext,
props: Object,
state: DragState,
): void {
const {eventTarget, eventType, event} = context;

switch (eventType) {
case 'touchstart':
case 'mousedown':
case 'pointerdown': {
if (!state.isDragging) {
const obj =
eventType === 'touchstart' ? (event: any).changedTouches[0] : event;
const x = (state.startX = (obj: any).screenX);
const y = (state.startY = (obj: any).screenY);
state.x = x;
state.y = y;
state.dragTarget = eventTarget;
state.isPointerDown = true;
context.addRootEventTypes(rootEventTypes);
}
break;
}
case 'touchmove':
case 'mousemove':
case 'pointermove': {
if (context.isPassive()) {
return;
}
if (state.isPointerDown) {
const obj =
eventType === 'touchmove' ? (event: any).changedTouches[0] : event;
const x = (obj: any).screenX;
const y = (obj: any).screenY;
state.x = x;
state.y = y;
if (!state.isDragging && x !== state.startX && y !== state.startY) {
let shouldEnableDragging = true;

if (
props.onShouldClaimOwnership &&
props.onShouldClaimOwnership()
) {
shouldEnableDragging = context.requestOwnership(state.dragTarget);
}
if (shouldEnableDragging) {
state.isDragging = true;
if (props.onDragChange) {
const dragChangeEventListener = () => {
props.onDragChange(true);
};
context.dispatchEvent(
'dragchange',
dragChangeEventListener,
state.dragTarget,
true,
);
}
} else {
state.dragTarget = null;
state.isPointerDown = false;
context.removeRootEventTypes(rootEventTypes);
}
} else {
if (props.onDragMove) {
const eventData = {
diffX: x - state.startX,
diffY: y - state.startY,
};
dispatchDragEvent(
context,
'dragmove',
props.onDragMove,
state,
false,
eventData,
);
}
(event: any).preventDefault();
}
}
break;
}
case 'pointercancel':
case 'touchcancel':
case 'touchend':
case 'mouseup':
case 'pointerup': {
if (state.isDragging) {
if (props.onShouldClaimOwnership) {
context.releaseOwnership(state.dragTarget);
}
if (props.onDragEnd) {
dispatchDragEvent(context, 'dragend', props.onDragEnd, state, true);
}
if (props.onDragChange) {
const dragChangeEventListener = () => {
props.onDragChange(false);
};
context.dispatchEvent(
'dragchange',
dragChangeEventListener,
state.dragTarget,
true,
);
}
state.isDragging = false;
}
if (state.isPointerDown) {
state.dragTarget = null;
state.isPointerDown = false;
context.removeRootEventTypes(rootEventTypes);
}
break;
}
}
},
};

export default {
$$typeof: REACT_EVENT_COMPONENT_TYPE,
props: null,
responder: DragResponder,
};
Loading

0 comments on commit a41b217

Please sign in to comment.