@carbon/react
Version:
React components for the Carbon Design System
106 lines (104 loc) • 3.49 kB
JavaScript
/**
* Copyright IBM Corp. 2016, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
require("../../_virtual/_rolldown/runtime.js");
let react = require("react");
//#region src/components/Tabs/usePressable.ts
/**
* Copyright IBM Corp. 2016, 2025
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
const usePressable = (ref, { onPress, onPressIn, onPressOut, onLongPress, delayLongPressMs = 500 } = {}) => {
const savedOnPress = (0, react.useRef)(onPress);
const savedOnPressIn = (0, react.useRef)(onPressIn);
const savedOnPressOut = (0, react.useRef)(onPressOut);
const savedOnLongPress = (0, react.useRef)(onLongPress);
const [pendingLongPress, setPendingLongPress] = (0, react.useState)(false);
const [longPress, setLongPress] = (0, react.useState)(false);
const state = (0, react.useRef)({ longPress: false });
(0, react.useEffect)(() => {
savedOnPress.current = onPress;
}, [onPress]);
(0, react.useEffect)(() => {
savedOnPressIn.current = onPressIn;
}, [onPressIn]);
(0, react.useEffect)(() => {
savedOnPressOut.current = onPressOut;
}, [onPressOut]);
(0, react.useEffect)(() => {
savedOnLongPress.current = onLongPress;
}, [onLongPress]);
(0, react.useEffect)(() => {
const element = ref.current;
if (!element) return;
const onPointerDown = (event) => {
setPendingLongPress(true);
savedOnPressIn.current?.();
event.preventDefault();
};
const onPointerUp = () => {
setPendingLongPress(false);
setLongPress(false);
savedOnPressOut.current?.(state.current);
};
const onPointerCancel = () => {
setPendingLongPress(false);
setLongPress(false);
savedOnPressOut.current?.(state.current);
state.current.longPress = false;
};
const onPointerLeave = () => {
setPendingLongPress(false);
setLongPress(false);
savedOnPressOut.current?.(state.current);
state.current.longPress = false;
};
const onClick = () => {
setLongPress(false);
setPendingLongPress(false);
savedOnPress.current?.(state.current);
state.current.longPress = false;
};
const onContextMenu = (event) => {
event.preventDefault();
};
element.addEventListener("pointerdown", onPointerDown);
element.addEventListener("pointerup", onPointerUp);
element.addEventListener("pointercancel", onPointerCancel);
element.addEventListener("pointerleave", onPointerLeave);
element.addEventListener("click", onClick);
element.addEventListener("contextmenu", onContextMenu);
return () => {
element.removeEventListener("pointerdown", onPointerDown);
element.removeEventListener("pointerup", onPointerUp);
element.removeEventListener("pointercancel", onPointerCancel);
element.removeEventListener("pointerleave", onPointerLeave);
element.removeEventListener("click", onClick);
element.removeEventListener("contextmenu", onContextMenu);
};
}, [ref]);
(0, react.useEffect)(() => {
if (pendingLongPress) {
const timeoutId = setTimeout(() => {
setPendingLongPress(false);
setLongPress(true);
}, delayLongPressMs);
return () => {
clearTimeout(timeoutId);
};
}
}, [pendingLongPress, delayLongPressMs]);
(0, react.useEffect)(() => {
if (longPress) {
state.current.longPress = true;
return savedOnLongPress.current?.();
}
}, [longPress]);
};
//#endregion
exports.usePressable = usePressable;