feat: backport support for v1

Support `props.rootName`, `props.collapseStringsAfterLength`
Yazawazi · Sep 20, 2022 · ff729a6 · ff729a6
1 parent 4f8b32f
commit ff729a6
Show file tree

Hide file tree

Showing 7 changed files with 136 additions and 89 deletions.
diff --git a/README.md b/README.md
@@ -81,7 +81,7 @@ const Component = () => (
   - [ ] custom metadata
 - [X] Support `Next.js` SSR
 - [X] `onChange` props allow users to edit value
-- [X] Object, array, string and function values can be collapsed and expanded
+- [X] Inspect `object`, `Array`, primitive type, even `Map` and `Set` by default.
 - [X] Metadata preview, like total items, length of string...
 - [X] `Copy to Clipboard` on Click
 - [ ] Editor for basic types

diff --git a/examples/basic/pages/index.tsx b/examples/basic/pages/index.tsx
@@ -42,6 +42,8 @@ map.set('goo', 'hello')
 
 const set = new Set([1, 2, 3])
 
+const superLongString = '1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111'
+
 const example = {
   loopObject,
   loopArray,
@@ -57,6 +59,7 @@ const example = {
   set,
   float: 114.514,
   undefined,
+  superLongString,
   object: {
     'first-child': true,
     'second-child': false,
@@ -70,7 +73,8 @@ const example = {
 }
 
 const KeyRenderer: JsonViewerKeyRenderer = ({ path }) => {
-  return <del aria-label='I dont like this number'>&quot;{path.slice(-1)}&quot;</del>
+  return <del aria-label='I dont like this number'>&quot;{path.slice(
+    -1)}&quot;</del>
 }
 KeyRenderer.when = (props) => props.value === 114.514
 
@@ -139,7 +143,8 @@ const IndexPage: React.FC = () => {
         keyRenderer={KeyRenderer}
         valueTypes={[
           {
-            is: (value): value is string => typeof value === 'string' && value.startsWith('https://i.imgur.com'),
+            is: (value): value is string => typeof value === 'string' &&
+              value.startsWith('https://i.imgur.com'),
             Component: (props) => {
               return <img height='50px' src={props.value} alt={props.value}/>
             }

diff --git a/src/components/DataKeyPair.tsx b/src/components/DataKeyPair.tsx
@@ -52,7 +52,6 @@ export const DataKeyPair: React.FC<DataKeyPairProps> = (props) => {
   const rootName = useJsonViewerStore(store => store.rootName)
   const isRoot = root === value
   const isNumberKey = Number.isInteger(Number(key))
-  const displayKey = isRoot ? rootName : key
   const downstreamProps: DataItemProps = useMemo(() => ({
     path,
     inspect,
@@ -64,86 +63,87 @@ export const DataKeyPair: React.FC<DataKeyPairProps> = (props) => {
   const actionIcons = useMemo(() => {
     if (editing) {
       return (
-        <>
-          <IconBox>
-            <CloseIcon
-              sx={{
-                fontSize: '.8rem'
-              }}
-              onClick={() => {
-                // abort editing
-                setEditing(false)
-                setTempValue(value)
-              }}
-            />
-          </IconBox>
-          <IconBox>
-            <CheckIcon
-              sx={{
-                fontSize: '.8rem'
-              }}
-              onClick={() => {
-                // finish editing, save data
-                setEditing(false)
-                onChange(path, value, tempValue)
-              }}
-            />
-          </IconBox>
-        </>
+          <>
+            <IconBox>
+              <CloseIcon
+                sx={{
+                  fontSize: '.8rem'
+                }}
+                onClick={() => {
+                  // abort editing
+                  setEditing(false)
+                  setTempValue(value)
+                }}
+              />
+            </IconBox>
+            <IconBox>
+              <CheckIcon
+                sx={{
+                  fontSize: '.8rem'
+                }}
+                onClick={() => {
+                  // finish editing, save data
+                  setEditing(false)
+                  onChange(path, value, tempValue)
+                }}
+              />
+            </IconBox>
+          </>
       )
     }
     return (
-      <>
-        <IconBox
-          onClick={event => {
-            copy(
-              JSON.stringify(
-                value,
-                null,
-                '  '
-              )
-            )
-            event.preventDefault()
-          }}
-        >
-          {
-            copied
-              ? (
-                <CheckIcon
-                  sx={{
-                    fontSize: '.8rem'
-                  }}
-                />
+        <>
+          <IconBox
+            onClick={event => {
+              copy(
+                JSON.stringify(
+                  value,
+                  null,
+                  '  '
                 )
-              : (
-                <ContentCopyIcon
+              )
+              event.preventDefault()
+            }}
+          >
+            {
+              copied
+                ? (
+                  <CheckIcon
+                    sx={{
+                      fontSize: '.8rem'
+                    }}
+                  />
+                  )
+                : (
+                  <ContentCopyIcon
+                    sx={{
+                      fontSize: '.8rem'
+                    }}
+                  />
+                  )
+            }
+          </IconBox>
+          {/* todo: support edit object */}
+          {(Editor && editable) &&
+            (
+              <IconBox
+                onClick={event => {
+                  event.preventDefault()
+                  setEditing(true)
+                }}
+              >
+                <EditIcon
                   sx={{
                     fontSize: '.8rem'
                   }}
                 />
-                )
+              </IconBox>
+            )
           }
-        </IconBox>
-        {/* todo: support edit object */}
-        {(Editor && editable) &&
-          (
-            <IconBox
-              onClick={event => {
-                event.preventDefault()
-                setEditing(true)
-              }}
-            >
-              <EditIcon
-                sx={{
-                  fontSize: '.8rem'
-                }}
-              />
-            </IconBox>
-          )
-        }
-      </>
+        </>
     )
-  }, [Editor, copied, copy, editable, editing, onChange, path, tempValue, value])
+  },
+  [Editor, copied, copy, editable, editing, onChange, path, tempValue, value])
 
   const expandable = PreComponent && PostComponent
   const KeyRenderer = useJsonViewerStore(store => store.keyRenderer)
@@ -173,14 +173,16 @@ export const DataKeyPair: React.FC<DataKeyPairProps> = (props) => {
         }
       >
         {
-          KeyRenderer.when(downstreamProps)
-            ? <KeyRenderer {...downstreamProps} />
-            : nestedIndex === undefined && (
-              isNumberKey
-                ? <Box component='span'
-                     style={{ color: numberKeyColor }}>{displayKey}</Box>
-                : <>&quot;{displayKey}&quot;</>
-            )
+          (isRoot && rootName !== false)
+            ? <>&quot;{rootName}&quot;</>
+            : !isRoot && KeyRenderer.when(downstreamProps)
+                ? <KeyRenderer {...downstreamProps} />
+                : nestedIndex === undefined && (
+                  isNumberKey
+                    ? <Box component='span'
+                       style={{ color: numberKeyColor }}>{key}</Box>
+                    : <>&quot;{key}&quot;</>
+                )
         }
         {
           nestedIndex === undefined && (

diff --git a/src/components/DataTypes/createEasyType.tsx b/src/components/DataTypes/createEasyType.tsx
@@ -1,8 +1,8 @@
 import { InputBase } from '@mui/material'
 import React, { useCallback } from 'react'
 
-import type { ColorNamespace } from '../../stores/JsonViewerStore'
 import { useJsonViewerStore } from '../../stores/JsonViewerStore'
+import type { ColorNamespace } from '../../theme/base16'
 import type { DataItemProps, DataType, EditorProps } from '../../type'
 import { DataTypeLabel } from '../DataTypeLabel'
 import { DataBox } from '../mui/DataBox'

diff --git a/src/stores/JsonViewerStore.ts b/src/stores/JsonViewerStore.ts
@@ -18,9 +18,10 @@ export type JsonViewerState<T = unknown> = {
   groupArraysAfterLength: number
   maxDisplayLength: number
   defaultInspectDepth: number
+  collapseStringsAfterLength: number
   colorNamespace: ColorNamespace
   expanded: string[]
-  rootName: string
+  rootName: false | string
   value: T
   onChange: JsonViewerOnChange
   keyRenderer: JsonViewerKeyRenderer
@@ -41,8 +42,9 @@ export const createJsonViewerStore = <T = unknown>(props: JsonViewerProps<T>) =>
         hoverPath: null,
         indentWidth: props.indentWidth ?? 2,
         groupArraysAfterLength: props.groupArraysAfterLength ?? 100,
+        collapseStringsAfterLength: props.collapseStringsAfterLength ?? 50,
         maxDisplayLength: props.maxDisplayLength ?? 30,
-        rootName: 'root',
+        rootName: props.rootName ?? 'root',
         defaultInspectDepth: 5,
         colorNamespace: lightColorNamespace,
         expanded: ['data-viewer-root'],

diff --git a/src/stores/typeRegistry.tsx b/src/stores/typeRegistry.tsx
@@ -1,6 +1,6 @@
 import { Box } from '@mui/material'
 import { DevelopmentError } from '@textea/dev-kit/utils'
-import React, { useMemo } from 'react'
+import React, { useMemo, useState } from 'react'
 
 import { createEasyType } from '../components/DataTypes/createEasyType'
 import {
@@ -145,7 +145,30 @@ registerType<string>(
     is: (value): value is string => typeof value === 'string',
     ...createEasyType(
       'string',
-      ({ value }) => <>&quot;{`${value}`}&quot;</>,
+      (props) => {
+        const [showRest, setShowRest] = useState(false)
+        const collapseStringsAfterLength = useJsonViewerStore(
+          store => store.collapseStringsAfterLength)
+        const value = showRest ? props.value : props.value.slice(0, collapseStringsAfterLength)
+        const hasRest = props.value.length > collapseStringsAfterLength
+        return (
+          <Box
+            component='span'
+            sx={{
+              overflowWrap: 'break-word',
+              cursor: hasRest ? 'pointer' : 'inherit'
+            }}
+            onClick={() => {
+              setShowRest(value => !value)
+            }}
+          >
+            &quot;
+            {value}
+            {hasRest && <span>...</span>}
+            &quot;
+          </Box>
+        )
+      },
       {
         colorKey: 'base09',
         fromString: value => value

diff --git a/src/type.ts b/src/type.ts
@@ -31,11 +31,17 @@ export type JsonViewerTheme = 'light' | 'dark' | 'auto'
 
 export type JsonViewerProps<T = unknown> = {
   /**
-   * any value
+   * Name of the root value
+   *
+   * @default "root"
+   */
+  rootName?: false | string
+  /**
+   * Any value, `object`, `Array`, primitive type, even `Map` or `Set`.
    */
   value: T
   /**
-   * indent width for nested objects
+   * Indent width for nested objects
    * @default 2
    */
   indentWidth?: number
@@ -71,6 +77,15 @@ export type JsonViewerProps<T = unknown> = {
    * @default 100
    */
   groupArraysAfterLength?: number
+  /**
+   * When an integer value is assigned, strings will be cut off at that length.
+   * Collapsed strings are followed by an ellipsis.
+   *
+   * String content can be expanded and collapsed by clicking on the string value.
+   *
+   * @default 100
+   */
+  collapseStringsAfterLength?: number
   className?: string
   style?: React.CSSProperties
   /**