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

React rendering primitives for stratigraphic columns

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const React = require("react");
const uiComponents = require("@macrostrat/ui-components");
const h = require("@macrostrat/hyper");
const column = require("../context/column.cjs");
const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
const h__default = /* @__PURE__ */ _interopDefault(h);
function ColumnScroller(props) {
  const {
    onScrolled = defaultOnScrolled,
    scrollContainer = defaultGetScrollContainer,
    scrollToHeight,
    paddingTop,
    animated,
    alignment,
    ...rest
  } = props;
  const ref = React.useRef(null);
  const ctx = column.useColumn();
  const columnScale = ctx?.scale;
  const scrollTo = React.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]
  );
  React.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__default.default(uiComponents.Box, {
    height: pixelHeight,
    position: "absolute",
    ref,
    ...rest
  });
}
function defaultOnScrolled(height) {
  console.log(`Scrolled to ${height} m`);
}
function defaultGetScrollContainer() {
  return document.querySelector(".panel-container");
}
exports.ColumnScroller = ColumnScroller;
//# sourceMappingURL=scroll-box.cjs.map