forked from
pds.ls/pdsls
atmosphere explorer
add array indices
+67
-55
+67
-55
src/components/json.tsx
+67
-55
src/components/json.tsx
···
153
153
return <span>null</span>;
154
154
};
155
155
156
+
const CollapsibleItem = (props: {
157
+
label: string | number;
158
+
value: JSONType;
159
+
maxWidth?: string;
160
+
isType?: boolean;
161
+
isLink?: boolean;
162
+
parentIsBlob?: boolean;
163
+
}) => {
164
+
const ctx = useJSONCtx();
165
+
const [show, setShow] = createSignal(true);
166
+
const isBlobContext = props.parentIsBlob ?? ctx.parentIsBlob;
167
+
168
+
return (
169
+
<span
170
+
classList={{
171
+
"group/indent flex gap-x-1 w-full": true,
172
+
"flex-col": props.value === Object(props.value),
173
+
}}
174
+
>
175
+
<button
176
+
class="group/clip relative flex size-fit shrink-0 items-center wrap-anywhere text-neutral-500 hover:text-neutral-700 active:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-300 dark:active:text-neutral-300"
177
+
classList={{
178
+
"max-w-[40%] sm:max-w-[50%]": props.maxWidth !== undefined,
179
+
}}
180
+
onclick={() => setShow(!show())}
181
+
>
182
+
<span
183
+
classList={{
184
+
"dark:bg-dark-500 absolute w-4 flex items-center -left-4 bg-neutral-100 text-sm": true,
185
+
"hidden group-hover/clip:flex": show(),
186
+
}}
187
+
>
188
+
{show() ?
189
+
<span class="iconify lucide--chevron-down"></span>
190
+
: <span class="iconify lucide--chevron-right"></span>}
191
+
</span>
192
+
{props.label}:
193
+
</button>
194
+
<span
195
+
classList={{
196
+
"self-center": props.value !== Object(props.value),
197
+
"pl-[calc(2ch-0.5px)] border-l-[0.5px] border-neutral-500/50 dark:border-neutral-400/50 has-hover:group-hover/indent:border-neutral-700 transition-colors dark:has-hover:group-hover/indent:border-neutral-300":
198
+
props.value === Object(props.value),
199
+
"invisible h-0 overflow-hidden": !show(),
200
+
}}
201
+
>
202
+
<JSONCtx.Provider value={{ ...ctx, parentIsBlob: isBlobContext }}>
203
+
<JSONValueInner data={props.value} isType={props.isType} isLink={props.isLink} />
204
+
</JSONCtx.Provider>
205
+
</span>
206
+
</span>
207
+
);
208
+
};
209
+
156
210
const JSONObject = (props: { data: { [x: string]: JSONType } }) => {
157
211
const ctx = useJSONCtx();
158
212
const params = useParams();
···
178
232
const isBlob = props.data.$type === "blob";
179
233
const isBlobContext = isBlob || ctx.parentIsBlob;
180
234
181
-
const Obj = ({ key, value }: { key: string; value: JSONType }) => {
182
-
const [show, setShow] = createSignal(true);
183
-
184
-
return (
185
-
<span
186
-
classList={{
187
-
"group/indent flex gap-x-1 w-full": true,
188
-
"flex-col": value === Object(value),
189
-
}}
190
-
>
191
-
<button
192
-
class="group/clip relative flex size-fit max-w-[40%] shrink-0 items-center wrap-anywhere text-neutral-500 hover:text-neutral-700 active:text-neutral-700 sm:max-w-[50%] dark:text-neutral-400 dark:hover:text-neutral-300 dark:active:text-neutral-300"
193
-
onclick={() => setShow(!show())}
194
-
>
195
-
<span
196
-
classList={{
197
-
"dark:bg-dark-500 absolute w-5 flex items-center -left-5 bg-neutral-100 text-sm": true,
198
-
"hidden group-hover/clip:flex": show(),
199
-
}}
200
-
>
201
-
{show() ?
202
-
<span class="iconify lucide--chevron-down"></span>
203
-
: <span class="iconify lucide--chevron-right"></span>}
204
-
</span>
205
-
{key}:
206
-
</button>
207
-
<span
208
-
classList={{
209
-
"self-center": value !== Object(value),
210
-
"pl-[calc(2ch-0.5px)] border-l-[0.5px] border-neutral-500/50 dark:border-neutral-400/50 has-hover:group-hover/indent:border-neutral-700 transition-colors dark:has-hover:group-hover/indent:border-neutral-300":
211
-
value === Object(value),
212
-
"invisible h-0 overflow-hidden": !show(),
213
-
}}
214
-
>
215
-
<JSONCtx.Provider value={{ ...ctx, parentIsBlob: isBlobContext }}>
216
-
<JSONValueInner data={value} isType={key === "$type"} isLink={key === "$link"} />
217
-
</JSONCtx.Provider>
218
-
</span>
219
-
</span>
220
-
);
221
-
};
222
-
223
235
const rawObj = (
224
-
<For each={Object.entries(props.data)}>{([key, value]) => <Obj key={key} value={value} />}</For>
236
+
<For each={Object.entries(props.data)}>
237
+
{([key, value]) => (
238
+
<CollapsibleItem
239
+
label={key}
240
+
value={value}
241
+
maxWidth="set"
242
+
isType={key === "$type"}
243
+
isLink={key === "$link"}
244
+
parentIsBlob={isBlobContext}
245
+
/>
246
+
)}
247
+
</For>
225
248
);
226
249
227
250
const blob: AtBlob = props.data as any;
···
286
309
const JSONArray = (props: { data: JSONType[] }) => {
287
310
return (
288
311
<For each={props.data}>
289
-
{(value, index) => (
290
-
<span
291
-
classList={{
292
-
"flex before:content-['-']": true,
293
-
"mb-2": value === Object(value) && index() !== props.data.length - 1,
294
-
}}
295
-
>
296
-
<span class="ml-[1ch] w-full">
297
-
<JSONValueInner data={value} />
298
-
</span>
299
-
</span>
300
-
)}
312
+
{(value, index) => <CollapsibleItem label={`[${index()}]`} value={value} />}
301
313
</For>
302
314
);
303
315
};