@antv/t8/lib/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.

'use strict';

var tslib = require('tslib');
var jsxRuntime = require('preact/jsx-runtime');
var uuid = require('uuid');
var hooks = require('preact/hooks');
require('./styled/bullet.js');
var container = require('./styled/container.js');
require('./styled/entity.js');
require('./styled/heading.js');
require('./styled/marks.js');
require('./styled/paragraph.js');
require('../schema/paragraph.js');
require('../schema/phrase.js');
var getPrefixCls = require('../utils/getPrefixCls.js');
var classnames = require('../utils/classnames.js');
require('clarinet');
require('./context/hooks/theme.js');
require('./context/hooks/plugin.js');
require('./context/hooks/event.js');
var provider = require('./context/provider.js');
require('preact');
var Headline = require('./paragraph/Headline.js');
var index$2 = require('./section/index.js');
var index$1 = require('../theme/seed/index.js');
var index = require('../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 ? index.presetPluginManager : _b, _c = _a.themeSeedToken, themeSeedToken = _c === void 0 ? index$1.defaultSeedToken : _c, 
    // copyNarrative,
    events = tslib.__rest(_a, ["spec", "pluginManager", "themeSeedToken"]);
    var narrativeDomRef = hooks.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 (jsxRuntime.jsx(provider.ContextProvider, { themeSeedToken: themeSeedToken, plugin: pluginManager, events: events, children: jsxRuntime.jsxs(container.Container, { className: classnames.classnames(className, getPrefixCls.getPrefixCls('container')), style: styles, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ref: narrativeDomRef, children: [headline ? jsxRuntime.jsx(Headline.Headline, { spec: headline }) : null, sections ? sections === null || sections === void 0 ? void 0 : sections.map(function (section) { return jsxRuntime.jsx(index$2.Section, { spec: section }, section.key || uuid.v4()); }) : null] }) }));
}

exports.NarrativeTextVis = NarrativeTextVis;
//# sourceMappingURL=NarrativeTextVis.js.map