From be494a7376d15777dbe598289c4ecdb9f48a6a48 Mon Sep 17 00:00:00 2001
From: Igor Octaviano <igoroctaviano@gmail.com>
Date: Thu, 3 Dec 2020 10:09:45 -0300
Subject: [PATCH] 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 | 3 ++-
 platform/core/src/services/UIModalService/index.js    | 5 ++++-
 platform/ui/src/components/ohifModal/OHIFModal.styl   | 6 +++---
 platform/ui/src/contextProviders/ModalProvider.js     | 4 +++-
 4 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/extensions/dicom-tag-browser/src/getCommandsModule.js b/extensions/dicom-tag-browser/src/getCommandsModule.js
index 274e5e127..0fec35e79 100644
--- a/extensions/dicom-tag-browser/src/getCommandsModule.js
+++ b/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
       });
     },
   };
diff --git a/platform/core/src/services/UIModalService/index.js b/platform/core/src/services/UIModalService/index.js
index e2cd178ca..1d4f18879 100644
--- a/platform/core/src/services/UIModalService/index.js
+++ b/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
   });
 }
 
diff --git a/platform/ui/src/components/ohifModal/OHIFModal.styl b/platform/ui/src/components/ohifModal/OHIFModal.styl
index a6ab1a1d2..21da3205d 100644
--- a/platform/ui/src/components/ohifModal/OHIFModal.styl
+++ b/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
diff --git a/platform/ui/src/contextProviders/ModalProvider.js b/platform/ui/src/contextProviders/ModalProvider.js
index ba01b97ce..58dd84d49 100644
--- a/platform/ui/src/contextProviders/ModalProvider.js
+++ b/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}