@samitouri / QOS-React / commits / 2282400850

Delete TapEventPlugin (#13630)

Dan Abramov committed Sep 12, 2018 at 19:53 UTC 2282400850ff51892d581da782fdbc98047b8fc3
6 files changed -404
packages/react-dom/src/client/ReactDOMFB.js
-5
@@ -7,7 +7,6 @@
7 * @flow
8 */
9
10 -import * as EventPluginHub from 'events/EventPluginHub';
10 import * as ReactFiberTreeReflection from 'react-reconciler/reflection';
11 import * as ReactInstanceMap from 'shared/ReactInstanceMap';
12 import {addUserTimingListener} from 'shared/ReactFeatureFlags';
@@ -15,7 +14,6 @@ import {addUserTimingListener} from 'shared/ReactFeatureFlags';
14 import ReactDOM from './ReactDOM';
15 import * as ReactBrowserEventEmitter from '../events/ReactBrowserEventEmitter';
16 import * as ReactDOMComponentTree from './ReactDOMComponentTree';
18 -import TapEventPlugin from '../events/TapEventPlugin';
17
18 Object.assign(
19 (ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: any),
@@ -25,9 +23,6 @@ Object.assign(
23 ReactFiberTreeReflection,
24 ReactDOMComponentTree,
25 ReactInstanceMap,
28 - // Used by www msite:
29 - EventPluginHub,
30 - TapEventPlugin,
26 // Perf experiment
27 addUserTimingListener,
28 },
packages/react-dom/src/events/DOMEventPluginOrder.js
-1
@@ -17,7 +17,6 @@
17 const DOMEventPluginOrder = [
18 'ResponderEventPlugin',
19 'SimpleEventPlugin',
20 - 'TapEventPlugin',
20 'EnterLeaveEventPlugin',
21 'ChangeEventPlugin',
22 'SelectEventPlugin',
packages/react-dom/src/events/TapEventPlugin.js deleted
-203
@@ -1,203 +0,0 @@
1 -/**
2 - * Copyright (c) Facebook, Inc. and its affiliates.
3 - *
4 - * This source code is licensed under the MIT license found in the
5 - * LICENSE file in the root directory of this source tree.
6 - *
7 - * @flow
8 - */
9 -
10 -import {accumulateTwoPhaseDispatches} from 'events/EventPropagators';
11 -import type {TopLevelType} from 'events/TopLevelEventTypes';
12 -
13 -import {
14 - TOP_MOUSE_DOWN,
15 - TOP_MOUSE_MOVE,
16 - TOP_MOUSE_UP,
17 - TOP_POINTER_CANCEL,
18 - TOP_POINTER_DOWN,
19 - TOP_POINTER_UP,
20 - TOP_POINTER_MOVE,
21 - TOP_TOUCH_CANCEL,
22 - TOP_TOUCH_END,
23 - TOP_TOUCH_MOVE,
24 - TOP_TOUCH_START,
25 -} from './DOMTopLevelEventTypes';
26 -import SyntheticUIEvent from './SyntheticUIEvent';
27 -
28 -function isStartish(topLevelType) {
29 - return (
30 - topLevelType === TOP_MOUSE_DOWN ||
31 - topLevelType === TOP_TOUCH_START ||
32 - topLevelType === TOP_POINTER_DOWN
33 - );
34 -}
35 -
36 -function isEndish(topLevelType) {
37 - return (
38 - topLevelType === TOP_MOUSE_UP ||
39 - topLevelType === TOP_POINTER_CANCEL ||
40 - topLevelType === TOP_POINTER_UP ||
41 - topLevelType === TOP_TOUCH_CANCEL ||
42 - topLevelType === TOP_TOUCH_END
43 - );
44 -}
45 -
46 -/**
47 - * We are extending the Flow 'Touch' declaration to enable using bracket
48 - * notation to access properties.
49 - * Without this adjustment Flow throws
50 - * "Indexable signature not found in Touch".
51 - * See https://github.com/facebook/flow/issues/1323
52 - */
53 -type TouchPropertyKey = 'clientX' | 'clientY' | 'pageX' | 'pageY';
54 -
55 -declare class _Touch extends Touch {
56 - [key: TouchPropertyKey]: number;
57 -}
58 -
59 -type AxisCoordinateData = {
60 - page: TouchPropertyKey,
61 - client: TouchPropertyKey,
62 - envScroll: 'currentPageScrollLeft' | 'currentPageScrollTop',
63 -};
64 -
65 -type AxisType = {
66 - x: AxisCoordinateData,
67 - y: AxisCoordinateData,
68 -};
69 -
70 -type CoordinatesType = {
71 - x: number,
72 - y: number,
73 -};
74 -
75 -/**
76 - * Number of pixels that are tolerated in between a `touchStart` and `touchEnd`
77 - * in order to still be considered a 'tap' event.
78 - */
79 -const tapMoveThreshold = 10;
80 -const startCoords: CoordinatesType = {x: 0, y: 0};
81 -
82 -const Axis: AxisType = {
83 - x: {page: 'pageX', client: 'clientX', envScroll: 'currentPageScrollLeft'},
84 - y: {page: 'pageY', client: 'clientY', envScroll: 'currentPageScrollTop'},
85 -};
86 -
87 -function extractSingleTouch(nativeEvent) {
88 - // $FlowFixMe: figure out why this is missing
89 - const touches = nativeEvent.touches;
90 - // $FlowFixMe: figure out why this is missing
91 - const changedTouches = nativeEvent.changedTouches;
92 - const hasTouches = touches && touches.length > 0;
93 - const hasChangedTouches = changedTouches && changedTouches.length > 0;
94 -
95 - return !hasTouches && hasChangedTouches
96 - ? changedTouches[0]
97 - : hasTouches
98 - ? touches[0]
99 - : nativeEvent;
100 -}
101 -
102 -function getAxisCoordOfEvent(
103 - axis: AxisCoordinateData,
104 - nativeEvent: _Touch,
105 -): number {
106 - const singleTouch = extractSingleTouch(nativeEvent);
107 - if (singleTouch) {
108 - return singleTouch[axis.page];
109 - }
110 - return nativeEvent[axis.page];
111 -}
112 -
113 -function getDistance(coords: CoordinatesType, nativeEvent: _Touch): number {
114 - const pageX = getAxisCoordOfEvent(Axis.x, nativeEvent);
115 - const pageY = getAxisCoordOfEvent(Axis.y, nativeEvent);
116 - return Math.pow(
117 - Math.pow(pageX - coords.x, 2) + Math.pow(pageY - coords.y, 2),
118 - 0.5,
119 - );
120 -}
121 -
122 -const touchEvents = [
123 - TOP_TOUCH_START,
124 - TOP_TOUCH_CANCEL,
125 - TOP_TOUCH_END,
126 - TOP_TOUCH_MOVE,
127 -];
128 -
129 -const pointerEvents = [
130 - TOP_POINTER_CANCEL,
131 - TOP_POINTER_DOWN,
132 - TOP_POINTER_MOVE,
133 - TOP_POINTER_UP,
134 -];
135 -
136 -const dependencies: Array<TopLevelType> = [
137 - TOP_MOUSE_DOWN,
138 - TOP_MOUSE_MOVE,
139 - TOP_MOUSE_UP,
140 -].concat(touchEvents, pointerEvents);
141 -
142 -const eventTypes = {
143 - touchTap: {
144 - phasedRegistrationNames: {
145 - bubbled: 'onTouchTap',
146 - captured: 'onTouchTapCapture',
147 - },
148 - dependencies: dependencies,
149 - },
150 -};
151 -
152 -let usedTouch = false;
153 -let usedTouchTime = 0;
154 -const TOUCH_DELAY = 1000;
155 -
156 -const TapEventPlugin = {
157 - tapMoveThreshold: tapMoveThreshold,
158 -
159 - eventTypes: eventTypes,
160 -
161 - extractEvents: function(
162 - topLevelType: TopLevelType,
163 - targetInst: mixed,
164 - nativeEvent: _Touch,
165 - nativeEventTarget: EventTarget,
166 - ) {
167 - if (!isStartish(topLevelType) && !isEndish(topLevelType)) {
168 - return null;
169 - }
170 - // on ios, there is a delay after touch event and synthetic
171 - // mouse events, so that user can perform double tap
172 - // solution: ignore mouse events following touchevent within small timeframe
173 - if (touchEvents.indexOf(topLevelType) !== -1) {
174 - usedTouch = true;
175 - usedTouchTime = Date.now();
176 - } else {
177 - if (usedTouch && Date.now() - usedTouchTime < TOUCH_DELAY) {
178 - return null;
179 - }
180 - }
181 - let event = null;
182 - const distance = getDistance(startCoords, nativeEvent);
183 - if (isEndish(topLevelType) && distance < tapMoveThreshold) {
184 - event = SyntheticUIEvent.getPooled(
185 - eventTypes.touchTap,
186 - targetInst,
187 - nativeEvent,
188 - nativeEventTarget,
189 - );
190 - }
191 - if (isStartish(topLevelType)) {
192 - startCoords.x = getAxisCoordOfEvent(Axis.x, nativeEvent);
193 - startCoords.y = getAxisCoordOfEvent(Axis.y, nativeEvent);
194 - } else if (isEndish(topLevelType)) {
195 - startCoords.x = 0;
196 - startCoords.y = 0;
197 - }
198 - accumulateTwoPhaseDispatches(event);
199 - return event;
200 - },
201 -};
202 -
203 -export default TapEventPlugin;
packages/react-dom/src/events/__tests__/TapEventPlugin-test.internal.js deleted
-165
@@ -1,165 +0,0 @@
1 -/**
2 - * Copyright (c) Facebook, Inc. and its affiliates.
3 - *
4 - * This source code is licensed under the MIT license found in the
5 - * LICENSE file in the root directory of this source tree.
6 - *
7 - * @emails react-core
8 - */
9 -
10 -'use strict';
11 -
12 -let EventPluginHub;
13 -let React;
14 -let ReactDOM;
15 -let ReactTestUtils;
16 -let TapEventPlugin;
17 -
18 -let tapMoveThreshold;
19 -let idCallOrder;
20 -const recordID = function(id) {
21 - idCallOrder.push(id);
22 -};
23 -const LISTENER = jest.fn();
24 -const ON_TOUCH_TAP_KEY = 'onTouchTap';
25 -
26 -let GRANDPARENT;
27 -let PARENT;
28 -let CHILD;
29 -
30 -let putListener;
31 -let container;
32 -
33 -function touchStart(element, touchEventInit) {
34 - element.dispatchEvent(
35 - new TouchEvent('touchstart', {
36 - bubbles: true,
37 - cancelable: true,
38 - ...touchEventInit,
39 - }),
40 - );
41 -}
42 -
43 -function touchEnd(element, touchEventInit) {
44 - element.dispatchEvent(
45 - new TouchEvent('touchend', {
46 - bubbles: true,
47 - cancelable: true,
48 - ...touchEventInit,
49 - }),
50 - );
51 -}
52 -
53 -describe('TapEventPlugin', () => {
54 - beforeEach(() => {
55 - jest.resetModules();
56 - LISTENER.mockClear();
57 -
58 - EventPluginHub = require('events/EventPluginHub');
59 - React = require('react');
60 - ReactDOM = require('react-dom');
61 - ReactTestUtils = require('react-dom/test-utils');
62 - TapEventPlugin = require('react-dom/src/events/TapEventPlugin').default;
63 -
64 - container = document.createElement('div');
65 - document.body.appendChild(container);
66 -
67 - const GRANDPARENT_PROPS = {};
68 - const PARENT_PROPS = {};
69 - const CHILD_PROPS = {};
70 -
71 - function Child(props) {
72 - return <div ref={c => (CHILD = c)} {...props} />;
73 - }
74 -
75 - class ChildWrapper extends React.PureComponent {
76 - render() {
77 - return <Child {...this.props} />;
78 - }
79 - }
80 -
81 - function renderTree() {
82 - ReactDOM.render(
83 - <div ref={c => (GRANDPARENT = c)} {...GRANDPARENT_PROPS}>
84 - <div ref={c => (PARENT = c)} {...PARENT_PROPS}>
85 - <ChildWrapper {...CHILD_PROPS} />
86 - </div>
87 - </div>,
88 - container,
89 - );
90 - }
91 -
92 - renderTree();
93 -
94 - putListener = function(node, eventName, listener) {
95 - switch (node) {
96 - case CHILD:
97 - CHILD_PROPS[eventName] = listener;
98 - break;
99 - case PARENT:
100 - PARENT_PROPS[eventName] = listener;
101 - break;
102 - case GRANDPARENT:
103 - GRANDPARENT_PROPS[eventName] = listener;
104 - break;
105 - }
106 - renderTree();
107 - };
108 -
109 - idCallOrder = [];
110 - tapMoveThreshold = TapEventPlugin.tapMoveThreshold;
111 - EventPluginHub.injection.injectEventPluginsByName({
112 - TapEventPlugin: TapEventPlugin,
113 - });
114 - });
115 -
116 - afterEach(() => {
117 - document.body.removeChild(container);
118 - container = null;
119 - });
120 -
121 - /**
122 - * The onTouchTap inject is ignore future,
123 - * we should always test the deprecated message correct.
124 - * See https://github.com/facebook/react/issues/11689
125 - */
126 -
127 - it('should infer onTouchTap from a touchStart/End', () => {
128 - putListener(CHILD, ON_TOUCH_TAP_KEY, recordID.bind(null, CHILD));
129 - touchStart(CHILD, ReactTestUtils.nativeTouchData(0, 0));
130 - touchEnd(CHILD, ReactTestUtils.nativeTouchData(0, 0));
131 - expect(idCallOrder.length).toBe(1);
132 - expect(idCallOrder[0]).toBe(CHILD);
133 - });
134 -
135 - it('should infer onTouchTap from when dragging below threshold', () => {
136 - putListener(CHILD, ON_TOUCH_TAP_KEY, recordID.bind(null, CHILD));
137 - touchStart(CHILD, ReactTestUtils.nativeTouchData(0, 0));
138 - touchEnd(CHILD, ReactTestUtils.nativeTouchData(0, tapMoveThreshold - 1));
139 - expect(idCallOrder.length).toBe(1);
140 - expect(idCallOrder[0]).toBe(CHILD);
141 - });
142 -
143 - it('should not onTouchTap from when dragging beyond threshold', () => {
144 - putListener(CHILD, ON_TOUCH_TAP_KEY, recordID.bind(null, CHILD));
145 - touchStart(CHILD, ReactTestUtils.nativeTouchData(0, 0));
146 - touchEnd(CHILD, ReactTestUtils.nativeTouchData(0, tapMoveThreshold + 1));
147 - expect(idCallOrder.length).toBe(0);
148 - });
149 -
150 - it('should bubble onTouchTap', () => {
151 - putListener(CHILD, ON_TOUCH_TAP_KEY, recordID.bind(null, CHILD));
152 - putListener(PARENT, ON_TOUCH_TAP_KEY, recordID.bind(null, PARENT));
153 - putListener(
154 - GRANDPARENT,
155 - ON_TOUCH_TAP_KEY,
156 - recordID.bind(null, GRANDPARENT),
157 - );
158 - touchStart(CHILD, ReactTestUtils.nativeTouchData(0, 0));
159 - touchEnd(CHILD, ReactTestUtils.nativeTouchData(0, 0));
160 - expect(idCallOrder.length).toBe(3);
161 - expect(idCallOrder[0] === CHILD).toBe(true);
162 - expect(idCallOrder[1] === PARENT).toBe(true);
163 - expect(idCallOrder[2] === GRANDPARENT).toBe(true);
164 - });
165 -});
scripts/rollup/shims/facebook-www/EventPluginHub.js deleted
-15
@@ -1,15 +0,0 @@
1 -/**
2 - * Copyright (c) Facebook, Inc. and its affiliates.
3 - *
4 - * This source code is licensed under the MIT license found in the
5 - * LICENSE file in the root directory of this source tree.
6 - */
7 -
8 -'use strict';
9 -
10 -const {
11 - __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
12 -} = require('ReactDOM-fb');
13 -
14 -module.exports =
15 - __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.EventPluginHub;
scripts/rollup/shims/facebook-www/TapEventPlugin.js deleted
-15
@@ -1,15 +0,0 @@
1 -/**
2 - * Copyright (c) Facebook, Inc. and its affiliates.
3 - *
4 - * This source code is licensed under the MIT license found in the
5 - * LICENSE file in the root directory of this source tree.
6 - */
7 -
8 -'use strict';
9 -
10 -const {
11 - __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
12 -} = require('ReactDOM-fb');
13 -
14 -module.exports =
15 - __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.TapEventPlugin;