@react-aria/utils
Version:
Spectrum UI components in React
140 lines (133 loc) • 6.33 kB
JavaScript
var $16ec41ef3e36c19c$exports = require("./getOffset.main.js");
var $hK8r3$react = require("react");
function $parcel$export(e, n, v, s) {
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
}
$parcel$export(module.exports, "useDrag1D", () => $28ed3fb20343b78b$export$7bbed75feba39706);
/*
* 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 $28ed3fb20343b78b$var$draggingElements = [];
function $28ed3fb20343b78b$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, $16ec41ef3e36c19c$exports.getOffset)(containerRef.current, reverse, orientation);
let mouseOffset = getPosition(e);
let nextOffset = reverse ? containerOffset - mouseOffset : mouseOffset - containerOffset;
return nextOffset;
};
let dragging = (0, $hK8r3$react.useRef)(false);
let prevPosition = (0, $hK8r3$react.useRef)(0);
// Keep track of the current handlers in a ref so that the events can access them.
let handlers = (0, $hK8r3$react.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);
$28ed3fb20343b78b$var$draggingElements.splice($28ed3fb20343b78b$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 ($28ed3fb20343b78b$var$draggingElements.some((elt)=>target.contains(elt))) return;
$28ed3fb20343b78b$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
};
}
//# sourceMappingURL=useDrag1D.main.js.map