@carbon/ibm-products
Version:
Carbon for IBM Products
64 lines (62 loc) • 2.02 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.
*/
import { useIsomorphicEffect } from "../../global/js/hooks/useIsomorphicEffect.js";
import { useCallback, useEffect, useState } from "react";
//#region src/components/ScrollGradient/constants.js
/**
* Copyright IBM Corp. 2024
*
* 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 ScrollStates = {
NONE: "NONE",
INITIAL: "INITIAL",
STARTED: "STARTED",
END: "END"
};
const useIsOverflow = (ref) => {
const [isHorizontallyScrollable, setIsHorizontallyScrollable] = useState();
const [isVerticallyScrollable, setIsVerticallyScrollable] = useState();
const [mutationObserver, setMutationObserver] = useState();
const [resizeObserver, setResizeObserver] = useState();
const checkOverflow = useCallback(() => {
if (!ref.current) return;
setIsHorizontallyScrollable(ref.current.scrollWidth > ref.current.clientWidth);
setIsVerticallyScrollable(ref.current.scrollHeight > ref.current.clientHeight);
}, [ref]);
useEffect(() => {
if (!mutationObserver) return;
return () => {
if (mutationObserver) mutationObserver.disconnect();
if (resizeObserver) resizeObserver.disconnect();
};
});
useIsomorphicEffect(() => {
const { current } = ref;
if (current) {
if ("ResizeObserver" in window && !resizeObserver) setResizeObserver(new ResizeObserver(checkOverflow).observe(current));
if ("MutationObserver" in window && !mutationObserver) setMutationObserver(new MutationObserver(checkOverflow).observe(current, {
attributes: false,
childList: true,
subtree: false
}));
checkOverflow();
}
}, [
ref,
checkOverflow,
mutationObserver,
resizeObserver
]);
return {
xScrollable: isHorizontallyScrollable,
yScrollable: isVerticallyScrollable
};
};
//#endregion
export { ScrollStates, useIsOverflow };