[bootstrap] allow to close modals with 'Esc' keypress

src/Gargantext/Components/Bootstrap/Floaty/BaseModal.js

@@ -6,8 +6,16 @@
  * @param {string} querySelector
  * @unpure {Object} window.$
  */
-export function _show(window, querySelector) {
-  window.$(querySelector).modal('show');
+export function _show(window, querySelector, events) {
+  let $modal = window.$(querySelector);
+  $modal.modal('show');
+  console.log('events', events);
+  if(events.onHide) {
+    $modal.on('hidden.bs.modal', events.onHide());
+  }
+  if(events.onShow) {
+    $modal.on('shown.bs.modal', events.onShow());
+  }
 }
 /**
  * @function hide

src/Gargantext/Components/Bootstrap/Floaty/BaseModal.purs

@@ -10,7 +10,7 @@ import Data.Foldable (intercalate)
 import Data.Maybe (Maybe(..))
 import Data.UUID as UUID
 import Effect (Effect)
-import Effect.Uncurried (EffectFn2, runEffectFn2)
+import Effect.Uncurried (EffectFn2, EffectFn3, runEffectFn2, runEffectFn3)
 import Gargantext.Components.Bootstrap.IconButton (iconButton)
 import Gargantext.Components.Bootstrap.Types (Elevation(..), ModalSizing(..))
 import Gargantext.Hooks.UpdateEffect (useUpdateEffect1')
@@ -20,16 +20,29 @@ import Reactix as R
 import Reactix.DOM.HTML as H
 import Toestand as T
 
-foreign import _show :: EffectFn2
+here :: R2.Here
+here = R2.here "Gargantext.Components.Bootstrap.BaseModal"
+
+
+type ModalCallback = Unit -> Effect Unit
+
+type ModalEvents =
+  ( onHide :: ModalCallback
+  , onShow :: ModalCallback )
+
+
+foreign import _show :: EffectFn3
   Window
   String
+  (Record ModalEvents)
   Unit
 
 showModal ::
      Window
   -> String
+  -> Record ModalEvents
   -> Effect Unit
-showModal = runEffectFn2 _show
+showModal = runEffectFn3 _show
 
 foreign import _hide :: EffectFn2
   Window
@@ -118,9 +131,13 @@ component = R.memo' $ R.hooksComponent componentName cpt where
 
     -- | Hooks
     -- |
+    let modalEvents = {
+          onHide: \_ -> T.write_ false isVisibleBox
+        , onShow: \_ -> T.write_ true isVisibleBox
+      }
     useUpdateEffect1' isVisible
       if isVisible
-      then showModal window selector
+      then showModal window selector modalEvents
       else hideModal window selector
 
     -- | Behaviors
@@ -138,7 +155,7 @@ component = R.memo' $ R.hooksComponent componentName cpt where
         , tabIndex: "-1"
         , key: id
         , data:
-            { keyboard: "false"
+            { keyboard: "true"
             , backdrop: hasCollapsibleBackground ?
               "true" $
               "static"