feat: support for frame elements

rigor789 · rigor789 · commit bb14c230a527 · 2018-04-22T13:59:06.000+02:00
diff --git a/package.json b/package.json
@@ -76,7 +76,7 @@
     "set-value": "^2.0.0",
     "tns-core-modules": "^3.4.0",
     "util-inspect": "^0.1.8",
-    "vue": "^2.5.13"
+    "vue": "^2.5.16"
   },
   "jest": {
     "verbose": true,
diff --git a/platform/nativescript/element-registry.js b/platform/nativescript/element-registry.js
@@ -270,3 +270,11 @@ registerElement(
     skipAddToDom: true
   }
 )
+
+registerElement('Frame', () => require('tns-core-modules/ui/frame').Frame, {
+  insertChild(parentNode, childNode, atIndex) {
+    if (childNode.tagName === 'page') {
+      parentNode.nativeView.navigate({ create: () => childNode.nativeView })
+    }
+  }
+})
diff --git a/platform/nativescript/renderer/utils.js b/platform/nativescript/renderer/utils.js
@@ -15,6 +15,10 @@ export function isContentView(view) {
 }
 
 export function insertChild(parentNode, childNode, atIndex = -1) {
+  if (typeof parentNode.meta.insertChild === 'function') {
+    return parentNode.meta.insertChild(parentNode, childNode, atIndex)
+  }
+
   if (!parentNode || childNode.meta.skipAddToDom) {
     return
   }
@@ -51,6 +55,10 @@ export function insertChild(parentNode, childNode, atIndex = -1) {
 }
 
 export function removeChild(parentNode, childNode) {
+  if (typeof parentNode.meta.removeChild === 'function') {
+    return parentNode.meta.removeChild(parentNode, childNode)
+  }
+
   if (!parentNode || childNode.meta.skipAddToDom) {
     return
   }
diff --git a/samples/app/app-with-frames.js b/samples/app/app-with-frames.js
@@ -0,0 +1,44 @@
+const Vue = require('./nativescript-vue')
+
+Vue.config.silent = false
+Vue.config.debug = true
+
+new Vue({
+  data() {
+    return {
+      a: true
+    }
+  },
+  template: `
+    <GridLayout rows="*, *">
+      <Frame row="0">
+        <Page v-if="a">
+          <StackLayout>
+            <Label text="Hello Frame"/>
+            <Button text="go to other Frame" @tap="a = false"/>
+          </StackLayout>
+        </Page>
+        <Page v-else>
+          <StackLayout>
+            <Label text="Hello other frame"/>
+            <Button text="go to prev Frame" @tap="a = true"/>
+          </StackLayout>
+        </Page>
+      </Frame>
+      <Frame row="1">
+        <Page v-if="!a" actionBarHidden="true">
+          <StackLayout>
+            <Label text="Hello Frame"/>
+            <Button text="go to other Frame" @tap="a = true"/>
+          </StackLayout>
+        </Page>
+        <Page v-else actionBarHidden="true">
+          <StackLayout>
+            <Label text="Hello other frame"/>
+            <Button text="go to prev Frame" @tap="a = false"/>
+          </StackLayout>
+        </Page>
+      </Frame>
+    </GridLayout>
+  `
+}).$start()

Original file line number	Diff line number	Diff line change
`@@ -270,3 +270,11 @@ registerElement(`
`270`	`270`	`skipAddToDom: true`
`271`	`271`	`}`
`272`	`272`	`)`
	`273`	`+`
	`274`	`+registerElement('Frame', () => require('tns-core-modules/ui/frame').Frame, {`
	`275`	`+ insertChild(parentNode, childNode, atIndex) {`
	`276`	`+ if (childNode.tagName === 'page') {`
	`277`	`+ parentNode.nativeView.navigate({ create: () => childNode.nativeView })`
	`278`	`+ }`
	`279`	`+ }`
	`280`	`+})`
Original file line number	Diff line number	Diff line change
`@@ -15,6 +15,10 @@ export function isContentView(view) {`
`15`	`15`	`}`
`16`	`16`
`17`	`17`	`export function insertChild(parentNode, childNode, atIndex = -1) {`
	`18`	`+ if (typeof parentNode.meta.insertChild === 'function') {`
	`19`	`+ return parentNode.meta.insertChild(parentNode, childNode, atIndex)`
	`20`	`+ }`
	`21`	`+`
`18`	`22`	`if (!parentNode \|\| childNode.meta.skipAddToDom) {`
`19`	`23`	`return`
`20`	`24`	`}`
`@@ -51,6 +55,10 @@ export function insertChild(parentNode, childNode, atIndex = -1) {`
`51`	`55`	`}`
`52`	`56`
`53`	`57`	`export function removeChild(parentNode, childNode) {`
	`58`	`+ if (typeof parentNode.meta.removeChild === 'function') {`
	`59`	`+ return parentNode.meta.removeChild(parentNode, childNode)`
	`60`	`+ }`
	`61`	`+`
`54`	`62`	`if (!parentNode \|\| childNode.meta.skipAddToDom) {`
`55`	`63`	`return`
`56`	`64`	`}`