@gluestack-ui/core
Version:
Universal UI components for React Native, Expo, and Next.js
142 lines • 5.71 kB
JavaScript
import { disableTextSelection, restoreTextSelection } from './textSelection';
import { useMemo, useRef } from 'react';
import { useGlobalListeners } from '@react-aria/utils';
export function useMove(props) {
let { onMoveStart, onMove, onMoveEnd } = props;
let state = useRef({ didMove: false, lastPosition: null, id: null });
let { addGlobalListener, removeGlobalListener } = useGlobalListeners();
let moveProps = useMemo(() => {
let moveProps = {};
let start = () => {
disableTextSelection();
state.current.didMove = false;
};
let move = (pointerType, deltaX, deltaY) => {
if (deltaX === 0 && deltaY === 0) {
return;
}
if (!state.current.didMove) {
state.current.didMove = true;
onMoveStart === null || onMoveStart === void 0 ? void 0 : onMoveStart({
type: 'movestart',
pointerType,
});
}
onMove({
type: 'move',
pointerType,
deltaX: deltaX,
deltaY: deltaY,
});
};
let end = (pointerType) => {
restoreTextSelection();
if (state.current.didMove) {
onMoveEnd === null || onMoveEnd === void 0 ? void 0 : onMoveEnd({
type: 'moveend',
pointerType,
});
}
};
if (typeof PointerEvent !== 'undefined') {
let onMouseMove = (e) => {
if (e.button === 0) {
move('mouse', e.pageX - state.current.lastPosition.pageX, e.pageY - state.current.lastPosition.pageY);
state.current.lastPosition = { pageX: e.pageX, pageY: e.pageY };
}
};
let onMouseUp = (e) => {
if (e.button === 0) {
end('mouse');
removeGlobalListener(window, 'mousemove', onMouseMove, false);
removeGlobalListener(window, 'mouseup', onMouseUp, false);
}
};
moveProps.onMouseDown = (e) => {
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) => {
let touch = [...e.changedTouches].findIndex(({ identifier }) => identifier === state.current.id);
if (touch >= 0) {
let { pageX, pageY } = e.changedTouches[touch];
move('touch', pageX - state.current.lastPosition.pageX, pageY - state.current.lastPosition.pageY);
state.current.lastPosition = { pageX, pageY };
}
};
let onTouchEnd = (e) => {
let touch = [...e.changedTouches].findIndex(({ identifier }) => identifier === state.current.id);
if (touch >= 0) {
end('touch');
state.current.id = null;
removeGlobalListener(window, 'touchmove', onTouchMove);
removeGlobalListener(window, 'touchend', onTouchEnd);
removeGlobalListener(window, 'touchcancel', onTouchEnd);
}
};
moveProps.onTouchStart = (e) => {
if (e.changedTouches.length === 0 || state.current.id != null) {
return;
}
let { pageX, pageY, identifier } = e.changedTouches[0];
start();
e.stopPropagation();
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);
};
}
let triggerKeyboardMove = (deltaX, deltaY) => {
start();
move('keyboard', deltaX, deltaY);
end('keyboard');
};
moveProps.onKeyDown = (e) => {
switch (e.key) {
case 'Left':
case 'ArrowLeft':
e.preventDefault();
e.stopPropagation();
triggerKeyboardMove(-1, 0);
break;
case 'Right':
case 'ArrowRight':
e.preventDefault();
e.stopPropagation();
triggerKeyboardMove(1, 0);
break;
case 'Up':
case 'ArrowUp':
e.preventDefault();
e.stopPropagation();
triggerKeyboardMove(0, -1);
break;
case 'Down':
case 'ArrowDown':
e.preventDefault();
e.stopPropagation();
triggerKeyboardMove(0, 1);
break;
}
};
return moveProps;
}, [
state,
onMoveStart,
onMove,
onMoveEnd,
addGlobalListener,
removeGlobalListener,
]);
return { moveProps };
}
//# sourceMappingURL=useMove.web.js.map