zent/es/tooltip/Tooltip.js

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

import { __assign, __extends } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Component, createRef } from 'react';
import cx from 'classnames';
import noop from '../utils/noop';
import Popover from '../popover';
import NoneTrigger from './NoneTrigger';
import getPosition from '../utils/getArrowPosition';
var Trigger = Popover.Trigger;
var Tooltip = (function (_super) {
    __extends(Tooltip, _super);
    function Tooltip() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.popoverRef = createRef();
        return _this;
    }
    Tooltip.prototype.renderContent = function () {
        var title = this.props.title;
        return (_jsxs(Popover.Content, { children: [_jsx("div", __assign({ className: "zent-tooltip-v2-inner", "data-zv": '10.0.17' }, { children: title }), void 0), _jsx("i", { className: "zent-tooltip-v2-arrow", "data-zv": '10.0.17' }, void 0)] }, void 0));
    };
    Tooltip.prototype.renderTrigger = function () {
        var children = this.props.children;
        if (this.props.trigger === 'click') {
            var _a = this.props.closeOnClickOutside, closeOnClickOutside = _a === void 0 ? true : _a;
            return (_jsx(Trigger.Click, __assign({ closeOnClickOutside: closeOnClickOutside }, { children: children }), void 0));
        }
        if (this.props.trigger === 'hover') {
            var _b = this.props, _c = _b.mouseLeaveDelay, mouseLeaveDelay = _c === void 0 ? 200 : _c, _d = _b.mouseEnterDelay, mouseEnterDelay = _d === void 0 ? 200 : _d, anchorOnly = _b.anchorOnly, fixMouseEventsOnDisabledChildren = _b.fixMouseEventsOnDisabledChildren;
            return (_jsx(Trigger.Hover, __assign({ showDelay: mouseEnterDelay, hideDelay: mouseLeaveDelay, anchorOnly: anchorOnly, fixMouseEventsOnDisabledChildren: fixMouseEventsOnDisabledChildren }, { children: children }), void 0));
        }
        if (this.props.trigger === 'focus') {
            return _jsx(Trigger.Focus, { children: children }, void 0);
        }
        if (this.props.trigger === 'none') {
            return _jsx(NoneTrigger, { children: children }, void 0);
        }
        return null;
    };
    Tooltip.prototype.render = function () {
        var _a = this.props, className = _a.className, trigger = _a.trigger, visible = _a.visible, position = _a.position, cushion = _a.cushion, centerArrow = _a.centerArrow, containerSelector = _a.containerSelector, style = _a.style;
        var cls = cx("zent-tooltip-v2", className);
        var onVisibleChange = this.props.onVisibleChange;
        if (trigger === 'none') {
            onVisibleChange = onVisibleChange || noop;
        }
        return (_jsxs(Popover, __assign({ visible: visible, onVisibleChange: onVisibleChange, className: cls, cushion: cushion, position: getPosition(position, centerArrow), containerSelector: containerSelector, ref: this.popoverRef, style: style }, { children: [this.renderTrigger(), this.renderContent()] }), void 0));
    };
    Tooltip.defaultProps = {
        trigger: 'hover',
        position: 'top-center',
        cushion: 8,
        centerArrow: false,
        containerSelector: 'body',
    };
    return Tooltip;
}(Component));
export { Tooltip };
export default Tooltip;