@formant/ava-react
Version:
React components of AVA.
157 lines (154 loc) • 8.17 kB
JavaScript
var _excluded = ["spec", "size", "theme", "palette", "pluginManager"];
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import React from 'react';
import { Tooltip } from 'antd';
import { isTextPhrase, isEscapePhrase, isFormulaPhrase, isImagePhrase } from '@formant/ava';
import { isFunction, isEmpty, isNil } from 'lodash';
import katex from 'katex';
import { Entity, Bold, Italic, Underline, FormulaWrapper } from "../styled";
import { classnames as cx } from "../../utils";
import { presetPluginManager } from "../chore/plugin";
function renderPhraseByDescriptor(_ref) {
var spec = _ref.spec,
descriptor = _ref.descriptor,
themeStyles = _ref.themeStyles,
events = _ref.events;
var _spec$value = spec.value,
value = _spec$value === void 0 ? '' : _spec$value,
_spec$metadata = spec.metadata,
metadata = _spec$metadata === void 0 ? {} : _spec$metadata,
_spec$styles = spec.styles,
specStyles = _spec$styles === void 0 ? {} : _spec$styles;
var theme = 'dark';
var _ref2 = descriptor || {},
overwrite = _ref2.overwrite,
classNames = _ref2.classNames,
descriptorStyle = _ref2.style,
onHover = _ref2.onHover,
tooltip = _ref2.tooltip,
onClick = _ref2.onClick,
_ref2$content = _ref2.content,
content = _ref2$content === void 0 ? function () {
return value;
} : _ref2$content;
var handleClick = function handleClick() {
var _events$onClickPhrase;
onClick === null || onClick === void 0 || onClick(spec === null || spec === void 0 ? void 0 : spec.value, metadata, themeStyles);
events === null || events === void 0 || (_events$onClickPhrase = events.onClickPhrase) === null || _events$onClickPhrase === void 0 || _events$onClickPhrase.call(events, spec);
};
var handleMouseEnter = function handleMouseEnter() {
var _events$onMouseEnterP;
onHover === null || onHover === void 0 || onHover(spec === null || spec === void 0 ? void 0 : spec.value, metadata, themeStyles);
events === null || events === void 0 || (_events$onMouseEnterP = events.onMouseEnterPhrase) === null || _events$onMouseEnterP === void 0 || _events$onMouseEnterP.call(events, spec);
};
var handleMouseLeave = function handleMouseLeave() {
var _events$onMouseLeaveP;
events === null || events === void 0 || (_events$onMouseLeaveP = events.onMouseLeavePhrase) === null || _events$onMouseLeaveP === void 0 || _events$onMouseLeaveP.call(events, spec);
};
var defaultNode = /*#__PURE__*/React.createElement(Entity
// {...themeStyles}
, {
style: {
// ...functionalize(descriptorStyle, {})(spec?.value, metadata as any, themeStyles),
// ...specStyles,
},
className: cx(
// `${NTV_PREFIX_CLS}-value`,
// isEntityPhrase(spec) ? `${NTV_PREFIX_CLS}-${kebabCase(spec.metadata.entityType)}` : '',
// ...functionalize(classNames, [])(spec?.value, metadata as any, themeStyles)
)
}, content(value, metadata, themeStyles));
if (isFunction(overwrite)) {
defaultNode = overwrite(defaultNode, value, metadata, themeStyles);
}
var nodeWithEvents = !isEmpty(events) || isFunction(onClick) || isFunction(onHover) ? /*#__PURE__*/React.createElement("span", {
onClick: handleClick,
onMouseEnter: handleMouseEnter,
onMouseLeave: handleMouseLeave
}, defaultNode) : defaultNode;
var showTooltip = tooltip && (tooltip === null || tooltip === void 0 ? void 0 : tooltip.title(value, metadata, themeStyles));
return !isNil(showTooltip) ? /*#__PURE__*/React.createElement(Tooltip
// color={'black'}
, _extends({}, tooltip, {
overlayInnerStyle: undefined,
title: showTooltip
}), nodeWithEvents) : nodeWithEvents;
}
/** <Phrase /> can use independence */
export var Phrase = function Phrase(_ref3) {
var phrase = _ref3.spec,
_ref3$size = _ref3.size,
size = _ref3$size === void 0 ? 'normal' : _ref3$size,
_ref3$theme = _ref3.theme,
theme = _ref3$theme === void 0 ? 'dark' : _ref3$theme,
palette = _ref3.palette,
_ref3$pluginManager = _ref3.pluginManager,
pluginManager = _ref3$pluginManager === void 0 ? presetPluginManager : _ref3$pluginManager,
events = _objectWithoutProperties(_ref3, _excluded);
var themeStyles = {
size: size,
theme: theme,
palette: palette
};
var eventProps = !isEmpty(events) ? {
onClick: function onClick() {
var _events$onClickPhrase2;
events === null || events === void 0 || (_events$onClickPhrase2 = events.onClickPhrase) === null || _events$onClickPhrase2 === void 0 || _events$onClickPhrase2.call(events, phrase);
},
onMouseEnter: function onMouseEnter() {
var _events$onMouseEnterP2;
events === null || events === void 0 || (_events$onMouseEnterP2 = events.onMouseEnterPhrase) === null || _events$onMouseEnterP2 === void 0 || _events$onMouseEnterP2.call(events, phrase);
},
onMouseLeave: function onMouseLeave() {
var _events$onMouseLeaveP2;
events === null || events === void 0 || (_events$onMouseLeaveP2 = events.onMouseLeavePhrase) === null || _events$onMouseLeaveP2 === void 0 || _events$onMouseLeaveP2.call(events, phrase);
}
} : {};
var defaultText = /*#__PURE__*/React.createElement(React.Fragment, null, phrase.value);
if (isTextPhrase(phrase)) {
if (phrase.bold) defaultText = /*#__PURE__*/React.createElement(Bold, null, defaultText);
if (phrase.italic) defaultText = /*#__PURE__*/React.createElement(Italic, null, defaultText);
if (phrase.underline) defaultText = /*#__PURE__*/React.createElement(Underline, null, defaultText);
if (phrase.url) defaultText = /*#__PURE__*/React.createElement("a", {
target: "_blank",
rel: "noreferrer",
href: phrase.url
}, defaultText);
return /*#__PURE__*/React.createElement("span", eventProps, defaultText);
}
// use pre to render escape character
// 使用 pre 标签渲染特殊转义字符
if (isEscapePhrase(phrase)) return /*#__PURE__*/React.createElement("pre", eventProps, phrase.value);
// use katex to render formula
// 使用 katex 渲染公式
if (isFormulaPhrase(phrase)) return /*#__PURE__*/React.createElement(FormulaWrapper, _extends({}, eventProps, {
dangerouslySetInnerHTML: {
__html: katex.renderToString(phrase.value, {
throwOnError: false,
displayMode: true,
strict: 'ignore',
fleqn: true
})
}
}));
if (isImagePhrase(phrase)) {
return /*#__PURE__*/React.createElement("img", _extends({}, eventProps, {
src: phrase.value,
alt: phrase.alt,
className: cx(phrase.className),
style: phrase.styles
}));
}
var descriptor = pluginManager === null || pluginManager === void 0 ? void 0 : pluginManager.getPhraseDescriptorBySpec(phrase);
if (descriptor) {
return /*#__PURE__*/React.createElement(React.Fragment, null, renderPhraseByDescriptor({
spec: phrase,
descriptor: descriptor,
themeStyles: themeStyles,
events: events
}));
}
return !isEmpty(events) ? /*#__PURE__*/React.createElement("span", eventProps, defaultText) : defaultText;
};