feat: add stringEllipse

HuolalaTech · Nov 23, 2023 · f54c82c · f54c82c
1 parent 7f2f388
commit f54c82c
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -80,6 +80,7 @@ The default configuration usage:
 | `maxTitleSize`  | `number`           | `100`         | The max length of abbreviated title in collapse.             |
 | `copyable`      | `boolean`          | `true`        | Indicate whether enable copy function.                       |
 | `expandable`    | `boolean`          | `true`        | Indicate whether enable expand function.                     |
+| `stringEllipse` | `boolean`          | `true`        | Ellipse if the string type value's length is more than 100 or show all text when you pass false. |
 
 ## License
 

diff --git a/README_CN.md b/README_CN.md
@@ -80,6 +80,7 @@ ReactDOM.render(
 | `maxTitleSize`  | `number`          | `100`         | 折叠时缩写标题的最大长度。 |
 | `copyable`      | `boolean`          | `true`        | 是否展示复制功能                       |
 | `expandable`    | `boolean`          | `true`        | 是否支持展开功能                       |
+| `stringEllipse` | `boolean` | `true` | 当字符串长度超过 100 时会对文字裁剪、显示省略号，如果传入 `false` 显示全部文字。 |
 
 ## License
 

diff --git a/examples/assets/data.ts b/examples/assets/data.ts
@@ -58,7 +58,29 @@ export const data = [
     }
   },
   {
-    type: 'Wrap line',
+    type: 'Ellipse string',
+    getData: () => {
+      const originSource = `<!DOCTYPE html>
+      <html lang="en">
+      <head>
+        <script type="module" src="/@vite/client"></script>
+        <meta charset="UTF-8" />
+      <body>
+        <div id="app"></div>
+        <script type="module" src="/src/main.ts?t=1686017220566"></script>
+      </body>
+      </html>`;
+      return {
+        originSource,
+        renderSource: originSource
+      };
+    }
+  },
+  {
+    type: 'Show all text',
+    props: {
+      stringEllipse: false
+    },
     getData: () => {
       const originSource = `<!DOCTYPE html>
       <html lang="en">

diff --git a/src/ReactJsonView/components/ConfigContext.tsx b/src/ReactJsonView/components/ConfigContext.tsx
@@ -9,7 +9,8 @@ const defaultValue: Options = {
   keyCount: 200,
   maxTitleSize: 100,
   copyable: true,
-  expandable: true
+  expandable: true,
+  stringEllipse: true
 };
 
 const ConfigContext = createContext(defaultValue);

diff --git a/src/ReactJsonView/components/JsonNode.tsx b/src/ReactJsonView/components/JsonNode.tsx
@@ -15,10 +15,12 @@ import React from 'react';
 import Copyable from './CopyContent';
 
 const PrimitiveContent = ({ content }: { content: React.ReactNode }) => {
+  const { stringEllipse } = useConfigInfo();
   const computedContent = useMemo(() => {
     if (typeof content !== 'string') return content;
-    return cutOffStringLiteral(content);
-  }, [content]);
+    if (stringEllipse) return cutOffStringLiteral(content);
+    return content;
+  }, [content, stringEllipse]);
 
   return React.createElement(Fragment, null, computedContent);
 };

diff --git a/types/index.d.ts b/types/index.d.ts
@@ -42,6 +42,12 @@ export interface Options {
    * @default true
    */
   expandable?: boolean;
+  /**
+   * Ellipse if the string type value's length is more than 100
+   * or show all text when you pass false.
+   * @default true
+   */
+  stringEllipse?: boolean;
 }
 
 declare const ReactJsonView: import('react').NamedExoticComponent<Options>;