@coin-voyage/paykit
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
55 lines (54 loc) • 2.75 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 useLocales from "../../../hooks/useLocales";
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 locales = useLocales();
const ref = useRef(null);
const moreRef = useRef(null);
const isMobile = useIsMobile();
useEffect(() => {
const el = ref.current;
if (!el)
return;
if (el.scrollHeight > el.clientHeight && moreRef.current) {
moreRef.current.classList.remove("hide");
}
const handleScroll = (e) => {
const target = e.target;
const { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth } = 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);
};
}, [isMobile, height]);
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, {}), " ", locales.moreAvailable] }) })] }));
};