From 248639777edae250de7a34d254220de9f947a33f Mon Sep 17 00:00:00 2001
From: Rodrigo Antinarelli <rodrigoantinarelli@gmail.com>
Date: Mon, 22 Jun 2020 22:38:39 -0300
Subject: [PATCH] modal update & close handler

---
 platform/core/src/services/UIModalService/index.js  | 2 +-
 platform/ui/src/components/Modal/Modal.jsx          | 9 ++++++++-
 platform/ui/src/contextProviders/ModalComponent.jsx | 2 +-
 platform/ui/src/contextProviders/ModalProvider.jsx  | 4 ++--
 4 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/platform/core/src/services/UIModalService/index.js b/platform/core/src/services/UIModalService/index.js
index ed2eab96a..884e53500 100644
--- a/platform/core/src/services/UIModalService/index.js
+++ b/platform/core/src/services/UIModalService/index.js
@@ -33,7 +33,7 @@ const serviceImplementation = {
 function _show({
   content = null,
   contentProps = null,
-  shouldCloseOnEsc = false,
+  shouldCloseOnEsc = true,
   isOpen = true,
   closeButton = true,
   title = null,
diff --git a/platform/ui/src/components/Modal/Modal.jsx b/platform/ui/src/components/Modal/Modal.jsx
index 79fa9709e..8e3418829 100644
--- a/platform/ui/src/components/Modal/Modal.jsx
+++ b/platform/ui/src/components/Modal/Modal.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import ReactModal from 'react-modal';
 import classNames from 'classnames';
 
-import { Typography } from '@ohif/ui';
+import { Typography, useModal } from '@ohif/ui';
 
 const customStyle = {
   overlay: {
@@ -27,6 +27,12 @@ const Modal = ({
   onClose,
   children,
 }) => {
+  const { hide } = useModal();
+
+  const handleClose = () => {
+    hide();
+  };
+
   const renderHeader = () => {
     return (
       title && (
@@ -52,6 +58,7 @@ const Modal = ({
         `relative py-6 w-11/12 lg:w-10/12 xl:w-1/2 max-h-full outline-none bg-primary-dark border border-secondary-main text-white rounded ${className}`
       )}
       shouldCloseOnEsc={shouldCloseOnEsc}
+      onRequestClose={handleClose}
       isOpen={isOpen}
       title={title}
       style={customStyle}
diff --git a/platform/ui/src/contextProviders/ModalComponent.jsx b/platform/ui/src/contextProviders/ModalComponent.jsx
index b3b6602a7..cf7965812 100644
--- a/platform/ui/src/contextProviders/ModalComponent.jsx
+++ b/platform/ui/src/contextProviders/ModalComponent.jsx
@@ -16,7 +16,7 @@ const ModalComponent = ({
 ModalComponent.defaultProps = {
   content: null,
   contentProps: null,
-  shouldCloseOnEsc: false,
+  shouldCloseOnEsc: true,
   isOpen: true,
   closeButton: true,
   title: null,
diff --git a/platform/ui/src/contextProviders/ModalProvider.jsx b/platform/ui/src/contextProviders/ModalProvider.jsx
index e8d65635d..ff9224bca 100644
--- a/platform/ui/src/contextProviders/ModalProvider.jsx
+++ b/platform/ui/src/contextProviders/ModalProvider.jsx
@@ -19,7 +19,7 @@ export const useModal = () => useContext(ModalContext);
  * @typedef {Object} ModalProps
  * @property {ReactElement|HTMLElement} [content=null] Modal content.
  * @property {Object} [contentProps=null] Modal content props.
- * @property {boolean} [shouldCloseOnEsc=false] Modal is dismissible via the esc key.
+ * @property {boolean} [shouldCloseOnEsc=true] Modal is dismissible via the esc key.
  * @property {boolean} [isOpen=true] Make the Modal visible or hidden.
  * @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.
@@ -30,7 +30,7 @@ const ModalProvider = ({ children, modal: Modal, service }) => {
   const DEFAULT_OPTIONS = {
     content: null,
     contentProps: null,
-    shouldCloseOnEsc: false,
+    shouldCloseOnEsc: true,
     isOpen: true,
     closeButton: true,
     title: null,