75 lines
2.2 KiB
TypeScript
75 lines
2.2 KiB
TypeScript
import { inferType } from "@jsonhero/json-infer-types";
|
|
import { JSONHeroPath } from "@jsonhero/path";
|
|
import { useJson } from "~/hooks/useJson";
|
|
import { useJsonColumnViewState } from "~/hooks/useJsonColumnView";
|
|
import { pathToDescendant } from "~/utilities/jsonColumnView";
|
|
import { JsonPreview } from "./JsonPreview";
|
|
import { JsonSchemaViewer } from "./JsonSchemaViewer";
|
|
import { TabContent, Tabs } from "./UI/Tabs";
|
|
|
|
const tabs = [
|
|
{ value: "json", label: "JSON" },
|
|
{ value: "schema", label: "Schema" },
|
|
];
|
|
|
|
export function ContainerInfo() {
|
|
const { selectedNodeId, highlightedNodeId } = useJsonColumnViewState();
|
|
|
|
if (!selectedNodeId || !highlightedNodeId) {
|
|
return <></>;
|
|
}
|
|
|
|
const [json] = useJson();
|
|
|
|
const selectedHeroPath = new JSONHeroPath(selectedNodeId);
|
|
const selectedJson = selectedHeroPath.first(json);
|
|
const selectedInfo = inferType(selectedJson);
|
|
|
|
const isSelectedLeafNode =
|
|
selectedInfo.name !== "object" && selectedInfo.name !== "array";
|
|
|
|
const highlightedHeroPath = new JSONHeroPath(highlightedNodeId);
|
|
const highlightedJson = highlightedHeroPath.first(json);
|
|
const highlightedInfo = inferType(highlightedJson);
|
|
|
|
const isHighlightedLeafNode =
|
|
highlightedInfo.name !== "object" && highlightedInfo.name !== "array";
|
|
|
|
const shouldHighlightInPreview =
|
|
selectedNodeId !== highlightedNodeId && !isHighlightedLeafNode;
|
|
|
|
const shouldDisplayCodePreview =
|
|
shouldHighlightInPreview || !isSelectedLeafNode;
|
|
|
|
if (!shouldDisplayCodePreview) {
|
|
return <></>;
|
|
}
|
|
|
|
return (
|
|
<Tabs tabs={tabs}>
|
|
<>
|
|
<TabContent value="json">
|
|
{shouldHighlightInPreview ? (
|
|
<JsonPreview
|
|
json={highlightedJson}
|
|
highlightPath={pathToDescendant(
|
|
highlightedNodeId,
|
|
selectedNodeId
|
|
)}
|
|
/>
|
|
) : (
|
|
<JsonPreview json={selectedJson} />
|
|
)}
|
|
</TabContent>
|
|
<TabContent value="schema">
|
|
{shouldHighlightInPreview ? (
|
|
<JsonSchemaViewer path={highlightedNodeId} />
|
|
) : (
|
|
<JsonSchemaViewer path={selectedNodeId} />
|
|
)}
|
|
</TabContent>
|
|
</>
|
|
</Tabs>
|
|
);
|
|
}
|