8000 feat(modals): allow passing in the target for opening the modal (#614) · iuriimattos2/nativescript-vue@31bc425 · GitHub
[go: up one dir, main page]
Skip to content

Commit 31bc425

Browse files
drewjbartlettdrewjbartlett
authored
feat(modals): allow passing in the target for opening the modal (nativescript-vue#614)
closes nativescript-vue#612
1 parent cdb9188 commit 31bc425

File tree

2 files changed

+111
-6
lines changed

2 files changed

+111
-6
lines changed

‎platform/nativescript/plugins/modal-plugin.js

Lines changed: 24 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1+
import { isObject, isDef, isPrimitive } from 'shared/util'
12
import { updateDevtools } from '../util'
3+
import { VUE_ELEMENT_REF } from '../renderer/ElementNode'
24

35
let sequentialCounter = 0
46

@@ -18,6 +20,16 @@ function serializeModalOptions(options) {
1820
.join(', ')
1921
}
2022

23+
function getTargetView(target) {
24+
if (isObject(target) && isDef(target.$el)) {
25+
return target.$el.nativeView
26+
} else if (isDef(target.nativeView)) {
27+
return target.nativeView
28+
} else if (target[VUE_ELEMENT_REF]) {
29+
return target
30+
}
31+
}
32+
2133
function _findParentModalEntry(vm) {
2234
if (!vm) {
2335
return false
@@ -65,14 +77,20 @@ export default {
6577
}
6678

6779
// build options object with defaults
68-
options = Object.assign({}, options, {
69-
context: null,
70-
closeCallback: closeCb
71-
})
80+
options = Object.assign(
81+
{
82+
target: this.$root
83+
},
84+
options,
85+
{
86+
context: null,
87+
closeCallback: closeCb
88+
}
89+
)
7290

7391
const navEntryInstance = new Vue({
7492
name: 'ModalEntry',
75-
parent: this.$root,
93+
parent: options.target,
7694
methods: {
7795
closeCb
7896
},
@@ -85,7 +103,7 @@ export default {
85103
const modalPage = navEntryInstance.$mount().$el.nativeView
86104
updateDevtools()
87105

88-
this.$root.nativeView.showModal(modalPage, options)
106+
getTargetView(options.target).showModal(modalPage, options)
89107
})
90108
}
91109
}

‎samples/app/modals-on-top-of-modals.js

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
const Vue = require('nativescript-vue')
2+
// const VueDevtools = require('nativescript-vue-devtools')
3+
4+
// Vue.use(VueDevtools)
5+
6+
Vue.config.debug = true
7+
Vue.config.silent = false
8+
9+
const SecondaryModal = {
10+
name: 'SecondaryModalComponent',
11+
template: `
12+
<Frame>
13+
<Page>
14+
<ActionBar title="Secondary Modal ActionBar"/>
15+
<StackLayout>
16+
<Label text="I'm a modal that should appear above the other."/>
17+
<Button text="Close only this modal" @tap="$modal.close"/>
18+
</StackLayout>
19+
</Page>
20+
</Frame>
21+
`
22+
}
23+
24+
const ModalComponent = {
25+
props: ['foo'],
26+
name: 'ModalComponent',
27+
template: `
28+
<Frame>
29+
<Page>
30+
<ActionBar title="Modal ActionBar"/>
31+
<StackLayout>
32+
<Button text="Open another modal" @tap="openModal"/>
33+
<Button text="Close this modal" @tap="$modal.close"/>
34+
</StackLayout>
35+
</Page>
36+
</Frame>
37+
`,
38+
39+
methods: {
40+
openModal() {
41+
this.$showModal(SecondaryModal, { target: this })
42+
}
43+
}
44+
}
45+
new Vue({
46+
data() {
47+
return {
48+
modalResult: 'No result yet.',
49+
animated: true,
50+
fullscreen: false,
51+
stretched: false
52+
}
53+
},
54+
template: `
55+
<Frame>
56+
<Page>
57+
<ActionBar title="Modals" />
58+
59+
<StackLayout>
60+
<FlexboxLayout justifyContent="center">
61+
<Label text="Animated" />
62+
<Switch v-model="animated" />
63+
</FlexboxLayout>
64+
<FlexboxLayout justifyContent="center">
65+
<Label text="Stretched" />
66+
<Switch v-model="stretched" />
67+
</FlexboxLayout>
68+
<FlexboxLayout justifyContent="center">
69+
<Label text="Fullscreen" />
70+
<Switch v-model="fullscreen" />
71+
</FlexboxLayout>
72+
<Button text="Open Modal" @tap="openModal"/>
73+
</StackLayout>
74+
</Page>
75+
</Frame>
76+
`,
77+
methods: {
78+
openModal() {
79+
this.$showModal(ModalComponent, {
80+
props: { foo: 'bar' },
81+
animated: this.animated,
82+
fullscreen: this.fullscreen,
83+
stretched: this.stretched
84+
})
85+
}
86+
}
87+
}).$start()

0 commit comments

Comments
 (0)
0