@sendbird/react-uikit-message-template-view - npm Package Compare versions

Comparing version 0.0.1-alpha.32 to 0.0.1-alpha.33

CHANGELOG.md

@@ -6,2 +6,8 @@ # Change Log
 
+## 0.0.1-alpha.33 (2023-05-17)
+
+### Bug Fixes
+
+- **NOTI-878:** fix image metaData not being reflected after it is updated ([#44](https://github.com/sendbird/sendbird-uikit-core-ts/issues/44)) ([85d7326](https://github.com/sendbird/sendbird-uikit-core-ts/commit/85d732636ed5daa22384ac548b07ccd1794525ee))
+
 ## 0.0.1-alpha.32 (2023-05-16)
@@ -8,0 +14,0 @@

dist/components/ReactMessageTemplateImage/index.canvas.js

@@ -12,3 +12,3 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 export const CanvasReactMessageTemplateImage = (props) => {
@@ -21,22 +21,28 @@ const { imageSize, canvasRef, canvasProps } = useCanvasMessageTemplateImage(props);
     const canvasRef = useRef(null);
-    const [imageSize, setImageSize] = useState(metaData && { width: metaData.pixelWidth, height: metaData.pixelHeight });
+    const [fallbackImageSize, setFallbackImageSize] = useState();
+    const imageSize = useMemo(() => {
+        if ((metaData === null || metaData === void 0 ? void 0 : metaData.pixelHeight) && (metaData === null || metaData === void 0 ? void 0 : metaData.pixelWidth)) {
+            return { width: metaData.pixelWidth, height: metaData.pixelHeight };
+        }
+        return fallbackImageSize;
+    }, [fallbackImageSize, metaData === null || metaData === void 0 ? void 0 : metaData.pixelHeight, metaData === null || metaData === void 0 ? void 0 : metaData.pixelWidth]);
     useEffect(() => {
+        if (imageSize == null) {
+            console.log('Canvas_ReactMessageTemplateImage: no metaData, render fit to container');
+            if (canvasRef.current) {
+                canvasRef.current.style.width = '100%';
+                canvasRef.current.style.height = '100%';
+                const containerSize = canvasRef.current.getBoundingClientRect();
+                setFallbackImageSize(containerSize);
+            }
+        }
+    }, [imageSize]);
+    useEffect(() => {
         if (props.src) {
             const img = new Image();
-            img.onload = function () {
-                if (canvasRef.current && tintColor) {
+            const onImageLoad = () => {
+                if (canvasRef.current && tintColor && imageSize) {
                     const ctx = canvasRef.current.getContext('2d');
                     if (ctx) {
-                        let imageWidth = imageSize === null || imageSize === void 0 ? void 0 : imageSize.width;
-                        let imageHeight = imageSize === null || imageSize === void 0 ? void 0 : imageSize.height;
-                        if (!imageWidth || !imageHeight) {
-                            console.log('Canvas_ReactMessageTemplateImage: no metaData, render fit to container');
-                            console.log(props.src);
-                            canvasRef.current.style.width = '100%';
-                            canvasRef.current.style.height = '100%';
-                            const containerSize = canvasRef.current.getBoundingClientRect();
-                            imageWidth = containerSize.width;
-                            imageHeight = containerSize.height;
-                            setImageSize(containerSize);
-                        }
+                        const { width: imageWidth, height: imageHeight } = imageSize;
                         // reset context before draw, consider `.save()` and `.restore()` api
@@ -55,9 +61,16 @@ ctx.clearRect(0, 0, imageWidth, imageHeight);
             };
-            img.onerror = function (...args) {
+            const onImageError = (event) => {
                 var _a;
                 // @ts-ignore
-                (_a = props.onError) === null || _a === void 0 ? void 0 : _a.call(props, ...args);
+                (_a = props.onError) === null || _a === void 0 ? void 0 : _a.call(props, event);
             };
+            img.addEventListener('load', onImageLoad);
+            img.addEventListener('error', onImageError);
             img.src = props.src;
+            return () => {
+                img.removeEventListener('load', onImageLoad);
+                img.removeEventListener('error', onImageError);
+            };
         }
+        return;
     }, [props.src, imageSize, tintColor]);
@@ -64,0 +77,0 @@ return {

package.json

 {
   "name": "@sendbird/react-uikit-message-template-view",
-  "version": "0.0.1-alpha.32",
+  "version": "0.0.1-alpha.33",
   "publishConfig": {
@@ -32,5 +32,5 @@ "registry": "https://registry.npmjs.org/",
   "dependencies": {
-    "@sendbird/uikit-message-template": "^0.0.1-alpha.32"
+    "@sendbird/uikit-message-template": "^0.0.1-alpha.33"
   },
-  "gitHead": "4a25191ee80cdfaa00d2e75c72bff6376fde7e92"
+  "gitHead": "cf01f56b849485cd501fa2cb17d75b7d0938dc0f"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

306704

increased by0.36%

Lines of code

3421

increased by0.71%

Dependency changes

• Updated@sendbird/uikit-message-template@^0.0.1-alpha.33