feat(ListView): emit itemTap with 'item'

rigor789 · Apr 25, 2020 · 4976309 · 4976309
1 parent 0e91662
commit 4976309
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 8 deletions.
diff --git a/apps/test/app/ListViewComp.js b/apps/test/app/ListViewComp.js
@@ -1,25 +1,42 @@
 import { ListView } from 'nativescript-vue'
 
+const randomText = () => {
+  let length = Math.floor(Math.random() * 200) + 20
+  let result = ''
+  let characters =
+    'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+  let charactersLength = characters.length
+  for (var i = 0; i < length; i++) {
+    result += characters.charAt(Math.floor(Math.random() * charactersLength))
+  }
+  return result
+}
+
 export default {
   components: {
     ListView,
   },
   template: `
-<ListView :items="items" _tap="items.push('Item ' + (items.length + 1))">
+<ListView :items="items2" @itemTap="onItemTap">
   <template v-slot:default="{item, index, even, odd}">
-    <Label textWrap="true">
-        Item: {{ item }}
-        Index: {{ index }}
-        Even: {{ even }}
-        Odd: {{ odd }}
-    </Label>
+    <GridLayout columns="*, auto">
+      <Label textWrap="true">
+          {{ index }} - {{ item }}
+      </Label>
+      <Button col="1" :text="'tap ' + index" @tap="onTestTap(item, index, even, odd)"/>
+    </GridLayout>
   </template>
   <!--<template v-slot:other="{item}">-->
   <!--  <Label >{{ item }}Other</Label>-->
   <!--</template>-->
 </ListView>`,
   data() {
     return {
+      items2: [
+        ...Array(200)
+          .fill('')
+          .map((item, index) => `Item ${index}\n${randomText()}`),
+      ],
       items: [
         'Item 1',
         'Item 2',
@@ -43,4 +60,12 @@ export default {
       ],
     }
   },
+  methods: {
+    onItemTap(event) {
+      console.log(`Tapped ${event.item}`)
+    },
+    onTestTap(item, index, even, odd) {
+      console.log(`Test tap ${index}! (${item}, ${index}, ${even}, ${odd})`)
+    },
+  },
 }
diff --git a/packages/runtime/src/components/ListView.ts b/packages/runtime/src/components/ListView.ts
@@ -9,12 +9,19 @@ type ListViewProps = {
 const NSV_LVR_REF = Symbol('NSV_LVR_REF')
 const isListViewThingSymbol = Symbol()
 
+export type ItemTapEvent<T> = ItemEventData & { item: T }
+
 interface ListViewRealized {
   [isListViewThingSymbol]: true
   container: NSVRoot | null
 }
 
-export const ListView: FunctionalComponent<ListViewProps> = (props, ctx) => {
+export const ListView: FunctionalComponent<
+  ListViewProps,
+  {
+    itemTap: (e: ItemTapEvent<any>) => any
+  }
+> = (props, ctx) => {
   const defaultKeyedTemplate = {
     key: 'test',
     createView(): ListViewRealized {
@@ -28,6 +35,12 @@ export const ListView: FunctionalComponent<ListViewProps> = (props, ctx) => {
 
   return h('InternalListView', {
     items: props.items,
+    onitemTap: (args: ItemEventData) => {
+      ctx.emit('itemTap', {
+        ...args,
+        item: props.items[args.index],
+      })
+    },
     itemTemplates: [defaultKeyedTemplate],
     itemTemplateSelector: (item: any, index: any) => {
       // debug('itemTemplateSelector', item, index)
@@ -53,6 +66,10 @@ export const ListView: FunctionalComponent<ListViewProps> = (props, ctx) => {
         const lvr = (args.view as unknown) as ListViewRealized
         // lets create an initial root
         lvr.container = nodeOps.createRoot()
+
+        // @ts-ignore
+        // console.log(getSlotVnode('default').children[0].children)
+
         render(getSlotVnode('default'), lvr.container)
 
         if (lvr.container.el) {
@@ -62,6 +79,9 @@ export const ListView: FunctionalComponent<ListViewProps> = (props, ctx) => {
       } else {
         debug('LVR UPDATING' + args.index, 'ListView')
         const lvr = (args.view as any)[NSV_LVR_REF] as ListViewRealized
+        // @ts-ignore
+        // console.log(getSlotVnode('default').children[0].children)
+
         render(getSlotVnode('default'), lvr.container!)
         view = lvr.container!.el!.nativeView
       }