@macrostrat/column-components/dist/util/scroll-box.js

React rendering primitives for stratigraphic columns

import { useRef, useCallback, useEffect } from "react";
import { Box } from "@macrostrat/ui-components";
import h from "@macrostrat/hyper";
import { useColumn } from "../context/column.js";
function ColumnScroller(props) {
  const {
    onScrolled = defaultOnScrolled,
    scrollContainer = defaultGetScrollContainer,
    scrollToHeight,
    paddingTop,
    animated,
    alignment,
    ...rest
  } = props;
  const ref = useRef(null);
  const ctx = useColumn();
  const columnScale = ctx?.scale;
  const scrollTo = useCallback(
    (height, opts) => {
      let node = ref.current;
      if (node == null || columnScale == null) return;
      let { animated: animated2, alignment: alignment2 } = opts;
      if (animated2 == null) {
        animated2 = false;
      }
      const pixelOffset = columnScale(height);
      const { top } = node.getBoundingClientRect();
      node = scrollContainer();
      let pos = pixelOffset + top + paddingTop;
      const screenHeight = window.innerHeight;
      if (alignment2 === "center") {
        pos -= screenHeight / 2;
      } else if (alignment2 === "bottom") {
        pos -= screenHeight;
      }
      if (animated2 && "scrollBehavior" in document.documentElement.style) {
        node.scrollTo({ top: pos, behavior: "smooth" });
      } else {
        node.scrollTop = pos;
      }
    },
    [onScrolled, scrollContainer, ref.current, columnScale, paddingTop]
  );
  useEffect(() => {
    const { scrollToHeight: scrollToHeight2, alignment: alignment2 } = props;
    if (scrollToHeight2 == null) {
      return;
    }
    scrollTo(scrollToHeight2, { alignment: alignment2, animated });
    return onScrolled(scrollToHeight2);
  }, [scrollTo, scrollToHeight]);
  const { pixelHeight } = this.context;
  return h(Box, {
    height: pixelHeight,
    position: "absolute",
    ref,
    ...rest
  });
}
function defaultOnScrolled(height) {
  console.log(`Scrolled to ${height} m`);
}
function defaultGetScrollContainer() {
  return document.querySelector(".panel-container");
}
export {
  ColumnScroller
};
//# sourceMappingURL=scroll-box.js.map