@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 useLocales from '../../../hooks/useLocales.js';
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 = () => /* @__PURE__ */ jsx(
  "svg",
  {
    width: "11",
    height: "12",
    viewBox: "0 0 11 12",
    fill: "none",
    xmlns: "http://www.w3.org/2000/svg",
    children: /* @__PURE__ */ 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 locales = useLocales();
  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 (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]);
  return /* @__PURE__ */ jsxs(ScrollContainer, { children: [
    /* @__PURE__ */ jsx(
      ScrollAreaContainer,
      {
        ref,
        $mobile: isMobileFormat,
        $height: height,
        $backgroundColor: backgroundColor,
        $mobileDirection: mobileDirection,
        $hideBottomLine: hideBottomLine,
        $totalItems: totalItems,
        children
      }
    ),
    /* @__PURE__ */ jsx(
      MoreIndicator,
      {
        ref: moreRef,
        className: "hide",
        onClick: () => {
          if (ref.current) {
            ref.current.scrollTo({
              top: ref.current.scrollHeight,
              behavior: "smooth"
            });
          }
        },
        children: /* @__PURE__ */ jsxs("span", { children: [
          /* @__PURE__ */ jsx(ArrowDown, {}),
          " ",
          locales.moreAvailable
        ] })
      }
    )
  ] });
};

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