feat: backport support for props.displayDataTypes (#63)

Author: himself65

examples/basic/pages/index.tsx

@@ -1,9 +1,9 @@
 import {
   AppBar,
-  FormControl,
+  FormControl, FormControlLabel,
   InputLabel,
   MenuItem,
-  Select,
+  Select, Switch,
   TextField, Toolbar, Typography
 } from '@mui/material'
 import {
@@ -91,6 +91,7 @@ const IndexPage: React.FC = () => {
   const [themeKey, setThemeKey] = useState<string>('light')
   const [theme, setTheme] = useState<JsonViewerTheme>('light')
   const [src, setSrc] = useState(() => example)
+  const [displayDataTypes, setDisplayDataTypes] = useState(true)
   useEffect(() => {
     const loop = () => {
       setSrc(src => ({
@@ -126,6 +127,13 @@ const IndexPage: React.FC = () => {
         </Toolbar>
       </AppBar>
       <Toolbar/>
+      <FormControlLabel
+        control={<Switch
+          value={displayDataTypes}
+          onChange={event => setDisplayDataTypes(event.target.checked)}
+        />}
+        label='DisplayDataTypes'
+      />
       <TextField
         label='indentWidth'
         value={indent}
@@ -177,6 +185,7 @@ const IndexPage: React.FC = () => {
         value={src}
         indentWidth={indent}
         theme={theme}
+        displayDataTypes={displayDataTypes}
         groupArraysAfterLength={groupArraysAfterLength}
         keyRenderer={KeyRenderer}
         valueTypes={[

src/components/DataKeyPair.tsx

@@ -239,8 +239,14 @@ export const DataKeyPair: React.FC<DataKeyPairProps> = (props) => {
                   )
         }
         {
-          (nestedIndex === undefined && isRoot && rootName !== false) && (
-            <DataBox sx={{ mx: 0.5 }}>:</DataBox>
+          (
+            isRoot
+              ? (rootName !== false
+                  ? <DataBox sx={{ mx: 0.5 }}>:</DataBox>
+                  : null)
+              : nestedIndex === undefined && (
+               <DataBox sx={{ mx: 0.5 }}>:</DataBox>
+              )
           )
         }
         {PreComponent && <PreComponent {...downstreamProps} />}

src/components/DataTypes/createEasyType.tsx

@@ -19,6 +19,7 @@ export function createEasyType<Value> (
   const displayTypeLabel = config.displayTypeLabel ?? true
   const Render = React.memo(renderValue)
   const EasyType: React.FC<DataItemProps<Value>> = (props) => {
+    const storeDisplayDataTypes = useJsonViewerStore(store => store.displayDataTypes)
     const color = useJsonViewerStore(
       store => store.colorspace[config.colorKey])
     return (
@@ -27,7 +28,7 @@ export function createEasyType<Value> (
           color
         }}
       >
-        {displayTypeLabel && <DataTypeLabel dataType={type}/>}
+        {(displayTypeLabel && storeDisplayDataTypes) && <DataTypeLabel dataType={type}/>}
         <DataBox className={`${type}-value`}>
           <Render value={props.value}/>
         </DataBox>

src/index.tsx

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

src/stores/JsonViewerStore.ts

@@ -24,6 +24,7 @@ export type JsonViewerState<T = unknown> = {
   quotesOnKeys: boolean
   colorspace: Colorspace
   editable: boolean | (<U>(path: Path, currentValue: U) => boolean)
+  displayDataTypes: boolean
   rootName: false | string
   value: T
   onChange: JsonViewerOnChange
@@ -54,6 +55,7 @@ export const createJsonViewerStore = <T = unknown>(props: JsonViewerProps<T>) =>
         defaultInspectDepth: props.defaultInspectDepth ?? 5,
         objectSortKeys: props.objectSortKeys ?? false,
         quotesOnKeys: props.quotesOnKeys ?? true,
+        displayDataTypes: props.displayDataTypes ?? true,
         // internal state
         inspectCache: {},
         hoverPath: null,

src/type.ts

@@ -127,6 +127,13 @@ export type JsonViewerProps<T = unknown> = {
    */
   quotesOnKeys?: boolean
 
+  /**
+   * Whether display data type labels
+   *
+   * @default true
+   */
+  displayDataTypes?: boolean
+
   className?: string
   style?: React.CSSProperties
   /**

tests/index.test.tsx

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