@react-aria/utils
Version:
Spectrum UI components in React
135 lines (130 loc) • 6.2 kB
JavaScript
import {getOffset as $ab71dadb03a6fb2e$export$622cea445a1c5b7d} from "./getOffset.module.js";
import {useRef as $1rnCS$useRef} from "react";
/*
* Copyright 2020 Adobe. All rights reserved.
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. You may obtain a copy
* of the License at http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/ /* eslint-disable rulesdir/pure-render */
// Keep track of elements that we are currently handling dragging for via useDrag1D.
// If there's an ancestor and a descendant both using useDrag1D(), and the user starts
// dragging the descendant, we don't want useDrag1D events to fire for the ancestor.
const $9cc09df9fd7676be$var$draggingElements = [];
function $9cc09df9fd7676be$export$7bbed75feba39706(props) {
console.warn('useDrag1D is deprecated, please use `useMove` instead https://react-spectrum.adobe.com/react-aria/useMove.html');
let { containerRef: containerRef, reverse: reverse, orientation: orientation, onHover: onHover, onDrag: onDrag, onPositionChange: onPositionChange, onIncrement: onIncrement, onDecrement: onDecrement, onIncrementToMax: onIncrementToMax, onDecrementToMin: onDecrementToMin, onCollapseToggle: onCollapseToggle } = props;
let getPosition = (e)=>orientation === 'horizontal' ? e.clientX : e.clientY;
let getNextOffset = (e)=>{
let containerOffset = (0, $ab71dadb03a6fb2e$export$622cea445a1c5b7d)(containerRef.current, reverse, orientation);
let mouseOffset = getPosition(e);
let nextOffset = reverse ? containerOffset - mouseOffset : mouseOffset - containerOffset;
return nextOffset;
};
let dragging = (0, $1rnCS$useRef)(false);
let prevPosition = (0, $1rnCS$useRef)(0);
// Keep track of the current handlers in a ref so that the events can access them.
let handlers = (0, $1rnCS$useRef)({
onPositionChange: onPositionChange,
onDrag: onDrag
});
handlers.current.onDrag = onDrag;
handlers.current.onPositionChange = onPositionChange;
let onMouseDragged = (e)=>{
e.preventDefault();
let nextOffset = getNextOffset(e);
if (!dragging.current) {
dragging.current = true;
if (handlers.current.onDrag) handlers.current.onDrag(true);
if (handlers.current.onPositionChange) handlers.current.onPositionChange(nextOffset);
}
if (prevPosition.current === nextOffset) return;
prevPosition.current = nextOffset;
if (onPositionChange) onPositionChange(nextOffset);
};
let onMouseUp = (e)=>{
const target = e.target;
dragging.current = false;
let nextOffset = getNextOffset(e);
if (handlers.current.onDrag) handlers.current.onDrag(false);
if (handlers.current.onPositionChange) handlers.current.onPositionChange(nextOffset);
$9cc09df9fd7676be$var$draggingElements.splice($9cc09df9fd7676be$var$draggingElements.indexOf(target), 1);
window.removeEventListener('mouseup', onMouseUp, false);
window.removeEventListener('mousemove', onMouseDragged, false);
};
let onMouseDown = (e)=>{
const target = e.currentTarget;
// If we're already handling dragging on a descendant with useDrag1D, then
// we don't want to handle the drag motion on this target as well.
if ($9cc09df9fd7676be$var$draggingElements.some((elt)=>target.contains(elt))) return;
$9cc09df9fd7676be$var$draggingElements.push(target);
window.addEventListener('mousemove', onMouseDragged, false);
window.addEventListener('mouseup', onMouseUp, false);
};
let onMouseEnter = ()=>{
if (onHover) onHover(true);
};
let onMouseOut = ()=>{
if (onHover) onHover(false);
};
let onKeyDown = (e)=>{
switch(e.key){
case 'Left':
case 'ArrowLeft':
if (orientation === 'horizontal') {
e.preventDefault();
if (onDecrement && !reverse) onDecrement();
else if (onIncrement && reverse) onIncrement();
}
break;
case 'Up':
case 'ArrowUp':
if (orientation === 'vertical') {
e.preventDefault();
if (onDecrement && !reverse) onDecrement();
else if (onIncrement && reverse) onIncrement();
}
break;
case 'Right':
case 'ArrowRight':
if (orientation === 'horizontal') {
e.preventDefault();
if (onIncrement && !reverse) onIncrement();
else if (onDecrement && reverse) onDecrement();
}
break;
case 'Down':
case 'ArrowDown':
if (orientation === 'vertical') {
e.preventDefault();
if (onIncrement && !reverse) onIncrement();
else if (onDecrement && reverse) onDecrement();
}
break;
case 'Home':
e.preventDefault();
if (onDecrementToMin) onDecrementToMin();
break;
case 'End':
e.preventDefault();
if (onIncrementToMax) onIncrementToMax();
break;
case 'Enter':
e.preventDefault();
if (onCollapseToggle) onCollapseToggle();
break;
}
};
return {
onMouseDown: onMouseDown,
onMouseEnter: onMouseEnter,
onMouseOut: onMouseOut,
onKeyDown: onKeyDown
};
}
export {$9cc09df9fd7676be$export$7bbed75feba39706 as useDrag1D};
//# sourceMappingURL=useDrag1D.module.js.map