feat: New dialog service (#1202)

* Add dialog provider boilerplate and improve provider imports

* Add react-draggable dependency

* Add dialog service boilerplate

* Refactor modal to use react-modal and remove dependency on modal themed styles

* Update cinedialog to use new dialog provider

* Add multiple dialogs and refactor provider (dialogs)

* Set app root (modal)

* Add modal zindex bigger than tooltip

* Block drag on buttons/svgs/paths/input and improve jsdoc

* Use guid util to generate dialog ids

* Explicit props in dialog provider

* Improve jsdocs

* Fix tests broken

* Fix boundaries calculation

* Remember last dialog position

* Update providers location

* Add scroll to modal

* Add toggable button toolbar and fix css modal

platform/core/src/index.js

@@ -19,7 +19,11 @@ import ui from './ui';
 import user from './user.js';
 import utils from './utils/';
 
-import { createUINotificationService, createUIModalService } from './services';
+import {
+  createUINotificationService,
+  createUIModalService,
+  createUIDialogService,
+} from './services';
 
 const OHIF = {
   MODULE_TYPES,
@@ -48,6 +52,7 @@ const OHIF = {
   //
   createUINotificationService,
   createUIModalService,
+  createUIDialogService,
 };
 
 export {
@@ -76,6 +81,7 @@ export {
   //
   createUINotificationService,
   createUIModalService,
+  createUIDialogService,
 };
 
 export { OHIF };

platform/core/src/index.test.js

@@ -12,6 +12,7 @@ describe('Top level exports', () => {
       //
       'createUINotificationService',
       'createUIModalService',
+      'createUIDialogService',
       //
       'utils',
       'studies',

platform/core/src/services/UIDialogService/index.js

@@ -0,0 +1,125 @@
+/**
+ * A UI Element
+ *
+ * @typedef {ReactElement|HTMLElement} DialogContent
+ */
+
+/**
+ * A UI Position
+ *
+ * @typedef {Object} ElementPosition
+ * @property {number} top -
+ * @property {number} left -
+ * @property {number} right -
+ * @property {number} bottom -
+ */
+
+/**
+ * UI Dialog
+ *
+ * @typedef {Object} DialogProps
+ * @property {string} id -
+ * @property {DialogContent} content -
+ * @property {boolean} isDraggable -
+ * @property {ElementPosition} defaultPosition -
+ * @property {ElementPosition} position -
+ * @property {Function} onSubmit -
+ * @property {Function} onClose -
+ * @property {Function} onStart -
+ * @property {Function} onStop -
+ * @property {Function} onDrag -
+ */
+
+const uiDialogServicePublicAPI = {
+  name: 'UIDialogService',
+  dismiss,
+  dismissAll,
+  create,
+  setServiceImplementation,
+};
+
+const uiDialogServiceImplementation = {
+  _dismiss: () => console.warn('dismiss() NOT IMPLEMENTED'),
+  _dismissAll: () => console.warn('dismissAll() NOT IMPLEMENTED'),
+  _create: () => console.warn('create() NOT IMPLEMENTED'),
+};
+
+function createUIDialogService() {
+  return uiDialogServicePublicAPI;
+}
+
+/**
+ * Show a new UI dialog;
+ *
+ * @param {DialogProps} props { id, content, onSubmit, onClose, onStart, onDrag, onStop, isDraggable, defaultPosition, position }
+ */
+function create({
+  id,
+  content,
+  onSubmit,
+  onClose,
+  onStart,
+  onDrag,
+  onStop,
+  isDraggable,
+  defaultPosition,
+  position,
+}) {
+  return uiDialogServiceImplementation._create({
+    id,
+    content,
+    onSubmit,
+    onClose,
+    onStart,
+    onDrag,
+    onStop,
+    isDraggable,
+    defaultPosition,
+    position,
+  });
+}
+
+/**
+ * Destroys all dialogs, if any
+ *
+ * @returns void
+ */
+function dismissAll() {
+  return uiDialogServiceImplementation._dismissAll();
+}
+
+/**
+ * Destroy the dialog, if currently created
+ *
+ * @returns void
+ */
+function dismiss({ id }) {
+  return uiDialogServiceImplementation._dismiss({ id });
+}
+
+/**
+ *
+ *
+ * @param {*} {
+ *   dismiss: dismissImplementation,
+ *   dismissAll: dismissAllImplementation,
+ *   create: createImplementation,
+ * }
+ */
+function setServiceImplementation({
+  dismiss: dismissImplementation,
+  dismissAll: dismissAllImplementation,
+  create: createImplementation,
+}) {
+  if (dismissImplementation) {
+    uiDialogServiceImplementation._dismiss = dismissImplementation;
+  }
+  if (dismissAllImplementation) {
+    uiDialogServiceImplementation._dismissAll = dismissAllImplementation;
+  }
+  if (createImplementation) {
+    uiDialogServiceImplementation._create = createImplementation;
+  }
+}
+
+export default createUIDialogService;

platform/core/src/services/UIModalService/index.js

@@ -8,14 +8,11 @@
  * UI Modal
  *
  * @typedef {Object} ModalProps
- * @property {string} [header=null] -
- * @property {string} [footer=null] -
- * @property {string} [backdrop=false] -
- * @property {string} [keyboard=false] -
- * @property {number} [show=true] -
- * @property {string} [closeButton=true] -
+ * @property {boolean} [shouldCloseOnEsc=false] -
+ * @property {boolean} [isOpen=true] -
+ * @property {boolean} [closeButton=true] -
  * @property {string} [title=null] - 'Modal Title'
- * @property {boolean} [customClassName=null] - '.ModalClass'
+ * @property {string} [customClassName=null] - '.ModalClass'
  */
 
 const uiModalServicePublicAPI = {
@@ -38,16 +35,13 @@ function createUIModalService() {
  * Show a new UI modal;
  *
  * @param {Modal} component React component
- * @param {ModalProps} props { header, footer, backdrop, keyboard, show, closeButton, title, customClassName }
+ * @param {ModalProps} props { shouldCloseOnEsc, isOpen, closeButton, title, customClassName }
  */
 function show(
   component,
   props = {
-    header: null,
-    footer: null,
-    backdrop: false,
-    keyboard: false,
-    show: true,
+    shouldCloseOnEsc: false,
+    isOpen: true,
     closeButton: true,
     title: null,
     customClassName: null,

platform/core/src/services/index.js

@@ -1,5 +1,11 @@
 import ServicesManager from './ServicesManager.js';
 import createUINotificationService from './UINotificationService';
 import createUIModalService from './UIModalService';
+import createUIDialogService from './UIDialogService';
 
-export { createUINotificationService, createUIModalService, ServicesManager };
+export {
+  createUINotificationService,
+  createUIModalService,
+  createUIDialogService,
+  ServicesManager,
+};