styled-hook-form
Version:
React form library for styled-components based on grommet and react-hook-form
97 lines (96 loc) • 3.54 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.LongPressButton = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const grommet_1 = require("grommet");
const react_1 = require("react");
const LongPressButton = (props) => {
const time = () => new Date();
const [, setIsIn] = react_1.useState(false);
const [, setDownTime] = react_1.useState(0);
const [/*longPressNotified*/ , setLongPressNotified] = react_1.useState(false);
const [, setLastTime] = react_1.useState(0);
let { pressCallbackTreshold = 100, initialDelay = 500,
//longPressTreshold = 1000,
//onLongPress,
whilePress, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, } = props;
let [timerHandle, setTimerHandle] = react_1.useState(-1);
const handleMouseDown = (e) => {
setLongPressNotified(false);
setLastTime(time().getTime());
setTimeout(() => {
if (timerHandle === -1) {
let handle = setInterval(() => {
setLastTime((lt) => {
let ct = time().getTime();
if (ct - lt > initialDelay) {
setIsIn((iin) => {
if (iin && whilePress) {
whilePress();
}
return iin;
});
}
return lt;
});
}, pressCallbackTreshold);
setTimerHandle(handle);
}
}, 1);
onMouseDown && onMouseDown(e);
};
const handleMouseUp = (e) => {
setLastTime((lt) => {
let ct = time().getTime();
setDownTime(ct);
if (ct - lt < pressCallbackTreshold) {
clearInterval(timerHandle);
}
return lt;
});
if (timerHandle !== -1) {
clearInterval(timerHandle);
setTimerHandle(-1);
}
setLastTime(0);
onMouseUp && onMouseUp(e);
};
const handleMouseEnter = (e) => {
setIsIn(true);
onMouseEnter && onMouseEnter(e);
};
const handleMouseLeave = (e) => {
setIsIn(false);
onMouseLeave && onMouseLeave(e);
};
react_1.useEffect(() => {
const mouseUpHandler = () => {
setTimerHandle((h) => {
if (h !== -1) {
clearInterval(h);
}
return -1;
});
};
window.addEventListener("mouseup", mouseUpHandler);
return () => window.removeEventListener("mouseup", mouseUpHandler);
}, []);
// useEffect(() => {
// let lpHandle = setInterval(() => {
// setLastTime((lt) => {
// if (longPressNotified || lt === 0 ) {
// return lt;
// }
// let diff = time().getTime() - lt;
// if (diff >= longPressTreshold && !longPressNotified) {
// setLongPressNotified(true);
// onLongPress && onLongPress();
// }
// return lt;
// });
// return () => clearInterval(lpHandle);
// }, Number.MAX_VALUE);
// }, []);
return (jsx_runtime_1.jsx(grommet_1.Button, Object.assign({}, props, { onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }), void 0));
};
exports.LongPressButton = LongPressButton;