Skip to content

Commit d0ecf3e

Browse files
AlemTuzlakautofix-ci[bot]
AlemTuzlak
and
autofix-ci[bot]
authored
fix: issue with responsiveness in jsontree (#207)
* fix: issue with responsiveness in jsontree * ci: apply automated fixes --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
1 parent cd84251 commit d0ecf3e

2 files changed

Lines changed: 83 additions & 91 deletions

File tree

‎.changeset/wicked-cobras-peel.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@tanstack/devtools-ui': patch
3+
---
4+
5+
fix responsiveness in jsontree

‎packages/devtools-ui/src/components/tree.tsx‎

Lines changed: 78 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -36,94 +36,87 @@ function JsonValue(props: {
3636
collapsePaths?: Array<string>
3737
path: string
3838
}) {
39-
const {
40-
value,
41-
keyName,
42-
isRoot = false,
43-
isLastKey,
44-
copyable,
45-
defaultExpansionDepth,
46-
depth,
47-
collapsePaths,
48-
path,
49-
} = props
5039
const styles = useStyles()
5140

5241
return (
53-
<span class={styles().tree.valueContainer(isRoot)}>
54-
{keyName && typeof value !== 'object' && !Array.isArray(value) && (
55-
<span class={styles().tree.valueKey}>&quot;{keyName}&quot;: </span>
56-
)}
42+
<span class={styles().tree.valueContainer(props.isRoot ?? false)}>
43+
{props.keyName &&
44+
typeof props.value !== 'object' &&
45+
!Array.isArray(props.value) && (
46+
<span class={styles().tree.valueKey}>
47+
&quot;{props.keyName}&quot;:{' '}
48+
</span>
49+
)}
5750
{(() => {
58-
if (typeof value === 'string') {
51+
if (typeof props.value === 'string') {
5952
return (
60-
<span class={styles().tree.valueString}>&quot;{value}&quot;</span>
53+
<span class={styles().tree.valueString}>
54+
&quot;{props.value}&quot;
55+
</span>
6156
)
6257
}
63-
if (typeof value === 'number') {
64-
return <span class={styles().tree.valueNumber}>{value}</span>
58+
if (typeof props.value === 'number') {
59+
return <span class={styles().tree.valueNumber}>{props.value}</span>
6560
}
66-
if (typeof value === 'boolean') {
67-
return <span class={styles().tree.valueBoolean}>{String(value)}</span>
61+
if (typeof props.value === 'boolean') {
62+
return (
63+
<span class={styles().tree.valueBoolean}>
64+
{String(props.value)}
65+
</span>
66+
)
6867
}
69-
if (value === null) {
68+
if (props.value === null) {
7069
return <span class={styles().tree.valueNull}>null</span>
7170
}
72-
if (value === undefined) {
71+
if (props.value === undefined) {
7372
return <span class={styles().tree.valueNull}>undefined</span>
7473
}
75-
if (typeof value === 'function') {
74+
if (typeof props.value === 'function') {
7675
return (
77-
<span class={styles().tree.valueFunction}>{String(value)}</span>
76+
<span class={styles().tree.valueFunction}>
77+
{String(props.value)}
78+
</span>
7879
)
7980
}
80-
if (Array.isArray(value)) {
81+
if (Array.isArray(props.value)) {
8182
return (
8283
<ArrayValue
83-
defaultExpansionDepth={defaultExpansionDepth}
84-
depth={depth}
85-
copyable={copyable}
86-
keyName={keyName}
87-
value={value}
88-
collapsePaths={collapsePaths}
89-
path={path}
84+
defaultExpansionDepth={props.defaultExpansionDepth}
85+
depth={props.depth}
86+
copyable={props.copyable}
87+
keyName={props.keyName}
88+
value={props.value}
89+
collapsePaths={props.collapsePaths}
90+
path={props.path}
9091
/>
9192
)
9293
}
93-
if (typeof value === 'object') {
94+
if (typeof props.value === 'object') {
9495
return (
9596
<ObjectValue
96-
defaultExpansionDepth={defaultExpansionDepth}
97-
depth={depth}
98-
copyable={copyable}
99-
keyName={keyName}
100-
value={value}
101-
collapsePaths={collapsePaths}
102-
path={path}
97+
defaultExpansionDepth={props.defaultExpansionDepth}
98+
depth={props.depth}
99+
copyable={props.copyable}
100+
keyName={props.keyName}
101+
value={props.value}
102+
collapsePaths={props.collapsePaths}
103+
path={props.path}
103104
/>
104105
)
105106
}
106107
return <span />
107108
})()}
108-
{copyable && (
109+
{props.copyable && (
109110
<div class={clsx(styles().tree.actions, 'actions')}>
110-
<CopyButton value={value} />
111+
<CopyButton value={props.value} />
111112
</div>
112113
)}
113-
{isLastKey || isRoot ? '' : <span>,</span>}
114+
{props.isLastKey || props.isRoot ? '' : <span>,</span>}
114115
</span>
115116
)
116117
}
117118

118-
const ArrayValue = ({
119-
value,
120-
keyName,
121-
copyable,
122-
defaultExpansionDepth,
123-
depth,
124-
collapsePaths,
125-
path,
126-
}: {
119+
const ArrayValue = (props: {
127120
value: Array<any>
128121
copyable?: boolean
129122
keyName?: string
@@ -135,15 +128,16 @@ const ArrayValue = ({
135128
const styles = useStyles()
136129

137130
const [expanded, setExpanded] = createSignal(
138-
depth <= defaultExpansionDepth && !collapsePaths?.includes(path),
131+
props.depth <= props.defaultExpansionDepth &&
132+
!props.collapsePaths?.includes(props.path),
139133
)
140134

141-
if (value.length === 0) {
135+
if (props.value.length === 0) {
142136
return (
143137
<span class={styles().tree.expanderContainer}>
144-
{keyName && (
138+
{props.keyName && (
145139
<span class={clsx(styles().tree.valueKey, styles().tree.collapsible)}>
146-
&quot;{keyName}&quot;:{' '}
140+
&quot;{props.keyName}&quot;:{' '}
147141
</span>
148142
)}
149143

@@ -158,7 +152,7 @@ const ArrayValue = ({
158152
expanded={expanded()}
159153
/>
160154

161-
{keyName && (
155+
{props.keyName && (
162156
<span
163157
onclick={(e) => {
164158
e.stopPropagation()
@@ -167,27 +161,27 @@ const ArrayValue = ({
167161
}}
168162
class={clsx(styles().tree.valueKey, styles().tree.collapsible)}
169163
>
170-
&quot;{keyName}&quot;:{' '}
171-
<span class={styles().tree.info}>{value.length} items</span>
164+
&quot;{props.keyName}&quot;:{' '}
165+
<span class={styles().tree.info}>{props.value.length} items</span>
172166
</span>
173167
)}
174168

175169
<span class={styles().tree.valueBraces}>[</span>
176170

177171
<Show when={expanded()}>
178-
<span class={styles().tree.expandedLine(Boolean(keyName))}>
179-
<For each={value}>
172+
<span class={styles().tree.expandedLine(Boolean(props.keyName))}>
173+
<For each={props.value}>
180174
{(item, i) => {
181-
const isLastKey = i() === value.length - 1
175+
const isLastKey = i() === props.value.length - 1
182176
return (
183177
<JsonValue
184-
copyable={copyable}
178+
copyable={props.copyable}
185179
value={item}
186180
isLastKey={isLastKey}
187-
defaultExpansionDepth={defaultExpansionDepth}
188-
depth={depth + 1}
189-
collapsePaths={collapsePaths}
190-
path={path ? `${path}[${i()}]` : `[${i()}]`}
181+
defaultExpansionDepth={props.defaultExpansionDepth}
182+
depth={props.depth + 1}
183+
collapsePaths={props.collapsePaths}
184+
path={props.path ? `${props.path}[${i()}]` : `[${i()}]`}
191185
/>
192186
)
193187
}}
@@ -212,15 +206,7 @@ const ArrayValue = ({
212206
)
213207
}
214208

215-
const ObjectValue = ({
216-
value,
217-
keyName,
218-
copyable,
219-
defaultExpansionDepth,
220-
depth,
221-
collapsePaths,
222-
path,
223-
}: {
209+
const ObjectValue = (props: {
224210
value: Record<string, any>
225211
keyName?: string
226212
copyable?: boolean
@@ -232,18 +218,19 @@ const ObjectValue = ({
232218
const styles = useStyles()
233219

234220
const [expanded, setExpanded] = createSignal(
235-
depth <= defaultExpansionDepth && !collapsePaths?.includes(path),
221+
props.depth <= props.defaultExpansionDepth &&
222+
!props.collapsePaths?.includes(props.path),
236223
)
237224

238-
const keys = Object.keys(value)
225+
const keys = Object.keys(props.value)
239226
const lastKeyName = keys[keys.length - 1]
240227

241228
if (keys.length === 0) {
242229
return (
243230
<span class={styles().tree.expanderContainer}>
244-
{keyName && (
231+
{props.keyName && (
245232
<span class={clsx(styles().tree.valueKey, styles().tree.collapsible)}>
246-
&quot;{keyName}&quot;:{' '}
233+
&quot;{props.keyName}&quot;:{' '}
247234
</span>
248235
)}
249236

@@ -254,14 +241,14 @@ const ObjectValue = ({
254241

255242
return (
256243
<span class={styles().tree.expanderContainer}>
257-
{keyName && (
244+
{props.keyName && (
258245
<Expander
259246
onClick={() => setExpanded(!expanded())}
260247
expanded={expanded()}
261248
/>
262249
)}
263250

264-
{keyName && (
251+
{props.keyName && (
265252
<span
266253
onClick={(e) => {
267254
e.stopPropagation()
@@ -270,27 +257,27 @@ const ObjectValue = ({
270257
}}
271258
class={clsx(styles().tree.valueKey, styles().tree.collapsible)}
272259
>
273-
&quot;{keyName}&quot;:{' '}
260+
&quot;{props.keyName}&quot;:{' '}
274261
<span class={styles().tree.info}>{keys.length} items</span>
275262
</span>
276263
)}
277264

278265
<span class={styles().tree.valueBraces}>{'{'}</span>
279266

280267
<Show when={expanded()}>
281-
<span class={styles().tree.expandedLine(Boolean(keyName))}>
268+
<span class={styles().tree.expandedLine(Boolean(props.keyName))}>
282269
<For each={keys}>
283270
{(k) => (
284271
<>
285272
<JsonValue
286-
value={value[k]}
273+
value={props.value[k]}
287274
keyName={k}
288275
isLastKey={lastKeyName === k}
289-
copyable={copyable}
290-
defaultExpansionDepth={defaultExpansionDepth}
291-
depth={depth + 1}
292-
collapsePaths={collapsePaths}
293-
path={`${path}${path ? '.' : ''}${k}`}
276+
copyable={props.copyable}
277+
defaultExpansionDepth={props.defaultExpansionDepth}
278+
depth={props.depth + 1}
279+
collapsePaths={props.collapsePaths}
280+
path={`${props.path}${props.path ? '.' : ''}${k}`}
294281
/>
295282
</>
296283
)}

0 commit comments

Comments
 (0)