82 lines
2.5 KiB
TypeScript
82 lines
2.5 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { useSystem } from '@ohif/core';
|
|
import {
|
|
Button,
|
|
DropdownMenu,
|
|
DropdownMenuTrigger,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
Icons,
|
|
} from '@ohif/ui-next';
|
|
|
|
export function MeasumentsMenu(props) {
|
|
const { group, classNames } = props;
|
|
if (!group.items?.length) {
|
|
console.log('No items to iterate', group.items);
|
|
return null;
|
|
}
|
|
const { items } = group;
|
|
const [item] = items;
|
|
const { isSelected, isVisible } = item;
|
|
|
|
const system = useSystem();
|
|
|
|
const onAction = (event, command, args?) => {
|
|
const uid = items.map(item => item.uid);
|
|
// Some commands use displayMeasurements and some use items
|
|
system.commandsManager.run(command, {
|
|
...args,
|
|
uid,
|
|
displayMeasurements: items,
|
|
items,
|
|
event,
|
|
});
|
|
};
|
|
|
|
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
|
|
|
|
return (
|
|
<div className={`relative ml-2 inline-flex items-center space-x-1 ${classNames}`}>
|
|
{/* Visibility Toggle Icon */}
|
|
<Button
|
|
size="icon"
|
|
variant="ghost"
|
|
className={`h-6 w-6 transition-opacity ${
|
|
isSelected || !isVisible ? 'opacity-100' : 'opacity-50 group-hover:opacity-100'
|
|
}`}
|
|
aria-label={isVisible ? 'Hide' : 'Show'}
|
|
onClick={e => {
|
|
e.stopPropagation();
|
|
onAction(e, ['jumpToMeasurement', 'toggleVisibilityMeasurement']);
|
|
}}
|
|
>
|
|
{isVisible ? <Icons.Hide className="h-6 w-6" /> : <Icons.Show className="h-6 w-6" />}
|
|
</Button>
|
|
{/* Actions Dropdown Menu */}
|
|
<DropdownMenu onOpenChange={open => setIsDropdownOpen(open)}>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
size="icon"
|
|
variant="ghost"
|
|
className={`h-6 w-6 transition-opacity ${
|
|
isSelected || isDropdownOpen ? 'opacity-100' : 'opacity-50 group-hover:opacity-100'
|
|
}`}
|
|
aria-label="Actions"
|
|
onClick={e => e.stopPropagation()} // Prevent row selection on button click
|
|
>
|
|
<Icons.More className="h-6 w-6" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuItem onClick={e => onAction(e, 'removeMeasurement')}>
|
|
<Icons.Delete className="text-foreground" />
|
|
<span className="pl-2">Delete</span>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default MeasumentsMenu;
|