feat: init maxDisplayLength

Author: himself65

examples/basic/pages/index.tsx

@@ -129,6 +129,7 @@ const IndexPage: React.FC = () => {
         indentWidth={indent}
         theme={theme}
         groupArraysAfterLength={groupArraysAfterLength}
+        maxDisplayLength={2}
         keyRenderer={KeyRenderer}
         valueTypes={[
           {

src/components/DataTypes/Object.tsx

@@ -7,6 +7,7 @@ import { useJsonViewerStore } from '../../stores/JsonViewerStore'
 import type { DataItemProps } from '../../type'
 import { DataKeyPair } from '../DataKeyPair'
 import { CircularArrowsIcon } from '../icons/CircularArrowsIcon'
+import { DataBox } from '../mui/DataBox'
 
 const objectLb = '{'
 const arrayLb = '['
@@ -82,23 +83,33 @@ export const PostObjectType: React.FC<DataItemProps<object>> = (props) => {
 
 export const ObjectType: React.FC<DataItemProps<object>> = (props) => {
   const keyColor = useTextColor()
+  const maxDisplayLength = useJsonViewerStore(store => store.maxDisplayLength)
   const groupArraysAfterLength = useJsonViewerStore(
     store => store.groupArraysAfterLength)
   const isTrap = useIsCycleReference(props.path, props.value)
   const elements = useMemo(() => {
     if (!props.inspect) {
       return null
     }
-    if (Array.isArray(props.value)) {
-      if (props.value.length <= groupArraysAfterLength) {
-        return props.value.map((value, index) => {
+    const value: unknown[] | object = props.value
+    if (Array.isArray(value)) {
+      // unknown[]
+      if (value.length <= groupArraysAfterLength) {
+        const elements = value.slice(0, maxDisplayLength).map((value, index) => {
           const path = [...props.path, index]
           return (
             <DataKeyPair key={index} path={path} value={value}/>
           )
         })
+        if (value.length > maxDisplayLength) {
+          const rest = value.length - maxDisplayLength
+          elements.push(
+            <DataBox>hidden {rest} items</DataBox>
+          )
+        }
+        return elements
       }
-      const value = props.value.reduce<unknown[][]>((array, value, index) => {
+      const elements = value.reduce<unknown[][]>((array, value, index) => {
         const target = Math.floor(index / groupArraysAfterLength)
         if (array[target]) {
           array[target].push(value)
@@ -108,21 +119,30 @@ export const ObjectType: React.FC<DataItemProps<object>> = (props) => {
         return array
       }, [])
 
-      return value.map((list, index) => {
+      return elements.map((list, index) => {
         const path = [...props.path]
         return (
           <DataKeyPair key={index} path={path} value={list} nestedIndex={index}/>
         )
       })
     } else {
-      return Object.entries(props.value).map(([key, value]) => {
+      // object
+      const entries = Object.entries(value)
+      const elements = entries.slice(0, maxDisplayLength).map(([key, value]) => {
         const path = [...props.path, key]
         return (
           <DataKeyPair key={key} path={path} value={value}/>
         )
       })
+      if (entries.length > maxDisplayLength) {
+        const rest = entries.length - maxDisplayLength
+        elements.push(
+          <DataBox>hidden {rest} items</DataBox>
+        )
+      }
+      return elements
     }
-  }, [props.inspect, props.value, props.path, groupArraysAfterLength])
+  }, [props.inspect, props.value, props.path, groupArraysAfterLength, maxDisplayLength])
   return (
     <Box
       className='data-object'

src/index.tsx

@@ -50,13 +50,15 @@ const JsonViewerInner: React.FC<JsonViewerProps> = (props) => {
     setIfNotUndefined('onChange', props.onChange)
     setIfNotUndefined('groupArraysAfterLength', props.groupArraysAfterLength)
     setIfNotUndefined('keyRenderer', props.keyRenderer)
+    setIfNotUndefined('maxDisplayLength', props.maxDisplayLength)
   }, [
     api,
     props.defaultInspectDepth,
     props.groupArraysAfterLength,
     props.keyRenderer,
     props.onChange,
     props.value,
+    props.maxDisplayLength,
     setIfNotUndefined])
 
   useEffect(() => {

src/stores/JsonViewerStore.ts

@@ -15,6 +15,7 @@ export type JsonViewerState = {
   inspectCache: Record<string, boolean>
   hoverPath: { path: Path; nestedIndex?: number } | null
   groupArraysAfterLength: number
+  maxDisplayLength: number
   defaultInspectDepth: number
   colorNamespace: ColorNamespace
   expanded: string[]
@@ -38,6 +39,7 @@ export const createJsonViewerStore = () =>
         inspectCache: {},
         hoverPath: null,
         groupArraysAfterLength: 100,
+        maxDisplayLength: 30,
         rootName: 'root',
         defaultInspectDepth: 10,
         colorNamespace: lightColorNamespace,

src/type.ts

@@ -53,9 +53,16 @@ export type JsonViewerProps<T = unknown> = {
   /**
    * Inspect depth by default.
    * Do not set the number too large, otherwise there will have performance issue
-   * @default 50
+   * @default 2
    */
   defaultInspectDepth?: number
+  /**
+   * Hide item after reach the count, array and object will be both affected.
+   *
+   * If`Object.keys(value).length` is big also, this will cause a performance issue.
+   * @default 30
+   */
+  maxDisplayLength?: number
   /**
    * When an integer value is assigned, arrays will be displayed in groups by count of the value.
    * Groups are displayed with bracket notation and can be expanded and collapsed by clicking on the brackets.