From b93c55a28a0d58d604eb21993edff2fc74a8a298 Mon Sep 17 00:00:00 2001 From: Jason Quense Date: Thu, 16 Nov 2017 09:49:56 -0500 Subject: [PATCH 1/4] Add support for auxclick event --- .../src/client/ReactDOMClientInjection.js | 2 + .../src/events/AuxClickEventPlugin.js | 50 ++++++++++++ .../src/events/DOMEventPluginOrder.js | 1 + .../__tests__/AuxClickEventPlugin-test.js | 78 +++++++++++++++++++ 4 files changed, 131 insertions(+) create mode 100644 packages/react-dom/src/events/AuxClickEventPlugin.js create mode 100644 packages/react-dom/src/events/__tests__/AuxClickEventPlugin-test.js diff --git a/packages/react-dom/src/client/ReactDOMClientInjection.js b/packages/react-dom/src/client/ReactDOMClientInjection.js index 10b3c00eebf0d..af10e6b9047af 100644 --- a/packages/react-dom/src/client/ReactDOMClientInjection.js +++ b/packages/react-dom/src/client/ReactDOMClientInjection.js @@ -9,6 +9,7 @@ import * as EventPluginHub from 'events/EventPluginHub'; import * as EventPluginUtils from 'events/EventPluginUtils'; import * as ReactDOMComponentTree from './ReactDOMComponentTree'; +import AuxClickEventPlugin from '../events/AuxClickEventPlugin'; import BeforeInputEventPlugin from '../events/BeforeInputEventPlugin'; import ChangeEventPlugin from '../events/ChangeEventPlugin'; import DOMEventPluginOrder from '../events/DOMEventPluginOrder'; @@ -28,6 +29,7 @@ EventPluginUtils.injection.injectComponentTree(ReactDOMComponentTree); */ EventPluginHub.injection.injectEventPluginsByName({ SimpleEventPlugin: SimpleEventPlugin, + AuxClickEventPlugin: AuxClickEventPlugin, EnterLeaveEventPlugin: EnterLeaveEventPlugin, ChangeEventPlugin: ChangeEventPlugin, SelectEventPlugin: SelectEventPlugin, diff --git a/packages/react-dom/src/events/AuxClickEventPlugin.js b/packages/react-dom/src/events/AuxClickEventPlugin.js new file mode 100644 index 0000000000000..5fcd19f111067 --- /dev/null +++ b/packages/react-dom/src/events/AuxClickEventPlugin.js @@ -0,0 +1,50 @@ +/** + * Copyright (c) 2013-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @flow + */ + +import {accumulateTwoPhaseDispatches} from 'events/EventPropagators'; + +import SyntheticMouseEvent from './SyntheticMouseEvent'; + +const eventTypes = { + auxClick: { + phasedRegistrationNames: { + bubbled: 'onAuxClick', + captured: 'onAuxClickCapture', + }, + dependencies: ['topAuxClick', 'topClick'], + }, +}; + +const AuxClickEventPlugin = { + eventTypes, + + extractEvents( + topLevelType: mixed, + targetInst: mixed, + nativeEvent: MouseEvent, + nativeEventTarget: EventTarget, + ) { + if (topLevelType === 'topClick' && nativeEvent.button === 0) { + return null; + } + + let event = SyntheticMouseEvent.getPooled( + eventTypes.auxClick, + targetInst, + nativeEvent, + nativeEventTarget, + ); + event.type = 'auxclick'; + + accumulateTwoPhaseDispatches(event); + return event; + }, +}; + +export default AuxClickEventPlugin; diff --git a/packages/react-dom/src/events/DOMEventPluginOrder.js b/packages/react-dom/src/events/DOMEventPluginOrder.js index 0896938b97831..b695fcaf028a7 100644 --- a/packages/react-dom/src/events/DOMEventPluginOrder.js +++ b/packages/react-dom/src/events/DOMEventPluginOrder.js @@ -17,6 +17,7 @@ const DOMEventPluginOrder = [ 'ResponderEventPlugin', 'SimpleEventPlugin', + 'AuxClickEventPlugin', 'TapEventPlugin', 'EnterLeaveEventPlugin', 'ChangeEventPlugin', diff --git a/packages/react-dom/src/events/__tests__/AuxClickEventPlugin-test.js b/packages/react-dom/src/events/__tests__/AuxClickEventPlugin-test.js new file mode 100644 index 0000000000000..efe040ae70c5f --- /dev/null +++ b/packages/react-dom/src/events/__tests__/AuxClickEventPlugin-test.js @@ -0,0 +1,78 @@ +/** + * Copyright (c) 2013-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @emails react-core + */ + +'use strict'; + +var React; +var ReactDOM; + +describe('AuxClickEventPlugin', () => { + var container; + + beforeEach(() => { + jest.resetModules(); + + React = require('react'); + ReactDOM = require('react-dom'); + + // The container has to be attached for events to fire. + container = document.createElement('div'); + document.body.appendChild(container); + }); + + afterEach(() => { + document.body.removeChild(container); + container = null; + }); + + it('should not fire auxclick on primary mouse button click', () => { + let cb = jest.fn(); + let node = ReactDOM.render(, container); + + node.dispatchEvent( + new MouseEvent('click', { + bubbles: true, + cancelable: true, + button: 0, + }), + ); + + expect(cb).not.toBeCalled(); + }); + + it('should fire auxclick on secondary mouse button click', () => { + let cb = jest.fn(); + let node = ReactDOM.render(, container); + + node.dispatchEvent( + new MouseEvent('click', { + bubbles: true, + cancelable: true, + button: 1, + }), + ); + + expect(cb).toBeCalled(); + }); + + it('should respond to native auxclick', () => { + let cb = jest.fn(); + let node = ReactDOM.render(, container); + + node.dispatchEvent( + new MouseEvent('auxclick', { + bubbles: true, + cancelable: true, + button: 1, + }), + ); + + expect(cb).toBeCalled(); + }); +}); From 5f2a02baf39b9a39525ffa3b3656639e0f3a33a1 Mon Sep 17 00:00:00 2001 From: Jason Quense Date: Fri, 5 Jan 2018 13:12:38 -0500 Subject: [PATCH 2/4] Add to simpleEventPLugin --- .../src/client/ReactDOMClientInjection.js | 2 - .../src/events/AuxClickEventPlugin.js | 50 ------------ .../src/events/DOMEventPluginOrder.js | 1 - .../src/events/DOMTopLevelEventTypes.js | 1 + .../react-dom/src/events/SimpleEventPlugin.js | 1 + .../__tests__/AuxClickEventPlugin-test.js | 78 ------------------- 6 files changed, 2 insertions(+), 131 deletions(-) delete mode 100644 packages/react-dom/src/events/AuxClickEventPlugin.js delete mode 100644 packages/react-dom/src/events/__tests__/AuxClickEventPlugin-test.js diff --git a/packages/react-dom/src/client/ReactDOMClientInjection.js b/packages/react-dom/src/client/ReactDOMClientInjection.js index af10e6b9047af..10b3c00eebf0d 100644 --- a/packages/react-dom/src/client/ReactDOMClientInjection.js +++ b/packages/react-dom/src/client/ReactDOMClientInjection.js @@ -9,7 +9,6 @@ import * as EventPluginHub from 'events/EventPluginHub'; import * as EventPluginUtils from 'events/EventPluginUtils'; import * as ReactDOMComponentTree from './ReactDOMComponentTree'; -import AuxClickEventPlugin from '../events/AuxClickEventPlugin'; import BeforeInputEventPlugin from '../events/BeforeInputEventPlugin'; import ChangeEventPlugin from '../events/ChangeEventPlugin'; import DOMEventPluginOrder from '../events/DOMEventPluginOrder'; @@ -29,7 +28,6 @@ EventPluginUtils.injection.injectComponentTree(ReactDOMComponentTree); */ EventPluginHub.injection.injectEventPluginsByName({ SimpleEventPlugin: SimpleEventPlugin, - AuxClickEventPlugin: AuxClickEventPlugin, EnterLeaveEventPlugin: EnterLeaveEventPlugin, ChangeEventPlugin: ChangeEventPlugin, SelectEventPlugin: SelectEventPlugin, diff --git a/packages/react-dom/src/events/AuxClickEventPlugin.js b/packages/react-dom/src/events/AuxClickEventPlugin.js deleted file mode 100644 index 5fcd19f111067..0000000000000 --- a/packages/react-dom/src/events/AuxClickEventPlugin.js +++ /dev/null @@ -1,50 +0,0 @@ -/** - * Copyright (c) 2013-present, Facebook, Inc. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @flow - */ - -import {accumulateTwoPhaseDispatches} from 'events/EventPropagators'; - -import SyntheticMouseEvent from './SyntheticMouseEvent'; - -const eventTypes = { - auxClick: { - phasedRegistrationNames: { - bubbled: 'onAuxClick', - captured: 'onAuxClickCapture', - }, - dependencies: ['topAuxClick', 'topClick'], - }, -}; - -const AuxClickEventPlugin = { - eventTypes, - - extractEvents( - topLevelType: mixed, - targetInst: mixed, - nativeEvent: MouseEvent, - nativeEventTarget: EventTarget, - ) { - if (topLevelType === 'topClick' && nativeEvent.button === 0) { - return null; - } - - let event = SyntheticMouseEvent.getPooled( - eventTypes.auxClick, - targetInst, - nativeEvent, - nativeEventTarget, - ); - event.type = 'auxclick'; - - accumulateTwoPhaseDispatches(event); - return event; - }, -}; - -export default AuxClickEventPlugin; diff --git a/packages/react-dom/src/events/DOMEventPluginOrder.js b/packages/react-dom/src/events/DOMEventPluginOrder.js index b695fcaf028a7..0896938b97831 100644 --- a/packages/react-dom/src/events/DOMEventPluginOrder.js +++ b/packages/react-dom/src/events/DOMEventPluginOrder.js @@ -17,7 +17,6 @@ const DOMEventPluginOrder = [ 'ResponderEventPlugin', 'SimpleEventPlugin', - 'AuxClickEventPlugin', 'TapEventPlugin', 'EnterLeaveEventPlugin', 'ChangeEventPlugin', diff --git a/packages/react-dom/src/events/DOMTopLevelEventTypes.js b/packages/react-dom/src/events/DOMTopLevelEventTypes.js index dc526a0ef00b7..fb0cee3eedc36 100644 --- a/packages/react-dom/src/events/DOMTopLevelEventTypes.js +++ b/packages/react-dom/src/events/DOMTopLevelEventTypes.js @@ -56,6 +56,7 @@ export const TOP_CONTEXT_MENU = unsafeCastStringToDOMTopLevelType( export const TOP_COPY = unsafeCastStringToDOMTopLevelType('copy'); export const TOP_CUT = unsafeCastStringToDOMTopLevelType('cut'); export const TOP_DOUBLE_CLICK = unsafeCastStringToDOMTopLevelType('dblclick'); +export const TOP_AUX_CLICK = unsafeCastStringToDOMTopLevelType('auxclick'); export const TOP_DRAG = unsafeCastStringToDOMTopLevelType('drag'); export const TOP_DRAG_END = unsafeCastStringToDOMTopLevelType('dragend'); export const TOP_DRAG_ENTER = unsafeCastStringToDOMTopLevelType('dragenter'); diff --git a/packages/react-dom/src/events/SimpleEventPlugin.js b/packages/react-dom/src/events/SimpleEventPlugin.js index b3a45bfbe8121..5e34194f03e49 100644 --- a/packages/react-dom/src/events/SimpleEventPlugin.js +++ b/packages/react-dom/src/events/SimpleEventPlugin.js @@ -245,6 +245,7 @@ const SimpleEventPlugin: PluginModule & { return null; } /* falls through */ + case DOMTopLevelEventTypes.TOP_AUX_CLICK: case DOMTopLevelEventTypes.TOP_DOUBLE_CLICK: case DOMTopLevelEventTypes.TOP_MOUSE_DOWN: case DOMTopLevelEventTypes.TOP_MOUSE_MOVE: diff --git a/packages/react-dom/src/events/__tests__/AuxClickEventPlugin-test.js b/packages/react-dom/src/events/__tests__/AuxClickEventPlugin-test.js deleted file mode 100644 index efe040ae70c5f..0000000000000 --- a/packages/react-dom/src/events/__tests__/AuxClickEventPlugin-test.js +++ /dev/null @@ -1,78 +0,0 @@ -/** - * Copyright (c) 2013-present, Facebook, Inc. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @emails react-core - */ - -'use strict'; - -var React; -var ReactDOM; - -describe('AuxClickEventPlugin', () => { - var container; - - beforeEach(() => { - jest.resetModules(); - - React = require('react'); - ReactDOM = require('react-dom'); - - // The container has to be attached for events to fire. - container = document.createElement('div'); - document.body.appendChild(container); - }); - - afterEach(() => { - document.body.removeChild(container); - container = null; - }); - - it('should not fire auxclick on primary mouse button click', () => { - let cb = jest.fn(); - let node = ReactDOM.render(, container); - - node.dispatchEvent( - new MouseEvent('click', { - bubbles: true, - cancelable: true, - button: 0, - }), - ); - - expect(cb).not.toBeCalled(); - }); - - it('should fire auxclick on secondary mouse button click', () => { - let cb = jest.fn(); - let node = ReactDOM.render(, container); - - node.dispatchEvent( - new MouseEvent('click', { - bubbles: true, - cancelable: true, - button: 1, - }), - ); - - expect(cb).toBeCalled(); - }); - - it('should respond to native auxclick', () => { - let cb = jest.fn(); - let node = ReactDOM.render(, container); - - node.dispatchEvent( - new MouseEvent('auxclick', { - bubbles: true, - cancelable: true, - button: 1, - }), - ); - - expect(cb).toBeCalled(); - }); -}); From a6e306a2af3e7d994ba7e89210464ab6efae02eb Mon Sep 17 00:00:00 2001 From: Nate Hunzaker Date: Fri, 3 Aug 2018 11:19:23 -0700 Subject: [PATCH 3/4] Add auxclick as interactive event type in SimpleEventPlugin --- packages/react-dom/src/events/SimpleEventPlugin.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-dom/src/events/SimpleEventPlugin.js b/packages/react-dom/src/events/SimpleEventPlugin.js index 5e34194f03e49..e83c69fb72f68 100644 --- a/packages/react-dom/src/events/SimpleEventPlugin.js +++ b/packages/react-dom/src/events/SimpleEventPlugin.js @@ -64,6 +64,7 @@ const interactiveEventTypeNames: Array = [ [DOMTopLevelEventTypes.TOP_CONTEXT_MENU, 'contextMenu'], [DOMTopLevelEventTypes.TOP_COPY, 'copy'], [DOMTopLevelEventTypes.TOP_CUT, 'cut'], + [DOMTopLevelEventTypes.TOP_AUX_CLICK, 'auxClick'], [DOMTopLevelEventTypes.TOP_DOUBLE_CLICK, 'doubleClick'], [DOMTopLevelEventTypes.TOP_DRAG_END, 'dragEnd'], [DOMTopLevelEventTypes.TOP_DRAG_START, 'dragStart'], From 6653a4965826d68633dff0ecf5db90d4d899dae5 Mon Sep 17 00:00:00 2001 From: Nate Hunzaker Date: Fri, 3 Aug 2018 11:43:21 -0700 Subject: [PATCH 4/4] Update ReactTestUtils fixture to include auxClick --- .../src/__tests__/__snapshots__/ReactTestUtils-test.js.snap | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-dom/src/__tests__/__snapshots__/ReactTestUtils-test.js.snap b/packages/react-dom/src/__tests__/__snapshots__/ReactTestUtils-test.js.snap index ff776881ef5b4..14f2058dd895a 100644 --- a/packages/react-dom/src/__tests__/__snapshots__/ReactTestUtils-test.js.snap +++ b/packages/react-dom/src/__tests__/__snapshots__/ReactTestUtils-test.js.snap @@ -6,6 +6,7 @@ Array [ "animationEnd", "animationIteration", "animationStart", + "auxClick", "beforeInput", "blur", "canPlay",