@bytedance/mona-client-web
Version:
web for mona
171 lines • 8.34 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import { useState, useRef, useEffect } from 'react';
import { formatMouseEvent, formatTouchEvent, formatTransitionEvent, formatAnimationEvent } from './utils';
var LONG_DURATION = 350;
var HOVER_START_TIME = 20;
var HOVER_STAY_TIME = 70;
function isFunc(val) {
return typeof val === 'function';
}
export function useHandlers(props) {
var onTouchStart = props.onTouchStart, onTouchMove = props.onTouchMove, onTouchCancel = props.onTouchCancel, onTouchEnd = props.onTouchEnd, onTap = props.onTap, onLongPress = props.onLongPress, onLongTap = props.onLongTap, onTransitionEnd = props.onTransitionEnd, onAnimationStart = props.onAnimationStart, onAnimationIteration = props.onAnimationIteration, onAnimationEnd = props.onAnimationEnd,
// no implement
onTouchForceChange = props.onTouchForceChange,
// catchEvents
catchTouchStart = props.catchTouchStart, catchTouchMove = props.catchTouchMove, catchTouchCancel = props.catchTouchCancel, catchTouchEnd = props.catchTouchEnd, catchTap = props.catchTap, catchLongPress = props.catchLongPress, catchLongTap = props.catchLongTap, catchTransitionEnd = props.catchTransitionEnd, catchAnimationStart = props.catchAnimationStart, catchAnimationIteration = props.catchAnimationIteration, catchAnimationEnd = props.catchAnimationEnd,
// no implement
catchTouchForceChange = props.catchTouchForceChange, className = props.className, _a = props.hoverClassName, hoverClassName = _a === void 0 ? '' : _a, _b = props.hoverStartTime, hoverStartTime = _b === void 0 ? HOVER_START_TIME : _b, _c = props.hoverStayTime, hoverStayTime = _c === void 0 ? HOVER_STAY_TIME : _c, restProps = __rest(props, ["onTouchStart", "onTouchMove", "onTouchCancel", "onTouchEnd", "onTap", "onLongPress", "onLongTap", "onTransitionEnd", "onAnimationStart", "onAnimationIteration", "onAnimationEnd", "onTouchForceChange", "catchTouchStart", "catchTouchMove", "catchTouchCancel", "catchTouchEnd", "catchTap", "catchLongPress", "catchLongTap", "catchTransitionEnd", "catchAnimationStart", "catchAnimationIteration", "catchAnimationEnd", "catchTouchForceChange", "className", "hoverClassName", "hoverStartTime", "hoverStayTime"]);
var _d = useState(false), isHover = _d[0], setIsHover = _d[1];
var timersRef = useRef([]);
var hoverRef = useRef(false);
var shouldEmitLongEventRef = useRef(false);
var delay = function (callback, time) {
timersRef.current.push(setTimeout(function () {
callback();
}, time));
};
var stop = function () {
hoverRef.current = false;
delay(function () {
hoverClassName && isHover && setIsHover(false);
}, hoverStayTime);
};
useEffect(function () { return function () { return timersRef.current.forEach(function (t) { return clearTimeout(t); }); }; }, []);
var handleTouchStart = function (e) {
hoverRef.current = true;
shouldEmitLongEventRef.current = false;
delay(function () {
hoverClassName && hoverRef.current && setIsHover(true);
}, hoverStartTime);
delay(function () {
// simulate long press
if (hoverRef.current) {
shouldEmitLongEventRef.current = true;
}
}, LONG_DURATION);
var event = formatTouchEvent({ event: e });
isFunc(onTouchStart) && onTouchStart(event);
if (isFunc(catchTouchStart)) {
e.stopPropagation();
catchTouchStart(event);
}
};
var handleTouchMove = function (e) {
stop();
var event = formatTouchEvent({ event: e });
isFunc(onTouchMove) && onTouchMove(event);
if (isFunc(catchTouchMove)) {
e.stopPropagation();
catchTouchMove(event);
}
};
var handleTouchEnd = function (e) {
stop();
var event = formatTouchEvent({ event: e });
isFunc(onTouchEnd) && onTouchEnd(event);
if (isFunc(catchTouchEnd)) {
e.stopPropagation();
catchTouchEnd(event);
}
if (shouldEmitLongEventRef.current) {
var longTapEvent = formatTouchEvent({ event: e, type: 'longtap' });
isFunc(onLongTap) && onLongTap(longTapEvent);
if (isFunc(catchLongTap)) {
e.stopPropagation();
catchLongTap(longTapEvent);
}
var longPressEvent = formatTouchEvent({ event: e, type: 'longpress' });
if (isFunc(onLongPress)) {
onLongPress(longPressEvent);
}
if (isFunc(catchLongPress)) {
e.stopPropagation();
catchLongPress(longPressEvent);
}
}
};
var handleTouchCancel = function (e) {
stop();
var event = formatTouchEvent({ event: e });
isFunc(onTouchCancel) && onTouchCancel(event);
if (isFunc(catchTouchCancel)) {
e.stopPropagation();
catchTouchCancel(event);
}
};
var handleTap = function (e) {
// if longPressEvent already emited, this event will not emit
if (!(shouldEmitLongEventRef.current && isFunc(onLongPress))) {
var event_1 = formatMouseEvent({ event: e, type: 'tap' });
isFunc(onTap) && onTap(event_1);
if (isFunc(catchTap)) {
e.stopPropagation();
catchTap(event_1);
}
}
};
var handleTransitionEnd = function (e) {
var event = formatTransitionEvent({ event: e });
isFunc(onTransitionEnd) && onTransitionEnd(event);
if (isFunc(catchTransitionEnd)) {
e.stopPropagation();
catchTransitionEnd(event);
}
};
var handleAnimationStart = function (e) {
var event = formatAnimationEvent({ event: e });
isFunc(onAnimationStart) && onAnimationStart(event);
if (isFunc(catchAnimationStart)) {
e.stopPropagation();
catchAnimationStart(event);
}
};
var handleAnimationEnd = function (e) {
var event = formatAnimationEvent({ event: e });
isFunc(onAnimationEnd) && onAnimationEnd(event);
if (isFunc(catchAnimationEnd)) {
e.stopPropagation();
catchAnimationEnd(event);
}
};
var handleAnimationIteration = function (e) {
var event = formatAnimationEvent({ event: e });
isFunc(onAnimationIteration) && onAnimationIteration(event);
if (isFunc(catchAnimationIteration)) {
e.stopPropagation();
catchAnimationIteration(event);
}
};
var handleClassName = function (name) {
if (Array.isArray(name)) {
name = name.join(' ');
}
return "".concat(name !== null && name !== void 0 ? name : '', " ").concat(className !== null && className !== void 0 ? className : '', " ").concat(hoverClassName && isHover ? hoverClassName : '', " ").trim() || undefined;
};
return __assign({ onClick: handleTap, onTouchStart: handleTouchStart, onTouchEnd: handleTouchEnd, onTouchMove: handleTouchMove, onTouchCancel: handleTouchCancel, onTransitionEnd: handleTransitionEnd, onAnimationStart: handleAnimationStart, onAnimationIteration: handleAnimationIteration, onAnimationEnd: handleAnimationEnd,
// no implemented
// onTouchForceChange: undefined,
handleClassName: handleClassName }, restProps);
}
//# sourceMappingURL=hooks.js.map