Browse Source

add `closeModalOnClickOutside: false` option

Artur Paikin 7 years ago
parent
commit
8711421c05
2 changed files with 8 additions and 3 deletions
  1. 1 3
      src/plugins/Dashboard/Dashboard.js
  2. 7 0
      src/plugins/Dashboard/index.js

+ 1 - 3
src/plugins/Dashboard/Dashboard.js

@@ -57,9 +57,7 @@ module.exports = function Dashboard (props) {
           onpaste=${handlePaste}
           onload=${() => props.updateDashboardElWidth()}>
 
-    <div class="UppyDashboard-overlay" onclick=${() => {
-      // props.hideModal
-    }}></div>
+    <div class="UppyDashboard-overlay" onclick=${props.handleClickOutside}></div>
 
     <div class="UppyDashboard-inner"
          tabindex="0"

+ 7 - 0
src/plugins/Dashboard/index.js

@@ -53,6 +53,7 @@ module.exports = class DashboardUI extends Plugin {
       showProgressDetails: false,
       hideUploadButton: false,
       note: false,
+      closeModalOnClickOutside: false,
       locale: defaultLocale
     }
 
@@ -74,6 +75,7 @@ module.exports = class DashboardUI extends Plugin {
     this.showPanel = this.showPanel.bind(this)
     this.initEvents = this.initEvents.bind(this)
     this.handleEscapeKeyPress = this.handleEscapeKeyPress.bind(this)
+    this.handleClickOutside = this.handleClickOutside.bind(this)
     this.handleFileCard = this.handleFileCard.bind(this)
     this.handleDrop = this.handleDrop.bind(this)
     this.pauseAll = this.pauseAll.bind(this)
@@ -187,6 +189,10 @@ module.exports = class DashboardUI extends Plugin {
     }
   }
 
+  handleClickOutside () {
+    if (this.opts.closeModalOnClickOutside) this.hideModal()
+  }
+
   initEvents () {
     // Modal open button
     const showModalTrigger = findDOMElement(this.opts.trigger)
@@ -365,6 +371,7 @@ module.exports = class DashboardUI extends Plugin {
       hideUploadButton: this.opts.hideUploadButton,
       id: this.id,
       hideModal: this.hideModal,
+      handleClickOutside: this.handleClickOutside,
       showProgressDetails: this.opts.showProgressDetails,
       inline: this.opts.inline,
       semiTransparent: this.opts.semiTransparent,