093d6c0a1a
- Move the JsonTree component and the other components to twenty-ui - Rely on a React Context to provide translations ## Future work It would be good to migrate the `createRequiredContext` function to `twenty-ui`. I didn't want to migrate it in this PR but would have liked to use it.
35 lines
831 B
TypeScript
35 lines
831 B
TypeScript
import { IconCube } from '@ui/display';
|
|
import { JsonNestedNode } from '@ui/json-visualizer/components/JsonNestedNode';
|
|
import { useJsonTreeContextOrThrow } from '@ui/json-visualizer/hooks/useJsonTreeContextOrThrow';
|
|
import { JsonObject } from 'type-fest';
|
|
|
|
export const JsonObjectNode = ({
|
|
label,
|
|
value,
|
|
depth,
|
|
keyPath,
|
|
}: {
|
|
label?: string;
|
|
value: JsonObject;
|
|
depth: number;
|
|
keyPath: string;
|
|
}) => {
|
|
const { emptyObjectLabel } = useJsonTreeContextOrThrow();
|
|
|
|
return (
|
|
<JsonNestedNode
|
|
elements={Object.entries(value).map(([key, value]) => ({
|
|
id: key,
|
|
label: key,
|
|
value,
|
|
}))}
|
|
renderElementsCount={(count) => `{${count}}`}
|
|
label={label}
|
|
Icon={IconCube}
|
|
depth={depth}
|
|
emptyElementsText={emptyObjectLabel}
|
|
keyPath={keyPath}
|
|
/>
|
|
);
|
|
};
|