zent/es/elevator/ElevatorAnchor.js

一套前端设计语言和基于React的实现

import { __assign } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { useContext, useEffect, useRef } from 'react';
import { Waypoint } from '../waypoint';
import { ElevatorContext } from './context';
export var ElevatorAnchor = function (_a) {
    var link = _a.link, children = _a.children;
    var _b = useContext(ElevatorContext), offsetTop = _b.offsetTop, getContainer = _b.getContainer, onAnchorEnter = _b.onAnchorEnter, registerAnchor = _b.registerAnchor, unRegisterAnchor = _b.unRegisterAnchor;
    var ref = useRef(null);
    var handleAnchorEnter = function () {
        onAnchorEnter(link);
    };
    useEffect(function () {
        registerAnchor(link, ref.current);
        return function () {
            unRegisterAnchor(link);
        };
    }, [link, registerAnchor, unRegisterAnchor]);
    return (_jsx(Waypoint, __assign({ bottomOffset: offsetTop, onEnter: handleAnchorEnter, scrollableAncestor: (getContainer === null || getContainer === void 0 ? void 0 : getContainer()) || window }, { children: _jsx("div", __assign({ className: "zent-elevator-anchor", ref: ref, "data-zv": '10.0.17' }, { children: children }), void 0) }), void 0));
};