feat: support path in dataType (#107)

Author: himself65

src/components/DataKeyPair.tsx

@@ -65,7 +65,7 @@ export const DataKeyPair: React.FC<DataKeyPairProps> = (props) => {
   const numberKeyColor = useJsonViewerStore(
     store => store.colorspace.base0C)
   const { Component, PreComponent, PostComponent, Editor } = useTypeComponents(
-    value)
+    value, path)
   const quotesOnKeys = useJsonViewerStore(store => store.quotesOnKeys)
   const rootName = useJsonViewerStore(store => store.rootName)
   const isRoot = root === value

src/stores/typeRegistry.tsx

@@ -16,7 +16,7 @@ import {
   PostObjectType,
   PreObjectType
 } from '../components/DataTypes/Object'
-import type { DataItemProps, DataType } from '../type'
+import type { DataItemProps, DataType, Path } from '../type'
 import { useJsonViewerStore } from './JsonViewerStore'
 
 type TypeRegistryState = {
@@ -59,10 +59,10 @@ const objectType: DataType<object> = {
 }
 
 export function matchTypeComponents<Value> (
-  value: Value, registry: TypeRegistryState['registry']): DataType<Value> {
+  value: Value, path: Path, registry: TypeRegistryState['registry']): DataType<Value> {
   let potential: DataType<Value> | undefined
   for (const T of registry) {
-    if (T.is(value)) {
+    if (T.is(value, path)) {
       potential = T
       if (typeof value === 'object') {
         // early return for case like `null`
@@ -79,9 +79,9 @@ export function matchTypeComponents<Value> (
   return potential
 }
 
-export function useTypeComponents (value: unknown) {
+export function useTypeComponents (value: unknown, path: Path) {
   const registry = useTypeRegistryStore(store => store.registry)
-  return useMemo(() => matchTypeComponents(value, registry), [value, registry])
+  return useMemo(() => matchTypeComponents(value, path, registry), [value, path, registry])
 }
 
 export function predefined (): DataType<any>[] {

src/type.ts

@@ -25,7 +25,7 @@ export type DataType<ValueType = unknown> = {
   /**
    * Whether the value belongs to the data type
    */
-  is: (value: unknown) => boolean
+  is: (value: unknown, path: Path) => boolean
   Component: React.ComponentType<DataItemProps<ValueType>>
   Editor?: React.ComponentType<EditorProps<ValueType>>
   PreComponent?: React.ComponentType<DataItemProps<ValueType>>

src/utils/index.ts

@@ -1,6 +1,6 @@
 import type React from 'react'
 
-import type { DataItemProps, EditorProps } from '../type'
+import type { DataItemProps, EditorProps, Path } from '../type'
 
 export const applyValue = (obj: any, path: (string | number)[], value: any) => {
   if (typeof obj !== 'object' || obj === null) {
@@ -28,52 +28,52 @@ export const applyValue = (obj: any, path: (string | number)[], value: any) => {
 
 // case 1: you only render with a single component
 export function createDataType<ValueType = unknown> (
-  is: (value: unknown) => boolean,
+  is: (value: unknown, path: Path) => boolean,
   Component: React.ComponentType<DataItemProps<ValueType>>
 ): {
-  is: (value: unknown) => boolean
+  is: (value: unknown, path: Path) => boolean
   Component: React.ComponentType<DataItemProps<ValueType>>
 }
 // case 2: you only render with a single component with editor
 export function createDataType<ValueType = unknown> (
-  is: (value: unknown) => boolean,
+  is: (value: unknown, path: Path) => boolean,
   Component: React.ComponentType<DataItemProps<ValueType>>,
   Editor: React.ComponentType<EditorProps<ValueType>>
 ): {
-  is: (value: unknown) => boolean
+  is: (value: unknown, path: Path) => boolean
   Component: React.ComponentType<DataItemProps<ValueType>>
   Editor: React.ComponentType<DataItemProps<ValueType>>
 }
 // case 3: you only render with a component with pre and post.
 export function createDataType<ValueType = unknown> (
-  is: (value: unknown) => boolean,
+  is: (value: unknown, path: Path) => boolean,
   Component: React.ComponentType<DataItemProps<ValueType>>,
   Editor: undefined,
   PreComponent: React.ComponentType<DataItemProps<ValueType>>,
   PostComponent: React.ComponentType<DataItemProps<ValueType>>
 ): {
-  is: (value: unknown) => boolean
+  is: (value: unknown, path: Path) => boolean
   Component: React.ComponentType<DataItemProps<ValueType>>
   PreComponent: React.ComponentType<DataItemProps<ValueType>>
   PostComponent: React.ComponentType<DataItemProps<ValueType>>
 }
 // case 4: need all of these
 export function createDataType<ValueType = unknown> (
-  is: (value: unknown) => boolean,
+  is: (value: unknown, path: Path) => boolean,
   Component: React.ComponentType<DataItemProps<ValueType>>,
   Editor: React.ComponentType<EditorProps<ValueType>>,
   PreComponent: React.ComponentType<DataItemProps<ValueType>>,
   PostComponent: React.ComponentType<DataItemProps<ValueType>>
 ): {
-  is: (value: unknown) => boolean
+  is: (value: unknown, path: Path) => boolean
   Component: React.ComponentType<DataItemProps<ValueType>>
   Editor: React.ComponentType<DataItemProps<ValueType>>
   PreComponent: React.ComponentType<DataItemProps<ValueType>>
   PostComponent: React.ComponentType<DataItemProps<ValueType>>
 }
 
 export function createDataType<ValueType = unknown> (
-  is: (value: unknown) => boolean,
+  is: (value: unknown, path: Path) => boolean,
   Component: React.ComponentType<DataItemProps<ValueType>>,
   Editor?: React.ComponentType<EditorProps<ValueType>> | undefined,
   PreComponent?: React.ComponentType<DataItemProps<ValueType>> | undefined,