feat(ui): Add support for Custom Modal component in Modal Service (#4752)

platform/app/src/state/appConfig.tsx

@@ -9,7 +9,7 @@ export const useAppConfig = () => useContext(appConfigContext);
 export function AppConfigProvider({ children, value: initAppConfig }) {
   const [appConfig, setAppConfig] = useState(initAppConfig);
 
-  return <Provider value={[appConfig]}>{children}</Provider>;
+  return <Provider value={[appConfig, setAppConfig]}>{children}</Provider>;
 }
 
 AppConfigProvider.propTypes = {

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

@@ -16,6 +16,7 @@ const name = 'uiModalService';
 const serviceImplementation = {
   _hide: () => console.warn('hide() NOT IMPLEMENTED'),
   _show: () => console.warn('show() NOT IMPLEMENTED'),
+  _customComponent: null,
 };
 
 class UIModalService {
@@ -45,6 +46,8 @@ class UIModalService {
     movable = false,
     containerDimensions = null,
     contentDimensions = null,
+    shouldCloseOnOverlayClick = true,
+    shouldCloseImmediately = false,
   }) {
     return serviceImplementation._show({
       content,
@@ -57,6 +60,8 @@ class UIModalService {
       movable,
       containerDimensions,
       contentDimensions,
+      shouldCloseOnOverlayClick,
+      shouldCloseImmediately,
     });
   }
 
@@ -69,6 +74,15 @@ class UIModalService {
     return serviceImplementation._hide();
   }
 
+  /**
+   * This provides flexibility in customizing the Modal's default component
+   *
+   * @returns {React.Component}
+   */
+  getCustomComponent() {
+    return serviceImplementation._customComponent;
+  }
+
   /**
    *
    *
@@ -77,13 +91,20 @@ class UIModalService {
    *   show: showImplementation,
    * }
    */
-  setServiceImplementation({ hide: hideImplementation, show: showImplementation }) {
+  setServiceImplementation({
+    hide: hideImplementation,
+    show: showImplementation,
+    customComponent: customComponentImplementation,
+  }) {
     if (hideImplementation) {
       serviceImplementation._hide = hideImplementation;
     }
     if (showImplementation) {
       serviceImplementation._show = showImplementation;
     }
+    if (customComponentImplementation) {
+      serviceImplementation._customComponent = customComponentImplementation;
+    }
   }
 }
 

platform/docs/docs/platform/services/ui/ui-modal-service.md

@@ -15,6 +15,8 @@ be centered, and not draggable. They're commonly used when:
 If you're curious about the DOs and DON'Ts of dialogs and modals, check out this
 article: ["Best Practices for Modals / Overlays / Dialog Windows"][ux-article]
 
+customComponent: The modal service allows users to provide their own Modal UI using the customComponents.
+
 
 <div style={{padding:"56.25% 0 0 0", position:"relative"}}>
     <iframe src="https://player.vimeo.com/video/843233754?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479"  frameBorder="0" allow="autoplay; fullscreen; picture-in-picture" allowFullScreen style= {{ position:"absolute",top:0,left:0,width:"100%",height:"100%"}} title="measurement-report"></iframe>
@@ -29,12 +31,14 @@ is expected to support, [check out it's interface in `@ohif/core`][interface]
 | ---------- | ------------------------------------- |
 | `hide()`   | Hides the open modal                  |
 | `show()`   | Shows the provided content in a modal |
+| `customComponent()` | Overrides the default Modal component |
 
 ## Implementations
 
 | Implementation                     | Consumer  |
 | ---------------------------------- | --------- |
 | [Modal Provider][modal-provider]\* | Modal.jsx |
+| customComponent | user extensions via setServiceImplementation({customComponent: Modal}) |
 
 `*` - Denotes maintained by OHIF
 

platform/ui/src/contextProviders/ModalProvider.tsx

@@ -39,6 +39,8 @@ const ModalProvider = ({ children, modal: Modal, service = null }) => {
 
   const [options, setOptions] = useState(DEFAULT_OPTIONS);
 
+  const CustomModal = service.getCustomComponent();
+
   /**
    * Show the modal and override its configuration props.
    *
@@ -81,10 +83,12 @@ const ModalProvider = ({ children, modal: Modal, service = null }) => {
     contentDimensions,
   } = options;
 
+  const ModalComp = CustomModal ? CustomModal : Modal;
+
   return (
     <Provider value={{ show, hide }}>
       {ModalContent && (
-        <Modal
+        <ModalComp
           className={classNames(customClassName, ModalContent.className)}
           shouldCloseOnEsc={shouldCloseOnEsc}
           isOpen={isOpen}
@@ -101,7 +105,7 @@ const ModalProvider = ({ children, modal: Modal, service = null }) => {
             show={show}
             hide={hide}
           />
-        </Modal>
+        </ModalComp>
       )}
       {children}
     </Provider>