TexteaInc · himself65 · Sep 17, 2022 · Sep 17, 2022 · Sep 17, 2022 · Sep 17, 2022
diff --git a/examples/basic/pages/index.tsx b/examples/basic/pages/index.tsx
@@ -15,6 +15,10 @@ const example = {
   string: 'this is a string',
   integer: 42,
   array: [19, 19, 810, 'test', NaN],
+  nestedArray: [
+    [1, 2],
+    [3, 4]
+  ],
   float: 114.514,
   undefined,
   object: {
@@ -30,6 +34,7 @@ const example = {
 
 const IndexPage: React.FC = () => {
   const [indent, setIndent] = useState(2)
+  const [groupArraysAfterLength, setGroupArraysAfterLength] = useState(100)
   const [src, setSrc] = useState(() => example)
   useEffect(() => {
     const loop = () => {
@@ -57,13 +62,30 @@ const IndexPage: React.FC = () => {
           }
         }
       />
+      <TextField
+        value={groupArraysAfterLength}
+        type='number'
+        onChange={
+          event => {
+            const groupArraysAfterLength = parseInt(event.target.value)
+            if (groupArraysAfterLength > -1 && groupArraysAfterLength < 500) {
+              setGroupArraysAfterLength(groupArraysAfterLength)
+            }
+          }
+        }
+      />
       <JsonViewer
         value={src}
         indentWidth={indent}
+        groupArraysAfterLength={groupArraysAfterLength}
         onChange={
           useCallback<JsonViewerOnChange>(
             (path, oldValue, newValue) => {
-              setSrc(src => applyValue(src, path, newValue))
+              setSrc(src => {
+                const newSrc = applyValue(src, path, newValue)
+                console.log(newSrc, newSrc === src)
+                return src
+              })
             }, []
           )
         }

diff --git a/src/components/DataKeyPair.tsx b/src/components/DataKeyPair.tsx
@@ -17,7 +17,8 @@ import { DataBox } from './mui/DataBox'
 
 export type DataKeyPairProps = {
   value: unknown
-  path: string[]
+  nested?: boolean
+  path: (string | number)[]
 }
 
 const IconBox = styled(props => <Box {...props} component='span'/>)`
@@ -42,17 +43,18 @@ export const DataKeyPair: React.FC<DataKeyPairProps> = (props) => {
   const keyColor = useTextColor()
   const numberKeyColor = useJsonViewerStore(
     store => store.colorNamespace.base0C)
-  const { Component, PreComponent, PostComponent, Editor } = useTypeComponents(value)
+  const { Component, PreComponent, PostComponent, Editor } = useTypeComponents(
+    value)
   const rootName = useJsonViewerStore(store => store.rootName)
   const isRoot = useJsonViewerStore(store => store.value) === value
   const isNumberKey = Number.isInteger(Number(key))
   const displayKey = isRoot ? rootName : key
-  const downstreamProps: DataItemProps = {
+  const downstreamProps: DataItemProps = useMemo(() => ({
     path,
     inspect,
     setInspect,
     value
-  }
+  }), [inspect, path, value])
   const actionIcons = useMemo(() => {
     if (editing) {
       return (
@@ -151,12 +153,19 @@ export const DataKeyPair: React.FC<DataKeyPairProps> = (props) => {
           }, [])
         }
       >
-        {isNumberKey
-          ? <Box component='span'
-                 style={{ color: numberKeyColor }}>{displayKey}</Box>
-          : <>&quot;{displayKey}&quot;</>
+        {
+          !props.nested && (
+            isNumberKey
+              ? <Box component='span'
+                   style={{ color: numberKeyColor }}>{displayKey}</Box>
+              : <>&quot;{displayKey}&quot;</>
+          )
+        }
+        {
+          !props.nested && (
+            <DataBox sx={{ mx: 0.5 }}>:</DataBox>
+          )
         }
-        <DataBox sx={{ mx: 0.5 }}>:</DataBox>
         {PreComponent && <PreComponent {...downstreamProps}/>}
         {(isHover && expandable && inspect) && actionIcons}
       </DataBox>

diff --git a/src/components/DataTypes/Array.tsx b/src/components/DataTypes/Array.tsx
@@ -0,0 +1,113 @@
+import { Box } from '@mui/material'
+import React, { useMemo } from 'react'
+
+import { useTextColor } from '../../hooks/useColor'
+import { useJsonViewerStore } from '../../stores/JsonViewerStore'
+import type { DataItemProps } from '../../type'
+import { DataKeyPair } from '../DataKeyPair'
+
+const arrayLb = '['
+const arrayRb = ']'
+
+export const PreArrayType: React.FC<DataItemProps<unknown[]>> = (props) => {
+  const metadataColor = useJsonViewerStore(store => store.colorNamespace.base04)
+  const sizeOfValue = useMemo(
+    () => props.inspect ? `${Object.keys(props.value).length} Items` : '',
+    [props.inspect, props.value]
+  )
+  return (
+    <Box
+      component='span' className='data-array-start'
+      sx={{
+        letterSpacing: 0.5
+      }}
+    >
+      {arrayLb}
+      <Box
+        component='span'
+        sx={{
+          pl: 0.5,
+          fontStyle: 'italic',
+          color: metadataColor
+        }}
+      >
+        {sizeOfValue}
+      </Box>
+    </Box>
+  )
+}
+
+export const PostArrayType: React.FC<DataItemProps<unknown[]>> = (props) => {
+  const metadataColor = useJsonViewerStore(store => store.colorNamespace.base04)
+  const sizeOfValue = useMemo(
+    () => !props.inspect ? `${Object.keys(props.value).length} Items` : '',
+    [props.inspect, props.value]
+  )
+  return (
+    <Box component='span' className='data-array-end'>
+      {arrayRb}
+      <Box
+        component='span'
+        sx={{
+          pl: 0.5,
+          fontStyle: 'italic',
+          color: metadataColor
+        }}
+      >
+        {sizeOfValue}
+      </Box>
+    </Box>
+  )
+}
+
+export const ArrayType: React.FC<DataItemProps<unknown[]>> = (props) => {
+  const keyColor = useTextColor()
+  const groupArraysAfterLength = useJsonViewerStore(store => store.groupArraysAfterLength)
+  const elements = useMemo(() => {
+    if (props.value.length <= groupArraysAfterLength) {
+      return props.value.map((value, index) => {
+        const path = [...props.path, index]
+        return (
+          <DataKeyPair key={index} path={path} value={value}/>
+        )
+      })
+    }
+    const value = props.value.reduce<unknown[][]>((array, value, index) => {
+      const target = Math.floor(index / groupArraysAfterLength)
+      if (array[target]) {
+        array[target].push(value)
+      } else {
+        array[target] = [value]
+      }
+      return array
+    }, [])
+    console.log('value', value)
+
+    return value.map((list, index) => {
+      const path = [...props.path]
+      return (
+        <DataKeyPair key={index} path={path} value={list} nested/>
+      )
+    })
+  }, [props.path, props.value, groupArraysAfterLength])
+  return (
+    <Box
+      className='data-array'
+      sx={{
+        display: props.inspect ? 'block' : 'inline-block',
+        pl: props.inspect ? 2 : 0,
+        color: keyColor
+      }}
+    >
+      {
+        props.inspect
+          ? elements
+          : (
+            <Box component='span' className='data-array-body'>
+              ...
+            </Box>
+            )
+      }
+    </Box>
+  )
+}
diff --git a/src/components/DataTypes/Object.tsx b/src/components/DataTypes/Object.tsx
@@ -6,11 +6,14 @@ import { useJsonViewerStore } from '../../stores/JsonViewerStore'
 import type { DataItemProps } from '../../type'
 import { DataKeyPair } from '../DataKeyPair'
 
-const lb = '{'
-const rb = '}'
+const objectLb = '{'
+const arrayLb = '['
+const objectRb = '}'
+const arrayRb = ']'
 
 export const PreObjectType: React.FC<DataItemProps<object>> = (props) => {
   const metadataColor = useJsonViewerStore(store => store.colorNamespace.base04)
+  const isArray = useMemo(() => Array.isArray(props.value), [props.value])
   const sizeOfValue = useMemo(
     () => props.inspect ? `${Object.keys(props.value).length} Items` : '',
     [props.inspect, props.value]
@@ -22,7 +25,7 @@ export const PreObjectType: React.FC<DataItemProps<object>> = (props) => {
         letterSpacing: 0.5
       }}
     >
-      {lb}
+      {isArray ? arrayLb : objectLb}
       <Box
         component='span'
         sx={{
@@ -39,13 +42,14 @@ export const PreObjectType: React.FC<DataItemProps<object>> = (props) => {
 
 export const PostObjectType: React.FC<DataItemProps<object>> = (props) => {
   const metadataColor = useJsonViewerStore(store => store.colorNamespace.base04)
+  const isArray = useMemo(() => Array.isArray(props.value), [props.value])
   const sizeOfValue = useMemo(
     () => !props.inspect ? `${Object.keys(props.value).length} Items` : '',
     [props.inspect, props.value]
   )
   return (
     <Box component='span' className='data-object-end'>
-      {rb}
+      {isArray ? arrayRb : objectRb}
       <Box
         component='span'
         sx={{
@@ -62,6 +66,14 @@ export const PostObjectType: React.FC<DataItemProps<object>> = (props) => {
 
 export const ObjectType: React.FC<DataItemProps<object>> = (props) => {
   const keyColor = useTextColor()
+  const elements = useMemo(() => (
+    Object.entries(props.value).map(([key, value]) => {
+      const path = [...props.path, key]
+      return (
+        <DataKeyPair key={key} path={path} value={value}/>
+      )
+    })
+  ), [props.path, props.value])
   return (
     <Box
       className='data-object'
@@ -73,14 +85,7 @@ export const ObjectType: React.FC<DataItemProps<object>> = (props) => {
     >
       {
         props.inspect
-          ? (
-              Object.entries(props.value).map(([key, value]) => {
-                const path = [...props.path, key]
-                return (
-                  <DataKeyPair key={key} path={path} value={value}/>
-                )
-              })
-            )
+          ? elements
           : (
             <Box component='span' className='data-object-body'>
               ...

diff --git a/src/index.tsx b/src/index.tsx
@@ -17,7 +17,7 @@ import { applyValue } from './utils'
 
 export { applyValue }
 
-export type JsonViewerOnChange = <U = unknown>(path: string[], oldValue: U, newValue: U) => void
+export type JsonViewerOnChange = <U = unknown>(path: (string | number)[], oldValue: U, newValue: U) => void
 
 const JsonViewerInner: React.FC<JsonViewerProps> = (props) => {
   const api = useJsonViewerStoreApi()
@@ -26,9 +26,10 @@ const JsonViewerInner: React.FC<JsonViewerProps> = (props) => {
       value: props.value,
       indentWidth: props.indentWidth,
       defaultCollapsed: props.defaultCollapsed,
-      onChange: props.onChange
+      onChange: props.onChange,
+      groupArraysAfterLength: props.groupArraysAfterLength
     }))
-  }, [api, props.defaultCollapsed, props.indentWidth, props.onChange, props.value])
+  }, [api, props.defaultCollapsed, props.groupArraysAfterLength, props.indentWidth, props.onChange, props.value])
 
   const value = useJsonViewerStore(store => store.value)
   const setHover = useJsonViewerStore(store => store.setHover)

diff --git a/src/stores/JsonViewerStore.ts b/src/stores/JsonViewerStore.ts
@@ -62,7 +62,8 @@ export const darkNamespace: ColorNamespace = {
 }
 
 export type JsonViewerState = {
-  hoverPath: string[] | null
+  hoverPath: (string | number)[] | null
+  groupArraysAfterLength: number
   defaultCollapsed: number | boolean
   colorNamespace: ColorNamespace
   expanded: string[]
@@ -72,7 +73,7 @@ export type JsonViewerState = {
 }
 
 export type JsonViewerActions = {
-  setHover: (path: string[] | null) => void
+  setHover: (path: (string | number)[] | null) => void
 }
 
 // todo
@@ -81,6 +82,7 @@ export const createJsonViewerStore = () =>
     combine<JsonViewerState, JsonViewerActions>(
       {
         hoverPath: null,
+        groupArraysAfterLength: 100,
         rootName: 'root',
         defaultCollapsed: false,
         colorNamespace: defaultColorNamespace,

diff --git a/src/stores/typeRegistry.tsx b/src/stores/typeRegistry.tsx
@@ -2,6 +2,11 @@ import { Box } from '@mui/material'
 import { DevelopmentError } from '@textea/dev-kit/utils'
 import React, { useMemo } from 'react'
 
+import {
+  ArrayType,
+  PostArrayType,
+  PreArrayType
+} from '../components/DataTypes/Array'
 import { createEasyType } from '../components/DataTypes/createEasyType'
 import {
   FunctionType, PostFunctionType,
@@ -200,6 +205,15 @@ registerType<number>(
   }
 )
 
+registerType<unknown[]>(
+  {
+    is: (value): value is unknown[] => Array.isArray(value),
+    Component: ArrayType,
+    PreComponent: PreArrayType,
+    PostComponent: PostArrayType
+  }
+)
+
 // fallback for all data like 'object'
 registerType<object>(
   {