ohif-viewer/platform/ui/src/components/ContextMenu/ContextMenu.tsx
Bill Wallace bc642fd2b6
feat: Allow configurable context menus (#2894)
* feat: Context menu

feat: Custom context menu

Adding documentation

PR updates

* fix: Capture tool exception

* PR updates

* Add fully worked out examples in the basic test mode/extension

* Fix the menu display

* fix: Make the commands on clicks much more configurable

* Wait for load before double clicking

* docs

* PR changes - nothing functional, just moving things endlessly

* PR comments

* PR changes - rename the default context menu

* Renamed the cornerstoneContextMenu to measurementsContextMenu

* Add chevron right to the sub-menus
2023-03-22 17:45:28 -04:00

46 lines
1.2 KiB
TypeScript

import React from 'react';
import PropTypes from 'prop-types';
import Typography from '../Typography';
import Icon from '../Icon';
const ContextMenu = ({ items, ...props }) => {
if (!items) {
console.warn('No items for context menu');
return null;
}
return (
<div
data-cy="context-menu"
className="relative bg-secondary-dark rounded z-50 block w-48"
onContextMenu={e => e.preventDefault()}
>
{items.map((item, index) => (
<div
key={index}
data-cy="context-menu-item"
onClick={() => item.action(item, props)}
className="flex px-4 py-3 cursor-pointer items-center transition duration-300 hover:bg-primary-dark border-b border-primary-dark last:border-b-0"
>
<Typography>
{item.label}
{item.iconRight && (
<Icon name={item.iconRight} className="inline" />
)}
</Typography>
</div>
))}
</div>
);
};
ContextMenu.propTypes = {
items: PropTypes.arrayOf(
PropTypes.shape({
label: PropTypes.string.isRequired,
action: PropTypes.func.isRequired,
})
).isRequired,
};
export default ContextMenu;