[OHIF-193 + OHIF-313] (#1955)

* create context menu

* OHIF-193: Add context menu integration with measurement service

* OHIF-193: Update comments

* OHIF-CR Update: Add requested updates

* CR Update: Update measurement service remove function

* CR Update: Update casing

* CR Updates

* Update cornerstone measurments when the label is edited in the measurement service.

* Implement click outside behavior

* Address reviewer comments.

Co-authored-by: Rodrigo Antinarelli <rodrigoantinarelli@gmail.com>
Co-authored-by: igoroctaviano <igoroctaviano@gmail.com>

platform/ui/src/components/ContextMenu/ContextMenu.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Typography } from '@ohif/ui';
+
+const ContextMenu = ({ items }) => {
+  return (
+    <div
+      className="relative bg-secondary-dark rounded z-50 block w-48"
+      onContextMenu={e => e.preventDefault()}
+    >
+      {items.map((item, index) => (
+        <div
+          key={index}
+          onClick={() => item.action(item)}
+          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}</Typography>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+ContextMenu.propTypes = {
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string.isRequired,
+      actionType: PropTypes.string.isRequired,
+      action: PropTypes.func.isRequired,
+    })
+  ).isRequired,
+};
+
+export default ContextMenu;

platform/ui/src/components/ContextMenu/ContextMenu.mdx

@@ -0,0 +1,49 @@
+---
+name: Context Menu
+menu: General
+route: components/contextMenu
+---
+
+import { Playground, Props } from 'docz';
+import { ContextMenu } from '@ohif/ui';
+
+# Context Menu
+
+...
+
+## Import
+
+```javascript
+import { ContextMenu } from '@ohif/ui';
+```
+
+<Playground>
+  {() => {
+    const items = [
+      {
+        label: 'Delete measurement',
+        actionType: 'Delete',
+        action: () => alert('Delete'),
+      },
+      {
+        label: 'Relabel',
+        actionType: 'setLabel',
+        action: () => alert('Relabel'),
+      },
+      {
+        label: 'Add Description',
+        actionType: 'setDescription',
+        action: () => alert('Add Description'),
+      },
+    ];
+    return (
+      <div className="p-4">
+        <ContextMenu items={items} />
+      </div>
+    );
+  }}
+</Playground>
+
+## Properties
+
+<Props of={ContextMenu} />

platform/ui/src/components/ContextMenu/index.js

@@ -0,0 +1 @@
+export { default } from './ContextMenu';