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 />