zent/es/tree/TreeContent.js

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

import { __assign } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { useEffect, useRef, useState } from 'react';
import Pop from '../pop';
export var TreeContent = function (_a) {
    var children = _a.children, showPop = _a.showPop;
    var contentRef = useRef(null);
    var _b = useState(false), isOverflowing = _b[0], setIsOverflowing = _b[1];
    var _c = useState(false), popVisible = _c[0], setPopVisible = _c[1];
    useEffect(function () {
        if (!contentRef.current)
            return;
        var _a = contentRef.current, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth;
        setIsOverflowing(scrollWidth > clientWidth);
    }, [contentRef]);
    return (_jsx(Pop, __assign({ centerArrow: true, content: children, visible: popVisible, position: "top-left", onVisibleChange: function (visible) { return setPopVisible(visible); }, trigger: showPop && isOverflowing ? 'hover' : 'none' }, { children: _jsx("span", __assign({ className: "zent-tree-content", ref: contentRef, "data-zv": '10.0.17' }, { children: children }), void 0) }), void 0));
};