import { ChevronRightIcon, EyeIcon } from "@heroicons/react/outline"; import { useMemo } from "react"; import { useJsonColumnViewAPI } from "~/hooks/useJsonColumnView"; import { ColumnViewNode, IconComponent } from "~/useColumnView"; import { Body } from "./Primitives/Body"; import eyeIcon from "~/assets/svgs/EyeIcon.svg"; export type PathPreviewProps = { nodes: ColumnViewNode[]; maxComponents?: number; enabled?: boolean; }; type ValueComponent = { type: "value"; id: string; title: string; icon?: IconComponent; }; type EllipsisComponent = { type: "ellipsis"; id: "ellipsis"; }; type Component = ValueComponent | EllipsisComponent; export function PathPreview({ nodes, maxComponents, enabled, }: PathPreviewProps) { const isEnabled = useMemo(() => { if (enabled === undefined) { return true; } return enabled; }, [enabled]); const { goToNodeId } = useJsonColumnViewAPI(); const components = useMemo>(() => { if (maxComponents == null || nodes.length <= maxComponents) { return nodes.map((n) => { return { type: "value", id: n.id, title: n.title, icon: n.icon }; }); } let components = Array(); //add the elements up to the ellipsis for (let index = 0; index < maxComponents - 1; index++) { const node = nodes[index]; components.push({ type: "value", id: node.id, title: node.title, icon: node.icon, }); } //add ellipsis components.push({ type: "ellipsis", id: "ellipsis" }); //add final element const lastNode = nodes[nodes.length - 1]; components.push({ type: "value", id: lastNode.id, title: lastNode.title, icon: lastNode.icon, }); return components; }, [nodes, maxComponents]); return (
isEnabled && goToNodeId(components[components.length - 1].id, "relatedValues") } >
{components.map((node, index) => { if (node.type === "ellipsis") { return (
…
); } else { return (
{node.icon && }
{node.title}
{index == components.length - 1 ? ( <> ) : ( )}
); } })}
); }