@macrostrat/column-components/dist/esm/column-components.e7ea8afe.js

React rendering primitives for stratigraphic columns

import {useColumn as $eR6JN$useColumn} from "./column-components.0ccab336.js";
import {useRef as $eR6JN$useRef, useCallback as $eR6JN$useCallback, useEffect as $eR6JN$useEffect} from "react";
import $eR6JN$uibox from "ui-box";
import $eR6JN$macrostrathyper from "@macrostrat/hyper";





function $33c4f196beb7d386$export$e60368c40bae9fd4(props) {
    const { onScrolled: onScrolled = $33c4f196beb7d386$var$defaultOnScrolled, scrollContainer: scrollContainer = $33c4f196beb7d386$var$defaultGetScrollContainer, scrollToHeight: scrollToHeight, paddingTop: paddingTop, animated: animated, alignment: alignment, ...rest } = props;
    const ref = (0, $eR6JN$useRef)(null);
    const ctx = (0, $eR6JN$useColumn)();
    const columnScale = ctx?.scale;
    const scrollTo = (0, $eR6JN$useCallback)((height, opts)=>{
        let node = ref.current;
        if (node == null || columnScale == null) return;
        let { animated: animated, alignment: alignment } = opts;
        if (animated == null) animated = false;
        const pixelOffset = columnScale(height);
        const { top: top } = node.getBoundingClientRect();
        node = scrollContainer();
        let pos = pixelOffset + top + paddingTop;
        const screenHeight = window.innerHeight;
        if (alignment === "center") pos -= screenHeight / 2;
        else if (alignment === "bottom") pos -= screenHeight;
        if (animated && "scrollBehavior" in document.documentElement.style) node.scrollTo({
            top: pos,
            behavior: "smooth"
        });
        else node.scrollTop = pos;
    }, [
        onScrolled,
        scrollContainer,
        ref.current,
        columnScale,
        paddingTop
    ]);
    (0, $eR6JN$useEffect)(()=>{
        const { scrollToHeight: scrollToHeight, alignment: alignment } = props;
        if (scrollToHeight == null) return;
        // Actually perform the scroll
        scrollTo(scrollToHeight, {
            alignment: alignment,
            animated: animated
        });
        return onScrolled(scrollToHeight);
    }, [
        scrollTo,
        scrollToHeight
    ]);
    const { pixelHeight: pixelHeight } = this.context;
    return (0, $eR6JN$macrostrathyper)((0, $eR6JN$uibox), {
        height: pixelHeight,
        position: "absolute",
        ref: ref,
        ...rest
    });
}
function $33c4f196beb7d386$var$defaultOnScrolled(height) {
    console.log(`Scrolled to ${height} m`);
}
function $33c4f196beb7d386$var$defaultGetScrollContainer() {
    // Todo: generalize this
    return document.querySelector(".panel-container");
}


export {$33c4f196beb7d386$export$e60368c40bae9fd4 as ColumnScroller};
//# sourceMappingURL=column-components.e7ea8afe.js.map