Skip to content

Commit 6c45812

Browse files
rigor789rigor789
committed
feat: multiple frame navigation
BREAKING CHANGE: $navigateTo: passing props should now be done using options.props instead of options.context.propsData closes nativescript-vue#188
1 parent 6d7b169 commit 6c45812

File tree

7 files changed

+112
-121
lines changed

7 files changed

+112
-121
lines changed

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,12 +57,12 @@
5757
"babel-plugin-transform-flow-strip-types": "^6.22.0",
5858
"babel-preset-env": "^1.6.1",
5959
"chalk": "^2.3.0",
60-
"commitizen": "^2.9.6",
60+
"commitizen": "^2.10.1",
6161
"conventional-changelog-cli": "^1.3.14",
6262
"cz-conventional-changelog": "^2.1.0",
6363
"husky": "^0.15.0-rc.3",
6464
"inquirer": "^5.0.1",
65-
"jest": "^22.1.4",
65+
"jest": "^23.6.0",
6666
"jest-junit": "^3.5.0",
6767
"lint-staged": "^6.1.0",
6868
"prettier": "^1.10.2",

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

Lines changed: 34 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,25 @@ function getFrameInstance(frame) {
1919
return getFrame(frame.id)
2020
}
2121

22+
function _findParentNavigationEntry(vm) {
23+
if (!vm) {
24+
return false
25+
}
26+
27+
let entry = vm.$parent
28+
while (entry && entry.$options.name !== 'NavigationEntry') {
29+
entry = entry.$parent
30+
}
31+
32+
return entry
33+
}
34+
2235
export default {
2336
install(Vue) {
2437
Vue.prototype.$navigateBack = function(options) {
38+
const navEntry = _findParentNavigationEntry(this)
2539
const defaultOptions = {
26-
frame: 'default'
40+
frame: navEntry ? navEntry.$options.frame : 'default'
2741
}
2842
options = Object.assign({}, defaultOptions, options)
2943
const frame = getFrameInstance(options.frame)
@@ -40,10 +54,26 @@ export default {
4054

4155
return new Promise(resolve => {
4256
const frame = getFrameInstance(options.frame)
43-
const page = new Vue({
44-
parent: this,
57+
const navEntryInstance = new Vue({
58+
name: 'NavigationEntry',
59+
parent: this.$root,
60+
frame,
61+
props: {
62+
frame: {
63+
default: frame.id
64+
}
65+
},
4566
render: h => h(component, { props: options.props })
46-
}).$mount().$el.nativeView
67+
})
68+
const page = navEntryInstance.$mount().$el.nativeView
69+
70+
const handler = args => {
71+
if (args.isBackNavigation) {
72+
page.off('navigatedFrom', handler)
73+
navEntryInstance.$destroy()
74+
}
75+
}
76+
page.on('navigatedFrom', handler)
4777

4878
frame.navigate(Object.assign({}, options, { create: () => page }))
4979
resolve(page)

‎platform/nativescript/runtime/components/frame.js

Lines changed: 36 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { setFrame, getFrame, deleteFrame } from '../../util/frame'
22
import { extend } from 'shared/util'
3-
import { ios } from 'tns-core-modules/application'
43

54
let idCounter = 1
65

@@ -61,120 +60,91 @@ export default {
6160
this.$slots.default
6261
)
6362
},
64-
computed: {
65-
history() {
66-
return (this.$router && this.$router.history) || {}
67-
},
68-
69-
store() {
70-
return this.history.store || {}
71-
},
72-
73-
replacing() {
74-
return this.store.operation === 'replace'
75-
},
76-
77-
isGoingBack() {
78-
return this.store && this.store.isGoingBack
79-
? ios
80-
? undefined
81-
: true
82-
: false
83-
}
84-
},
63+
// computed: {
64+
// history() {
65+
// return (this.$router && this.$router.history) || {}
66+
// },
67+
//
68+
// store() {
69+
// return this.history.store || {}
70+
// },
71+
//
72+
// replacing() {
73+
// return this.store.operation === 'replace'
74+
// },
75+
//
76+
// isGoingBack() {
77+
// return this.store && this.store.isGoingBack
78+
// ? ios
79+
// ? undefined
80+
// : true
81+
// : false
82+
// }
83+
// },
8584
methods: {
8685
_getFrame() {
8786
return this.$el.nativeView
8887
},
8988

9089
_composeTransition() {
9190
const result = {}
92-
const root = this.store.entry || this
9391

9492
for (const prop in propMap) {
95-
if (root[prop]) {
93+
if (this[prop]) {
9694
const name = propMap[prop]
9795
result[name] = {}
9896

99-
if (typeof root[prop] === 'string') {
100-
result[name].name = root[prop]
97+
if (typeof this[prop] === 'string') {
98+
result[name].name = this[prop]
10199
} else {
102-
extend(result[name], root[prop])
100+
extend(result[name], this[prop])
103101
}
104102
}
105103
}
106104

107105
return result
108106
},
109107

110-
notifyPageMounted(pageVm) {
111-
this.$nextTick(_ =>
112-
this[this.store.operation]({
113-
create: () => pageVm.$el.nativeView
114-
})
115-
)
108+
async notifyPageMounted(pageVm) {
109+
await this.$nextTick()
110+
111+
this.navigate({
112+
create: () => pageVm.$el.nativeView
113+
})
116114
},
117115

118-
navigate(entry, back = this.isGoingBack) {
116+
navigate(entry, back = false) {
119117
const frame = this._getFrame()
120118

121-
if (back || (ios && this.isGoingBack === undefined)) {
122-
frame.goBack(this.isGoingBack ? undefined : entry)
123-
124-
return (this.store.isGoingBack = false)
119+
if (back) {
120+
return frame.goBack(entry)
125121
}
126122

127-
this.replacing && this.$emit('beforeReplace', entry)
128-
!this.replacing && this.$emit('beforePush', entry)
129-
130123
// resolve the page from the entry and attach a navigatedTo listener
131124
// to fire the frame events
132125
const page = entry.create()
133-
134126
page.once('navigatedTo', () => {
135127
this.$emit('navigated', entry)
136-
this.replacing && this.$emit('replace', entry)
137-
!this.replacing && this.$emit('push', entry)
138128
})
139129

140130
const handler = args => {
141131
if (args.isBackNavigation) {
142132
page.off('navigatedFrom', handler)
143133

144-
if (this.$router && ios) {
145-
this.history.index -= 1
146-
this.history.updateRoute(this.history.stack[this.history.index])
147-
}
148-
149-
this.$emit('back', entry)
134+
this.$emit('navigatedBack', entry)
150135
}
151136
}
152-
153137
page.on('navigatedFrom', handler)
154138

155139
entry.create = () => page
156140

157-
const transition = this._composeTransition()
158-
159-
Object.assign(entry, transition, entry)
141+
Object.assign(entry, this._composeTransition())
160142

161143
frame.navigate(entry)
162144
},
163145

164146
back(backstackEntry = null) {
165147
this.navigate(backstackEntry, true)
166-
},
167-
168-
push(entry) {
169-
this.navigate(entry)
170-
},
171-
172-
replace(entry) {
173-
this.navigate(entry)
174-
},
175-
176-
go(entry) {
177-
this.navigate(entry)
178148
}
179149
}
180150
}

‎platform/nativescript/runtime/components/page.js

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,15 @@ export default {
1111
this.$slots.default
1212
)
1313
},
14-
created() {
15-
if (this.$router) {
16-
// Sometimes the parent is undefined
17-
// See https://github.com/nativescript-vue/nativescript-vue/issues/292
18-
if (this.$vnode.parent) {
19-
this.$vnode.parent.data.keepAlive = true
20-
}
21-
}
22-
},
14+
// created() {
15+
// if (this.$router) {
16+
// // Sometimes the parent is undefined
17+
// // See https://github.com/nativescript-vue/nativescript-vue/issues/292
18+
// if (this.$vnode.parent) {
19+
// this.$vnode.parent.data.keepAlive = true
20+
// }
21+
// }
22+
// },
2323
mounted() {
2424
this.$el.nativeView[PAGE_REF] = this
2525

@@ -33,9 +33,9 @@ export default {
3333
if (e.isBackNavigation) {
3434
this.$el.nativeView.off('navigatedFrom', handler)
3535

36-
if (this.$router) {
37-
this.$parent.$vnode.data.keepAlive = false
38-
}
36+
// if (this.$router) {
37+
// this.$parent.$vnode.data.keepAlive = false
38+
// }
3939

4040
this.$parent.$destroy()
4141
}
@@ -53,18 +53,18 @@ export default {
5353

5454
return frame
5555
}
56-
},
57-
deactivated() {
58-
if (this.$router) {
59-
if (this._watcher) {
60-
this._watcher.teardown()
61-
}
62-
63-
let i = this._watchers.length
64-
65-
while (i--) {
66-
this._watchers[i].teardown()
67-
}
68-
}
6956
}
57+
// deactivated() {
58+
// if (this.$router) {
59+
// if (this._watcher) {
60+
// this._watcher.teardown()
61+
// }
62+
//
63+
// let i = this._watchers.length
64+
//
65+
// while (i--) {
66+
// this._watchers[i].teardown()
67+
// }
68+
// }
69+
// }
7070
}

‎samples/.npmrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
package-lock=false

‎samples/app/app-with-frame.js

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -25,20 +25,16 @@ const createPage = title =>
2525
new Vue({
2626
template: `
2727
<Frame ref="frame"
28-
@beforePush="log('beforePush')"
29-
@beforeReplace="log('beforeReplace')"
30-
@beforeBack="log('beforeBack')"
31-
@push="log('push')"
32-
@replace="log('replace')"
33-
@back="log('back')"
28+
@navigated="log('navigated')"
29+
@navigatedBack="log('navigatedBack')"
3430
>
35-
<Page><Button text="Page" @tap="replace" /></Page>
31+
<Page><Button text="Page" @tap="navigate" /></Page>
3632
</Frame>
3733
`,
3834

3935
methods: {
40-
replace() {
41-
this.$refs.frame.push({
36+
navigate() {
37+
this.$refs.frame.navigate({
4238
create() {
4339
return createPage('test')
4440
}

‎samples/package.json

Lines changed: 9 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,23 @@
11
{
2-
"description": "NativeScript Application",
3-
"license": "SEE LICENSE IN <your-license-filename>",
4-
"readme": "NativeScript Application",
5-
"repository": "<fill-your-repository-here>",
2+
"description": "NativeScriptVue Samples Application",
3+
"license": "MIT",
4+
"readme": "NativeScriptVue Samples Application",
65
"nativescript": {
7-
"id": "org.nativescript.vuesample",
6+
"id": "org.nativescript.vue.samples",
87
"tns-ios": {
9-
"version": "4.1.0"
8+
"version": "4.2.0"
109
},
1110
"tns-android": {
12-
"version": "4.2.0-rc-2018-08-05-01"
11+
"version": "4.3.0-2018-09-12-02"
1312
}
1413
},
1514
"dependencies": {
16-
"nativescript-gradient": "^2.0.1",
1715
"nativescript-pager": "^8.0.2",
1816
"nativescript-theme-core": "^1.0.4",
19-
"nativescript-ui-sidedrawer": "^4.2.1",
17+
"nativescript-ui-sidedrawer": "^4.3.0",
2018
"tns-core-modules": "^4.2.0",
21-
"nativescript-ui-gauge": "^3.6.0",
19+
"nativescript-ui-gauge": "^3.7.1",
2220
"vue-router": "^3.0.1",
2321
"vuex": "^3.0.1"
24-
},
25-
"devDependencies": {
26-
"lazy": "^1.0.11",
27-
"nativescript-dev-android-snapshot": "^0.0.11"
2822
}
29-
}
23+
}

0 commit comments

Comments
 (0)