import { ChevronRightIcon } from "@heroicons/react/outline"; import { Mono } from "./Primitives/Mono"; import { useEffect, useMemo, useRef } from "react"; import { ColumnViewNode } from "~/useColumnView"; import { useJsonColumnViewAPI, useJsonColumnViewState, } from "../hooks/useJsonColumnView"; import { useJson } from "../hooks/useJson"; import { colorForItemAtPath } from "~/utilities/colors"; import { Body } from "./Primitives/Body"; export function ColumnItem({ item }: { item: ColumnViewNode }) { const { title, subtitle, children, id } = item; const [json] = useJson(); const { selectedPath, highlightedPath } = useJsonColumnViewState(); const { goToNodeId } = useJsonColumnViewAPI(); const htmlElement = useRef(null); const showArrow = children.length > 0; const isHighlighted = (path: string[], id: string) => { return path[path.length - 1] === id; }; const isSelected = (path: string[], id: string) => { return path.includes(id); }; const stateStyle = useMemo(() => { if (highlightedPath.length === 0) { return ""; } if (isHighlighted(highlightedPath, id)) { return "bg-slate-300 text-slate-700 hover:bg-slate-400 hover:bg-opacity-60 transition duration-75 ease-out dark:bg-white dark:bg-opacity-[15%] dark:text-slate-400"; } if (isSelected(selectedPath, id)) { return "bg-slate-200 hover:bg-slate-300 transition duration-75 ease-out dark:bg-white dark:bg-opacity-[5%] dark:hover:bg-white dark:hover:bg-opacity-[10%] dark:text-slate-400"; } return "hover:bg-slate-100 transition duration-75 ease-out dark:hover:bg-white dark:hover:bg-opacity-[5%] dark:text-slate-400"; }, [highlightedPath, selectedPath, id]); const iconColor = colorForItemAtPath(id, json); useEffect(() => { if (isSelected(selectedPath, id) || isHighlighted(highlightedPath, id)) { htmlElement.current?.scrollIntoView({ block: "nearest" }); } }, [highlightedPath, selectedPath, id]); return (

goToNodeId(id)} ref={htmlElement} >

{item.icon && }

{title} {subtitle && ( {subtitle} )}

{showArrow && ( )}

); }