1 | "use strict";
|
---|
2 | Object.defineProperty(exports, "__esModule", { value: true });
|
---|
3 | var tslib_1 = require("tslib");
|
---|
4 | var react_1 = require("react");
|
---|
5 | var util_1 = require("./misc/util");
|
---|
6 | var useMountedState_1 = tslib_1.__importDefault(require("./useMountedState"));
|
---|
7 | var useSetState_1 = tslib_1.__importDefault(require("./useSetState"));
|
---|
8 | var useSlider = function (ref, options) {
|
---|
9 | if (options === void 0) { options = {}; }
|
---|
10 | var isMounted = useMountedState_1.default();
|
---|
11 | var isSliding = react_1.useRef(false);
|
---|
12 | var valueRef = react_1.useRef(0);
|
---|
13 | var frame = react_1.useRef(0);
|
---|
14 | var _a = useSetState_1.default({
|
---|
15 | isSliding: false,
|
---|
16 | value: 0,
|
---|
17 | }), state = _a[0], setState = _a[1];
|
---|
18 | valueRef.current = state.value;
|
---|
19 | react_1.useEffect(function () {
|
---|
20 | if (util_1.isBrowser) {
|
---|
21 | var styles = options.styles === undefined ? true : options.styles;
|
---|
22 | var reverse_1 = options.reverse === undefined ? false : options.reverse;
|
---|
23 | if (ref.current && styles) {
|
---|
24 | ref.current.style.userSelect = 'none';
|
---|
25 | }
|
---|
26 | var startScrubbing_1 = function () {
|
---|
27 | if (!isSliding.current && isMounted()) {
|
---|
28 | (options.onScrubStart || util_1.noop)();
|
---|
29 | isSliding.current = true;
|
---|
30 | setState({ isSliding: true });
|
---|
31 | bindEvents_1();
|
---|
32 | }
|
---|
33 | };
|
---|
34 | var stopScrubbing_1 = function () {
|
---|
35 | if (isSliding.current && isMounted()) {
|
---|
36 | (options.onScrubStop || util_1.noop)(valueRef.current);
|
---|
37 | isSliding.current = false;
|
---|
38 | setState({ isSliding: false });
|
---|
39 | unbindEvents_1();
|
---|
40 | }
|
---|
41 | };
|
---|
42 | var onMouseDown_1 = function (event) {
|
---|
43 | startScrubbing_1();
|
---|
44 | onMouseMove_1(event);
|
---|
45 | };
|
---|
46 | var onMouseMove_1 = options.vertical
|
---|
47 | ? function (event) { return onScrub_1(event.clientY); }
|
---|
48 | : function (event) { return onScrub_1(event.clientX); };
|
---|
49 | var onTouchStart_1 = function (event) {
|
---|
50 | startScrubbing_1();
|
---|
51 | onTouchMove_1(event);
|
---|
52 | };
|
---|
53 | var onTouchMove_1 = options.vertical
|
---|
54 | ? function (event) { return onScrub_1(event.changedTouches[0].clientY); }
|
---|
55 | : function (event) { return onScrub_1(event.changedTouches[0].clientX); };
|
---|
56 | var bindEvents_1 = function () {
|
---|
57 | util_1.on(document, 'mousemove', onMouseMove_1);
|
---|
58 | util_1.on(document, 'mouseup', stopScrubbing_1);
|
---|
59 | util_1.on(document, 'touchmove', onTouchMove_1);
|
---|
60 | util_1.on(document, 'touchend', stopScrubbing_1);
|
---|
61 | };
|
---|
62 | var unbindEvents_1 = function () {
|
---|
63 | util_1.off(document, 'mousemove', onMouseMove_1);
|
---|
64 | util_1.off(document, 'mouseup', stopScrubbing_1);
|
---|
65 | util_1.off(document, 'touchmove', onTouchMove_1);
|
---|
66 | util_1.off(document, 'touchend', stopScrubbing_1);
|
---|
67 | };
|
---|
68 | var onScrub_1 = function (clientXY) {
|
---|
69 | cancelAnimationFrame(frame.current);
|
---|
70 | frame.current = requestAnimationFrame(function () {
|
---|
71 | if (isMounted() && ref.current) {
|
---|
72 | var rect = ref.current.getBoundingClientRect();
|
---|
73 | var pos = options.vertical ? rect.top : rect.left;
|
---|
74 | var length_1 = options.vertical ? rect.height : rect.width;
|
---|
75 | // Prevent returning 0 when element is hidden by CSS
|
---|
76 | if (!length_1) {
|
---|
77 | return;
|
---|
78 | }
|
---|
79 | var value = (clientXY - pos) / length_1;
|
---|
80 | if (value > 1) {
|
---|
81 | value = 1;
|
---|
82 | }
|
---|
83 | else if (value < 0) {
|
---|
84 | value = 0;
|
---|
85 | }
|
---|
86 | if (reverse_1) {
|
---|
87 | value = 1 - value;
|
---|
88 | }
|
---|
89 | setState({
|
---|
90 | value: value,
|
---|
91 | });
|
---|
92 | (options.onScrub || util_1.noop)(value);
|
---|
93 | }
|
---|
94 | });
|
---|
95 | };
|
---|
96 | util_1.on(ref.current, 'mousedown', onMouseDown_1);
|
---|
97 | util_1.on(ref.current, 'touchstart', onTouchStart_1);
|
---|
98 | return function () {
|
---|
99 | util_1.off(ref.current, 'mousedown', onMouseDown_1);
|
---|
100 | util_1.off(ref.current, 'touchstart', onTouchStart_1);
|
---|
101 | };
|
---|
102 | }
|
---|
103 | else {
|
---|
104 | return undefined;
|
---|
105 | }
|
---|
106 | }, [ref, options.vertical]);
|
---|
107 | return state;
|
---|
108 | };
|
---|
109 | exports.default = useSlider;
|
---|