ui(components): New Dialog and Modal components for ui-next (#4772)

Co-authored-by: sedghi <ar.sedghi@gmail.com>

platform/core/src/services/UIDialogService/UIDialogService.ts

@@ -1,80 +1,95 @@
-import { PubSubService } from '../_shared/pubSubServiceInterface';
+import type { ManagedDialogProps } from 'platform/ui-next/src/contextProviders/ManagedDialog';
+type DialogOptions = ManagedDialogProps;
 
-class UIDialogService extends PubSubService {
-  public static readonly EVENTS = {};
+const name = 'uiDialogService';
 
-  public static REGISTRATION = {
-    name: 'uiDialogService',
+const serviceImplementation = {
+  _show: (options: DialogOptions) => {
+    console.warn('show() NOT IMPLEMENTED');
+    return '';
+  },
+  _hide: (id: string) => console.warn('hide() NOT IMPLEMENTED'),
+  _hideAll: () => console.warn('hideAll() NOT IMPLEMENTED'),
+  _isEmpty: () => {
+    console.warn('isEmpty() NOT IMPLEMENTED');
+    return true;
+  },
+  _customComponent: null,
+};
+
+class UIDialogService {
+  static REGISTRATION = {
+    name,
     altName: 'UIDialogService',
-    create: ({ configuration = {} }) => {
+    create: (): UIDialogService => {
       return new UIDialogService();
     },
   };
 
-  serviceImplementation = {
-    _dismiss: () => console.warn('dismiss() NOT IMPLEMENTED'),
-    _dismissAll: () => console.warn('dismissAll() NOT IMPLEMENTED'),
-    _create: () => console.warn('create() NOT IMPLEMENTED'),
-  };
+  readonly name = name;
 
-  constructor() {
-    super(UIDialogService.EVENTS);
-    this.serviceImplementation = {
-      ...this.serviceImplementation,
-    };
+  /**
+   * Show a new UI dialog
+   *
+   * @param {DialogOptions} options - The dialog options
+   * @returns {string} The dialog id
+   */
+  show(options: DialogOptions): string {
+    return serviceImplementation._show(options);
   }
 
-  public create({
-    id,
-    content,
-    contentProps,
-    onStart,
-    onDrag,
-    onStop,
-    centralize = false,
-    preservePosition = true,
-    isDraggable = true,
-    showOverlay = false,
-    defaultPosition,
-    onClickOutside,
-  }) {
-    return this.serviceImplementation._create({
-      id,
-      content,
-      contentProps,
-      onStart,
-      onDrag,
-      onStop,
-      centralize,
-      preservePosition,
-      isDraggable,
-      showOverlay,
-      defaultPosition,
-      onClickOutside,
-    });
+  /**
+   * Hide a specific dialog by id
+   *
+   * @param {string} id - The dialog id to hide
+   */
+  hide(id: string): void {
+    return serviceImplementation._hide(id);
   }
 
-  public dismiss({ id }) {
-    return this.serviceImplementation._dismiss({ id });
+  /**
+   * Hide all currently shown dialogs
+   */
+  hideAll(): void {
+    return serviceImplementation._hideAll();
   }
 
-  public dismissAll() {
-    return this.serviceImplementation._dismissAll();
+  /**
+   * Check if there are any dialogs currently shown
+   *
+   * @returns {boolean} True if no dialogs are shown
+   */
+  isEmpty(): boolean {
+    return serviceImplementation._isEmpty();
   }
 
-  public setServiceImplementation({
-    dismiss: dismissImplementation,
-    dismissAll: dismissAllImplementation,
-    create: createImplementation,
-  }) {
-    if (dismissImplementation) {
-      this.serviceImplementation._dismiss = dismissImplementation;
+  /**
+   * This provides flexibility in customizing the Modal's default component
+   *
+   * @returns {React.Component}
+   */
+  getCustomComponent() {
+    return serviceImplementation._customComponent;
+  }
+
+  /**
+   * Set the service implementation
+   */
+  setServiceImplementation({ show, hide, hideAll, isEmpty, customComponent }: any): void {
+    if (show) {
+      serviceImplementation._show = show;
     }
-    if (dismissAllImplementation) {
-      this.serviceImplementation._dismissAll = dismissAllImplementation;
+    if (hide) {
+      serviceImplementation._hide = hide;
     }
-    if (createImplementation) {
-      this.serviceImplementation._create = createImplementation;
+    if (hideAll) {
+      serviceImplementation._hideAll = hideAll;
+    }
+    if (isEmpty) {
+      serviceImplementation._isEmpty = isEmpty;
+    }
+    if (customComponent) {
+      serviceImplementation._customComponent = customComponent;
     }
   }
 }