@devshack/react-circular-input
Version:
React components for easily composing a circular range input
73 lines • 2.76 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = require("react");
var _1 = require("./");
function useCircularDrag(ref) {
var _a = _1.useCircularInputContext(), onChange = _a.onChange, getValueFromPointerEvent = _a.getValueFromPointerEvent;
var _b = react_1.useState(false), isDragging = _b[0], setDragging = _b[1];
var handleStart = react_1.useCallback(function (e) {
if (!onChange)
return;
stopEvent(e);
setDragging(true);
var nearestValue = getValueFromPointerEvent(e);
onChange(nearestValue);
}, [onChange]);
var handleMove = react_1.useCallback(function (e) {
stopEvent(e);
var nearestValue = getValueFromPointerEvent(e);
onChange(nearestValue);
}, [onChange]);
var handleEnd = function (e) {
stopEvent(e);
setDragging(false);
};
// we can't just use React for this due to needing { passive: false } to prevent touch devices scrolling
react_1.useEffect(function () {
if (!ref.current)
return;
addStartListeners(ref.current, handleStart);
return function () {
if (!ref.current)
return;
removeStartListeners(ref.current, handleStart);
};
}, [ref, handleStart]);
react_1.useEffect(function () {
if (!isDragging)
return;
addListeners(handleMove, handleEnd);
return function () {
removeListeners(handleMove, handleEnd);
};
}, [isDragging, handleMove]);
return { isDragging: isDragging };
}
exports.useCircularDrag = useCircularDrag;
function addStartListeners(element, onStart) {
element.addEventListener('mousedown', onStart, { passive: false });
element.addEventListener('touchstart', onStart, { passive: false });
}
function removeStartListeners(element, onStart) {
element.removeEventListener('mousedown', onStart);
element.removeEventListener('touchstart', onStart);
}
function addListeners(onMove, onEnd) {
document.addEventListener('mousemove', onMove, { passive: false });
document.addEventListener('touchmove', onMove, { passive: false });
document.addEventListener('mouseup', onEnd, { passive: false });
document.addEventListener('touchend', onEnd, { passive: false });
}
function removeListeners(onMove, onEnd) {
document.removeEventListener('mousemove', onMove);
document.removeEventListener('touchmove', onMove);
document.removeEventListener('mouseup', onEnd);
document.removeEventListener('touchend', onEnd);
}
function stopEvent(e) {
e.stopPropagation();
if (e.cancelable) {
e.preventDefault();
}
}
//# sourceMappingURL=useCircularDrag.js.map