@macrostrat/column-components/dist/esm/column-components.6705ffc4.js

React rendering primitives for stratigraphic columns

import {ColumnContext as $eR6JN$ColumnContext} from "./column-components.fa405a9f.js";
import {Component as $eR6JN$Component} from "react";
import {findDOMNode as $eR6JN$findDOMNode} from "react-dom";
import $eR6JN$uibox from "ui-box";
import $eR6JN$macrostrathyper from "@macrostrat/hyper";






const $33c4f196beb7d386$var$splitProps = function(keys, props) {
    const obj = {};
    const rest = {};
    for(let k in props){
        const v = props[k];
        if (keys.includes(k)) obj[k] = v;
        else rest[k] = v;
    }
    return [
        obj,
        rest
    ];
};
class $33c4f196beb7d386$export$e60368c40bae9fd4 extends (0, $eR6JN$Component) {
    constructor(props){
        super(props);
        this.scrollTo = this.scrollTo.bind(this);
    }
    static{
        this.defaultProps = {
            animated: true,
            alignment: "center",
            onScrolled (height) {
                return console.log(`Scrolled to ${height} m`);
            },
            scrollContainer () {
                return document.querySelector(".panel-container");
            }
        };
    }
    static{
        this.contextType = (0, $eR6JN$ColumnContext);
    }
    render() {
        const keys = [
            "scrollToHeight",
            "alignment",
            "animated",
            "onScrolled",
            "paddingTop",
            "scrollContainer"
        ];
        const [props, rest] = $33c4f196beb7d386$var$splitProps(keys, this.props);
        const { pixelHeight: pixelHeight } = this.context;
        return (0, $eR6JN$macrostrathyper)((0, $eR6JN$uibox), {
            height: pixelHeight,
            position: "absolute",
            ...rest
        });
    }
    scrollTo(height, opts = {}) {
        let node = (0, $eR6JN$findDOMNode)(this);
        let { animated: animated, alignment: alignment, ...rest } = opts;
        if (animated == null) animated = false;
        const { paddingTop: paddingTop } = this.props;
        const { scale: scale } = this.context;
        const pixelOffset = scale(height);
        const { top: top } = node.getBoundingClientRect();
        node = this.props.scrollContainer();
        let pos = pixelOffset + top + paddingTop;
        const screenHeight = window.innerHeight;
        if (this.props.alignment === "center") pos -= screenHeight / 2;
        else if (this.props.alignment === "bottom") pos -= screenHeight;
        return node.scrollTop = pos;
    }
    componentDidMount() {
        const { scrollToHeight: scrollToHeight, alignment: alignment } = this.props;
        if (scrollToHeight == null) return;
        this.scrollTo(scrollToHeight, {
            alignment: alignment,
            animated: false
        });
        return this.props.onScrolled(scrollToHeight);
    }
    componentDidUpdate(prevProps) {
        const { scrollToHeight: scrollToHeight, animated: animated, alignment: alignment } = this.props;
        if (scrollToHeight == null) return;
        if (prevProps.scrollToHeight === scrollToHeight) return;
        this.scrollTo(scrollToHeight, {
            alignment: alignment,
            animated: animated
        });
        return this.props.onScrolled(scrollToHeight);
    }
}


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