From 05ed0969d23c24c5774920a04f4f9ecf8f3b4233 Mon Sep 17 00:00:00 2001 From: Yogendra Shelke Date: Mon, 19 Jan 2026 17:11:36 +0530 Subject: [PATCH] test: update image-native snapshots --- .../image-native/CHANGELOG.md | 4 + .../image-native/package.json | 2 +- .../src/components/ImageComponents.tsx | 41 ++-- .../__snapshots__/Image.spec.tsx.snap | 190 +++--------------- .../image-native/src/package.xml | 2 +- .../image-native/src/utils/imageUtils.ts | 15 +- 6 files changed, 64 insertions(+), 190 deletions(-) diff --git a/packages/pluggableWidgets/image-native/CHANGELOG.md b/packages/pluggableWidgets/image-native/CHANGELOG.md index 30a9b2cd3..7d1f877b2 100644 --- a/packages/pluggableWidgets/image-native/CHANGELOG.md +++ b/packages/pluggableWidgets/image-native/CHANGELOG.md @@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), ## [Unreleased] +### Changed + +- We fixed image enlargement issue on Android. + ## [3.0.0] - 2024-12-3 ### Changed diff --git a/packages/pluggableWidgets/image-native/package.json b/packages/pluggableWidgets/image-native/package.json index 2a8e0e180..aded2e05b 100644 --- a/packages/pluggableWidgets/image-native/package.json +++ b/packages/pluggableWidgets/image-native/package.json @@ -1,7 +1,7 @@ { "name": "image-native", "widgetName": "Image", - "version": "3.0.0", + "version": "3.0.1", "description": "Display an image and enlarge it on click", "copyright": "© Mendix Technology BV 2022. All rights reserved.", "license": "Apache-2.0", diff --git a/packages/pluggableWidgets/image-native/src/components/ImageComponents.tsx b/packages/pluggableWidgets/image-native/src/components/ImageComponents.tsx index af72b5776..cc898378a 100644 --- a/packages/pluggableWidgets/image-native/src/components/ImageComponents.tsx +++ b/packages/pluggableWidgets/image-native/src/components/ImageComponents.tsx @@ -1,9 +1,18 @@ -import { createElement, Dispatch, SetStateAction, FunctionComponent, useState, Fragment, useCallback } from "react"; -import { Modal, Pressable, LayoutChangeEvent, View, ImageStyle } from "react-native"; +import { + createElement, + Dispatch, + SetStateAction, + FunctionComponent, + useState, + Fragment, + useCallback, + useMemo +} from "react"; +import { Modal, Pressable, LayoutChangeEvent, View, ImageStyle, useWindowDimensions } from "react-native"; import { SvgUri } from "react-native-svg"; import { extractStyles } from "@mendix/pluggable-widgets-tools"; import { OnClickTypeEnum } from "../../typings/ImageProps"; -import { CustomImageObjectProps, onLayoutSetDimensions } from "../utils/imageUtils"; +import { CustomImageObjectProps, onLayoutSetDimensions, getScaledDimensions } from "../utils/imageUtils"; import { DimensionsType, ImageIconSVG } from "./ImageIconSVG"; import { DefaultImageStyle } from "../ui/Styles.js"; import { DynamicValue } from "mendix"; @@ -209,7 +218,6 @@ export const ImageSmall: FunctionComponent = props => { }; export const ImageEnlarged: FunctionComponent = props => { - const [dimensions, setDimensions] = useState(); const { visible, setEnlarged, @@ -222,12 +230,11 @@ export const ImageEnlarged: FunctionComponent = props => { screenReaderHint } = props; const [svgProps] = extractStyles(styles.image as ImageStyle, ["width", "height"]); - const onLayoutSetDimensionsCallback = useCallback( - ({ nativeEvent: { layout } }: LayoutChangeEvent) => { - onLayoutSetDimensions(layout.width, layout.height, setDimensions, initialDimensions); - }, - [initialDimensions] - ); + + const { width, height } = useWindowDimensions(); + const dimensions = useMemo(() => { + return getScaledDimensions(width, height, initialDimensions); + }, [width, height, initialDimensions]); return visible && initialDimensions?.width && initialDimensions?.height ? ( = props => { setEnlarged(false)} - onLayout={ - source.type !== "icon" && - ((!dimensions?.width && !svgProps?.width) || (!dimensions?.height && !svgProps?.height)) - ? onLayoutSetDimensionsCallback - : undefined - } style={styles.backdrop} > - = props => { initialDimensions={initialDimensions} styles={styles.image} /> - + ) : null; diff --git a/packages/pluggableWidgets/image-native/src/components/__tests__/__snapshots__/Image.spec.tsx.snap b/packages/pluggableWidgets/image-native/src/components/__tests__/__snapshots__/Image.spec.tsx.snap index 034282ebf..22111bae9 100644 --- a/packages/pluggableWidgets/image-native/src/components/__tests__/__snapshots__/Image.spec.tsx.snap +++ b/packages/pluggableWidgets/image-native/src/components/__tests__/__snapshots__/Image.spec.tsx.snap @@ -393,49 +393,21 @@ exports[`Widget Dynamic Image SVG renders the structure inside a modal 1`] = ` testID="Image1$ImageEnlargedPressable" > @@ -1263,8 +1207,8 @@ exports[`Widget Dynamic Image renders the structure inside a modal 1`] = ` "aspectRatio": 2, }, { - "height": 1111, - "width": 2222, + "height": 375, + "width": 750, }, { "flexGrow": 1, @@ -1798,39 +1742,11 @@ exports[`Widget Icon type: image/staticImage renders the structure inside a moda testID="Image1$ImageEnlargedPressable" > @@ -1845,8 +1761,8 @@ exports[`Widget Icon type: image/staticImage renders the structure inside a moda "aspectRatio": 2, }, { - "height": 1111, - "width": 2222, + "height": 375, + "width": 750, }, { "flexGrow": 1, @@ -2598,35 +2514,7 @@ exports[`Widget Static Image SVG renders the structure inside a modal 1`] = ` testID="Image1$ImageEnlargedPressable" > @@ -3480,8 +3340,8 @@ exports[`Widget Static Image renders the structure inside a modal 1`] = ` "aspectRatio": 2, }, { - "height": 1111, - "width": 2222, + "height": 375, + "width": 750, }, { "flexGrow": 1, diff --git a/packages/pluggableWidgets/image-native/src/package.xml b/packages/pluggableWidgets/image-native/src/package.xml index 9012cd112..b08707f68 100644 --- a/packages/pluggableWidgets/image-native/src/package.xml +++ b/packages/pluggableWidgets/image-native/src/package.xml @@ -1,6 +1,6 @@ - + diff --git a/packages/pluggableWidgets/image-native/src/utils/imageUtils.ts b/packages/pluggableWidgets/image-native/src/utils/imageUtils.ts index 8484f8fda..5af4f829c 100644 --- a/packages/pluggableWidgets/image-native/src/utils/imageUtils.ts +++ b/packages/pluggableWidgets/image-native/src/utils/imageUtils.ts @@ -149,6 +149,17 @@ export function onLayoutSetDimensions( setDimensions: Dispatch>, initialDimensions?: DimensionsType ): void { + const dimensions = getScaledDimensions(width, height, initialDimensions); + if (dimensions) { + setDimensions(dimensions); + } +} + +export function getScaledDimensions( + width: number, + height: number, + initialDimensions?: DimensionsType +): DimensionsType | undefined { if (initialDimensions?.width && initialDimensions?.height) { let newWidth; let newHeight; @@ -167,9 +178,9 @@ export function onLayoutSetDimensions( newHeight = heightScale < 1 ? initialDimensions.height * heightScale : initialDimensions.height; } - setDimensions({ + return { width: newWidth, height: newHeight - }); + }; } }