@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
120 lines (116 loc) • 3.96 kB
JavaScript
"use client";
const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_effect = require('../../utils/effect.cjs');
const require_ref = require('../../utils/ref.cjs');
const require_utils_index = require('../../utils/index.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);
//#region src/components/scroll-area/use-scroll-area.ts
const useScrollArea = ({ id, ref, type = "hover", scrollHideDelay = 1e3, onScrollPositionChange,...rest } = {}) => {
const [isHovered, setIsHovered] = (0, react.useState)(false);
const [isScrolling, setIsScrolling] = (0, react.useState)(false);
const isAlways = type === "always";
const isNever = type === "never";
const isHidden = !isAlways && !isHovered && !isScrolling;
const isSafari = (0, require_utils_index.utils_exports.isMac)() && (0, require_utils_index.utils_exports.vendor)(/apple/i);
const uuid = (0, react.useId)();
const key = `${id ?? uuid}-${isHovered}-${isScrolling}`;
const hoverTimeout = (0, react.useRef)(void 0);
const scrollTimeout = (0, react.useRef)(void 0);
const scrollAreaRef = (0, react.useRef)(null);
const scrollPosition = (0, react.useRef)({
x: 0,
y: 0
});
require_effect.useSafeLayoutEffect(() => {
if (!scrollAreaRef.current || !isSafari) return;
scrollAreaRef.current.scrollLeft = scrollPosition.current.x;
scrollAreaRef.current.scrollTop = scrollPosition.current.y;
});
const onMouseEnter = (0, react.useCallback)(() => {
if (type !== "hover") return;
clearTimeout(hoverTimeout.current);
setIsHovered(true);
}, [type]);
const onMouseLeave = (0, react.useCallback)(() => {
if (type !== "hover") return;
hoverTimeout.current = setTimeout(() => setIsHovered(false), scrollHideDelay);
}, [scrollHideDelay, type]);
const onScroll = (0, react.useCallback)((ev) => {
const { scrollLeft: x, scrollTop: y } = ev.target;
const { x: prevX, y: prevY } = scrollPosition.current;
const isEqual = Math.abs(x - prevX) <= 5 && Math.abs(y - prevY) <= 5;
onScrollPositionChange?.({
x,
y
});
scrollPosition.current = {
x,
y
};
if (type !== "scroll" || isEqual) return;
if (!isScrolling) setIsScrolling(true);
clearTimeout(scrollTimeout.current);
scrollTimeout.current = setTimeout(() => setIsScrolling(false), scrollHideDelay);
}, [
isScrolling,
onScrollPositionChange,
scrollHideDelay,
type
]);
(0, react.useEffect)(() => {
return () => {
if (hoverTimeout.current) clearTimeout(hoverTimeout.current);
if (scrollTimeout.current) clearTimeout(scrollTimeout.current);
};
}, []);
const safariProps = (0, react.useMemo)(() => ({
key,
ref: require_ref.mergeRefs(ref, scrollAreaRef),
"data-key": key
}), [
key,
ref,
scrollAreaRef
]);
return {
isAlways,
isHidden,
isHovered,
isNever,
isScrolling,
getRootProps: (0, react.useCallback)(({ style,...props } = {}) => ({
ref,
style: {
overflow: "auto",
...style
},
...rest,
...isSafari ? safariProps : {},
...props,
"data-hidden": (0, require_utils_index.utils_exports.dataAttr)(isHidden),
"data-hover": (0, require_utils_index.utils_exports.dataAttr)(isHovered),
"data-never": (0, require_utils_index.utils_exports.dataAttr)(isNever),
"data-scroll": (0, require_utils_index.utils_exports.dataAttr)(isScrolling),
tabIndex: 0,
onMouseEnter: (0, require_utils_index.utils_exports.handlerAll)(props.onMouseEnter, rest.onMouseEnter, onMouseEnter),
onMouseLeave: (0, require_utils_index.utils_exports.handlerAll)(props.onMouseLeave, rest.onMouseLeave, onMouseLeave),
onScroll: (0, require_utils_index.utils_exports.handlerAll)(props.onScroll, rest.onScroll, onScroll)
}), [
isNever,
ref,
isHidden,
isHovered,
isScrolling,
isSafari,
safariProps,
rest,
onMouseEnter,
onMouseLeave,
onScroll
])
};
};
//#endregion
exports.useScrollArea = useScrollArea;
//# sourceMappingURL=use-scroll-area.cjs.map