144a326709
https://github.com/user-attachments/assets/5f31023d-b24f-40c8-a061-ffc0d02b63b0 Closes https://github.com/twentyhq/core-team-issues/issues/715
39 lines
1.0 KiB
TypeScript
39 lines
1.0 KiB
TypeScript
import { IconBrackets } from '@ui/display';
|
|
import { JsonNestedNode } from '@ui/json-visualizer/components/JsonNestedNode';
|
|
import { useJsonTreeContextOrThrow } from '@ui/json-visualizer/hooks/useJsonTreeContextOrThrow';
|
|
import { JsonNodeHighlighting } from '@ui/json-visualizer/types/JsonNodeHighlighting';
|
|
import { JsonArray } from 'type-fest';
|
|
|
|
export const JsonArrayNode = ({
|
|
label,
|
|
value,
|
|
depth,
|
|
keyPath,
|
|
highlighting,
|
|
}: {
|
|
label?: string;
|
|
value: JsonArray;
|
|
depth: number;
|
|
keyPath: string;
|
|
highlighting: JsonNodeHighlighting | undefined;
|
|
}) => {
|
|
const { emptyArrayLabel } = useJsonTreeContextOrThrow();
|
|
|
|
return (
|
|
<JsonNestedNode
|
|
elements={[...value.entries()].map(([key, value]) => ({
|
|
id: key,
|
|
label: String(key),
|
|
value,
|
|
}))}
|
|
renderElementsCount={(count) => `[${count}]`}
|
|
label={label}
|
|
Icon={IconBrackets}
|
|
depth={depth}
|
|
emptyElementsText={emptyArrayLabel}
|
|
keyPath={keyPath}
|
|
highlighting={highlighting}
|
|
/>
|
|
);
|
|
};
|