add support of custom modal component in modal service.

OHIF · Feb 3, 2025 · f706ced · f706ced
1 parent 8f79eba
commit f706ced
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 4 deletions.
diff --git a/platform/app/src/state/appConfig.tsx b/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 = {

diff --git a/platform/core/src/services/UIModalService/index.ts b/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'),
+  _component: 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 = true,
+      shouldCloseImmediately = false,
     });
   }
 
@@ -69,6 +74,15 @@ class UIModalService {
     return serviceImplementation._hide();
   }
 
+  /**
+   * This provides flexibility in customizing the Modal's default component
+   *
+   * @returns {React.Component}
+   */
+  component() {
+    return serviceImplementation._component;
+  }
+
   /**
    *
    *
@@ -77,13 +91,20 @@ class UIModalService {
    *   show: showImplementation,
    * }
    */
-  setServiceImplementation({ hide: hideImplementation, show: showImplementation }) {
+  setServiceImplementation({
+    hide: hideImplementation,
+    show: showImplementation,
+    component: componentImplementation,
+  }) {
     if (hideImplementation) {
       serviceImplementation._hide = hideImplementation;
     }
     if (showImplementation) {
       serviceImplementation._show = showImplementation;
     }
+    if (componentImplementation) {
+      serviceImplementation._component = componentImplementation;
+    }
   }
 }
 

diff --git a/platform/ui/src/contextProviders/ModalProvider.tsx b/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.component();
+
   /**
    * 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>