Skip to content

Commit

Permalink
fix(android): return size after loading gif (#3001)
Browse files Browse the repository at this point in the history 
* fix(android): return size after loading gif

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

* Revert "fix(vue, vue-next): handle onLoadEnd params"

This reverts commit 52aae10.

* fix(android): return image size using onLoad

* fix(img): update demo about onLoad usage

* docs(img): update doc about onLoad usage

* fix(demo): modify attribute name

* fix(android): change if condition order

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

* fix(vue, vue-next): remove unexpected events

* fix(vue, vue-next): modify code expression

* feat(react): update gif onLoad

* feat(vue, vue-next): update demo expression

---------

Co-authored-by: andrezhuang <andrezhuang@tencent.com>
  • Loading branch information
@Xuanquan-Zhuang @andrezhuang @zoomchan-cxj
2 people authored and zoomchan-cxj committed Mar 16, 2023
1 parent 9c2d0bf commit 28fdfa9
Show file tree
Hide file tree
Showing 10 changed files with 216 additions and 97 deletions.
16 changes: 15 additions & 1 deletion android/sdk/src/main/java/com/tencent/mtt/hippy/views/image/HippyImageView.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -351,7 +351,21 @@ protected void handleGetImageStart() {
protected void handleGetImageSuccess() {
// send onLoad event
if (mShouldSendImageEvent[ImageEvent.ONLOAD.ordinal()]) {
getOnLoadEvent().send(this, null);
HippyMap map = new HippyMap();
if (mSourceDrawable != null) {
if (mSourceDrawable instanceof HippyDrawable) {
HippyDrawable hippyTarget = (HippyDrawable) mSourceDrawable;
map.pushInt("width", hippyTarget.getWidth());
map.pushInt("height", hippyTarget.getHeight());
map.pushString("url", mUrl != null ? mUrl : "");
} else if (mSourceDrawable.getBitmap() != null) {
Bitmap bitmap = mSourceDrawable.getBitmap();
map.pushInt("width", bitmap.getWidth());
map.pushInt("height", bitmap.getHeight());
map.pushString("url", mUrl != null ? mUrl : "");
}
}
getOnLoadEvent().send(this, map);
}
// send onLoadEnd event
if (mShouldSendImageEvent[ImageEvent.ONLOAD_END.ordinal()]) {
Expand Down
22 changes: 11 additions & 11 deletions docs/en-us/hippy-vue/components.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,17 +194,17 @@ Image component, same as browser.

## Events

| Event Name | Description | Type | Supported Platforms |
| ------------- | ------------------------------------------------------------ | ----------------------------------------- | -------- |
| layout | Called when an element is mounted or the layout changes. The argument is: `nativeEvent: { layout: { x, y, width, height } }`, where `x` and `y` are coordinates relative to the parent element | `Function` | `Android、iOS、Web-Renderer` |
| load | Called when the web page is successfully loaded | `Function` | `Android、iOS、Web-Renderer` |
| loadStart | Called when the web page starts loading | `Function` | `Android、iOS、Web-Renderer` |
| loadEnd | After loading, whether it successes or nor, this callback function is called with or without success | `Function` | `Android、iOS、Web-Renderer` |
| error | Called when loading errors occur.| `Function` | `Android、iOS、Web-Renderer` |
| progress | In the process of loading calls, parameters `nativeEvent: { loaded: number, total: number }`, `loaded` indicate the size of the loading image, `total` indicates the total size of the image. | `iOS` |
| touchstart | Called when screen touch starts, minimum supported version 2.6.2, the parameters are `evt: { touches: [{ clientX: number, clientY: number }] }`,`clientX` and `clientY` respectively represent the absolute position of the click within the screen. | `Function` | `Android、iOS、Web-Renderer` |
| touchmove | Called when screen touch moves, minimum supported version 2.6.2, the parameters are `evt: { touches: [{ clientX: number, clientY: number }] }`,`clientX` and `clientY` respectively represent the absolute position of the click within the screen. | `Function` | `Android、iOS、Web-Renderer` |
| touchend | Called when screen touch ends, minimum supported version 2.6.2, the parameters are `evt: { touches: [{ clientX: number, clientY: number }] }`,`clientX` and `clientY` respectively represent the absolute position of the click within the screen. | `Function` | `Android、iOS、Web-Renderer` |
| Event Name | Description | Type | Supported Platforms |
| ------------- |---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| ----------------------------------------- | -------- |
| layout | Called when an element is mounted or the layout changes. The argument is: `nativeEvent: { layout: { x, y, width, height } }`, where `x` and `y` are coordinates relative to the parent element | `Function` | `Android、iOS、Web-Renderer` |
| load | Called when the image is successfully loaded. Argument will be returned after version `2.16.0`, which is `evt: { width: number, height: number, url: string }` | `Function` | `Android、iOS、Web-Renderer` |
| loadStart | Called when the image starts loading | `Function` | `Android、iOS、Web-Renderer` |
| loadEnd | After loading, whether it successes or nor, this callback function is called with or without success | `Function` | `Android、iOS、Web-Renderer` |
| error | Called when loading errors occur. | `Function` | `Android、iOS、Web-Renderer` |
| progress | In the process of loading calls, parameters `nativeEvent: { loaded: number, total: number }`, `loaded` indicate the size of the loading image, `total` indicates the total size of the image. | `iOS` |
| touchstart | Called when screen touch starts, minimum supported version 2.6.2, the parameters are `evt: { touches: [{ clientX: number, clientY: number }] }`,`clientX` and `clientY` respectively represent the absolute position of the click within the screen. | `Function` | `Android、iOS、Web-Renderer` |
| touchmove | Called when screen touch moves, minimum supported version 2.6.2, the parameters are `evt: { touches: [{ clientX: number, clientY: number }] }`,`clientX` and `clientY` respectively represent the absolute position of the click within the screen. | `Function` | `Android、iOS、Web-Renderer` |
| touchend | Called when screen touch ends, minimum supported version 2.6.2, the parameters are `evt: { touches: [{ clientX: number, clientY: number }] }`,`clientX` and `clientY` respectively represent the absolute position of the click within the screen. | `Function` | `Android、iOS、Web-Renderer` |
| touchcancel | Called when screen touch cancels. When a system event interrupts the touch screen when the user touches the screen, such as an incoming phone call, a component change (e.g., set to hidden), or a sliding gesture of another component, this function will receive a callback. The minimum supported version is 2.6.2. The parameters are `evt: { touches: [{ clientX: number, clientY: number }] }`,`clientX` and `clientY` respectively represent the absolute position of the click on the screen. | `Function` | `Android、iOS、Web-Renderer` |

---
Expand Down
2 changes: 1 addition & 1 deletion docs/hippy-react/components.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ import icon from './qb_icon_new.png';
| source | uri 是一个表示图片的资源标识的字符串。 现在支持的图片格式有 `png` , `jpg` , `jpeg` , `bmp` , `gif` 。 | `{ uri: string }` | `Android、iOS、hippy-react-web、Web-Renderer` |
| tintColor | 对图片进行染色(对非纯色图片进行有透明度的染色时，Android 和 iOS 的 `blendMode` 默认值有差异)。 | [color](style/color.md) | `Android、iOS、Web-Renderer`|
| onLayout | 当元素挂载或者布局改变的时候调用，参数为： `nativeEvent: { layout: { x, y, width, height } }`，其中 `x` 和 `y` 为相对父元素的坐标位置 | `Function` | `Android、iOS、hippy-react-web、Web-Renderer` |
| onLoad | 加载成功完成时调用此回调函数。 | `Function` | `Android、iOS、hippy-react-web、Web-Renderer` |
| onLoad | 加载成功完成时调用此回调函数，`2.16.0`后支持参数返回，参数为：`nativeEvent: { width: number, height: number, url: string }` | `Function` | `Android、iOS、hippy-react-web、Web-Renderer` |
| onLoadStart | 加载开始时调用。 例如, `onLoadStart={() => this.setState({ loading: true })}` | `Function` | `Android、iOS、hippy-react-web、Web-Renderer` |
| onLoadEnd | 加载结束后，不论成功还是失败，调用此回调函数。 | `Function` | `Android、iOS、hippy-react-web、Web-Renderer` |
| resizeMode | 决定当组件尺寸和图片尺寸不成比例的时候如何调整图片的大小。`注意：hippy-react-web、Web-Renderer 不支持 repeat` | `enum (cover, contain, stretch, repeat, center)` | `Android、iOS、hippy-react-web、Web-Renderer` |
Expand Down
22 changes: 11 additions & 11 deletions docs/hippy-vue/components.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,17 +194,17 @@

## 事件

| 事件名称 | 描述 | 类型 | 支持平台 |
| ------------- | ------------------------------------------------------------ | ----------------------------------------- | -------- |
| layout | 当元素挂载或者布局改变的时候调用，参数为： `nativeEvent: { layout: { x, y, width, height } }`，其中 `x` 和 `y` 为相对父元素的坐标位置 | `Function` | `Android、iOS、Web-Renderer` |
| load | 加载成功完成时调用此回调函数。 | `Function` | `Android、iOS、Web-Renderer` |
| loadStart | 加载开始时调用。 | `Function` | `Android、iOS、Web-Renderer` |
| loadEnd | 加载结束后，不论成功还是失败，调用此回调函数。 | `Function` | `Android、iOS、Web-Renderer` |
| error | 当加载错误的时候调用此回调函数。| `Function` | `Android、iOS、Web-Renderer` |
| progress | 在加载过程中不断调用，参数为 `nativeEvent: { loaded: number, total: number }`, `loaded` 表示加载中的图片大小， `total` 表示图片总大小 | `Function` | `iOS` |
| touchstart | 触屏开始事件，最低支持版本 2.6.2，参数为 `evt: { touches: [{ clientX: number, clientY: number }] }`，`clientX` 和 `clientY` 分别表示点击在屏幕内的绝对位置 | `Function` | `Android、iOS、Web-Renderer` |
| touchmove | 触屏移动事件，最低支持版本 2.6.2，参数为 `evt: { touches: [{ clientX: number, clientY: number }] }`，`clientX` 和 `clientY` 分别表示点击在屏幕内的绝对位置 | `Function` | `Android、iOS、Web-Renderer` |
| touchend | 触屏结束事件，最低支持版本 2.6.2，参数为 `evt: { touches: [{ clientX: number, clientY: number }] }`，`clientX` 和 `clientY` 分别表示点击在屏幕内的绝对位置 | `Function` | `Android、iOS、Web-Renderer` |
| 事件名称 | 描述 | 类型 | 支持平台 |
| ------------- |----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| ----------------------------------------- | -------- |
| layout | 当元素挂载或者布局改变的时候调用，参数为： `nativeEvent: { layout: { x, y, width, height } }`，其中 `x` 和 `y` 为相对父元素的坐标位置 | `Function` | `Android、iOS、Web-Renderer` |
| load | 加载成功完成时调用此回调函数，`2.16.0`后支持参数返回，参数为：`evt: { width: number, height: number, url: string }` | `Function` | `Android、iOS、Web-Renderer` |
| loadStart | 加载开始时调用。 | `Function` | `Android、iOS、Web-Renderer` |
| loadEnd | 加载结束后，不论成功还是失败，调用此回调函数。 | `Function` | `Android、iOS、Web-Renderer` |
| error | 当加载错误的时候调用此回调函数。 | `Function` | `Android、iOS、Web-Renderer` |
| progress | 在加载过程中不断调用，参数为 `nativeEvent: { loaded: number, total: number }`, `loaded` 表示加载中的图片大小， `total` 表示图片总大小 | `Function` | `iOS` |
| touchstart | 触屏开始事件，最低支持版本 2.6.2，参数为 `evt: { touches: [{ clientX: number, clientY: number }] }`，`clientX` 和 `clientY` 分别表示点击在屏幕内的绝对位置 | `Function` | `Android、iOS、Web-Renderer` |
| touchmove | 触屏移动事件，最低支持版本 2.6.2，参数为 `evt: { touches: [{ clientX: number, clientY: number }] }`，`clientX` 和 `clientY` 分别表示点击在屏幕内的绝对位置 | `Function` | `Android、iOS、Web-Renderer` |
| touchend | 触屏结束事件，最低支持版本 2.6.2，参数为 `evt: { touches: [{ clientX: number, clientY: number }] }`，`clientX` 和 `clientY` 分别表示点击在屏幕内的绝对位置 | `Function` | `Android、iOS、Web-Renderer` |
| touchcancel | 触屏取消事件，当用户触屏过程中，某个系统事件中断了触屏，例如电话呼入、组件变化（如设置为hidden）、其他组件的滑动手势，此函数会收到回调，最低支持版本 2.6.2，参数为 `evt: { touches: [{ clientX: number, clientY: number }] }`，`clientX` 和 `clientY` 分别表示点击在屏幕内的绝对位置 | `Function` | `Android、iOS、Web-Renderer` |

---
Expand Down

0 comments on commit 28fdfa9

Please sign in to comment.