@antv/t8/es/vis-components/phrases/Phrase.js

T8 is a text visualization solution for unstructured data within the AntV technology stack, and it is a declarative T8 markdown syntax that can be used to describe the content of data interpretation reports.

import { __spreadArray, __assign } from 'tslib';
import { jsx, Fragment } from 'preact/jsx-runtime';
import '../../schema/paragraph.js';
import '../../schema/phrase.js';
import { isTextPhrase, isEntityPhrase } from '../../schema/utils/isSpecType.js';
import '../styled/bullet.js';
import '../styled/container.js';
import { Entity } from '../styled/entity.js';
import '../styled/heading.js';
import { Bold, Italic, Underline } from '../styled/marks.js';
import '../styled/paragraph.js';
import { isEmpty, isFunction, isNil } from '../../utils/isType.js';
import { functionalize } from '../../utils/functionalize.js';
import { getPrefixCls } from '../../utils/getPrefixCls.js';
import { classnames } from '../../utils/classnames.js';
import { kebabCase } from '../../utils/kebabCase.js';
import { useTheme } from '../context/hooks/theme.js';
import { usePluginManager } from '../context/hooks/plugin.js';
import { useEvent } from '../context/hooks/event.js';
import { useCurrentParagraphInfo } from '../context/hooks/currentParagraphInfo.js';
import '../../plugin/index.js';
import '../../theme/seed/index.js';
import { useMemo } from 'preact/hooks';
import { Tooltip } from './ui/Tooltip.js';

function renderPhraseByDescriptor(spec, 
// eslint-disable-next-line @typescript-eslint/no-explicit-any
descriptor, theme, onEvent, containerParagraphType) {
    var _a = spec.value, value = _a === void 0 ? '' : _a, _b = spec.metadata, metadata = _b === void 0 ? {} : _b, _c = spec.styles, specStyles = _c === void 0 ? {} : _c;
    var _d = descriptor || {}, classNames = _d.classNames, descriptorStyle = _d.style, onHover = _d.onHover, 
    // tooltip,
    onClick = _d.onClick, _e = _d.render, render = _e === void 0 ? function () { return value; } : _e, tooltip = _d.tooltip;
    var handleClick = function () {
        onClick === null || onClick === void 0 ? void 0 : onClick(spec === null || spec === void 0 ? void 0 : spec.value, metadata);
        onEvent === null || onEvent === void 0 ? void 0 : onEvent('phrase:click', spec);
    };
    var handleMouseEnter = function () {
        onHover === null || onHover === void 0 ? void 0 : onHover(spec === null || spec === void 0 ? void 0 : spec.value, metadata);
        onEvent === null || onEvent === void 0 ? void 0 : onEvent('phrase:mouseenter', spec);
    };
    var handleMouseLeave = function () {
        onEvent === null || onEvent === void 0 ? void 0 : onEvent('phrase:mouseleave', spec);
    };
    var contentResult = useMemo(function () {
        return functionalize(render, null)(value, metadata, containerParagraphType, theme);
    }, [value, metadata]);
    var entityProps = {
        theme: theme,
        style: __assign(__assign({}, functionalize(descriptorStyle, {})(spec === null || spec === void 0 ? void 0 : spec.value, metadata, theme)), specStyles),
        className: classnames.apply(void 0, __spreadArray([getPrefixCls('value'),
            isEntityPhrase(spec) ? getPrefixCls(kebabCase(spec.metadata.entityType)) : ''], functionalize(classNames, [])(spec === null || spec === void 0 ? void 0 : spec.value, metadata), false)),
    };
    var defaultNode = typeof contentResult === 'string' || typeof contentResult === 'number' ? (jsx(Entity, __assign({}, entityProps, { children: contentResult }))) : (jsx(Entity, __assign({}, entityProps, { dangerouslySetInnerHTML: { __html: contentResult.outerHTML } })));
    var nodeWithEvents = isFunction(onEvent) || isFunction(onClick) || isFunction(onHover) ? (jsx("span", { onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: defaultNode })) : (defaultNode);
    // return nodeWithEvents;
    var showTooltip = tooltip && functionalize(tooltip.title, null)(value, metadata);
    return !isNil(showTooltip) ? (jsx(Tooltip, __assign({}, tooltip, { title: showTooltip, children: nodeWithEvents }))) : (nodeWithEvents);
}
/** <Phrase /> can use independence */
var Phrase = function (_a) {
    var phrase = _a.spec;
    var onEvent = useEvent().onEvent;
    var themeSeedToken = useTheme();
    var pluginManager = usePluginManager();
    var paragraphType = useCurrentParagraphInfo().paragraphType;
    var onClick = function () {
        onEvent === null || onEvent === void 0 ? void 0 : onEvent('phrase:click', phrase);
    };
    var onMouseEnter = function () {
        onEvent === null || onEvent === void 0 ? void 0 : onEvent('phrase:mouseenter', phrase);
    };
    var onMouseLeave = function () {
        onEvent === null || onEvent === void 0 ? void 0 : onEvent('phrase:mouseleave', phrase);
    };
    var defaultText = !isEmpty(onEvent) ? (jsx("span", { onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: phrase.value })) : (jsx(Fragment, { children: phrase.value }));
    if (isTextPhrase(phrase)) {
        if (phrase.bold)
            defaultText = jsx(Bold, { children: defaultText });
        if (phrase.italic)
            defaultText = jsx(Italic, { children: defaultText });
        if (phrase.underline)
            defaultText = jsx(Underline, { children: defaultText });
        if (phrase.url)
            defaultText = (jsx("a", { target: "_blank", rel: "noreferrer", href: phrase.url, style: { color: themeSeedToken.colorLink, textDecoration: 'underline' }, children: defaultText }));
        return defaultText;
    }
    var descriptor = pluginManager === null || pluginManager === void 0 ? void 0 : pluginManager.getPhraseDescriptorBySpec(phrase);
    if (descriptor) {
        return jsx(Fragment, { children: renderPhraseByDescriptor(phrase, descriptor, themeSeedToken, onEvent, paragraphType) });
    }
    return defaultText;
};

export { Phrase };
//# sourceMappingURL=Phrase.js.map