feat: add shortenTextAfterLength props. (#12)

Author: jaywcjlove

core/README.md

@@ -666,6 +666,8 @@ 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 */
+  shortenTextAfterLength?: number;
   /** Define the root node name. @default undefined */
   keyName?: string | number;
   /** The user can copy objects and arrays to clipboard by clicking on the clipboard icon. @default true */
@@ -724,7 +726,7 @@ export interface CountInfoProps {
 ```ts
 import { JsonViewProps } from '@uiw/react-json-view';
 import type { CountInfoExtraProps } from '@uiw/react-json-view/cjs/editor/countInfoExtra';
-export interface JsonViewEditorProps<T extends object> extends JsonViewProps<T> {
+export interface JsonViewEditorProps<T extends object> extends Omit<JsonViewProps<T>, 'shortenTextAfterLength'> {
   /**
    * When a callback function is passed in, edit functionality is enabled. The callback is invoked before edits are completed.
    * @returns {boolean}  Returning false from onEdit will prevent the change from being made.

core/src/editor/index.tsx

@@ -6,7 +6,7 @@ import { ReValue } from './value';
 import { CountInfoExtra } from './countInfoExtra';
 import type { CountInfoExtraProps } from './countInfoExtra';
 
-export interface JsonViewEditorProps<T extends object> extends JsonViewProps<T> {
+export interface JsonViewEditorProps<T extends object> extends Omit<JsonViewProps<T>, 'shortenTextAfterLength'> {
   /**
    * When a callback function is passed in, edit functionality is enabled. The callback is invoked before edits are completed.
    * @returns {boolean}  Returning false from onEdit will prevent the change from being made.

core/src/index.tsx

@@ -40,6 +40,8 @@ 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 */
+  shortenTextAfterLength?: number;
   /** Define the root node name. @default undefined */
   keyName?: string | number;
   /** The user can copy objects and arrays to clipboard by clicking on the clipboard icon. @default true */

core/src/node.tsx

@@ -50,6 +50,7 @@ export const RootNode = forwardRef(
       highlightUpdates = true,
       objectSortKeys = false,
       indentWidth = 15,
+      shortenTextAfterLength = 20,
       collapsed,
       level = 1,
       keyid = 'root',
@@ -92,6 +93,7 @@ export const RootNode = forwardRef(
       displayDataTypes,
       displayObjectSize,
       enableClipboard,
+      shortenTextAfterLength,
       level: level + 1,
       parentValue: value as T,
       indentWidth,

core/src/value.tsx

@@ -73,6 +73,7 @@ export interface ValueViewProps<T extends object>
   enableClipboard: boolean;
   indentWidth: number;
   level?: number;
+  shortenTextAfterLength?: JsonViewProps<T>['shortenTextAfterLength'];
   namespace?: Array<string | number>;
   quotes?: JsonViewProps<T>['quotes'];
   components?: JsonViewProps<T>['components'];
@@ -119,6 +120,58 @@ export function getValueString<T>(value: T) {
   return { type, content };
 }
 
+interface RenderStringValueProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+  color?: string;
+  href?: string;
+  style?: React.CSSProperties;
+  isURL?: boolean;
+  length?: number;
+}
+
+const RenderShortenTextValue: FC<PropsWithChildren<RenderStringValueProps>> = ({
+  children,
+  length,
+  style,
+  ...rest
+}) => {
+  const childrenStr = children as string;
+  const [shorten, setShorten] = useState(length && childrenStr.length >= length);
+  const click = () => {
+    console.log(shorten);
+    if (length && childrenStr.length <= length) return setShorten(false);
+    setShorten(!shorten);
+  };
+  const text = shorten ? `${childrenStr.slice(0, length)}...` : childrenStr;
+  return (
+    <RenderStringValue {...rest} style={{ ...style, cursor: 'pointer' }} onClick={click}>
+      {text}
+    </RenderStringValue>
+  );
+};
+RenderShortenTextValue.displayName = 'JVR.RenderShortenTextValue';
+
+const RenderStringValue: FC<PropsWithChildren<RenderStringValueProps>> = ({
+  color,
+  style,
+  isURL,
+  href,
+  children,
+  ...rest
+}) => {
+  return (
+    <Label color={color} style={style} {...rest} className="w-rjv-value">
+      {isURL && (
+        <a href={href} style={{ color }} target="_blank" rel="noopener noreferrer">
+          {children}
+        </a>
+      )}
+      {!isURL && children}
+    </Label>
+  );
+};
+
+RenderStringValue.displayName = 'JVR.RenderStringValue';
+
 export function ValueView<T extends object>(props: ValueViewProps<T>) {
   const {
     value,
@@ -136,6 +189,7 @@ export function ValueView<T extends object>(props: ValueViewProps<T>) {
     enableClipboard,
     displayObjectSize,
     displayDataTypes,
+    shortenTextAfterLength,
     ...reset
   } = props;
 
@@ -192,26 +246,30 @@ export function ValueView<T extends object>(props: ValueViewProps<T>) {
         content,
         children: content,
       });
-    const valueView = reView ? (
-      reView
-    ) : (
-      <Label color={color} style={style} className="w-rjv-value">
-        {isURL ? (
-          <a href={value.href} style={{ color }} target="_blank" rel="noopener noreferrer">
-            {content}
-          </a>
-        ) : (
-          content
-        )}
-      </Label>
-    );
+
+    const valueView =
+      shortenTextAfterLength && type === 'string' ? (
+        <RenderShortenTextValue
+          color={color}
+          href={isURL ? value.href : ''}
+          style={style}
+          isURL={isURL}
+          length={shortenTextAfterLength}
+        >
+          {content}
+        </RenderShortenTextValue>
+      ) : (
+        <RenderStringValue color={color} href={isURL ? value.href : ''} style={style} isURL={isURL}>
+          {content}
+        </RenderStringValue>
+      );
     return (
       <Line {...eventProps}>
         <Label {...reset} ref={null}>
           {renderKey}
           <Colon />
           {typeView}
-          {valueView}
+          {reView ? reView : valueView}
           {tools}
         </Label>
       </Line>