@yamada-ui/scroll-area
Version:
Yamada UI scroll area component
190 lines (189 loc) • 7 kB
JavaScript
"use client"
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/scroll-area.tsx
var scroll_area_exports = {};
__export(scroll_area_exports, {
ScrollArea: () => ScrollArea
});
module.exports = __toCommonJS(scroll_area_exports);
var import_core = require("@yamada-ui/core");
var import_utils = require("@yamada-ui/utils");
var import_react = require("react");
var import_jsx_runtime = require("react/jsx-runtime");
var neverStyles = {
"&::-webkit-scrollbar": { display: "none" },
scrollbarWidth: "none",
_scrollbar: { display: "none" }
};
var hiddenStyles = {
"&::-webkit-scrollbar-thumb": { bg: "transparent" },
"&::-webkit-scrollbar-track": { bg: "transparent" },
"@-moz-document url-prefix()": {
scrollbarColor: "transparent transparent",
_dark: {
scrollbarColor: "transparent transparent"
},
_light: {
scrollbarColor: "transparent transparent"
}
},
_dark: {
"&::-webkit-scrollbar-thumb": { bg: "transparent" },
"&::-webkit-scrollbar-track": { bg: "transparent" },
_scrollbarThumb: { bg: "transparent" },
_scrollbarTrack: { bg: "transparent" }
},
_light: {
"&::-webkit-scrollbar-thumb": { bg: "transparent" },
"&::-webkit-scrollbar-track": { bg: "transparent" },
_scrollbarThumb: { bg: "transparent" },
_scrollbarTrack: { bg: "transparent" }
},
_scrollbarThumb: { bg: "transparent" },
_scrollbarTrack: { bg: "transparent" }
};
var ScrollArea = (0, import_core.forwardRef)((props, ref) => {
const [styles, mergedProps] = (0, import_core.useComponentStyle)("ScrollArea", props);
const {
type = "hover",
overflow = "overlay",
scrollHideDelay = 1e3,
onScrollPositionChange,
...rest
} = (0, import_core.omitThemeProps)(mergedProps);
const [isHovered, setIsHovered] = (0, import_react.useState)(false);
const [isScrolling, setIsScrolling] = (0, import_react.useState)(false);
const isAlways = type === "always";
const isNever = type === "never";
const isSafari = (0, import_utils.isMac)() && (0, import_utils.vendor)(/apple/i);
const hoverTimeout = (0, import_react.useRef)(void 0);
const scrollTimeout = (0, import_react.useRef)(void 0);
const scrollAreaRef = (0, import_react.useRef)(null);
const scrollPosition = (0, import_react.useRef)({ x: 0, y: 0 });
(0, import_utils.useSafeLayoutEffect)(() => {
if (!scrollAreaRef.current || !isSafari) return;
scrollAreaRef.current.scrollLeft = scrollPosition.current.x;
scrollAreaRef.current.scrollTop = scrollPosition.current.y;
});
const onMouseEnter = (0, import_react.useCallback)(() => {
if (type !== "hover") return;
clearTimeout(hoverTimeout.current);
setIsHovered(true);
}, [type]);
const onMouseLeave = (0, import_react.useCallback)(() => {
if (type !== "hover") return;
hoverTimeout.current = setTimeout(
() => setIsHovered(false),
scrollHideDelay
);
}, [scrollHideDelay, type]);
const onScroll = (0, import_react.useCallback)(
(ev) => {
const el = ev.target;
const { scrollLeft: x, scrollTop: y } = el;
const { x: prevX, y: prevY } = scrollPosition.current;
const isEqual = Math.abs(x - prevX) <= 5 && Math.abs(y - prevY) <= 5;
onScrollPositionChange == null ? void 0 : 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, import_react.useEffect)(() => {
return () => {
if (hoverTimeout.current) clearTimeout(hoverTimeout.current);
if (scrollTimeout.current) clearTimeout(scrollTimeout.current);
};
}, []);
const css = (0, import_react.useMemo)(() => {
const baseStyle = { overflow, ...styles };
if (isNever) {
return (0, import_utils.merge)(baseStyle, neverStyles);
} else {
return (0, import_utils.merge)(
baseStyle,
!isAlways && !isHovered && !isScrolling ? hiddenStyles : {}
);
}
}, [isAlways, isHovered, isNever, isScrolling, overflow, styles]);
const computedProps = (0, import_react.useMemo)(
() => ({
__css: css,
...rest,
onMouseEnter: (0, import_utils.handlerAll)(rest.onMouseEnter, onMouseEnter),
onMouseLeave: (0, import_utils.handlerAll)(rest.onMouseLeave, onMouseLeave),
onScroll: (0, import_utils.handlerAll)(rest.onScroll, onScroll)
}),
[css, onMouseEnter, onMouseLeave, onScroll, rest]
);
if (isSafari) {
const componentKey = `${isHovered}-${isScrolling}`;
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
InternalScrollArea,
{
ref: (0, import_utils.mergeRefs)(ref, scrollAreaRef),
"data-hovered": (0, import_utils.dataAttr)(isHovered),
"data-key": componentKey,
"data-scrolling": (0, import_utils.dataAttr)(isScrolling),
...computedProps
},
componentKey
);
} else {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
InternalScrollArea,
{
ref,
"data-hovered": (0, import_utils.dataAttr)(isHovered),
"data-scrolling": (0, import_utils.dataAttr)(isScrolling),
...computedProps
}
);
}
});
ScrollArea.displayName = "ScrollArea";
ScrollArea.__ui__ = "ScrollArea";
var InternalScrollArea = (0, import_core.forwardRef)(
({ className, children, innerProps, ...rest }, ref) => {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_core.ui.div,
{
ref,
className: (0, import_utils.cx)("ui-scroll-area", className),
tabIndex: 0,
...rest,
children: innerProps ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.div, { className: "ui-scroll-area__inner", ...innerProps, children }) : children
}
);
}
);
InternalScrollArea.displayName = "InternalScrollArea";
InternalScrollArea.__ui__ = "InternalScrollArea";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
ScrollArea
});
//# sourceMappingURL=scroll-area.js.map