135 lines
6.0 KiB
JavaScript
135 lines
6.0 KiB
JavaScript
import {getOffset as $ab71dadb03a6fb2e$export$622cea445a1c5b7d} from "./getOffset.mjs";
|
|
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
|