Allow dialog and action-sheet plugins to receive a resolver token

quasarframework · Apr 18, 2018 · 20d357c · 20d357c
1 parent 54a15f6
commit 20d357c
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 7 deletions.
diff --git a/dev/components/global/dialog.vue b/dev/components/global/dialog.vue
@@ -41,6 +41,8 @@
       <q-btn label="Toggle ref" @click="toggle" />
       <q-btn label="Toggle model" @click="toggle2" />
       <q-btn label="Prompt" @click="adHoc" />
+      <q-btn label="Prompt - autoresolve in 3sec" @click="adHoc(3000, 'Autocompleted')" />
+      <q-btn label="Prompt - autoreject in 3sec" @click="adHoc(3000)" />
       <q-btn label="Options" @click="adHoc2" />
       <q-btn label="Confirm" @click="adHoc3" />
     </div>
@@ -87,7 +89,13 @@ export default {
         Promise.resolve(okFn()).then(() => this.$q.notify(`Ok ${this.name}, going with ${hero}`))
       }
     },
-    adHoc () {
+    adHoc (autoclose, autoResolve) {
+      const resolver = autoclose > 0
+        ? new Promise((resolve, reject) => {
+          setTimeout(() => autoResolve ? resolve(autoResolve) : reject(new Error('Autoclosed')), autoclose)
+        })
+        : undefined
+
       this.$q.dialog({
         title: 'Prompt',
         message: 'Modern HTML5 Single Page Application front-end framework on steroids.',
@@ -98,10 +106,10 @@ export default {
         cancel: true,
         // preventClose: true,
         color: 'secondary'
-      }).then(data => {
+      }, resolver).then(data => {
         console.log('>>>> OK, received:', data)
-      }).catch(() => {
-        console.log('>>>> Cancel')
+      }).catch(error => {
+        console.log('>>>> Cancel', String(error))
       })
     },
     adHoc2 () {

diff --git a/src/utils/modal-fn.js b/src/utils/modal-fn.js
@@ -1,5 +1,5 @@
 export default function (Component, Vue) {
-  return props => {
+  return (props, resolver) => {
     const node = document.createElement('div')
     document.body.appendChild(node)
 
@@ -17,8 +17,8 @@ export default function (Component, Vue) {
               resolve(data)
               vm.$destroy()
             },
-            cancel: () => {
-              reject(new Error())
+            cancel: reason => {
+              reject(reason || new Error())
               vm.$destroy()
             }
           }
@@ -27,6 +27,15 @@ export default function (Component, Vue) {
           this.$refs.modal.show()
         }
       })
+      if (resolver) {
+        resolver.then(data => {
+          resolve(data)
+          vm.$destroy()
+        }).catch(reason => {
+          reject(reason || new Error())
+          vm.$destroy()
+        })
+      }
     })
   }
 }