feat: add stringEllipsis props. #69

Author: jaywcjlove

core/README.md

@@ -887,6 +887,8 @@ export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps
   highlightUpdates?: boolean;
   /** Shorten long JSON strings, Set to `0` to disable this feature @default 30 */
   shortenTextAfterLength?: number;
+  /** When the text exceeds the length, `...` will be displayed. Currently, this `...` can be customized. @default "..." */
+  stringEllipsis?: number;
   /** Callback function for when a treeNode is expanded or collapsed */
   onExpand?: (props: { expand: boolean; value?: T; keyid: string; keyName?: string | number }) => void;
   /** Fires event when you copy */

core/src/index.tsx

@@ -66,6 +66,8 @@ export interface JsonViewProps<T extends object>
   highlightUpdates?: boolean;
   /** Shorten long JSON strings, Set to `0` to disable this feature @default 30 */
   shortenTextAfterLength?: number;
+  /** When the text exceeds the length, `...` will be displayed. Currently, this `...` can be customized. @default "..." */
+  stringEllipsis?: number;
   /** Callback function for when a treeNode is expanded or collapsed */
   onExpand?: (props: { expand: boolean; value?: T; keyid: string; keyName?: string | number }) => void;
   /** Fires event when you copy */
@@ -116,6 +118,7 @@ const JsonView: JsonViewComponent = forwardRef<HTMLDivElement, JsonViewProps<obj
     indentWidth = 15,
     displayObjectSize = true,
     shortenTextAfterLength = 30,
+    stringEllipsis,
     highlightUpdates = true,
     enableClipboard = true,
     displayDataTypes = true,
@@ -144,6 +147,7 @@ const JsonView: JsonViewComponent = forwardRef<HTMLDivElement, JsonViewProps<obj
         collapsed,
         enableClipboard,
         shortenTextAfterLength,
+        stringEllipsis,
         highlightUpdates,
         onCopied,
         onExpand,

core/src/store.tsx

@@ -15,6 +15,7 @@ export interface InitialState<T extends object> {
   objectSortKeys?: JsonViewProps<T>['objectSortKeys'];
   displayObjectSize?: JsonViewProps<T>['displayObjectSize'];
   shortenTextAfterLength?: JsonViewProps<T>['shortenTextAfterLength'];
+  stringEllipsis?: JsonViewProps<T>['stringEllipsis'];
   enableClipboard?: JsonViewProps<T>['enableClipboard'];
   highlightUpdates?: JsonViewProps<T>['highlightUpdates'];
   collapsed?: JsonViewProps<T>['collapsed'];

core/src/types/index.tsx

@@ -57,7 +57,7 @@ type TypeProps = PropsWithChildren<{
 
 export const TypeString: FC<TypeProps> = ({ children = '', keyName }) => {
   const { Str = {}, displayDataTypes } = useTypesStore();
-  const { shortenTextAfterLength: length = 30 } = useStore();
+  const { shortenTextAfterLength: length = 30, stringEllipsis = '...' } = useStore();
   const { as, render, ...reset } = Str;
   const childrenStr = children as string;
   const [shorten, setShorten] = useState(length && childrenStr.length > length);
@@ -79,20 +79,20 @@ export const TypeString: FC<TypeProps> = ({ children = '', keyName }) => {
       };
     }
   }
-  const text = shorten ? `${childrenStr.slice(0, length)}...` : childrenStr;
+  const text = shorten ? `${childrenStr.slice(0, length)}${stringEllipsis}` : childrenStr;
 
   const isRender = render && typeof render === 'function';
   const type = isRender && render({ ...reset, style }, { type: 'type', value: children, keyName });
+  const cls = shorten ? 'w-rjv-value w-rjv-value-short' : 'w-rjv-value';
   const child =
-    isRender &&
-    render({ ...reset, children: text, className: 'w-rjv-value' }, { type: 'value', value: children, keyName });
+    isRender && render({ ...reset, children: text, className: cls }, { type: 'value', value: children, keyName });
   return (
     <Fragment>
       {displayDataTypes && (type || <Comp {...reset} style={style} />)}
       {child || (
         <Fragment>
           <ValueQuote />
-          <Comp {...reset} className="w-rjv-value">
+          <Comp {...reset} className={cls}>
             {text}
           </Comp>
           <ValueQuote />