fix(vue, vue-next): handle onLoadEnd params

Tencent · Mar 3, 2023 · 52aae10 · 52aae10
1 parent 405cf70
commit 52aae10
Show file tree

Hide file tree

Showing 5 changed files with 112 additions and 3 deletions.
diff --git a/examples/hippy-vue-demo/src/components/demos/demo-img.vue b/examples/hippy-vue-demo/src/components/demos/demo-img.vue
@@ -44,6 +44,7 @@
         :placeholder="defaultImage"
         src="https://user-images.githubusercontent.com/12878546/148736255-7193f89e-9caf-49c0-86b0-548209506bd6.gif"
         class="image cover"
+        @loadEnd="onLoadEnd"
       >
     </div>
   </div>
@@ -77,6 +78,12 @@ export default {
       evt.stopPropagation();
       console.log(evt);
     },
+    onLoadEnd(evt) {
+      console.log(`onLoadEnd success: ${evt.success}`);
+      if (evt.success) {
+        console.log(`gif size: ${evt.size.width} * ${evt.size.height}`);
+      }
+    },
   },
 };
 </script>

diff --git a/examples/hippy-vue-next-demo/src/components/demo/demo-img.vue b/examples/hippy-vue-next-demo/src/components/demo/demo-img.vue
@@ -48,6 +48,7 @@
         :placeholder="defaultImage"
         src="https://user-images.githubusercontent.com/12878546/148736255-7193f89e-9caf-49c0-86b0-548209506bd6.gif"
         class="image cover"
+        @loadEnd="onLoadEnd"
       >
     </div>
   </div>
@@ -77,13 +78,17 @@ export default defineComponent({
       evt.stopPropagation();
       console.log(evt);
     };
+    const onLoadEnd = (evt: Event) => {
+      console.log('onLoadEnd', evt);
+    };
 
     return {
       defaultImage,
       hippyLogoImage,
       onTouchEnd,
       onTouchMove,
       onTouchStart,
+      onLoadEnd,
     };
   },
 });

diff --git a/packages/hippy-vue-next/src/built-in-component.ts b/packages/hippy-vue-next/src/built-in-component.ts
@@ -162,8 +162,59 @@ const form: ElementComponent = {
 const img: ElementComponent = {
   component: {
     name: NATIVE_COMPONENT_MAP.Image,
-    eventNamesMap: div.component.eventNamesMap,
-    processEventData: div.component.processEventData,
+    eventNamesMap: mapHippyEvent([
+      ['touchStart', 'onTouchDown'],
+      ['touchstart', 'onTouchDown'],
+      ['touchmove', 'onTouchMove'],
+      ['touchend', 'onTouchEnd'],
+      ['touchcancel', 'onTouchCancel'],
+      ['loadEnd', 'onLoadEnd'],
+    ]),
+    processEventData(evtData: EventsUnionType, nativeEventParams: NeedToTyped) {
+      const { handler: event, __evt: nativeEventName } = evtData;
+
+      switch (nativeEventName) {
+        case 'onScroll':
+        case 'onScrollBeginDrag':
+        case 'onScrollEndDrag':
+        case 'onMomentumScrollBegin':
+        case 'onMomentumScrollEnd':
+          event.offsetX = nativeEventParams.contentOffset?.x;
+          event.offsetY = nativeEventParams.contentOffset?.y;
+          /**
+           * If it is a scroll event and the size of the scroll content area is included in the event response,
+           * the actual size of the scroll content area will be assigned
+           */
+          if (nativeEventParams?.contentSize) {
+            event.scrollHeight = nativeEventParams.contentSize.height;
+            event.scrollWidth = nativeEventParams.contentSize.width;
+          }
+          break;
+        case 'onTouchDown':
+        case 'onTouchMove':
+        case 'onTouchEnd':
+        case 'onTouchCancel':
+          event.touches = {
+            0: {
+              clientX: nativeEventParams.page_x,
+              clientY: nativeEventParams.page_y,
+            },
+            length: 1,
+          };
+          break;
+        case 'onFocus':
+          event.isFocused = nativeEventParams.focus;
+          break;
+        case 'onLoadEnd':
+          event.success = nativeEventParams.success === 1;
+          if (event.success) {
+            event.size = { width: nativeEventParams.image.width, height: nativeEventParams.image.height };
+          }
+          break;
+        default:
+      }
+      return event;
+    },
     defaultNativeStyle: {
       backgroundColor: 0,
     },

diff --git a/packages/hippy-vue-next/src/runtime/event/hippy-event.ts b/packages/hippy-vue-next/src/runtime/event/hippy-event.ts
@@ -147,6 +147,10 @@ export class HippyLoadResourceEvent extends HippyEvent {
   public url?: string;
   public success?: boolean;
   public error?: string;
+  public size?: {
+    width?: number;
+    height?: number;
+  };
 }
 
 export class HippyKeyboardEvent extends HippyEvent {

diff --git a/packages/hippy-vue/src/elements/built-in.js b/packages/hippy-vue/src/elements/built-in.js
@@ -152,8 +152,15 @@ const form = {
 const img = {
   symbol: components.Image,
   component: {
-    ...div.component,
     name: NATIVE_COMPONENT_NAME_MAP[components.Image],
+    eventNamesMap: mapEvent([
+      ['touchStart', 'onTouchDown'],
+      ['touchstart', 'onTouchDown'],
+      ['touchmove', 'onTouchMove'],
+      ['touchend', 'onTouchEnd'],
+      ['touchcancel', 'onTouchCancel'],
+      ['loadEnd', 'onLoadEnd'],
+    ]),
     defaultNativeStyle: {
       backgroundColor: 0,
     },
@@ -179,6 +186,41 @@ const img = {
       },
       ...accessibilityAttrMaps,
     },
+    processEventData(event, nativeEventName, nativeEventParams) {
+      switch (nativeEventName) {
+        case 'onScroll':
+        case 'onScrollBeginDrag':
+        case 'onScrollEndDrag':
+        case 'onMomentumScrollBegin':
+        case 'onMomentumScrollEnd':
+          event.offsetX = nativeEventParams.contentOffset && nativeEventParams.contentOffset.x;
+          event.offsetY = nativeEventParams.contentOffset && nativeEventParams.contentOffset.y;
+          break;
+        case 'onTouchDown':
+        case 'onTouchMove':
+        case 'onTouchEnd':
+        case 'onTouchCancel':
+          event.touches = {
+            0: {
+              clientX: nativeEventParams.page_x,
+              clientY: nativeEventParams.page_y,
+            },
+            length: 1,
+          };
+          break;
+        case 'onFocus':
+          event.isFocused = nativeEventName.focus;
+          break;
+        case 'onLoadEnd':
+          event.success = nativeEventParams.success === 1;
+          if (event.success) {
+            event.size = { width: nativeEventParams.image.width, height: nativeEventParams.image.height };
+          }
+          break;
+        default:
+      }
+      return event;
+    },
   },
 };