fix: properly remove Spans from FormattedString

nativescript-vue · May 20, 2020 · 80fa127 · 80fa127
1 parent 013b898
commit 80fa127
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 16 deletions.
diff --git a/platform/nativescript/element-registry.js b/platform/nativescript/element-registry.js
@@ -396,7 +396,23 @@ registerElement(
 )
 registerElement(
   'FormattedString',
-  () => require('@nativescript/core/text/formatted-string').FormattedString
+  () => require('@nativescript/core/text/formatted-string').FormattedString,
+  {
+    insertChild(parentNode, childNode, atIndex) {
+      if (atIndex) {
+        parentNode.nativeView.spans.splice(atIndex, 0, childNode.nativeView)
+        return
+      }
+      parentNode.nativeView.spans.push(childNode.nativeView)
+    },
+    removeChild(parentNode, childNode) {
+      const index = parentNode.nativeView.spans.indexOf(childNode.nativeView)
+
+      if (index > -1) {
+        parentNode.nativeView.spans.splice(index, 1)
+      }
+    }
+  }
 )
 registerElement('Span', () => require('@nativescript/core/text/span').Span)
 

diff --git a/platform/nativescript/renderer/utils.js b/platform/nativescript/renderer/utils.js
@@ -1,30 +1,25 @@
-let View;
+let View
 export function isView(view) {
-  if (!View)  {
+  if (!View) {
     View = require('@nativescript/core/ui/core/view').View
   }
   return view instanceof View
 }
 
-
-let LayoutBase;
+let LayoutBase
 export function isLayout(view) {
-  if (!LayoutBase)  {
+  if (!LayoutBase) {
     LayoutBase = require('@nativescript/core/ui/layouts/layout-base').LayoutBase
   }
-  return (
-    view instanceof LayoutBase
-  )
+  return view instanceof LayoutBase
 }
 
-let ContentView;
+let ContentView
 export function isContentView(view) {
-  if (!ContentView)  {
+  if (!ContentView) {
     ContentView = require('@nativescript/core/ui/content-view').ContentView
   }
-  return (
-    view instanceof ContentView
-  )
+  return view instanceof ContentView
 }
 
 export function insertChild(parentNode, childNode, atIndex = -1) {

diff --git a/samples/app/app-with-formatted-string.js b/samples/app/app-with-formatted-string.js
@@ -1,18 +1,26 @@
 const Vue = require('nativescript-vue')
 
+Vue.config.silent = false
+
 new Vue({
   template: `
   <Frame>
     <Page>
-      <Label>
+      <Label @tap="toggle = !toggle">
         <FormattedString>
           <Span text="some" fontWeight="Bold" />
           <Span text="content" />
+          <Span v-if="toggle" text="toggled span" color="red" />
         </FormattedString>
       </Label>
     </Page>
   </Frame>
   `,
 
-  comments: true
+  comments: true,
+  data() {
+    return {
+      toggle: false
+    }
+  }
 }).$start()