🐛 fix: richText

eternallycyf · Nov 21, 2024 · 47784a2 · 47784a2
1 parent 0698e89
commit 47784a2
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 17 deletions.
diff --git a/packages/ims-view-pc/src/components/CustomTooltip/RichText.tsx b/packages/ims-view-pc/src/components/CustomTooltip/RichText.tsx
@@ -1,5 +1,5 @@
 import { DownOutlined } from '@ant-design/icons';
-import { Typography } from 'antd';
+import { Tooltip, Typography } from 'antd';
 import _ from 'lodash';
 import { FC, useCallback, useMemo, useState, type CSSProperties } from 'react';
 import './index.less';
@@ -20,6 +20,13 @@ const RichText: FC<RichTextProps> = (props) => {
   const [_expandable, setExpandable] = useState<boolean>(false);
   const [overflow, setOverflow] = useState<CSSProperties['overflow']>('hidden');
   const [expand, setExpand] = useState<boolean>(false);
+  const contentProps = {
+    dangerouslySetInnerHTML: {
+      __html: html,
+    },
+    style: htmlStyle,
+    className: [htmlClassName].join(' '),
+  };
 
   const isHiddenOverflow = overflow === 'hidden';
   const expandable = _expandable || (!_expandable && expand);
@@ -54,7 +61,7 @@ const RichText: FC<RichTextProps> = (props) => {
         style={
           {
             '--expand-btn-width': expandable ? expandBtnWidth + 'px' : 0,
-            '--rich-text-max-height': isHiddenOverflow ? maxHeight + 'px' : 'auto',
+            '--rich-text-max-height': isHiddenOverflow && expandable ? maxHeight + 'px' : 'auto',
             '--right-text-overflow': overflow,
           } as any as CSSProperties
         }
@@ -70,16 +77,11 @@ const RichText: FC<RichTextProps> = (props) => {
           {noFlagHtml}
         </Typography.Paragraph>
 
-        <div className="content">
-          <div
-            ref={elementRef}
-            dangerouslySetInnerHTML={{
-              __html: html,
-            }}
-            style={htmlStyle}
-            className={[htmlClassName].join(' ')}
-          />
-        </div>
+        <Tooltip title={expandable ? <div {...contentProps} /> : null}>
+          <div className="content">
+            <div ref={elementRef} {...contentProps} />
+          </div>
+        </Tooltip>
 
         {expandable && (
           <div className="btn">

diff --git a/packages/ims-view-pc/src/components/CustomTooltip/index.md b/packages/ims-view-pc/src/components/CustomTooltip/index.md
@@ -21,15 +21,15 @@ group:
 
 ## 示例
 
-<code src='./demo/string.tsx'>1.string</code>
+<code src='./demo/richText.tsx'>1.dangerouslySetInnerHTML</code>
 
-<code src='./demo/rich.tsx'>2.富文本</code>
+<code src='./demo/string.tsx'>2.string</code>
 
-<code src='./demo/table.tsx'>3.string-table 中使用</code>
+<code src='./demo/rich.tsx'>3.富文本</code>
 
-<code src='./demo/table-rich.tsx'>4.富文本-table 中使用</code>
+<code src='./demo/table.tsx'>4.string-table 中使用</code>
 
-<code src='./demo/richText.tsx'>5.任何富文本皆可</code>
+<code src='./demo/table-rich.tsx'>5.富文本-table 中使用</code>
 
 ## API
 
@@ -58,6 +58,19 @@ export interface CustomTooltipProps {
 }
 ```
 
+```ts
+export interface RichTextProps {
+  html?: string;
+  htmlStyle?: CSSProperties;
+  htmlClassName?: string;
+  /**
+   * @description 富文本必须设置 收起时的最高高度
+   */
+  maxHeight?: number;
+  emptyText?: string;
+}
+```
+
 ## FAQ
 
 ### 1.初始化出现闪烁现象