({
item,
json,
isSelected,
isHighlighted,
onClick,
}: ColumnItemProps)
| 14 | }; |
| 15 | |
| 16 | function ColumnItemElement({ |
| 17 | item, |
| 18 | json, |
| 19 | isSelected, |
| 20 | isHighlighted, |
| 21 | onClick, |
| 22 | }: ColumnItemProps) { |
| 23 | const htmlElement = useRef<HTMLDivElement>(null); |
| 24 | |
| 25 | const showArrow = item.children.length > 0; |
| 26 | |
| 27 | const stateStyle = useMemo<string>(() => { |
| 28 | if (isHighlighted) { |
| 29 | 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-100"; |
| 30 | } |
| 31 | |
| 32 | if (isSelected) { |
| 33 | 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-200"; |
| 34 | } |
| 35 | |
| 36 | return "hover:bg-slate-100 transition duration-75 ease-out dark:hover:bg-white dark:hover:bg-opacity-[5%] dark:text-slate-400"; |
| 37 | }, [isSelected, isHighlighted]); |
| 38 | |
| 39 | const iconColor = useMemo<string>( |
| 40 | () => colorForItemAtPath(item.id, json), |
| 41 | [item.id, json] |
| 42 | ); |
| 43 | |
| 44 | useEffect(() => { |
| 45 | if (isSelected || isHighlighted) { |
| 46 | htmlElement.current?.scrollIntoView({ |
| 47 | block: "nearest", |
| 48 | inline: "center", |
| 49 | }); |
| 50 | } |
| 51 | }, [isSelected, isHighlighted]); |
| 52 | |
| 53 | return ( |
| 54 | <div |
| 55 | className={`flex h-9 items-center justify-items-stretch mx-1 px-1 py-1 my-1 rounded-sm ${stateStyle}`} |
| 56 | onClick={() => onClick && onClick(item.id)} |
| 57 | ref={htmlElement} |
| 58 | > |
| 59 | <div className="w-4 flex-none flex-col justify-items-center"> |
| 60 | {item.icon && ( |
| 61 | <item.icon |
| 62 | className={`h-5 w-5 ${ |
| 63 | isSelected && isHighlighted |
| 64 | ? "text-slate-900 dark:text-slate-300" |
| 65 | : "text-slate-500" |
| 66 | }`} |
| 67 | /> |
| 68 | )} |
| 69 | </div> |
| 70 | |
| 71 | <div className="flex flex-grow flex-shrink items-baseline justify-between truncate"> |
| 72 | <Body className="flex-grow flex-shrink-0 pl-3 pr-2 ">{item.title}</Body> |
| 73 | {item.subtitle && ( |
nothing calls this directly
no test coverage detected