feat(web): fix image local path (#4095)

* feat(react): add animation stop * feat(web): fix image local path * feat(web): remove unused code
Tencent · Oct 29, 2024 · 59cc3dc · 59cc3dc
1 parent 2d60d35
commit 59cc3dc
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 15 deletions.
diff --git a/examples/hippy-react-demo/scripts/hippy-webpack.web-renderer.js b/examples/hippy-react-demo/scripts/hippy-webpack.web-renderer.js
@@ -1,3 +1,4 @@
+const fs = require('fs');
 const path = require('path');
 const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
@@ -78,5 +79,20 @@ module.exports = {
   resolve: {
     extensions: ['.js', '.jsx', '.json'],
     modules: [path.resolve(__dirname, '../node_modules')],
+    alias: (() => {
+      const aliases = {};
+      // If @hippy/web-renderer was built exist in packages directory then make an alias
+      // Remove the section if you don't use it
+      const webRendererPath = path.resolve(__dirname, '../../../packages/hippy-web-renderer/dist');
+      if (fs.existsSync(path.resolve(webRendererPath, 'index.js'))) {
+        console.warn(`* Using the @hippy/web-renderer in ${webRendererPath} as @hippy/web-renderer alias`);
+        aliases['@hippy/web-renderer'] = webRendererPath;
+      } else {
+        console.warn('* Using the @hippy/web-renderer defined in package.json');
+      }
+
+
+      return aliases;
+    })(),
   },
 };
diff --git a/packages/hippy-react/src/modules/animation.ts b/packages/hippy-react/src/modules/animation.ts
@@ -265,13 +265,6 @@ class Animation implements Animation {
     Bridge.callNative('AnimationModule', 'pauseAnimation', this.animationId);
   }
 
-  /**
-   * Stop the running animation
-   */
-  public stop() {
-    Bridge.callNative('AnimationModule', 'stopAnimation', this.animationId);
-  }
-
   /**
    * Resume execution of paused animation
    */

diff --git a/packages/hippy-web-renderer/src/component/image.ts b/packages/hippy-web-renderer/src/component/image.ts
@@ -63,6 +63,13 @@ export class Image extends HippyWebView<HTMLImageElement|HTMLElement> {
     return { boxSizing: 'border-box', zIndex: 0 };
   }
 
+  public replaceHpfile(value: string) {
+    if (value && /^(hpfile):\/\//.test(value) && value.indexOf('assets') > -1) {
+      return value.replace('hpfile://./', '');
+    }
+    return value ?? '';
+  }
+
   public set tintColor(value) {
     this.props[NodeProps.TINY_COLOR] = value;
     if (value !== undefined && value !== 0) {
@@ -108,17 +115,14 @@ export class Image extends HippyWebView<HTMLImageElement|HTMLElement> {
 
   public get src() {
     const value = this.props[NodeProps.SOURCE];
-    if (value && /^(hpfile):\/\//.test(value) && value.indexOf('assets') > -1) {
-      return value.replace('hpfile://./', '');
-    }
-
-    return value ?? '';
+    return this.replaceHpfile(value);
   }
 
   public set src(value: string) {
     if (value && this.src === value) {
       return;
     }
+    value = this.replaceHpfile(value);
     this.props[NodeProps.SOURCE] = value ?? '';
 
     if (value && value !== this.props[NodeProps.DEFAULT_SOURCE]) {
@@ -145,10 +149,12 @@ export class Image extends HippyWebView<HTMLImageElement|HTMLElement> {
   }
 
   public get defaultSource() {
-    return this.props[NodeProps.DEFAULT_SOURCE];
+    const value = this.props[NodeProps.DEFAULT_SOURCE];
+    return this.replaceHpfile(value);
   }
 
   public set defaultSource(value: string) {
+    value = this.replaceHpfile(value);
     this.props[NodeProps.DEFAULT_SOURCE] = value;
     if (!this.isLoadSuccess) {
       this.renderImgDom!.src = value;
@@ -190,12 +196,12 @@ export class Image extends HippyWebView<HTMLImageElement|HTMLElement> {
   private handleLoad(_event: Event, loadUrl?: string) {
     this.isLoadSuccess = false;
     if ((!loadUrl && this.renderImgDom?.src === this.src) || loadUrl === this.src) {
-      this.onLoad(null);
+      this.onLoad({});
       if (this.renderImgDom?.src !== this.src) {
         this.renderImgDom!.src = this.src;
       }
     }
-    this.onLoadEnd(null);
+    this.onLoadEnd({});
   }
 
   private buildTintDomContainer() {