51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
import { JSONHeroPath } from "@jsonhero/path";
|
|
import { memo, useMemo } from "react";
|
|
import { useJson } from "~/hooks/useJson";
|
|
import {
|
|
useJsonColumnViewAPI,
|
|
useJsonColumnViewState,
|
|
} from "~/hooks/useJsonColumnView";
|
|
import { ColumnDefinition } from "~/useColumnView";
|
|
import { BlankColumn } from "./BlankColumn";
|
|
import { Column } from "./Column";
|
|
import { ColumnItem } from "./ColumnItem";
|
|
|
|
function ColumnsElement({ columns }: { columns: ColumnDefinition[] }) {
|
|
const [json] = useJson();
|
|
const { selectedPath, highlightedPath, highlightedNodeId } =
|
|
useJsonColumnViewState();
|
|
const highlightedItemIsValue = useMemo<boolean>(() => {
|
|
if (highlightedNodeId == null) {
|
|
return false;
|
|
}
|
|
|
|
const path = new JSONHeroPath(highlightedNodeId);
|
|
let item = path.first(json);
|
|
|
|
return typeof item !== "object";
|
|
}, [highlightedPath, json]);
|
|
|
|
return (
|
|
<div className="columns flex flex-grow overflow-x-auto no-scrollbar focus:outline-none">
|
|
{columns.map((column) => {
|
|
return (
|
|
<Column
|
|
key={column.id}
|
|
id={column.id}
|
|
title={column.title}
|
|
icon={column.icon}
|
|
hasHighlightedElement={
|
|
highlightedPath[highlightedPath.length - 2] === column.id
|
|
}
|
|
selectedPath={selectedPath}
|
|
highlightedPath={highlightedPath}
|
|
items={column.items}
|
|
/>
|
|
);
|
|
})}
|
|
{highlightedItemIsValue ? <BlankColumn /> : null}
|
|
</div>
|
|
);
|
|
}
|
|
export const Columns = memo(ColumnsElement);
|