@carbon/ibm-products
Version:
Carbon for IBM Products
67 lines (65 loc) • 2.15 kB
JavaScript
/**
* Copyright IBM Corp. 2020, 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/global/js/hooks/useCollapsible.ts
/**
* Copyright IBM Corp. 2025, 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 DRAG_THRESHOLD = 5;
/**
* Custom hook to manage collapsible header behavior based on scroll and drag gestures.
*
* This avoids relying solely on scroll events because collapsing the header can
* remove scrollable space, preventing further scroll events from firing.
*/
function useCollapsible({ container, triggerCollapse, disableHeaderCollapse = false }) {
(0, react.useEffect)(() => {
if (!container || disableHeaderCollapse) return;
let startY = null;
let isDragging = false;
const evaluateDragDirection = (diffY) => {
if (diffY > DRAG_THRESHOLD) triggerCollapse(true);
else if (diffY < -DRAG_THRESHOLD) triggerCollapse(false);
};
const onPointerDown = (e) => {
startY = e.clientY;
isDragging = true;
};
const onPointerMove = (e) => {
if (!isDragging || startY === null) return;
evaluateDragDirection(startY - e.clientY);
};
const onPointerUp = () => {
isDragging = false;
startY = null;
document.body.style.cursor = "default";
};
const onWheel = (e) => {
triggerCollapse(e.deltaY > 0);
};
container.addEventListener("pointerdown", onPointerDown);
container.addEventListener("pointermove", onPointerMove);
container.addEventListener("pointerup", onPointerUp);
container.addEventListener("wheel", onWheel);
return () => {
container.removeEventListener("pointerdown", onPointerDown);
container.removeEventListener("pointermove", onPointerMove);
container.removeEventListener("pointerup", onPointerUp);
container.removeEventListener("wheel", onWheel);
};
}, [
container,
triggerCollapse,
disableHeaderCollapse
]);
}
//#endregion
exports.useCollapsible = useCollapsible;