fix(hippy-vue,hippy-react): compatible loadMore and endReached event (#429)

* fix(hippy-react,hippy-vue): compatible loadMore and endReached event

Android only support loadMore event in listview but ios support endReached event. Compatible loadMore and endReached event in hippy-vue and hippy-react.

* feat(hippy-vue): add unit test for pollyfill event

Co-authored-by: Zoom Chan <shermanchen@tencent.com>

packages/hippy-react/src/components/list-view.tsx

@@ -406,6 +406,10 @@ class ListView extends React.Component<ListViewProps, ListViewState> {
       };
     }
 
+    if (!nativeProps.onLoadMore && nativeProps.onEndReached) {
+      nativeProps.onLoadMore = nativeProps.onEndReached;
+    }
+
     return (
       <ul
         ref={(ref) => { this.instance = ref; }}

packages/hippy-vue/src/renderer/__tests__/element-node.test.js

@@ -6,6 +6,7 @@
 import test from 'ava';
 import ElementNode from '../element-node';
 import DocumentNode from '../document-node';
+import ListNode from '../list-node';
 
 test.before(() => {
   global.__GLOBAL__ = {
@@ -178,3 +179,31 @@ test('Element.setStyle with pre-processed style test', (t) => {
   t.is(node.style.backgroundCol, 'whi');
   t.is(node.style.wid, 100);
 });
+
+test('Element.dispatchEvent with pollyfill event', (t) => {
+  const node = new ListNode('ul');
+  let called = false;
+  const callback = (event) => {
+    called = true;
+    return event;
+  };
+
+  t.is(called, false);
+  t.is(node._emitter, null);
+  t.is(node.removeEventListener('loadMore', callback), null);
+  node.addEventListener('loadMore', callback);
+  t.true(!!node._emitter);
+  let event = DocumentNode.createEvent('loadMore');
+  node.dispatchEvent(event);
+  t.is(called, true);
+  node.removeEventListener('loadMore', callback);
+  t.true(!!node._emitter);
+
+  called = false;
+  t.is(called, false);
+  node.addEventListener('endReached', callback);
+  event = DocumentNode.createEvent('loadMore');
+  node.dispatchEvent(event);
+  t.is(called, true);
+  node.removeEventListener('endReached', callback);
+});

packages/hippy-vue/src/renderer/element-node.js

@@ -66,6 +66,9 @@ class ElementNode extends ViewNode {
     return this._meta;
   }
 
+  get emitter() {
+    return this._emitter;
+  }
 
   hasAttribute(key) {
     return !!this.attributes[key];
@@ -283,6 +286,10 @@ class ElementNode extends ViewNode {
       }
     }
 
+    if (this.polyFillNativeEvents) {
+      this.polyFillNativeEvents('addEvent', eventNames, callback, options);
+    }
+
     updateChild(this);
   }
 
@@ -290,6 +297,11 @@ class ElementNode extends ViewNode {
     if (!this._emitter) {
       return null;
     }
+
+    if (this.polyFillNativeEvents) {
+      this.polyFillNativeEvents('removeEvent', eventNames, callback, options);
+    }
+
     return this._emitter.removeEventListener(eventNames, callback, options);
   }
 

packages/hippy-vue/src/renderer/list-node.js

@@ -18,12 +18,33 @@ class ListNode extends ElementNode {
   /**
    * Scroll children to specific position.
    */
-  scrollToPosition(posX = 0, posY = 0, needAnimation = true)  {
+  scrollToPosition(posX = 0, posY = 0, needAnimation = true) {
     if (typeof posX !== 'number' || typeof posY !== 'number') {
       return;
     }
     Native.callUIFunction(this, 'scrollToContentOffset', [posX, posY, needAnimation]);
   }
+
+  /**
+   * Poly fill native event
+   */
+  polyFillNativeEvents(method, eventNames, callback, options) {
+    if (method === 'addEvent') {
+      if (eventNames === 'endReached' || eventNames === 'loadMore') {
+        const name = eventNames === 'endReached' ? 'loadMore' : 'endReached';
+        if (this.emitter) {
+          this.emitter.addEventListener(name, callback, options);
+        }
+      }
+    } else if (method === 'removeEvent') {
+      if (eventNames === 'endReached' || eventNames === 'loadMore') {
+        const name = eventNames === 'endReached' ? 'loadMore' : 'endReached';
+        if (this.emitter) {
+          this.emitter.removeEventListener(name, callback, options);
+        }
+      }
+    }
+  }
 }
 
 export default ListNode;