@daimo/pay/build/src/components/Common/ScrollArea/index.js

Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.

import { jsxs, jsx } from 'react/jsx-runtime';
import { useRef, useEffect } from 'react';
import { usePayContext } from '../../../hooks/usePayContext.js';
import { isMobile } from '../../../utils/index.js';
import defaultTheme from '../../../constants/defaultTheme.js';
import { ScrollContainer, ScrollAreaContainer, MoreIndicator } from './styles.js';

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" }) }));
const ScrollArea = ({ children, height, backgroundColor, mobileDirection, hideBottomLine = false, totalItems, }) => {
    const { log } = usePayContext();
    const ref = useRef(null);
    const moreRef = useRef(null);
    const isMobileFormat = isMobile() || window?.innerWidth < defaultTheme.mobileWidth;
    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");
            }
        }
        log(`[SCROLL AREA]: ${el.scrollHeight}, ${el.clientHeight}`);
        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]); // eslint-disable-line react-hooks/exhaustive-deps
    return (jsxs(ScrollContainer, { children: [jsx(ScrollAreaContainer, { ref: ref, "$mobile": isMobileFormat, "$height": height, "$backgroundColor": backgroundColor, "$mobileDirection": mobileDirection, "$hideBottomLine": hideBottomLine, "$totalItems": totalItems, 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"] }) })] }));
};

export { ScrollArea };
//# sourceMappingURL=index.js.map