rebuild hrm
This commit is contained in:
170
node_modules/@react-aria/interactions/src/useMove.ts
generated
vendored
170
node_modules/@react-aria/interactions/src/useMove.ts
generated
vendored
@@ -12,8 +12,8 @@
|
||||
|
||||
import {disableTextSelection, restoreTextSelection} from './textSelection';
|
||||
import {DOMAttributes, MoveEvents, PointerType} from '@react-types/shared';
|
||||
import React, {useMemo, useRef} from 'react';
|
||||
import {useEffectEvent, useGlobalListeners} from '@react-aria/utils';
|
||||
import React, {useCallback, useMemo, useRef, useState} from 'react';
|
||||
import {useEffectEvent, useGlobalListeners, useLayoutEffect} from '@react-aria/utils';
|
||||
|
||||
export interface MoveResult {
|
||||
/** Props to spread on the target element. */
|
||||
@@ -43,7 +43,7 @@ export function useMove(props: MoveEvents): MoveResult {
|
||||
|
||||
let {addGlobalListener, removeGlobalListener} = useGlobalListeners();
|
||||
|
||||
let move = useEffectEvent((originalEvent: EventBase, pointerType: PointerType, deltaX: number, deltaY: number) => {
|
||||
let move = useCallback((originalEvent: EventBase, pointerType: PointerType, deltaX: number, deltaY: number) => {
|
||||
if (deltaX === 0 && deltaY === 0) {
|
||||
return;
|
||||
}
|
||||
@@ -69,9 +69,10 @@ export function useMove(props: MoveEvents): MoveResult {
|
||||
ctrlKey: originalEvent.ctrlKey,
|
||||
altKey: originalEvent.altKey
|
||||
});
|
||||
});
|
||||
}, [onMoveStart, onMove, state]);
|
||||
let moveEvent = useEffectEvent(move);
|
||||
|
||||
let end = useEffectEvent((originalEvent: EventBase, pointerType: PointerType) => {
|
||||
let end = useCallback((originalEvent: EventBase, pointerType: PointerType) => {
|
||||
restoreTextSelection();
|
||||
if (state.current.didMove) {
|
||||
onMoveEnd?.({
|
||||
@@ -83,7 +84,94 @@ export function useMove(props: MoveEvents): MoveResult {
|
||||
altKey: originalEvent.altKey
|
||||
});
|
||||
}
|
||||
});
|
||||
}, [onMoveEnd, state]);
|
||||
let endEvent = useEffectEvent(end);
|
||||
|
||||
let [pointerDown, setPointerDown] = useState<'pointer' | 'mouse' | 'touch' | null>(null);
|
||||
useLayoutEffect(() => {
|
||||
if (pointerDown === 'pointer') {
|
||||
let onPointerMove = (e: PointerEvent) => {
|
||||
if (e.pointerId === state.current.id) {
|
||||
let pointerType = (e.pointerType || 'mouse') as PointerType;
|
||||
|
||||
// Problems with PointerEvent#movementX/movementY:
|
||||
// 1. it is always 0 on macOS Safari.
|
||||
// 2. On Chrome Android, it's scaled by devicePixelRatio, but not on Chrome macOS
|
||||
moveEvent(e, pointerType, e.pageX - (state.current.lastPosition?.pageX ?? 0), e.pageY - (state.current.lastPosition?.pageY ?? 0));
|
||||
state.current.lastPosition = {pageX: e.pageX, pageY: e.pageY};
|
||||
}
|
||||
};
|
||||
|
||||
let onPointerUp = (e: PointerEvent) => {
|
||||
if (e.pointerId === state.current.id) {
|
||||
let pointerType = (e.pointerType || 'mouse') as PointerType;
|
||||
endEvent(e, pointerType);
|
||||
state.current.id = null;
|
||||
removeGlobalListener(window, 'pointermove', onPointerMove, false);
|
||||
removeGlobalListener(window, 'pointerup', onPointerUp, false);
|
||||
removeGlobalListener(window, 'pointercancel', onPointerUp, false);
|
||||
setPointerDown(null);
|
||||
}
|
||||
};
|
||||
addGlobalListener(window, 'pointermove', onPointerMove, false);
|
||||
addGlobalListener(window, 'pointerup', onPointerUp, false);
|
||||
addGlobalListener(window, 'pointercancel', onPointerUp, false);
|
||||
return () => {
|
||||
removeGlobalListener(window, 'pointermove', onPointerMove, false);
|
||||
removeGlobalListener(window, 'pointerup', onPointerUp, false);
|
||||
removeGlobalListener(window, 'pointercancel', onPointerUp, false);
|
||||
};
|
||||
} else if (pointerDown === 'mouse' && process.env.NODE_ENV === 'test') {
|
||||
let onMouseMove = (e: MouseEvent) => {
|
||||
if (e.button === 0) {
|
||||
moveEvent(e, 'mouse', e.pageX - (state.current.lastPosition?.pageX ?? 0), e.pageY - (state.current.lastPosition?.pageY ?? 0));
|
||||
state.current.lastPosition = {pageX: e.pageX, pageY: e.pageY};
|
||||
}
|
||||
};
|
||||
let onMouseUp = (e: MouseEvent) => {
|
||||
if (e.button === 0) {
|
||||
endEvent(e, 'mouse');
|
||||
removeGlobalListener(window, 'mousemove', onMouseMove, false);
|
||||
removeGlobalListener(window, 'mouseup', onMouseUp, false);
|
||||
setPointerDown(null);
|
||||
}
|
||||
};
|
||||
addGlobalListener(window, 'mousemove', onMouseMove, false);
|
||||
addGlobalListener(window, 'mouseup', onMouseUp, false);
|
||||
return () => {
|
||||
removeGlobalListener(window, 'mousemove', onMouseMove, false);
|
||||
removeGlobalListener(window, 'mouseup', onMouseUp, false);
|
||||
};
|
||||
} else if (pointerDown === 'touch' && process.env.NODE_ENV === 'test') {
|
||||
let onTouchMove = (e: TouchEvent) => {
|
||||
let touch = [...e.changedTouches].findIndex(({identifier}) => identifier === state.current.id);
|
||||
if (touch >= 0) {
|
||||
let {pageX, pageY} = e.changedTouches[touch];
|
||||
moveEvent(e, 'touch', pageX - (state.current.lastPosition?.pageX ?? 0), pageY - (state.current.lastPosition?.pageY ?? 0));
|
||||
state.current.lastPosition = {pageX, pageY};
|
||||
}
|
||||
};
|
||||
let onTouchEnd = (e: TouchEvent) => {
|
||||
let touch = [...e.changedTouches].findIndex(({identifier}) => identifier === state.current.id);
|
||||
if (touch >= 0) {
|
||||
endEvent(e, 'touch');
|
||||
state.current.id = null;
|
||||
removeGlobalListener(window, 'touchmove', onTouchMove);
|
||||
removeGlobalListener(window, 'touchend', onTouchEnd);
|
||||
removeGlobalListener(window, 'touchcancel', onTouchEnd);
|
||||
setPointerDown(null);
|
||||
}
|
||||
};
|
||||
addGlobalListener(window, 'touchmove', onTouchMove, false);
|
||||
addGlobalListener(window, 'touchend', onTouchEnd, false);
|
||||
addGlobalListener(window, 'touchcancel', onTouchEnd, false);
|
||||
return () => {
|
||||
removeGlobalListener(window, 'touchmove', onTouchMove, false);
|
||||
removeGlobalListener(window, 'touchend', onTouchEnd, false);
|
||||
removeGlobalListener(window, 'touchcancel', onTouchEnd, false);
|
||||
};
|
||||
}
|
||||
}, [pointerDown, addGlobalListener, removeGlobalListener]);
|
||||
|
||||
let moveProps = useMemo(() => {
|
||||
let moveProps: DOMAttributes = {};
|
||||
@@ -93,47 +181,14 @@ export function useMove(props: MoveEvents): MoveResult {
|
||||
state.current.didMove = false;
|
||||
};
|
||||
|
||||
if (typeof PointerEvent === 'undefined') {
|
||||
let onMouseMove = (e: MouseEvent) => {
|
||||
if (e.button === 0) {
|
||||
move(e, 'mouse', e.pageX - (state.current.lastPosition?.pageX ?? 0), e.pageY - (state.current.lastPosition?.pageY ?? 0));
|
||||
state.current.lastPosition = {pageX: e.pageX, pageY: e.pageY};
|
||||
}
|
||||
};
|
||||
let onMouseUp = (e: MouseEvent) => {
|
||||
if (e.button === 0) {
|
||||
end(e, 'mouse');
|
||||
removeGlobalListener(window, 'mousemove', onMouseMove, false);
|
||||
removeGlobalListener(window, 'mouseup', onMouseUp, false);
|
||||
}
|
||||
};
|
||||
if (typeof PointerEvent === 'undefined' && process.env.NODE_ENV === 'test') {
|
||||
moveProps.onMouseDown = (e: React.MouseEvent) => {
|
||||
if (e.button === 0) {
|
||||
start();
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
state.current.lastPosition = {pageX: e.pageX, pageY: e.pageY};
|
||||
addGlobalListener(window, 'mousemove', onMouseMove, false);
|
||||
addGlobalListener(window, 'mouseup', onMouseUp, false);
|
||||
}
|
||||
};
|
||||
|
||||
let onTouchMove = (e: TouchEvent) => {
|
||||
let touch = [...e.changedTouches].findIndex(({identifier}) => identifier === state.current.id);
|
||||
if (touch >= 0) {
|
||||
let {pageX, pageY} = e.changedTouches[touch];
|
||||
move(e, 'touch', pageX - (state.current.lastPosition?.pageX ?? 0), pageY - (state.current.lastPosition?.pageY ?? 0));
|
||||
state.current.lastPosition = {pageX, pageY};
|
||||
}
|
||||
};
|
||||
let onTouchEnd = (e: TouchEvent) => {
|
||||
let touch = [...e.changedTouches].findIndex(({identifier}) => identifier === state.current.id);
|
||||
if (touch >= 0) {
|
||||
end(e, 'touch');
|
||||
state.current.id = null;
|
||||
removeGlobalListener(window, 'touchmove', onTouchMove);
|
||||
removeGlobalListener(window, 'touchend', onTouchEnd);
|
||||
removeGlobalListener(window, 'touchcancel', onTouchEnd);
|
||||
setPointerDown('mouse');
|
||||
}
|
||||
};
|
||||
moveProps.onTouchStart = (e: React.TouchEvent) => {
|
||||
@@ -147,34 +202,9 @@ export function useMove(props: MoveEvents): MoveResult {
|
||||
e.preventDefault();
|
||||
state.current.lastPosition = {pageX, pageY};
|
||||
state.current.id = identifier;
|
||||
addGlobalListener(window, 'touchmove', onTouchMove, false);
|
||||
addGlobalListener(window, 'touchend', onTouchEnd, false);
|
||||
addGlobalListener(window, 'touchcancel', onTouchEnd, false);
|
||||
setPointerDown('touch');
|
||||
};
|
||||
} else {
|
||||
let onPointerMove = (e: PointerEvent) => {
|
||||
if (e.pointerId === state.current.id) {
|
||||
let pointerType = (e.pointerType || 'mouse') as PointerType;
|
||||
|
||||
// Problems with PointerEvent#movementX/movementY:
|
||||
// 1. it is always 0 on macOS Safari.
|
||||
// 2. On Chrome Android, it's scaled by devicePixelRatio, but not on Chrome macOS
|
||||
move(e, pointerType, e.pageX - (state.current.lastPosition?.pageX ?? 0), e.pageY - (state.current.lastPosition?.pageY ?? 0));
|
||||
state.current.lastPosition = {pageX: e.pageX, pageY: e.pageY};
|
||||
}
|
||||
};
|
||||
|
||||
let onPointerUp = (e: PointerEvent) => {
|
||||
if (e.pointerId === state.current.id) {
|
||||
let pointerType = (e.pointerType || 'mouse') as PointerType;
|
||||
end(e, pointerType);
|
||||
state.current.id = null;
|
||||
removeGlobalListener(window, 'pointermove', onPointerMove, false);
|
||||
removeGlobalListener(window, 'pointerup', onPointerUp, false);
|
||||
removeGlobalListener(window, 'pointercancel', onPointerUp, false);
|
||||
}
|
||||
};
|
||||
|
||||
moveProps.onPointerDown = (e: React.PointerEvent) => {
|
||||
if (e.button === 0 && state.current.id == null) {
|
||||
start();
|
||||
@@ -182,9 +212,7 @@ export function useMove(props: MoveEvents): MoveResult {
|
||||
e.preventDefault();
|
||||
state.current.lastPosition = {pageX: e.pageX, pageY: e.pageY};
|
||||
state.current.id = e.pointerId;
|
||||
addGlobalListener(window, 'pointermove', onPointerMove, false);
|
||||
addGlobalListener(window, 'pointerup', onPointerUp, false);
|
||||
addGlobalListener(window, 'pointercancel', onPointerUp, false);
|
||||
setPointerDown('pointer');
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -225,7 +253,7 @@ export function useMove(props: MoveEvents): MoveResult {
|
||||
};
|
||||
|
||||
return moveProps;
|
||||
}, [state, addGlobalListener, removeGlobalListener, move, end]);
|
||||
}, [state, move, end]);
|
||||
|
||||
return {moveProps};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user