fix: fix shortenTextAfterLength props. #15

uiwjs · Sep 21, 2023 · e8ad00e · e8ad00e
1 parent 5fb4f29
commit e8ad00e
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 8 deletions.
diff --git a/core/README.md b/core/README.md
@@ -690,7 +690,7 @@ export interface JsonViewProps<T> extends React.DetailedHTMLProps<React.HTMLAttr
   displayDataTypes?: boolean;
   /** When set to `true`, `objects` and `arrays` are labeled with size @default true */
   displayObjectSize?: boolean;
-  /** Shorten long JSON strings, Set to `0` to disable this feature @default 20 */
+  /** Shorten long JSON strings, Set to `0` to disable this feature @default 30 */
   shortenTextAfterLength?: number;
   /** Define the root node name. @default undefined */
   keyName?: string | number;

diff --git a/core/src/index.tsx b/core/src/index.tsx
@@ -40,7 +40,7 @@ export interface JsonViewProps<T extends object>
   displayDataTypes?: boolean;
   /** When set to `true`, `objects` and `arrays` are labeled with size @default true */
   displayObjectSize?: boolean;
-  /** Shorten long JSON strings, Set to `0` to disable this feature @default 20 */
+  /** Shorten long JSON strings, Set to `0` to disable this feature @default 30 */
   shortenTextAfterLength?: number;
   /** Define the root node name. @default undefined */
   keyName?: string | number;

diff --git a/core/src/node.tsx b/core/src/node.tsx
@@ -52,7 +52,7 @@ export const RootNode = forwardRef(
       highlightUpdates = true,
       objectSortKeys = false,
       indentWidth = 15,
-      shortenTextAfterLength = 20,
+      shortenTextAfterLength = 30,
       collapsed,
       level = 1,
       keyid = 'root',

diff --git a/core/src/value.tsx b/core/src/value.tsx
@@ -1,5 +1,5 @@
 import type { FC, PropsWithChildren } from 'react';
-import { Fragment, forwardRef, useMemo, useState } from 'react';
+import { Fragment, forwardRef, useMemo, useEffect, useState } from 'react';
 import { Meta } from './comps/meta';
 import { Copied } from './copied';
 import type { JsonViewProps } from './';
@@ -153,10 +153,8 @@ const RenderShortenTextValue: FC<PropsWithChildren<RenderStringValueProps>> = ({
 }) => {
   const childrenStr = children as string;
   const [shorten, setShorten] = useState(length && childrenStr.length >= length);
-  const click = () => {
-    if (length && childrenStr.length <= length) return setShorten(false);
-    setShorten(!shorten);
-  };
+  useEffect(() => setShorten(length && childrenStr.length >= length), [length]);
+  const click = () => setShorten(!shorten);
   const text = shorten ? `${childrenStr.slice(0, length)}...` : childrenStr;
   return (
     <RenderStringValue {...rest} style={{ ...style, cursor: 'pointer' }} onClick={click}>