fix: fix shortenTextAfterLength props. #15

Author: jaywcjlove

core/README.md

@@ -696,8 +696,12 @@ export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps
   displayDataTypes?: boolean;
   /** The user can copy objects and arrays to clipboard by clicking on the clipboard icon. @default true */
   enableClipboard?: boolean;
+  /** When set to true, all nodes will be collapsed by default. Use an integer value to collapse at a particular depth. @default false */
+  collapsed?: boolean | number;
   /** Whether to highlight updates. @default true */
   highlightUpdates?: boolean;
+  /** Shorten long JSON strings, Set to `0` to disable this feature @default 30 */
+  shortenTextAfterLength?: number;
   /** Callback function for when a treeNode is expanded or collapsed */
   onExpand?: (props: {
     expand: boolean;

core/src/index.tsx

@@ -58,7 +58,7 @@ export interface JsonViewProps<T extends object>
   collapsed?: boolean | number;
   /** Whether to highlight updates. @default true */
   highlightUpdates?: 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;
   /** Callback function for when a treeNode is expanded or collapsed */
   onExpand?: (props: { expand: boolean; value?: T; keyid: string; keyName?: string | number }) => void;
@@ -107,7 +107,7 @@ const JsonView: JsonViewComponent = forwardRef<HTMLDivElement, JsonViewProps<obj
     collapsed,
     indentWidth = 15,
     displayObjectSize = true,
-    shortenTextAfterLength = 20,
+    shortenTextAfterLength = 30,
     highlightUpdates = true,
     enableClipboard = true,
     displayDataTypes = true,

core/src/types/String.test.tsx

@@ -29,9 +29,9 @@ it('renders <JsonView.String /> test case', async () => {
   const value = screen.getByTestId('value');
   expect(value.className).toBe('w-rjv-value');
   expect(value.tagName).toBe('SPAN');
-  expect(value.innerHTML).toBe('Lorem ipsum dolor si...');
+  expect(value.innerHTML).toBe('Lorem ipsum dolor sit amet. Lo...');
   await user.click(value);
   expect(value.innerHTML).toBe(demo.string);
   await user.click(value);
-  expect(value.innerHTML).toBe('Lorem ipsum dolor si...');
+  expect(value.innerHTML).toBe('Lorem ipsum dolor sit amet. Lo...');
 });

core/src/types/index.test.tsx

@@ -3,7 +3,7 @@ import JsonView from '..';
 
 it('renders <JsonView.String /> test case', async () => {
   const demo = {
-    string: 'Lorem ipsum dolor sit amet',
+    string: 'Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet',
   };
   const { container } = render(
     <JsonView value={demo}>

core/src/types/index.tsx

@@ -1,4 +1,4 @@
-import { FC, Fragment, PropsWithChildren, useState } from 'react';
+import { FC, Fragment, PropsWithChildren, useEffect, useState } from 'react';
 import { useTypesStore } from '../store/Types';
 import { useStore } from '../store';
 import { ValueQuote } from '../symbol';
@@ -46,10 +46,11 @@ type TypeProps = PropsWithChildren<{
 
 export const TypeString: FC<TypeProps> = ({ children = '', expandKey, keyName }) => {
   const { Str = {}, displayDataTypes } = useTypesStore();
-  const { shortenTextAfterLength: length = 20 } = useStore();
+  const { shortenTextAfterLength: length = 30 } = useStore();
   const { as, render, ...reset } = Str;
   const childrenStr = children as string;
   const [shorten, setShorten] = useState(length && childrenStr.length >= length);
+  useEffect(() => setShorten(length && childrenStr.length >= length), [length]);
   const Comp = as || 'span';
   const style: React.CSSProperties = {
     ...defalutStyle,

www/src/example/default.tsx

@@ -94,6 +94,7 @@ const initialState: Partial<
   indentWidth: 15,
   collapsed: 2,
   quote: '"',
+  shortenTextAfterLength: 50,
   theme: 'nord',
 };
 
@@ -125,6 +126,7 @@ export function Example() {
         enableClipboard={state.enableClipboard}
         highlightUpdates={state.highlightUpdates}
         indentWidth={state.indentWidth}
+        shortenTextAfterLength={state.shortenTextAfterLength}
         collapsed={state.collapsed}
         objectSortKeys={state.objectSortKeys}
       >
@@ -257,6 +259,18 @@ export function Example() {
             }
           />
         </Label>
+        <Label>
+          <div>Shorten Text After Length({state.shortenTextAfterLength})</div>
+          <input
+            type="range"
+            value={state.shortenTextAfterLength}
+            onChange={(evn) =>
+              dispatch({
+                shortenTextAfterLength: Number(evn.target.value),
+              })
+            }
+          />
+        </Label>
       </Options>
     </Fragment>
   );