@antv/t8/es/vis-components/NarrativeTextVis.js

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

import { __rest } from 'tslib';
import { jsx, jsxs } from 'preact/jsx-runtime';
import { v4 } from 'uuid';
import { useRef } from 'preact/hooks';
import './styled/bullet.js';
import { Container } from './styled/container.js';
import './styled/entity.js';
import './styled/heading.js';
import './styled/marks.js';
import './styled/paragraph.js';
import '../schema/paragraph.js';
import '../schema/phrase.js';
import { getPrefixCls } from '../utils/getPrefixCls.js';
import { classnames } from '../utils/classnames.js';
import 'clarinet';
import './context/hooks/theme.js';
import './context/hooks/plugin.js';
import './context/hooks/event.js';
import { ContextProvider } from './context/provider.js';
import 'preact';
import { Headline } from './paragraph/Headline.js';
import { Section } from './section/index.js';
import { defaultSeedToken } from '../theme/seed/index.js';
import { presetPluginManager } from '../plugin/index.js';

/**
 * The NTV React component for rendering narrative text visualizations.
 * It contains all the vis-components needed to render a narrative text spec.
 * All the vis-components are writed with PReact.
 */
function NarrativeTextVis(_a) {
    var spec = _a.spec, _b = _a.pluginManager, pluginManager = _b === void 0 ? presetPluginManager : _b, _c = _a.themeSeedToken, themeSeedToken = _c === void 0 ? defaultSeedToken : _c, 
    // copyNarrative,
    events = __rest(_a, ["spec", "pluginManager", "themeSeedToken"]);
    var narrativeDomRef = useRef(null);
    var headline = spec.headline, sections = spec.sections, styles = spec.styles, className = spec.className;
    var onEvent = (events || {}).onEvent;
    var onClick = function () {
        onEvent === null || onEvent === void 0 ? void 0 : onEvent('narrative:click', spec);
    };
    var onMouseEnter = function () {
        onEvent === null || onEvent === void 0 ? void 0 : onEvent('narrative:mouseenter', spec);
    };
    var onMouseLeave = function () {
        onEvent === null || onEvent === void 0 ? void 0 : onEvent('narrative:mouseleave', spec);
    };
    // TODO:
    // useEffect(() => {
    //   const onCopy = async (event: ClipboardEvent) => {
    //     const { plainText, html } = await getSelectionContentForCopy();
    //     if (!copyNarrative) {
    //       // 如果没有传递复制方法，默认行为是拦截用户复制操作(使用快捷键或右键选择复制均会触发)，将转换后的内容放进剪切板
    //       // if no `copyNarrative` passed in, the default behavior when user conduct `copy` is to put the transformed html and plainText into user's clipboard
    //       event.preventDefault();
    //       copyToClipboard(html, plainText, onCopySuccess, onCopyFailure);
    //     } else {
    //       copyNarrative({ spec, plainText, html });
    //     }
    //   };
    //   narrativeDomRef.current?.addEventListener('copy', onCopy);
    //   return () => {
    //     narrativeDomRef.current?.addEventListener('copy', onCopy);
    //   };
    // }, [copyNarrative]);
    return (jsx(ContextProvider, { themeSeedToken: themeSeedToken, plugin: pluginManager, events: events, children: jsxs(Container, { className: classnames(className, getPrefixCls('container')), style: styles, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ref: narrativeDomRef, children: [headline ? jsx(Headline, { spec: headline }) : null, sections ? sections === null || sections === void 0 ? void 0 : sections.map(function (section) { return jsx(Section, { spec: section }, section.key || v4()); }) : null] }) }));
}

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