feat: add show scroll option to modal

Co-authored-by: Erik Ziegler <erik.sweed@gmail.com>
Co-authored-by: Davide Punzo <punzodavide@hotmail.it>

extensions/dicom-tag-browser/src/getCommandsModule.js

@@ -21,7 +21,7 @@ export default function getCommandsModule(servicesManager) {
 
       const { UIModalService } = servicesManager.services;
 
-      const WrappedDicomTagBrowser = function() {
+      const WrappedDicomTagBrowser = function () {
         return (
           <DicomTagBrowser
             displaySets={displaySets}
@@ -34,6 +34,7 @@ export default function getCommandsModule(servicesManager) {
         content: WrappedDicomTagBrowser,
         title: `DICOM Tag Browser`,
         fullscreen: true,
+        showScrollbar: true
       });
     },
   };

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

@@ -9,6 +9,7 @@
  * @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.
+ * @property {boolean} [showScrollbar=null] Show or hide scrollbar.
  */
 
 const name = 'UIModalService';
@@ -28,7 +29,7 @@ const serviceImplementation = {
 /**
  * Show a new UI modal;
  *
- * @param {ModalProps} props { content, contentProps, shouldCloseOnEsc, isOpen, onClose, closeButton, title, customClassName }
+ * @param {ModalProps} props { content, contentProps, shouldCloseOnEsc, isOpen, onClose, closeButton, title, customClassName, showScrollbar }
  */
 function _show({
   content = null,
@@ -40,6 +41,7 @@ function _show({
   title = null,
   fullscreen = false,
   customClassName = null,
+  showScrollbar = false
 }) {
   return serviceImplementation._show({
     content,
@@ -51,6 +53,7 @@ function _show({
     title,
     fullscreen,
     customClassName,
+    showScrollbar
   });
 }
 

platform/ui/src/components/ohifModal/OHIFModal.styl

@@ -27,13 +27,13 @@
     &.OHIFModal-fullscreen
       width: 95%
 
-
-
   &__content
     padding: 20px
     max-height: 90vh;
-    overflow-x: hidden;
     overflow-y: auto;
+
+  &:not(.visibleScrollbar) &__content
+    overflow-x: hidden;
     scrollbar-width: none;
     -ms-overflow-style: none;
     &::-webkit-scrollbar

platform/ui/src/contextProviders/ModalProvider.js

@@ -34,6 +34,7 @@ const ModalProvider = ({ children, modal: Modal, service }) => {
     isOpen: true,
     onClose: null,
     closeButton: true,
+    showScrollbar: false,
     title: null,
     customClassName: '',
     fullscreen: false,
@@ -81,13 +82,14 @@ const ModalProvider = ({ children, modal: Modal, service }) => {
     shouldCloseOnEsc,
     fullscreen,
     closeButton,
+    showScrollbar
   } = options;
 
   return (
     <Provider value={{ show, hide }}>
       {ModalContent && (
         <Modal
-          className={classNames(customClassName, ModalContent.className)}
+          className={classNames(customClassName, ModalContent.className, { 'visibleScrollbar': showScrollbar })}
           shouldCloseOnEsc={shouldCloseOnEsc}
           isOpen={isOpen}
           title={title}