feat: support displayObjectSize (#102)

Fixes: #101

Author: Yazawazi

docs/pages/full/index.tsx

@@ -110,6 +110,7 @@ const IndexPage: React.FC = () => {
   const [theme, setTheme] = useState<JsonViewerTheme>('light')
   const [src, setSrc] = useState(() => example)
   const [displayDataTypes, setDisplayDataTypes] = useState(true)
+  const [displayObjectSize, setDisplayObjectSize] = useState(true)
   const [editable, setEditable] = useState(true)
   useEffect(() => {
     const loop = () => {
@@ -152,6 +153,13 @@ const IndexPage: React.FC = () => {
         />}
         label='DisplayDataTypes'
       />
+      <FormControlLabel
+        control={<Switch
+          checked={displayObjectSize}
+          onChange={event => setDisplayObjectSize(event.target.checked)}
+        />}
+        label='DisplayObjectSize'
+      />
       <TextField
         label='indentWidth'
         value={indent}
@@ -205,6 +213,7 @@ const IndexPage: React.FC = () => {
         indentWidth={indent}
         theme={theme}
         displayDataTypes={displayDataTypes}
+        displayObjectSize={displayObjectSize}
         groupArraysAfterLength={groupArraysAfterLength}
         keyRenderer={KeyRenderer}
         valueTypes={[

src/components/DataTypes/Object.tsx

@@ -40,6 +40,7 @@ export const PreObjectType: React.FC<DataItemProps<object>> = (props) => {
     () => props.inspect ? inspectMetadata(props.value) : '',
     [props.inspect, props.value]
   )
+  const displayObjectSize = useJsonViewerStore(store => store.displayObjectSize)
   const isTrap = useIsCycleReference(props.path, props.value)
   return (
     <Box
@@ -49,16 +50,21 @@ export const PreObjectType: React.FC<DataItemProps<object>> = (props) => {
       }}
     >
       {isArray ? arrayLb : objectLb}
-      <Box
-        component='span'
-        sx={{
-          pl: 0.5,
-          fontStyle: 'italic',
-          color: metadataColor
-        }}
-      >
-        {sizeOfValue}
-      </Box>
+      {displayObjectSize
+        ? (
+          <Box
+            component='span'
+            sx={{
+              pl: 0.5,
+              fontStyle: 'italic',
+              color: metadataColor
+            }}
+          >
+            {sizeOfValue}
+          </Box>
+          )
+        : null}
+
       {isTrap && !props.inspect
         ? (
           <>
@@ -78,23 +84,29 @@ export const PreObjectType: React.FC<DataItemProps<object>> = (props) => {
 export const PostObjectType: React.FC<DataItemProps<object>> = (props) => {
   const metadataColor = useJsonViewerStore(store => store.colorspace.base04)
   const isArray = useMemo(() => Array.isArray(props.value), [props.value])
+  const displayObjectSize = useJsonViewerStore(store => store.displayObjectSize)
   const sizeOfValue = useMemo(
     () => !props.inspect ? inspectMetadata(props.value) : '',
     [props.inspect, props.value]
   )
   return (
     <Box component='span' className='data-object-end'>
       {isArray ? arrayRb : objectRb}
-      <Box
-        component='span'
-        sx={{
-          pl: 0.5,
-          fontStyle: 'italic',
-          color: metadataColor
-        }}
-      >
-        {sizeOfValue}
-      </Box>
+      {displayObjectSize
+        ? (
+          <Box
+            component='span'
+            sx={{
+              pl: 0.5,
+              fontStyle: 'italic',
+              color: metadataColor
+            }}
+          >
+            {sizeOfValue}
+          </Box>
+          )
+        : null
+      }
     </Box>
   )
 }

src/index.tsx

@@ -55,6 +55,7 @@ const JsonViewerInner: React.FC<JsonViewerProps> = (props) => {
   useSetIfNotUndefinedEffect('enableClipboard', props.enableClipboard)
   useSetIfNotUndefinedEffect('rootName', props.rootName)
   useSetIfNotUndefinedEffect('displayDataTypes', props.displayDataTypes)
+  useSetIfNotUndefinedEffect('displayObjectSize', props.displayObjectSize)
   useEffect(() => {
     if (props.theme === 'light') {
       api.setState({

src/stores/JsonViewerStore.ts

@@ -29,6 +29,7 @@ export type JsonViewerState<T = unknown> = {
   value: T
   onChange: JsonViewerOnChange
   keyRenderer: JsonViewerKeyRenderer
+  displayObjectSize: boolean
 }
 
 export type JsonViewerActions = {
@@ -63,7 +64,8 @@ export const createJsonViewerStore = <T = unknown> (props: JsonViewerProps<T>) =
         inspectCache: {},
         hoverPath: null,
         colorspace: lightColorspace,
-        value: props.value
+        value: props.value,
+        displayObjectSize: props.displayObjectSize ?? true
       },
       (set, get) => ({
         getInspectCache: (path, nestedIndex) => {

src/type.ts

@@ -141,4 +141,11 @@ export type JsonViewerProps<T = unknown> = {
    * @default 'light'
    */
   theme?: JsonViewerTheme
+
+  /**
+   * Whether display the size of array and object
+   *
+   * @default true
+   */
+  displayObjectSize?: boolean
 }

tests/index.test.tsx

@@ -229,6 +229,13 @@ describe('render <JsonViewer/> with props', () => {
     })
   })
 
+  it('render with displayObjectSize', async () => {
+    const selection = [true, false]
+    selection.forEach(displayObjectSize => {
+      render(<JsonViewer value={['string1', 'string2']} displayObjectSize={displayObjectSize}/>)
+    })
+  })
+
   it('render with dataTypes', async () => {
     render(<JsonViewer value={undefined} valueTypes={[]}/>)
     render(<JsonViewer value={undefined} valueTypes={[