From 81e30c7ff67d4c5d6e9b9f2bb3d9af44bd40c621 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Fri, 24 Jan 2020 10:50:27 -0800 Subject: [PATCH] Remove unused modules from legacy event responders (#17907) --- packages/react-interactions/events/drag.js | 12 - packages/react-interactions/events/scroll.js | 12 - .../react-interactions/events/src/dom/Drag.js | 253 -------------- .../events/src/dom/Scroll.js | 319 ------------------ .../events/src/dom/Swipe.js | 291 ---------------- .../src/dom/__tests__/Drag-test.internal.js | 205 ----------- .../src/dom/__tests__/Scroll-test.internal.js | 201 ----------- packages/react-interactions/events/swipe.js | 12 - packages/react-interactions/package.json | 3 - scripts/rollup/bundles.js | 45 --- 10 files changed, 1353 deletions(-) delete mode 100644 packages/react-interactions/events/drag.js delete mode 100644 packages/react-interactions/events/scroll.js delete mode 100644 packages/react-interactions/events/src/dom/Drag.js delete mode 100644 packages/react-interactions/events/src/dom/Scroll.js delete mode 100644 packages/react-interactions/events/src/dom/Swipe.js delete mode 100644 packages/react-interactions/events/src/dom/__tests__/Drag-test.internal.js delete mode 100644 packages/react-interactions/events/src/dom/__tests__/Scroll-test.internal.js delete mode 100644 packages/react-interactions/events/swipe.js diff --git a/packages/react-interactions/events/drag.js b/packages/react-interactions/events/drag.js deleted file mode 100644 index 937f4a7f034d0..0000000000000 --- a/packages/react-interactions/events/drag.js +++ /dev/null @@ -1,12 +0,0 @@ -/** - * 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'; - -module.exports = require('./src/dom/Drag'); diff --git a/packages/react-interactions/events/scroll.js b/packages/react-interactions/events/scroll.js deleted file mode 100644 index 7cbb619ce05fe..0000000000000 --- a/packages/react-interactions/events/scroll.js +++ /dev/null @@ -1,12 +0,0 @@ -/** - * 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'; - -module.exports = require('./src/dom/Scroll'); diff --git a/packages/react-interactions/events/src/dom/Drag.js b/packages/react-interactions/events/src/dom/Drag.js deleted file mode 100644 index 82779eac5ef19..0000000000000 --- a/packages/react-interactions/events/src/dom/Drag.js +++ /dev/null @@ -1,253 +0,0 @@ -/** - * 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 { - ReactDOMResponderEvent, - ReactDOMResponderContext, -} from 'shared/ReactDOMTypes'; -import type { - EventPriority, - ReactEventResponderListener, -} from 'shared/ReactTypes'; - -import React from 'react'; -import {DiscreteEvent, UserBlockingEvent} from 'shared/ReactTypes'; - -const targetEventTypes = ['pointerdown']; -const rootEventTypes = ['pointerup', 'pointercancel', 'pointermove_active']; - -type DragProps = { - disabled: boolean, - shouldClaimOwnership: () => boolean, - onDragStart: (e: DragEvent) => void, - onDragMove: (e: DragEvent) => void, - onDragEnd: (e: DragEvent) => void, - onDragChange: boolean => void, - ... -}; - -type DragState = {| - dragTarget: null | Element | Document, - 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', 'mousedown'); - rootEventTypes.push( - 'mouseup', - 'mousemove', - 'touchend', - 'touchcancel', - 'touchmove_active', - ); -} - -type EventData = { - diffX: number, - diffY: number, - ... -}; -type DragEventType = 'dragstart' | 'dragend' | 'dragchange' | 'dragmove'; - -type DragEvent = {| - target: Element | Document, - type: DragEventType, - timeStamp: number, - diffX?: number, - diffY?: number, -|}; - -function createDragEvent( - context: ReactDOMResponderContext, - type: DragEventType, - target: Element | Document, - eventData?: EventData, -): DragEvent { - return { - target, - type, - timeStamp: context.getTimeStamp(), - ...eventData, - }; -} - -function isFunction(obj): boolean { - return typeof obj === 'function'; -} - -function dispatchDragEvent( - context: ReactDOMResponderContext, - listener: DragEvent => void, - name: DragEventType, - state: DragState, - eventPriority: EventPriority, - eventData?: EventData, -): void { - const target = ((state.dragTarget: any): Element | Document); - const syntheticEvent = createDragEvent(context, name, target, eventData); - context.dispatchEvent(syntheticEvent, listener, eventPriority); -} - -const dragResponderImpl = { - targetEventTypes, - getInitialState(): DragState { - return { - dragTarget: null, - isPointerDown: false, - isDragging: false, - startX: 0, - startY: 0, - x: 0, - y: 0, - }; - }, - onEvent( - event: ReactDOMResponderEvent, - context: ReactDOMResponderContext, - props: DragProps, - state: DragState, - ): void { - const {target, type, nativeEvent} = event; - - switch (type) { - case 'touchstart': - case 'mousedown': - case 'pointerdown': { - if (!state.isDragging) { - const obj = - type === 'touchstart' - ? (nativeEvent: any).changedTouches[0] - : nativeEvent; - const x = (state.startX = (obj: any).screenX); - const y = (state.startY = (obj: any).screenY); - state.x = x; - state.y = y; - state.dragTarget = target; - state.isPointerDown = true; - const onDragStart = props.onDragStart; - - if (isFunction(onDragStart)) { - dispatchDragEvent( - context, - onDragStart, - 'dragstart', - state, - DiscreteEvent, - ); - } - context.addRootEventTypes(rootEventTypes); - } - break; - } - } - }, - onRootEvent( - event: ReactDOMResponderEvent, - context: ReactDOMResponderContext, - props: DragProps, - state: DragState, - ): void { - const {type, nativeEvent} = event; - - switch (type) { - case 'touchmove': - case 'mousemove': - case 'pointermove': { - if (event.passive) { - return; - } - if (state.isPointerDown) { - const obj = - type === 'touchmove' - ? (nativeEvent: any).changedTouches[0] - : nativeEvent; - const x = (obj: any).screenX; - const y = (obj: any).screenY; - state.x = x; - state.y = y; - if (x === state.startX && y === state.startY) { - return; - } - if (!state.isDragging) { - state.isDragging = true; - const onDragChange = props.onDragChange; - if (isFunction(onDragChange)) { - context.dispatchEvent(true, onDragChange, UserBlockingEvent); - } - } else { - const onDragMove = props.onDragMove; - if (isFunction(onDragMove)) { - const eventData = { - diffX: x - state.startX, - diffY: y - state.startY, - }; - dispatchDragEvent( - context, - onDragMove, - 'dragmove', - state, - UserBlockingEvent, - eventData, - ); - } - (nativeEvent: any).preventDefault(); - } - } - break; - } - case 'pointercancel': - case 'touchcancel': - case 'touchend': - case 'mouseup': - case 'pointerup': { - if (state.isDragging) { - const onDragEnd = props.onDragEnd; - if (isFunction(onDragEnd)) { - dispatchDragEvent( - context, - onDragEnd, - 'dragend', - state, - DiscreteEvent, - ); - } - const onDragChange = props.onDragChange; - if (isFunction(onDragChange)) { - context.dispatchEvent(false, onDragChange, UserBlockingEvent); - } - state.isDragging = false; - } - if (state.isPointerDown) { - state.dragTarget = null; - state.isPointerDown = false; - context.removeRootEventTypes(rootEventTypes); - } - break; - } - } - }, -}; - -export const DragResponder = React.DEPRECATED_createResponder( - 'Drag', - dragResponderImpl, -); - -export function useDrag( - props: DragProps, -): ReactEventResponderListener { - return React.DEPRECATED_useResponder(DragResponder, props); -} diff --git a/packages/react-interactions/events/src/dom/Scroll.js b/packages/react-interactions/events/src/dom/Scroll.js deleted file mode 100644 index e1fe82646d0c1..0000000000000 --- a/packages/react-interactions/events/src/dom/Scroll.js +++ /dev/null @@ -1,319 +0,0 @@ -/** - * 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 { - ReactDOMResponderEvent, - ReactDOMResponderContext, - PointerType, -} from 'shared/ReactDOMTypes'; -import {UserBlockingEvent} from 'shared/ReactTypes'; -import type { - EventPriority, - ReactEventResponderListener, -} from 'shared/ReactTypes'; - -import React from 'react'; - -type ScrollProps = { - disabled: boolean, - onScroll: ScrollEvent => void, - onScrollDragStart: ScrollEvent => void, - onScrollDragEnd: ScrollEvent => void, - ... -}; - -type ScrollState = { - direction: ScrollDirection, - pointerType: PointerType, - scrollTarget: null | Element | Document, - isDragging: boolean, - isTouching: boolean, - scrollLeft: number, - scrollTop: number, - ... -}; - -type ScrollEventType = - | 'scroll' - | 'scrolldragstart' - | 'scrolldragend' - | 'scrollmomentumstart' - | 'scrollmomentumend'; - -type ScrollDirection = '' | 'up' | 'down' | 'left' | 'right'; - -type ScrollEvent = {| - direction: ScrollDirection, - target: Element | Document, - type: ScrollEventType, - pointerType: PointerType, - timeStamp: number, - clientX: null | number, - clientY: null | number, - pageX: null | number, - pageY: null | number, - screenX: null | number, - screenY: null | number, - x: null | number, - y: null | number, -|}; - -const hasPointerEvents = - typeof window !== 'undefined' && window.PointerEvent !== undefined; - -const targetEventTypes = hasPointerEvents - ? ['scroll', 'pointerdown', 'keyup', 'wheel'] - : ['scroll', 'mousedown', 'touchstart', 'keyup', 'wheel']; - -const rootEventTypes = hasPointerEvents - ? ['pointercancel', 'pointerup'] - : ['touchcancel', 'touchend']; - -function isFunction(obj): boolean { - return typeof obj === 'function'; -} - -function createScrollEvent( - event: ?ReactDOMResponderEvent, - context: ReactDOMResponderContext, - type: ScrollEventType, - target: Element | Document, - pointerType: PointerType, - direction: ScrollDirection, -): ScrollEvent { - let clientX = null; - let clientY = null; - let pageX = null; - let pageY = null; - let screenX = null; - let screenY = null; - - if (event) { - const nativeEvent = (event.nativeEvent: any); - ({clientX, clientY, pageX, pageY, screenX, screenY} = nativeEvent); - } - - return { - target, - type, - pointerType, - direction, - timeStamp: context.getTimeStamp(), - clientX, - clientY, - pageX, - pageY, - screenX, - screenY, - x: clientX, - y: clientY, - }; -} - -function dispatchEvent( - event: ?ReactDOMResponderEvent, - listener: ScrollEvent => void, - context: ReactDOMResponderContext, - state: ScrollState, - name: ScrollEventType, - eventPriority: EventPriority, -): void { - const target = ((state.scrollTarget: any): Element | Document); - const pointerType = state.pointerType; - const direction = state.direction; - const syntheticEvent = createScrollEvent( - event, - context, - name, - target, - pointerType, - direction, - ); - context.dispatchEvent(syntheticEvent, listener, eventPriority); -} - -const scrollResponderImpl = { - targetEventTypes, - getInitialState() { - return { - direction: '', - isTouching: false, - pointerType: '', - prevScrollTop: 0, - prevScrollLeft: 0, - scrollTarget: null, - }; - }, - onEvent( - event: ReactDOMResponderEvent, - context: ReactDOMResponderContext, - props: ScrollProps, - state: ScrollState, - ): void { - const {pointerType, target, type} = event; - - if (props.disabled) { - if (state.isTouching) { - state.isTouching = false; - state.scrollTarget = null; - state.isDragging = false; - state.direction = ''; - context.removeRootEventTypes(rootEventTypes); - } - return; - } - - switch (type) { - case 'scroll': { - const prevScrollTarget = state.scrollTarget; - let scrollLeft = 0; - let scrollTop = 0; - - // Check if target is the document - if (target.nodeType === 9) { - const bodyNode = ((target: any): Document).body; - if (bodyNode !== null) { - scrollLeft = bodyNode.offsetLeft; - scrollTop = bodyNode.offsetTop; - } - } else { - scrollLeft = ((target: any): Element).scrollLeft; - scrollTop = ((target: any): Element).scrollTop; - } - - if (prevScrollTarget !== null) { - if (scrollTop === state.scrollTop) { - if (scrollLeft > state.scrollLeft) { - state.direction = 'right'; - } else { - state.direction = 'left'; - } - } else { - if (scrollTop > state.scrollTop) { - state.direction = 'down'; - } else { - state.direction = 'up'; - } - } - } else { - state.direction = ''; - } - state.scrollTarget = ((target: any): Element | Document); - state.scrollLeft = scrollLeft; - state.scrollTop = scrollTop; - - if (state.isTouching && !state.isDragging) { - state.isDragging = true; - const onScrollDragStart = props.onScrollDragStart; - - if (isFunction(onScrollDragStart)) { - dispatchEvent( - event, - onScrollDragStart, - context, - state, - 'scrolldragstart', - UserBlockingEvent, - ); - } - } - const onScroll = props.onScroll; - - if (isFunction(onScroll)) { - dispatchEvent( - event, - onScroll, - context, - state, - 'scroll', - UserBlockingEvent, - ); - } - break; - } - case 'keyup': { - state.pointerType = pointerType; - break; - } - case 'mousedown': - case 'wheel': { - state.pointerType = 'mouse'; - break; - } - case 'pointerdown': { - state.pointerType = pointerType; - if (pointerType === 'touch' && !state.isTouching) { - state.isTouching = true; - context.addRootEventTypes(rootEventTypes); - } - break; - } - case 'touchstart': { - if (!state.isTouching) { - state.isTouching = true; - state.pointerType = 'touch'; - context.addRootEventTypes(rootEventTypes); - } - } - } - }, - onRootEvent( - event: ReactDOMResponderEvent, - context: ReactDOMResponderContext, - props: ScrollProps, - state: ScrollState, - ) { - const {type} = event; - - switch (type) { - case 'pointercancel': - case 'pointerup': - case 'touchcancel': - case 'touchend': { - if (state.isTouching) { - const onScrollDragEnd = props.onScrollDragEnd; - - if (state.isDragging && isFunction(onScrollDragEnd)) { - dispatchEvent( - event, - onScrollDragEnd, - context, - state, - 'scrolldragend', - UserBlockingEvent, - ); - } - state.isTouching = false; - state.isDragging = false; - state.scrollTarget = null; - state.pointerType = ''; - context.removeRootEventTypes(rootEventTypes); - } - } - } - }, - onUnmount( - context: ReactDOMResponderContext, - props: ScrollProps, - state: ScrollState, - ) { - // TODO - }, -}; - -export const ScrollResponder = React.DEPRECATED_createResponder( - 'Scroll', - scrollResponderImpl, -); - -export function useScroll( - props: ScrollProps, -): ReactEventResponderListener { - return React.DEPRECATED_useResponder(ScrollResponder, props); -} diff --git a/packages/react-interactions/events/src/dom/Swipe.js b/packages/react-interactions/events/src/dom/Swipe.js deleted file mode 100644 index 74f0b3cb768c0..0000000000000 --- a/packages/react-interactions/events/src/dom/Swipe.js +++ /dev/null @@ -1,291 +0,0 @@ -/** - * 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 { - ReactDOMResponderEvent, - ReactDOMResponderContext, -} from 'shared/ReactDOMTypes'; -import type { - EventPriority, - ReactEventResponderListener, -} from 'shared/ReactTypes'; - -import React from 'react'; -import {UserBlockingEvent, DiscreteEvent} from 'shared/ReactTypes'; - -type SwipeProps = { - disabled: boolean, - shouldClaimOwnership: () => boolean, - onSwipeMove: (e: SwipeEvent) => void, - onSwipeEnd: (e: SwipeEvent) => void, - onSwipeLeft: (e: SwipeEvent) => void, - onSwipeRight: (e: SwipeEvent) => void, - ... -}; - -const targetEventTypes = ['pointerdown']; -const rootEventTypes = ['pointerup', 'pointercancel', 'pointermove_active']; - -// 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', 'mousedown'); - rootEventTypes.push( - 'mouseup', - 'mousemove', - 'touchend', - 'touchcancel', - 'touchmove_active', - ); -} - -type EventData = { - diffX: number, - diffY: number, - ... -}; -type SwipeEventType = 'swipeleft' | 'swiperight' | 'swipeend' | 'swipemove'; - -type SwipeEvent = {| - target: Element | Document, - type: SwipeEventType, - timeStamp: number, - diffX?: number, - diffY?: number, -|}; - -function isFunction(obj): boolean { - return typeof obj === 'function'; -} - -function createSwipeEvent( - context: ReactDOMResponderContext, - type: SwipeEventType, - target: Element | Document, - eventData?: EventData, -): SwipeEvent { - return context.objectAssign( - { - target, - type, - timeStamp: context.getTimeStamp(), - }, - eventData, - ); -} - -function dispatchSwipeEvent( - context: ReactDOMResponderContext, - listener: SwipeEvent => void, - name: SwipeEventType, - state: SwipeState, - eventPriority: EventPriority, - eventData?: EventData, -) { - const target = ((state.swipeTarget: any): Element | Document); - const syntheticEvent = createSwipeEvent(context, name, target, eventData); - context.dispatchEvent(syntheticEvent, listener, eventPriority); -} - -type SwipeState = { - direction: number, - isSwiping: boolean, - lastDirection: number, - startX: number, - startY: number, - touchId: null | number, - swipeTarget: null | Element | Document, - x: number, - y: number, - ... -}; - -const swipeResponderImpl = { - targetEventTypes, - getInitialState(): SwipeState { - return { - direction: 0, - isSwiping: false, - lastDirection: 0, - startX: 0, - startY: 0, - touchId: null, - swipeTarget: null, - x: 0, - y: 0, - }; - }, - onEvent( - event: ReactDOMResponderEvent, - context: ReactDOMResponderContext, - props: SwipeProps, - state: SwipeState, - ): void { - const {target, type, nativeEvent} = event; - - switch (type) { - case 'touchstart': - case 'mousedown': - case 'pointerdown': { - if (!state.isSwiping) { - let obj = nativeEvent; - if (type === 'touchstart') { - obj = (nativeEvent: any).targetTouches[0]; - state.touchId = obj.identifier; - } - const x = (obj: any).screenX; - const y = (obj: any).screenY; - - state.isSwiping = true; - state.startX = x; - state.startY = y; - state.x = x; - state.y = y; - state.swipeTarget = target; - context.addRootEventTypes(rootEventTypes); - } - break; - } - } - }, - onRootEvent( - event: ReactDOMResponderEvent, - context: ReactDOMResponderContext, - props: SwipeProps, - state: SwipeState, - ): void { - const {type, nativeEvent} = event; - - switch (type) { - case 'touchmove': - case 'mousemove': - case 'pointermove': { - if (event.passive) { - return; - } - if (state.isSwiping) { - let obj = null; - if (type === 'touchmove') { - const targetTouches = (nativeEvent: any).targetTouches; - for (let i = 0; i < targetTouches.length; i++) { - if (state.touchId === targetTouches[i].identifier) { - obj = targetTouches[i]; - break; - } - } - } else { - obj = nativeEvent; - } - if (obj === null) { - state.isSwiping = false; - state.swipeTarget = null; - state.touchId = null; - context.removeRootEventTypes(rootEventTypes); - return; - } - const x = (obj: any).screenX; - const y = (obj: any).screenY; - if (x < state.x) { - state.direction = 3; - } else if (x > state.x) { - state.direction = 1; - } - state.x = x; - state.y = y; - const eventData = { - diffX: x - state.startX, - diffY: y - state.startY, - }; - const onSwipeMove = props.onSwipeMove; - - if (isFunction(onSwipeMove)) { - dispatchSwipeEvent( - context, - onSwipeMove, - 'swipemove', - state, - UserBlockingEvent, - eventData, - ); - } - (nativeEvent: any).preventDefault(); - } - break; - } - case 'pointercancel': - case 'touchcancel': - case 'touchend': - case 'mouseup': - case 'pointerup': { - if (state.isSwiping) { - if (state.x === state.startX && state.y === state.startY) { - return; - } - const direction = state.direction; - const lastDirection = state.lastDirection; - if (direction !== lastDirection) { - if (direction === 3) { - const onSwipeLeft = props.onSwipeLeft; - - if (isFunction(onSwipeLeft)) { - dispatchSwipeEvent( - context, - onSwipeLeft, - 'swipeleft', - state, - DiscreteEvent, - ); - } - } else if (direction === 1) { - const onSwipeRight = props.onSwipeRight; - - if (isFunction(onSwipeRight)) { - dispatchSwipeEvent( - context, - onSwipeRight, - 'swiperight', - state, - DiscreteEvent, - ); - } - } - } - const onSwipeEnd = props.onSwipeEnd; - - if (isFunction(onSwipeEnd)) { - dispatchSwipeEvent( - context, - onSwipeEnd, - 'swipeend', - state, - DiscreteEvent, - ); - } - state.lastDirection = direction; - state.isSwiping = false; - state.swipeTarget = null; - state.touchId = null; - context.removeRootEventTypes(rootEventTypes); - } - break; - } - } - }, -}; - -export const SwipeResponder = React.DEPRECATED_createResponder( - 'Swipe', - swipeResponderImpl, -); - -export function useSwipe( - props: SwipeProps, -): ReactEventResponderListener { - return React.DEPRECATED_useResponder(SwipeResponder, props); -} diff --git a/packages/react-interactions/events/src/dom/__tests__/Drag-test.internal.js b/packages/react-interactions/events/src/dom/__tests__/Drag-test.internal.js deleted file mode 100644 index f330385727988..0000000000000 --- a/packages/react-interactions/events/src/dom/__tests__/Drag-test.internal.js +++ /dev/null @@ -1,205 +0,0 @@ -/** - * 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. - * - * @emails react-core - */ - -'use strict'; - -let React; -let ReactFeatureFlags; -let ReactDOM; -let useDrag; - -describe('Drag event responder', () => { - let container; - - beforeEach(() => { - jest.resetModules(); - ReactFeatureFlags = require('shared/ReactFeatureFlags'); - ReactFeatureFlags.enableDeprecatedFlareAPI = true; - React = require('react'); - ReactDOM = require('react-dom'); - useDrag = require('react-interactions/events/drag').useDrag; - - container = document.createElement('div'); - document.body.appendChild(container); - }); - - afterEach(() => { - ReactDOM.render(null, container); - document.body.removeChild(container); - container = null; - }); - - it('should support onDragChange', () => { - let divRef = React.createRef(); - let events = []; - - function handleOnDrag() { - events.push({isChanged: true}); - } - - function Component() { - const listener = useDrag({ - onDragChange: handleOnDrag, - }); - return ( -
- Drag me! -
- ); - } - - ReactDOM.render(, container); - - const mouseOverEvent = document.createEvent('MouseEvents'); - mouseOverEvent.initEvent('mousedown', true, true); - divRef.current.dispatchEvent(mouseOverEvent); - - const mouseMoveEvent = document.createEvent('MouseEvents'); - for (let index = 0; index <= 20; index++) { - mouseMoveEvent.initMouseEvent( - 'mousemove', - true, - true, - window, - 1, - index, - index, - 50, - 50, - ); - divRef.current.dispatchEvent(mouseMoveEvent); - } - divRef.current.dispatchEvent(mouseMoveEvent); - - const mouseUpEvent = document.createEvent('MouseEvents'); - mouseUpEvent.initEvent('mouseup', true, true); - divRef.current.dispatchEvent(mouseUpEvent); - - expect(events).toHaveLength(2); - expect(events).toEqual( - expect.arrayContaining([expect.objectContaining({isChanged: true})]), - ); - }); - - it('should support onDragStart and onDragEnd', () => { - let divRef = React.createRef(); - let events = []; - - function handleDragStart() { - events.push('dragstart'); - } - - function handleDragEnd() { - events.push('dragend'); - } - - function Component() { - const listener = useDrag({ - onDragStart: handleDragStart, - onDragEnd: handleDragEnd, - }); - return ( -
- Drag me! -
- ); - } - - ReactDOM.render(, container); - - const mouseOverEvent = document.createEvent('MouseEvents'); - mouseOverEvent.initEvent('mousedown', true, true); - divRef.current.dispatchEvent(mouseOverEvent); - - const mouseMoveEvent = document.createEvent('MouseEvents'); - for (let index = 0; index <= 20; index++) { - mouseMoveEvent.initMouseEvent( - 'mousemove', - true, - true, - window, - 1, - index, - index, - 50, - 50, - ); - divRef.current.dispatchEvent(mouseMoveEvent); - } - divRef.current.dispatchEvent(mouseMoveEvent); - - const mouseUpEvent = document.createEvent('MouseEvents'); - mouseUpEvent.initEvent('mouseup', true, true); - divRef.current.dispatchEvent(mouseUpEvent); - - expect(events).toEqual(['dragstart', 'dragend']); - }); - - it('should support onDragMove', () => { - let divRef = React.createRef(); - let events = []; - - function handleDragMove(e) { - events.push({ - diffX: e.diffX, - diffY: e.diffY, - }); - } - - function Component() { - const listener = useDrag({ - onDragMove: handleDragMove, - }); - return ( -
- Drag me! -
- ); - } - - ReactDOM.render(, container); - - const mouseOverEvent = document.createEvent('MouseEvents'); - mouseOverEvent.initEvent('mousedown', true, true, window, 1, 0, 0); - divRef.current.dispatchEvent(mouseOverEvent); - - const mouseMoveEvent = document.createEvent('MouseEvents'); - for (let index = 0; index <= 20; index++) { - mouseMoveEvent.initMouseEvent( - 'mousemove', - true, - true, - window, - 1, - index + 1, - index + 1, - 50, - 50, - ); - divRef.current.dispatchEvent(mouseMoveEvent); - } - - const mouseUpEvent = document.createEvent('MouseEvents'); - mouseUpEvent.initEvent('mouseup', true, true); - divRef.current.dispatchEvent(mouseUpEvent); - expect(events).toHaveLength(20); - expect(events).toEqual( - expect.arrayContaining([ - expect.objectContaining({ - diffX: 2, - diffY: 2, - }), - expect.objectContaining({ - diffX: 21, - diffY: 21, - }), - ]), - ); - }); -}); diff --git a/packages/react-interactions/events/src/dom/__tests__/Scroll-test.internal.js b/packages/react-interactions/events/src/dom/__tests__/Scroll-test.internal.js deleted file mode 100644 index 82d5f5619ad2f..0000000000000 --- a/packages/react-interactions/events/src/dom/__tests__/Scroll-test.internal.js +++ /dev/null @@ -1,201 +0,0 @@ -/** - * 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. - * - * @emails react-core - */ - -'use strict'; - -import {createEventTarget, setPointerEvent} from 'dom-event-testing-library'; - -let React; -let ReactFeatureFlags; -let ReactDOM; -let useScroll; - -const forcePointerEvents = true; -const table = [[forcePointerEvents], [!forcePointerEvents]]; - -const initializeModules = hasPointerEvents => { - setPointerEvent(hasPointerEvents); - jest.resetModules(); - ReactFeatureFlags = require('shared/ReactFeatureFlags'); - ReactFeatureFlags.enableDeprecatedFlareAPI = true; - React = require('react'); - ReactDOM = require('react-dom'); - useScroll = require('react-interactions/events/scroll').useScroll; -}; - -describe.each(table)('Scroll responder', hasPointerEvents => { - let container; - - beforeEach(() => { - initializeModules(hasPointerEvents); - container = document.createElement('div'); - document.body.appendChild(container); - }); - - afterEach(() => { - ReactDOM.render(null, container); - document.body.removeChild(container); - container = null; - }); - - describe('disabled', () => { - let onScroll, ref; - - beforeEach(() => { - onScroll = jest.fn(); - ref = React.createRef(); - const Component = () => { - const listener = useScroll({ - disabled: true, - onScroll, - }); - return
; - }; - ReactDOM.render(, container); - }); - - it('prevents custom events being dispatched', () => { - const target = createEventTarget(ref.current); - target.scroll(); - expect(onScroll).not.toBeCalled(); - }); - }); - - describe('onScroll', () => { - let onScroll, ref; - - beforeEach(() => { - onScroll = jest.fn(); - ref = React.createRef(); - const Component = () => { - const listener = useScroll({ - onScroll, - }); - return
; - }; - ReactDOM.render(, container); - }); - - describe('is called after "scroll" event', () => { - const pointerTypesTable = hasPointerEvents - ? [['mouse'], ['touch'], ['pen']] - : [['mouse'], ['touch']]; - it.each(pointerTypesTable)('with pointerType: %s', pointerType => { - const node = ref.current; - const target = createEventTarget(node); - target.pointerdown({pointerType}); - target.scroll(); - expect(onScroll).toHaveBeenCalledTimes(1); - expect(onScroll).toHaveBeenCalledWith( - expect.objectContaining({ - pointerType, - type: 'scroll', - direction: '', - }), - ); - onScroll.mockReset(); - node.scrollTop = -1; - target.scroll(); - expect(onScroll).toHaveBeenCalledWith( - expect.objectContaining({ - pointerType, - type: 'scroll', - direction: 'up', - }), - ); - onScroll.mockReset(); - node.scrollTop = 1; - target.scroll(); - expect(onScroll).toHaveBeenCalledWith( - expect.objectContaining({ - pointerType, - type: 'scroll', - direction: 'down', - }), - ); - }); - - it('with pointerType: keyboard', () => { - const target = createEventTarget(ref.current); - target.keydown({key: 'A'}); - target.keyup({key: 'A'}); - target.scroll(); - expect(onScroll).toHaveBeenCalledTimes(1); - expect(onScroll).toHaveBeenCalledWith( - expect.objectContaining({ - pointerType: 'keyboard', - type: 'scroll', - direction: '', - }), - ); - }); - }); - }); - - describe('onScrollDragStart', () => { - let onScrollDragStart, ref; - - beforeEach(() => { - onScrollDragStart = jest.fn(); - ref = React.createRef(); - const Component = () => { - const listener = useScroll({ - onScrollDragStart, - }); - return
; - }; - ReactDOM.render(, container); - }); - - it('works as expected with touch events', () => { - const target = createEventTarget(ref.current); - target.pointerdown({pointerType: 'touch'}); - target.scroll(); - expect(onScrollDragStart).toHaveBeenCalledTimes(1); - expect(onScrollDragStart).toHaveBeenCalledWith( - expect.objectContaining({ - pointerType: 'touch', - type: 'scrolldragstart', - direction: '', - }), - ); - }); - }); - - describe('onScrollDragEnd', () => { - let onScrollDragEnd, ref; - - beforeEach(() => { - onScrollDragEnd = jest.fn(); - ref = React.createRef(); - const Component = () => { - const listener = useScroll({ - onScrollDragEnd, - }); - return
; - }; - ReactDOM.render(, container); - }); - - it('works as expected with touch events', () => { - const target = createEventTarget(ref.current); - target.pointerdown({pointerType: 'touch'}); - target.scroll(); - target.pointerup({pointerType: 'touch'}); - expect(onScrollDragEnd).toHaveBeenCalledTimes(1); - expect(onScrollDragEnd).toHaveBeenCalledWith( - expect.objectContaining({ - pointerType: 'touch', - type: 'scrolldragend', - direction: '', - }), - ); - }); - }); -}); diff --git a/packages/react-interactions/events/swipe.js b/packages/react-interactions/events/swipe.js deleted file mode 100644 index a2d7dfdcaba4d..0000000000000 --- a/packages/react-interactions/events/swipe.js +++ /dev/null @@ -1,12 +0,0 @@ -/** - * 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'; - -module.exports = require('./src/dom/Swipe'); diff --git a/packages/react-interactions/package.json b/packages/react-interactions/package.json index fe926f849c1ec..60b41a1a68af8 100644 --- a/packages/react-interactions/package.json +++ b/packages/react-interactions/package.json @@ -14,15 +14,12 @@ "README.md", "events/README.md", "events/context-menu.js", - "events/drag.js", "events/focus.js", "events/hover.js", "events/input.js", "events/keyboard.js", "events/press.js", "events/press-legacy.js", - "events/scroll.js", - "events/swipe.js", "events/tap.js", "build-info.json", "cjs/", diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js index 956e67065326a..aefbb65e4f1b1 100644 --- a/scripts/rollup/bundles.js +++ b/scripts/rollup/bundles.js @@ -578,21 +578,6 @@ const bundles = [ externals: ['react'], }, - { - bundleTypes: [ - UMD_DEV, - UMD_PROD, - NODE_DEV, - NODE_PROD, - FB_WWW_DEV, - FB_WWW_PROD, - ], - moduleType: NON_FIBER_RENDERER, - entry: 'react-interactions/events/drag', - global: 'ReactEventsDrag', - externals: ['react'], - }, - { bundleTypes: [ UMD_DEV, @@ -687,36 +672,6 @@ const bundles = [ externals: ['react'], }, - { - bundleTypes: [ - UMD_DEV, - UMD_PROD, - NODE_DEV, - NODE_PROD, - FB_WWW_DEV, - FB_WWW_PROD, - ], - moduleType: NON_FIBER_RENDERER, - entry: 'react-interactions/events/scroll', - global: 'ReactEventsScroll', - externals: ['react'], - }, - - { - bundleTypes: [ - UMD_DEV, - UMD_PROD, - NODE_DEV, - NODE_PROD, - FB_WWW_DEV, - FB_WWW_PROD, - ], - moduleType: NON_FIBER_RENDERER, - entry: 'react-interactions/events/swipe', - global: 'ReactEventsSwipe', - externals: ['react'], - }, - { bundleTypes: [ UMD_DEV,