@kubit-ui-web/react-components
Version:
Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience
101 lines • 4.13 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useSwipeDown = void 0;
const react_1 = require("react");
const string_utility_1 = require("../../utils/stringUtility/string.utility");
const distanceToTriggerClose = 30;
const useSwipeDown = (animationOptions, handleClose) => {
const containerRef = (0, react_1.useRef)(null);
const dragRef = (0, react_1.useRef)(null);
const setPopoverRef = (0, react_1.useCallback)(node => {
if (node) {
containerRef.current = node;
}
else {
containerRef.current = null;
}
}, []);
const setDragIconRef = (0, react_1.useCallback)(node => {
if (node) {
dragRef.current = node;
dragRef?.current?.addEventListener('mousedown', startMove);
dragRef?.current?.addEventListener('mousemove', currentMove);
dragRef?.current?.addEventListener('mouseup', endMove);
dragRef?.current?.addEventListener('touchstart', startMove);
dragRef?.current?.addEventListener('touchmove', currentMove);
dragRef?.current?.addEventListener('touchend', endMove);
}
else {
dragRef?.current?.removeEventListener('mousedown', startMove);
dragRef?.current?.removeEventListener('mousemove', currentMove);
dragRef?.current?.removeEventListener('mouseup', endMove);
dragRef?.current?.removeEventListener('touchstart', startMove);
dragRef?.current?.removeEventListener('touchmove', currentMove);
dragRef?.current?.removeEventListener('touchend', endMove);
dragRef.current = null;
}
}, []);
const animationExitDuration = (((0, string_utility_1.convertDurationToNumber)(animationOptions?.exitDuration) ||
(0, string_utility_1.convertDurationToNumber)(animationOptions?.duration) ||
0) +
((0, string_utility_1.convertDurationToNumber)(animationOptions?.delay) || 0)) *
1000;
const currentBottom = (0, react_1.useRef)(0);
const yStart = (0, react_1.useRef)(0);
const yEnd = (0, react_1.useRef)(0);
const dragMove = (0, react_1.useRef)(false);
const startMove = e => {
const swiperContent = containerRef?.current;
if (!swiperContent) {
return;
}
e.preventDefault?.();
swiperContent.style.removeProperty('transition');
if (e.type === 'touchstart') {
yStart.current = e.touches[0].clientY;
}
else {
yStart.current = e.clientY;
}
dragMove.current = true;
yEnd.current = null;
};
const currentMove = e => {
const swiperContent = containerRef?.current;
if (!dragMove.current || !swiperContent) {
return;
}
if (e.type === 'touchmove' && yEnd !== null) {
yEnd.current = e.touches[0].clientY;
}
else {
yEnd.current = e.clientY;
}
const currentMove = yStart.current - yEnd.current;
if (yEnd.current < yStart.current) {
return;
}
swiperContent.style.bottom = `${currentBottom.current + currentMove}px`;
};
const waitForAnimation = ms => new Promise(resolve => setTimeout(resolve, ms));
const endMove = async () => {
const swiperContent = containerRef?.current;
if (!swiperContent || !yEnd.current) {
return;
}
dragMove.current = false;
swiperContent.style.setProperty('transition', `bottom ${animationExitDuration}ms linear`);
if (yEnd.current < yStart.current + distanceToTriggerClose) {
swiperContent.style.bottom = '0px';
return;
}
// Move modal
const distance = currentBottom.current + swiperContent.scrollHeight;
swiperContent.style.bottom = `-${distance}px`;
await waitForAnimation(animationExitDuration);
handleClose?.();
};
return { setPopoverRef, setDragIconRef };
};
exports.useSwipeDown = useSwipeDown;
//# sourceMappingURL=useSwipeDown.js.map