pds.ls
atmosphere explorer
pds.ls
tool
typescript
atproto
show explicit empty object or array
handle.invalid
+14
-5
src/components/json.tsx
+14
-5
src/components/json.tsx
···
168
168
const isBlobContext = props.parentIsBlob ?? ctx.parentIsBlob;
169
169
170
170
const isObject = () => props.value === Object(props.value);
171
-
const isCollapsible = () => isObject() || typeof props.value === "string";
171
+
const isEmpty = () =>
172
+
Array.isArray(props.value) ?
173
+
(props.value as JSONType[]).length === 0
174
+
: Object.keys(props.value as object).length === 0;
175
+
const isCollapsible = () => (isObject() && !isEmpty()) || typeof props.value === "string";
172
176
const summary = () => {
173
177
if (typeof props.value === "string") {
174
178
const len = props.value.length;
···
188
192
<span
189
193
classList={{
190
194
"group/indent flex gap-x-1 w-full": true,
191
-
"flex-col": isObject(),
195
+
"flex-col": isObject() && !isEmpty(),
192
196
}}
193
197
>
194
198
<button
···
217
221
</button>
218
222
<span
219
223
classList={{
220
-
"self-center": !isObject(),
224
+
"self-center": !isObject() || isEmpty(),
221
225
"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-400":
222
-
isObject(),
226
+
isObject() && !isEmpty(),
223
227
"invisible h-0 overflow-hidden": !show(),
224
228
}}
225
229
>
···
386
390
if (typeof data === "number") return <JSONNumber data={data} isSize={props.isSize} />;
387
391
if (typeof data === "boolean") return <JSONBoolean data={data} />;
388
392
if (data === null) return <JSONNull />;
389
-
if (Array.isArray(data)) return <JSONArray data={data} />;
393
+
if (Array.isArray(data))
394
+
return data.length === 0 ?
395
+
<span class="text-neutral-400 dark:text-neutral-500">[ ]</span>
396
+
: <JSONArray data={data} />;
397
+
if (Object.keys(data).length === 0)
398
+
return <span class="text-neutral-400 dark:text-neutral-500">{"{ }"}</span>;
390
399
return <JSONObject data={data} />;
391
400
};
392
401