1 | import { __assign, __rest } from "tslib";
|
---|
2 | import { cloneElement, useEffect, useRef, useState } from 'react';
|
---|
3 | import { render } from 'react-universal-interface';
|
---|
4 | import useLatest from './useLatest';
|
---|
5 | import { noop, off, on } from './misc/util';
|
---|
6 | var useScratch = function (params) {
|
---|
7 | if (params === void 0) { params = {}; }
|
---|
8 | var disabled = params.disabled;
|
---|
9 | var paramsRef = useLatest(params);
|
---|
10 | var _a = useState({ isScratching: false }), state = _a[0], setState = _a[1];
|
---|
11 | var refState = useRef(state);
|
---|
12 | var refScratching = useRef(false);
|
---|
13 | var refAnimationFrame = useRef(null);
|
---|
14 | var _b = useState(null), el = _b[0], setEl = _b[1];
|
---|
15 | useEffect(function () {
|
---|
16 | if (disabled)
|
---|
17 | return;
|
---|
18 | if (!el)
|
---|
19 | return;
|
---|
20 | var onMoveEvent = function (docX, docY) {
|
---|
21 | cancelAnimationFrame(refAnimationFrame.current);
|
---|
22 | refAnimationFrame.current = requestAnimationFrame(function () {
|
---|
23 | var _a = el.getBoundingClientRect(), left = _a.left, top = _a.top;
|
---|
24 | var elX = left + window.scrollX;
|
---|
25 | var elY = top + window.scrollY;
|
---|
26 | var x = docX - elX;
|
---|
27 | var y = docY - elY;
|
---|
28 | setState(function (oldState) {
|
---|
29 | var newState = __assign(__assign({}, oldState), { dx: x - (oldState.x || 0), dy: y - (oldState.y || 0), end: Date.now(), isScratching: true });
|
---|
30 | refState.current = newState;
|
---|
31 | (paramsRef.current.onScratch || noop)(newState);
|
---|
32 | return newState;
|
---|
33 | });
|
---|
34 | });
|
---|
35 | };
|
---|
36 | var onMouseMove = function (event) {
|
---|
37 | onMoveEvent(event.pageX, event.pageY);
|
---|
38 | };
|
---|
39 | var onTouchMove = function (event) {
|
---|
40 | onMoveEvent(event.changedTouches[0].pageX, event.changedTouches[0].pageY);
|
---|
41 | };
|
---|
42 | var onMouseUp;
|
---|
43 | var onTouchEnd;
|
---|
44 | var stopScratching = function () {
|
---|
45 | if (!refScratching.current)
|
---|
46 | return;
|
---|
47 | refScratching.current = false;
|
---|
48 | refState.current = __assign(__assign({}, refState.current), { isScratching: false });
|
---|
49 | (paramsRef.current.onScratchEnd || noop)(refState.current);
|
---|
50 | setState({ isScratching: false });
|
---|
51 | off(window, 'mousemove', onMouseMove);
|
---|
52 | off(window, 'touchmove', onTouchMove);
|
---|
53 | off(window, 'mouseup', onMouseUp);
|
---|
54 | off(window, 'touchend', onTouchEnd);
|
---|
55 | };
|
---|
56 | onMouseUp = stopScratching;
|
---|
57 | onTouchEnd = stopScratching;
|
---|
58 | var startScratching = function (docX, docY) {
|
---|
59 | if (!refScratching.current)
|
---|
60 | return;
|
---|
61 | var _a = el.getBoundingClientRect(), left = _a.left, top = _a.top;
|
---|
62 | var elX = left + window.scrollX;
|
---|
63 | var elY = top + window.scrollY;
|
---|
64 | var x = docX - elX;
|
---|
65 | var y = docY - elY;
|
---|
66 | var time = Date.now();
|
---|
67 | var newState = {
|
---|
68 | isScratching: true,
|
---|
69 | start: time,
|
---|
70 | end: time,
|
---|
71 | docX: docX,
|
---|
72 | docY: docY,
|
---|
73 | x: x,
|
---|
74 | y: y,
|
---|
75 | dx: 0,
|
---|
76 | dy: 0,
|
---|
77 | elH: el.offsetHeight,
|
---|
78 | elW: el.offsetWidth,
|
---|
79 | elX: elX,
|
---|
80 | elY: elY,
|
---|
81 | };
|
---|
82 | refState.current = newState;
|
---|
83 | (paramsRef.current.onScratchStart || noop)(newState);
|
---|
84 | setState(newState);
|
---|
85 | on(window, 'mousemove', onMouseMove);
|
---|
86 | on(window, 'touchmove', onTouchMove);
|
---|
87 | on(window, 'mouseup', onMouseUp);
|
---|
88 | on(window, 'touchend', onTouchEnd);
|
---|
89 | };
|
---|
90 | var onMouseDown = function (event) {
|
---|
91 | refScratching.current = true;
|
---|
92 | startScratching(event.pageX, event.pageY);
|
---|
93 | };
|
---|
94 | var onTouchStart = function (event) {
|
---|
95 | refScratching.current = true;
|
---|
96 | startScratching(event.changedTouches[0].pageX, event.changedTouches[0].pageY);
|
---|
97 | };
|
---|
98 | on(el, 'mousedown', onMouseDown);
|
---|
99 | on(el, 'touchstart', onTouchStart);
|
---|
100 | return function () {
|
---|
101 | off(el, 'mousedown', onMouseDown);
|
---|
102 | off(el, 'touchstart', onTouchStart);
|
---|
103 | off(window, 'mousemove', onMouseMove);
|
---|
104 | off(window, 'touchmove', onTouchMove);
|
---|
105 | off(window, 'mouseup', onMouseUp);
|
---|
106 | off(window, 'touchend', onTouchEnd);
|
---|
107 | if (refAnimationFrame.current)
|
---|
108 | cancelAnimationFrame(refAnimationFrame.current);
|
---|
109 | refAnimationFrame.current = null;
|
---|
110 | refScratching.current = false;
|
---|
111 | refState.current = { isScratching: false };
|
---|
112 | setState(refState.current);
|
---|
113 | };
|
---|
114 | }, [el, disabled, paramsRef]);
|
---|
115 | return [setEl, state];
|
---|
116 | };
|
---|
117 | export var ScratchSensor = function (props) {
|
---|
118 | var children = props.children, params = __rest(props, ["children"]);
|
---|
119 | var _a = useScratch(params), ref = _a[0], state = _a[1];
|
---|
120 | var element = render(props, state);
|
---|
121 | return cloneElement(element, __assign(__assign({}, element.props), { ref: function (el) {
|
---|
122 | if (element.props.ref) {
|
---|
123 | if (typeof element.props.ref === 'object')
|
---|
124 | element.props.ref.current = el;
|
---|
125 | if (typeof element.props.ref === 'function')
|
---|
126 | element.props.ref(el);
|
---|
127 | }
|
---|
128 | ref(el);
|
---|
129 | } }));
|
---|
130 | };
|
---|
131 | export default useScratch;
|
---|