feat: support onSelect callback (#238)

Author: mfklauberg

docs/pages/index.mdx

@@ -57,6 +57,7 @@ const Component = () => (<JsonViewer value={object}/>)
 | `valueTypes`                 | `ValueTypes`                                                                                            | -         | Customize value types.                                                                                                                                                               |
 | `onChange`                   | `(path, oldVal, newVal) => void`                                                                        | -         | Callback when value changed.                                                                                                                                                         |
 | `onCopy`                     | `(path, value) => void`                                                                                 | -         | Callback when value copied.                                                                                                                                                          |
+| `onSelect`                     | `(path, value) => void`                                                                                 | -         | Callback when value selected.                                                                                                                                                          |
 | `enableClipboard`            | `boolean`                                                                                               | `true`    | Whether enable clipboard feature.                                                                                                                                                    |
 | `editable`                   | `boolean` \|<br />`(path, currentValue) => boolean`                                                     | `false`   | Whether enable edit feature. You can pass a function to customize the result.                                                                                                        |
 | `defaultInspectDepth`        | `number`                                                                                                | 5         | Default inspect depth for nested objects.<br /><br />_\* If the number is set too large, it could result in performance issues._                                                     |

src/components/DataTypes/createEasyType.tsx

@@ -22,8 +22,10 @@ export function createEasyType<Value> (
   const EasyType: React.FC<DataItemProps<Value>> = (props) => {
     const storeDisplayDataTypes = useJsonViewerStore(store => store.displayDataTypes)
     const color = useJsonViewerStore(store => store.colorspace[colorKey])
+    const onSelect = useJsonViewerStore(store => store.onSelect)
+
     return (
-      <DataBox sx={{ color }} >
+      <DataBox onClick={() => onSelect?.(props.path, props.value)} sx={{ color }} >
         {(displayTypeLabel && storeDisplayDataTypes) && <DataTypeLabel dataType={type}/>}
         <DataBox className={`${type}-value`}>
           <Render value={props.value}/>

src/index.tsx

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

src/stores/JsonViewerStore.ts

@@ -6,6 +6,7 @@ import { combine } from 'zustand/middleware'
 import type {
   JsonViewerOnChange,
   JsonViewerOnCopy,
+  JsonViewerOnSelect,
   JsonViewerProps,
   Path
 } from '..'
@@ -34,6 +35,7 @@ export type JsonViewerState<T = unknown> = {
   value: T
   onChange: JsonViewerOnChange
   onCopy: JsonViewerOnCopy | undefined
+  onSelect: JsonViewerOnSelect | undefined
   keyRenderer: JsonViewerKeyRenderer
   displayObjectSize: boolean
 }
@@ -61,6 +63,7 @@ export const createJsonViewerStore = <T = unknown> (props: JsonViewerProps<T>) =
         rootName: props.rootName ?? 'root',
         onChange: props.onChange ?? (() => {}),
         onCopy: props.onCopy ?? undefined,
+        onSelect: props.onSelect ?? undefined,
         keyRenderer: props.keyRenderer ?? DefaultKeyRenderer,
         editable: props.editable ?? false,
         defaultInspectDepth: props.defaultInspectDepth ?? 5,

src/type.ts

@@ -23,6 +23,15 @@ export type JsonViewerOnCopy = <U = unknown>(
   value: U
 ) => unknown | Promise<unknown>
 
+/**
+ * @param path path to the target value
+ * @param value
+ */
+export type JsonViewerOnSelect = <U = unknown>(
+  path: Path,
+  value: U,
+) => void
+
 export interface DataItemProps<ValueType = unknown> {
   inspect: boolean
   setInspect: Dispatch<SetStateAction<boolean>>
@@ -75,6 +84,7 @@ export type JsonViewerProps<T = unknown> = {
   valueTypes?: DataType<any>[]
   onChange?: JsonViewerOnChange
   onCopy?: JsonViewerOnCopy
+  onSelect?: JsonViewerOnSelect
   /**
    * Whether enable clipboard feature.
    *