refactor: fix eslint warning and the style of code (#224)

Author: pionxzh

src/components/DataKeyPair.tsx

@@ -221,7 +221,7 @@ export const DataKeyPair: React.FC<DataKeyPairProps> = (props) => {
             if (!isEmptyValue) {
               setInspect(state => !state)
             }
-          }, [setInspect])
+          }, [isEmptyValue, setInspect])
         }
       >
         {

src/components/DataTypes/createEasyType.tsx

@@ -16,18 +16,14 @@ export function createEasyType<Value> (
     displayTypeLabel?: boolean
   }
 ): Omit<DataType<Value>, 'is'> {
-  const displayTypeLabel = config.displayTypeLabel ?? true
+  const { fromString, colorKey, displayTypeLabel = true } = config
+
   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])
+    const color = useJsonViewerStore(store => store.colorspace[colorKey])
     return (
-      <DataBox
-        sx={{
-          color
-        }}
-      >
+      <DataBox sx={{ color }} >
         {(displayTypeLabel && storeDisplayDataTypes) && <DataTypeLabel dataType={type}/>}
         <DataBox className={`${type}-value`}>
           <Render value={props.value}/>
@@ -36,15 +32,15 @@ export function createEasyType<Value> (
     )
   }
   EasyType.displayName = `easy-${type}-type`
-  if (!config.fromString) {
+
+  if (!fromString) {
     return {
       Component: EasyType
     }
   }
-  const fromString = config.fromString
+
   const EasyTypeEditor: React.FC<EditorProps<Value>> = ({ value, setValue }) => {
-    const color = useJsonViewerStore(
-      store => store.colorspace[config.colorKey])
+    const color = useJsonViewerStore(store => store.colorspace[colorKey])
     return (
       <InputBase
         value={value}
@@ -72,6 +68,7 @@ export function createEasyType<Value> (
     )
   }
   EasyTypeEditor.displayName = `easy-${type}-type-editor`
+
   return {
     Component: EasyType,
     Editor: EasyTypeEditor

src/index.tsx

@@ -73,23 +73,22 @@ const JsonViewerInner: React.FC<JsonViewerProps> = (props) => {
   const predefinedTypes = useMemo(() => predefined(), [])
   const registerTypes = useTypeRegistryStore(store => store.registerTypes)
   if (onceRef.current) {
-    const allTypes = [...predefinedTypes]
-    props.valueTypes?.forEach(type => {
-      allTypes.push(type)
-    })
+    const allTypes = props.valueTypes
+      ? [...predefinedTypes, ...props.valueTypes]
+      : [...predefinedTypes]
     registerTypes(allTypes)
     onceRef.current = false
   }
   useEffect(() => {
-    const allTypes = [...predefinedTypes]
-    props.valueTypes?.forEach(type => {
-      allTypes.push(type)
-    })
+    const allTypes = props.valueTypes
+      ? [...predefinedTypes, ...props.valueTypes]
+      : [...predefinedTypes]
     registerTypes(allTypes)
-  }, [predefinedTypes, props.valueTypes, registerTypes])
+  }, [props.valueTypes, predefinedTypes, registerTypes])
 
   const value = useJsonViewerStore(store => store.value)
   const setHover = useJsonViewerStore(store => store.setHover)
+  const onMouseLeave = useCallback(() => setHover(null), [setHover])
   return (
     <Paper
       elevation={0}
@@ -100,11 +99,7 @@ const JsonViewerInner: React.FC<JsonViewerProps> = (props) => {
         userSelect: 'none',
         contentVisibility: 'auto'
       }}
-      onMouseLeave={
-        useCallback(() => {
-          setHover(null)
-        }, [setHover])
-      }
+      onMouseLeave={ onMouseLeave }
     >
       <DataKeyPair
         value={value}

src/stores/typeRegistry.tsx

@@ -1,6 +1,6 @@
 import { Box } from '@mui/material'
 import type { SetStateAction } from 'react'
-import React, { memo, useMemo, useState } from 'react'
+import { memo, useMemo, useState } from 'react'
 import create from 'zustand'
 import createStore from 'zustand/context'
 import { combine } from 'zustand/middleware'
@@ -166,7 +166,10 @@ export function predefined (): DataType<any>[] {
             </Box>
           )
         },
-        { colorKey: 'base08', displayTypeLabel: false }
+        {
+          colorKey: 'base08',
+          displayTypeLabel: false
+        }
       )
     }
   )