feat: Add new annotate tool using new dialog service (#1211)

* Testing dialog

* Refactor modal and add dialog component to simple dialog

* Use existent dialog

* Expect event from getText callback (annotation)

* Bump cornerstone-tools version

* Use simple dialog

* bump cornersotne version

* CR Update: Update dialgo method names and default values

* CR Update: Bump overlay and show only if theres at least one overlay prop set to true

* CR Update: Use percentage over view height in draggable area

* Fix broken test vtk checks WWWC tool

* Comment test (non-deterministic)

platform/ui/src/contextProviders/ModalProvider.js

@@ -13,14 +13,28 @@ const { Provider } = ModalContext;
 
 export const useModal = () => useContext(ModalContext);
 
+/**
+ * UI Modal
+ *
+ * @typedef {Object} ModalProps
+ * @property {ReactElement|HTMLElement} [content=null] Modal content.
+ * @property {Object} [contentProps=null] Modal content props.
+ * @property {boolean} [shouldCloseOnEsc=false] Modal is dismissible via the esc key.
+ * @property {boolean} [isOpen=true] Make the Modal visible or hidden.
+ * @property {boolean} [closeButton=true] Should the modal body render the close button.
+ * @property {string} [title=null] Should the modal render the title independently of the body content.
+ * @property {string} [customClassName=null] The custom class to style the modal.
+ */
+
 const ModalProvider = ({ children, modal: Modal, service }) => {
   const DEFAULT_OPTIONS = {
-    component: null /* The component instance inside the modal. */,
-    shouldCloseOnEsc: false /* Modal is dismissible via the esc key. */,
-    isOpen: true /* Make the Modal visible or hidden. */,
-    closeButton: true /* Should the modal body render the close button. */,
-    title: null /* Should the modal render the title independently of the body content. */,
-    customClassName: '' /* The custom class to style the modal. */,
+    content: null,
+    contentProps: null,
+    shouldCloseOnEsc: false,
+    isOpen: true,
+    closeButton: true,
+    title: null,
+    customClassName: '',
   };
 
   const [options, setOptions] = useState(DEFAULT_OPTIONS);
@@ -39,13 +53,12 @@ const ModalProvider = ({ children, modal: Modal, service }) => {
   /**
    * Show the modal and override its configuration props.
    *
+   * @param {ModalProps} props { content, contentProps, shouldCloseOnEsc, isOpen, closeButton, title, customClassName }
    * @returns void
    */
-  const show = useCallback(
-    (component, props = {}) =>
-      setOptions(Object.assign({}, options, props, { component })),
-    [options]
-  );
+  const show = useCallback(props => setOptions({ ...options, ...props }), [
+    options,
+  ]);
 
   /**
    * Hide the modal and set its properties to default.
@@ -56,23 +69,28 @@ const ModalProvider = ({ children, modal: Modal, service }) => {
     DEFAULT_OPTIONS,
   ]);
 
-  const { component: Component } = options;
+  const {
+    content: ModalContent,
+    contentProps,
+    isOpen,
+    title,
+    customClassName,
+    shouldCloseOnEsc,
+    closeButton,
+  } = options;
 
   return (
     <Provider value={{ show, hide }}>
-      {options.component && (
+      {ModalContent && (
         <Modal
-          className={classNames(
-            options.customClassName,
-            options.component.className
-          )}
-          shouldCloseOnEsc={options.keyboard}
-          isOpen={options.isOpen}
-          title={options.title}
-          closeButton={options.closeButton}
+          className={classNames(customClassName, ModalContent.className)}
+          shouldCloseOnEsc={shouldCloseOnEsc}
+          isOpen={isOpen}
+          title={title}
+          closeButton={closeButton}
           onClose={hide}
         >
-          <Component {...options} show={show} hide={hide} />
+          <ModalContent {...contentProps} show={show} hide={hide} />
         </Modal>
       )}
       {children}
@@ -80,6 +98,18 @@ const ModalProvider = ({ children, modal: Modal, service }) => {
   );
 };
 
+/**
+ * Higher Order Component to use the modal methods through a Class Component.
+ *
+ * @returns
+ */
+export const withModal = Component => {
+  return function WrappedComponent(props) {
+    const { show, hide } = useModal();
+    return <Component {...props} modal={{ show, hide }} />;
+  };
+};
+
 ModalProvider.defaultProps = {
   service: null,
 };
@@ -99,18 +129,6 @@ ModalProvider.propTypes = {
   }),
 };
 
-/**
- * Higher Order Component to use the modal methods through a Class Component.
- *
- * @returns
- */
-export const withModal = Component => {
-  return function WrappedComponent(props) {
-    const { show, hide } = useModal();
-    return <Component {...props} modal={{ show, hide }} />;
-  };
-};
-
 export default ModalProvider;
 
 export const ModalConsumer = ModalContext.Consumer;