@@ -5,20 +5,18 @@ import { useShowToolsDispatch } from '../store/ShowTools';
5
5
import { Value } from './Value' ;
6
6
import { KeyNameComp } from '../section/KeyName' ;
7
7
import { RowComp } from '../section/Row' ;
8
- import { Container } from '../Container' ;
8
+ import { Container , type ContainerProps } from '../Container' ;
9
9
import { Quote , Colon } from '../symbol' ;
10
10
import { useHighlight } from '../utils/useHighlight' ;
11
+ import { type SectionElementResult } from '../store/Section' ;
11
12
12
- interface KeyValuesProps < T extends object > {
13
- keyName ?: string | number ;
14
- value ?: T ;
15
- parentValue ?: T ;
13
+ interface KeyValuesProps < T extends object > extends SectionElementResult < T > {
16
14
expandKey ?: string ;
17
15
level : number ;
18
16
}
19
17
20
18
export const KeyValues = < T extends object > ( props : KeyValuesProps < T > ) => {
21
- const { value, expandKey = '' , level } = props ;
19
+ const { value, expandKey = '' , level, keys = [ ] } = props ;
22
20
const expands = useExpandsStore ( ) ;
23
21
const { objectSortKeys, indentWidth, collapsed } = useStore ( ) ;
24
22
const isMyArray = Array . isArray ( value ) ;
@@ -49,7 +47,9 @@ export const KeyValues = <T extends object>(props: KeyValuesProps<T>) => {
49
47
return (
50
48
< div className = "w-rjv-wrap" style = { style } >
51
49
{ entries . map ( ( [ key , val ] , idx ) => {
52
- return < KeyValuesItem parentValue = { value } keyName = { key } value = { val } key = { idx } level = { level } /> ;
50
+ return (
51
+ < KeyValuesItem parentValue = { value } keyName = { key } keys = { [ ...keys , key ] } value = { val } key = { idx } level = { level } />
52
+ ) ;
53
53
} ) }
54
54
</ div >
55
55
) ;
@@ -81,7 +81,7 @@ export const KayName = <T extends object>(props: KayNameProps<T>) => {
81
81
KayName . displayName = 'JVR.KayName' ;
82
82
83
83
export const KeyValuesItem = < T extends object > ( props : KeyValuesProps < T > ) => {
84
- const { keyName, value, parentValue, level = 0 } = props ;
84
+ const { keyName, value, parentValue, level = 0 , keys = [ ] } = props ;
85
85
const dispatch = useShowToolsDispatch ( ) ;
86
86
const subkeyid = useId ( ) ;
87
87
const isMyArray = Array . isArray ( value ) ;
@@ -94,15 +94,22 @@ export const KeyValuesItem = <T extends object>(props: KeyValuesProps<T>) => {
94
94
if ( isNested ) {
95
95
const myValue = isMySet ? Array . from ( value as Set < any > ) : isMyMap ? Object . fromEntries ( value ) : value ;
96
96
return (
97
- < Container keyName = { keyName } value = { myValue } parentValue = { parentValue } initialValue = { value } level = { level + 1 } />
97
+ < Container
98
+ keyName = { keyName }
99
+ value = { myValue }
100
+ parentValue = { parentValue }
101
+ initialValue = { value }
102
+ keys = { keys }
103
+ level = { level + 1 }
104
+ />
98
105
) ;
99
106
}
100
107
const reset : React . HTMLAttributes < HTMLDivElement > = {
101
108
onMouseEnter : ( ) => dispatch ( { [ subkeyid ] : true } ) ,
102
109
onMouseLeave : ( ) => dispatch ( { [ subkeyid ] : false } ) ,
103
110
} ;
104
111
return (
105
- < RowComp className = "w-rjv-line" value = { value } keyName = { keyName } parentValue = { parentValue } { ...reset } >
112
+ < RowComp className = "w-rjv-line" value = { value } keyName = { keyName } keys = { keys } parentValue = { parentValue } { ...reset } >
106
113
< KayName keyName = { keyName } value = { value } parentValue = { parentValue } />
107
114
< Value keyName = { keyName ! } value = { value } expandKey = { subkeyid } />
108
115
</ RowComp >
0 commit comments