107 lines
4.4 KiB
JavaScript
107 lines
4.4 KiB
JavaScript
import { useEffect, useRef } from 'react';
|
|
import { isBrowser, noop, off, on } from './misc/util';
|
|
import useMountedState from './useMountedState';
|
|
import useSetState from './useSetState';
|
|
var useSlider = function (ref, options) {
|
|
if (options === void 0) { options = {}; }
|
|
var isMounted = useMountedState();
|
|
var isSliding = useRef(false);
|
|
var valueRef = useRef(0);
|
|
var frame = useRef(0);
|
|
var _a = useSetState({
|
|
isSliding: false,
|
|
value: 0,
|
|
}), state = _a[0], setState = _a[1];
|
|
valueRef.current = state.value;
|
|
useEffect(function () {
|
|
if (isBrowser) {
|
|
var styles = options.styles === undefined ? true : options.styles;
|
|
var reverse_1 = options.reverse === undefined ? false : options.reverse;
|
|
if (ref.current && styles) {
|
|
ref.current.style.userSelect = 'none';
|
|
}
|
|
var startScrubbing_1 = function () {
|
|
if (!isSliding.current && isMounted()) {
|
|
(options.onScrubStart || noop)();
|
|
isSliding.current = true;
|
|
setState({ isSliding: true });
|
|
bindEvents_1();
|
|
}
|
|
};
|
|
var stopScrubbing_1 = function () {
|
|
if (isSliding.current && isMounted()) {
|
|
(options.onScrubStop || noop)(valueRef.current);
|
|
isSliding.current = false;
|
|
setState({ isSliding: false });
|
|
unbindEvents_1();
|
|
}
|
|
};
|
|
var onMouseDown_1 = function (event) {
|
|
startScrubbing_1();
|
|
onMouseMove_1(event);
|
|
};
|
|
var onMouseMove_1 = options.vertical
|
|
? function (event) { return onScrub_1(event.clientY); }
|
|
: function (event) { return onScrub_1(event.clientX); };
|
|
var onTouchStart_1 = function (event) {
|
|
startScrubbing_1();
|
|
onTouchMove_1(event);
|
|
};
|
|
var onTouchMove_1 = options.vertical
|
|
? function (event) { return onScrub_1(event.changedTouches[0].clientY); }
|
|
: function (event) { return onScrub_1(event.changedTouches[0].clientX); };
|
|
var bindEvents_1 = function () {
|
|
on(document, 'mousemove', onMouseMove_1);
|
|
on(document, 'mouseup', stopScrubbing_1);
|
|
on(document, 'touchmove', onTouchMove_1);
|
|
on(document, 'touchend', stopScrubbing_1);
|
|
};
|
|
var unbindEvents_1 = function () {
|
|
off(document, 'mousemove', onMouseMove_1);
|
|
off(document, 'mouseup', stopScrubbing_1);
|
|
off(document, 'touchmove', onTouchMove_1);
|
|
off(document, 'touchend', stopScrubbing_1);
|
|
};
|
|
var onScrub_1 = function (clientXY) {
|
|
cancelAnimationFrame(frame.current);
|
|
frame.current = requestAnimationFrame(function () {
|
|
if (isMounted() && ref.current) {
|
|
var rect = ref.current.getBoundingClientRect();
|
|
var pos = options.vertical ? rect.top : rect.left;
|
|
var length_1 = options.vertical ? rect.height : rect.width;
|
|
// Prevent returning 0 when element is hidden by CSS
|
|
if (!length_1) {
|
|
return;
|
|
}
|
|
var value = (clientXY - pos) / length_1;
|
|
if (value > 1) {
|
|
value = 1;
|
|
}
|
|
else if (value < 0) {
|
|
value = 0;
|
|
}
|
|
if (reverse_1) {
|
|
value = 1 - value;
|
|
}
|
|
setState({
|
|
value: value,
|
|
});
|
|
(options.onScrub || noop)(value);
|
|
}
|
|
});
|
|
};
|
|
on(ref.current, 'mousedown', onMouseDown_1);
|
|
on(ref.current, 'touchstart', onTouchStart_1);
|
|
return function () {
|
|
off(ref.current, 'mousedown', onMouseDown_1);
|
|
off(ref.current, 'touchstart', onTouchStart_1);
|
|
};
|
|
}
|
|
else {
|
|
return undefined;
|
|
}
|
|
}, [ref, options.vertical]);
|
|
return state;
|
|
};
|
|
export default useSlider;
|