@coin-voyage/paykit
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
57 lines • 2.77 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useIsMobile } from "@coin-voyage/shared/hooks";
import { useEffect, useRef } from "react";
import { MoreIndicator, ScrollAreaContainer, ScrollContainer } from "./styles";
const ArrowDown = () => (_jsx("svg", { width: "11", height: "12", viewBox: "0 0 11 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M5.49438 1L5.49438 11M5.49438 11L9.5 7M5.49438 11L1.5 7", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) }));
export const ScrollArea = ({ children, height, backgroundColor, mobileDirection, }) => {
const ref = useRef(null);
const moreRef = useRef(null);
const isMobile = useIsMobile();
useEffect(() => {
const el = ref.current;
if (!el) {
return;
}
// if ref is not scrollable, hide the more indicator
if (el.scrollHeight > el.clientHeight) {
if (moreRef.current) {
moreRef.current.classList.remove("hide");
}
}
const handleScroll = (e) => {
const { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth, } = e.target;
if (moreRef.current) {
if (scrollTop > 0) {
moreRef.current.classList.add("hide");
}
}
if (scrollTop === 0 && scrollLeft === 0) {
el.classList.add("scroll-start");
}
else {
el.classList.remove("scroll-start");
}
if (scrollHeight - scrollTop === clientHeight &&
scrollWidth - scrollLeft === clientWidth) {
el.classList.add("scroll-end");
}
else {
el.classList.remove("scroll-end");
}
};
el.addEventListener("scroll", handleScroll);
handleScroll({ target: el });
return () => {
el.removeEventListener("scroll", handleScroll);
};
}, [ref.current]);
return (_jsxs(ScrollContainer, { children: [_jsx(ScrollAreaContainer, { ref: ref, "$mobile": isMobile, "$height": height, "$backgroundColor": backgroundColor, "$mobileDirection": mobileDirection, children: children }), _jsx(MoreIndicator, { ref: moreRef, className: "hide", onClick: () => {
if (ref.current) {
ref.current.scrollTo({
top: ref.current.scrollHeight,
behavior: "smooth",
});
}
}, children: _jsxs("span", { children: [_jsx(ArrowDown, {}), " More Available"] }) })] }));
};
//# sourceMappingURL=index.js.map