Skip to content

Commit

Permalink
feat(ava-react/ntv): all phrase types support events
Browse files Browse the repository at this point in the history
  • Loading branch information
BBSQQ authored and chenluli committed Feb 22, 2024
1 parent 54195e7 commit 2ac536d
Showing 1 changed file with 22 additions and 24 deletions.
46 changes: 22 additions & 24 deletions packages/ava-react/src/NarrativeTextVis/phrases/Phrase.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -112,26 +112,21 @@ export const Phrase: React.FC<PhraseProps> = ({
}) => {
const themeStyles = { size, theme };

const onClick = () => {
events?.onClickPhrase?.(phrase);
};

const onMouseEnter = () => {
events?.onMouseEnterPhrase?.(phrase);
};

const onMouseLeave = () => {
events?.onMouseLeavePhrase?.(phrase);
};

let defaultText = !isEmpty(events) ? (
<span onClick={onClick} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
{phrase.value}
</span>
) : (
<>{phrase.value}</>
);

const eventProps = !isEmpty(events)
? {
onClick: () => {
events?.onClickPhrase?.(phrase);
},
onMouseEnter: () => {
events?.onMouseEnterPhrase?.(phrase);
},
onMouseLeave: () => {
events?.onMouseLeavePhrase?.(phrase);
},
}
: {};

let defaultText = <>{phrase.value}</>;
if (isTextPhrase(phrase)) {
if (phrase.bold) defaultText = <Bold>{defaultText}</Bold>;
if (phrase.italic) defaultText = <Italic>{defaultText}</Italic>;
Expand All @@ -143,7 +138,7 @@ export const Phrase: React.FC<PhraseProps> = ({
</a>
);
return (
<span style={phrase?.styles} className={cx(phrase?.className)}>
<span {...eventProps} style={phrase?.styles} className={cx(phrase?.className)}>
{defaultText}
</span>
);
Expand All @@ -153,7 +148,7 @@ export const Phrase: React.FC<PhraseProps> = ({
// 使用 pre 标签渲染特殊转义字符
if (isEscapePhrase(phrase))
return (
<pre className={cx(phrase.className)} style={phrase.styles}>
<pre {...eventProps} className={cx(phrase.className)} style={phrase.styles}>
{phrase.value}
</pre>
);
Expand All @@ -163,6 +158,7 @@ export const Phrase: React.FC<PhraseProps> = ({
if (isFormulaPhrase(phrase))
return (
<FormulaWrapper
{...eventProps}
className={cx(phrase.className, `${NTV_PREFIX_CLS}-formula`)}
style={phrase.styles}
dangerouslySetInnerHTML={{
Expand All @@ -177,13 +173,15 @@ export const Phrase: React.FC<PhraseProps> = ({
);

if (isImagePhrase(phrase)) {
return <img src={phrase.value} alt={phrase.alt} className={cx(phrase.className)} style={phrase.styles} />;
return (
<img {...eventProps} src={phrase.value} alt={phrase.alt} className={cx(phrase.className)} style={phrase.styles} />
);
}

const descriptor = pluginManager?.getPhraseDescriptorBySpec(phrase);
if (descriptor) {
return <>{renderPhraseByDescriptor({ spec: phrase, descriptor, themeStyles, events })}</>;
}

return defaultText;
return !isEmpty(events) ? <span {...eventProps}>defaultText</span> : defaultText;
};

0 comments on commit 2ac536d

Please sign in to comment.