Skip to content

Commit c9a92c9

Browse files
YogendraShelkeYogendraShelke
authored
[MOO-2175] - Image enlargement issue fix (#407)
2 parents 398222b + 05ed096 commit c9a92c9

6 files changed

Lines changed: 64 additions & 190 deletions

File tree

‎packages/pluggableWidgets/image-native/CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
66

77
## [Unreleased]
88

9+
### Changed
10+
11+
- We fixed image enlargement issue on Android.
12+
913
## [3.0.0] - 2024-12-3
1014

1115
### Changed

‎packages/pluggableWidgets/image-native/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "image-native",
33
"widgetName": "Image",
4-
"version": "3.0.0",
4+
"version": "3.0.1",
55
"description": "Display an image and enlarge it on click",
66
"copyright": "© Mendix Technology BV 2022. All rights reserved.",
77
"license": "Apache-2.0",

‎packages/pluggableWidgets/image-native/src/components/ImageComponents.tsx‎

Lines changed: 20 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,18 @@
1-
import { createElement, Dispatch, SetStateAction, FunctionComponent, useState, Fragment, useCallback } from "react";
2-
import { Modal, Pressable, LayoutChangeEvent, View, ImageStyle } from "react-native";
1+
import {
2+
createElement,
3+
Dispatch,
4+
SetStateAction,
5+
FunctionComponent,
6+
useState,
7+
Fragment,
8+
useCallback,
9+
useMemo
10+
} from "react";
11+
import { Modal, Pressable, LayoutChangeEvent, View, ImageStyle, useWindowDimensions } from "react-native";
312
import { SvgUri } from "react-native-svg";
413
import { extractStyles } from "@mendix/pluggable-widgets-tools";
514
import { OnClickTypeEnum } from "../../typings/ImageProps";
6-
import { CustomImageObjectProps, onLayoutSetDimensions } from "../utils/imageUtils";
15+
import { CustomImageObjectProps, onLayoutSetDimensions, getScaledDimensions } from "../utils/imageUtils";
716
import { DimensionsType, ImageIconSVG } from "./ImageIconSVG";
817
import { DefaultImageStyle } from "../ui/Styles.js";
918
import { DynamicValue } from "mendix";
@@ -209,7 +218,6 @@ export const ImageSmall: FunctionComponent<ImageSmallProps> = props => {
209218
};
210219

211220
export const ImageEnlarged: FunctionComponent<ImageEnlargedProps> = props => {
212-
const [dimensions, setDimensions] = useState<DimensionsType>();
213221
const {
214222
visible,
215223
setEnlarged,
@@ -222,12 +230,11 @@ export const ImageEnlarged: FunctionComponent<ImageEnlargedProps> = props => {
222230
screenReaderHint
223231
} = props;
224232
const [svgProps] = extractStyles(styles.image as ImageStyle, ["width", "height"]);
225-
const onLayoutSetDimensionsCallback = useCallback(
226-
({ nativeEvent: { layout } }: LayoutChangeEvent) => {
227-
onLayoutSetDimensions(layout.width, layout.height, setDimensions, initialDimensions);
228-
},
229-
[initialDimensions]
230-
);
233+
234+
const { width, height } = useWindowDimensions();
235+
const dimensions = useMemo(() => {
236+
return getScaledDimensions(width, height, initialDimensions);
237+
}, [width, height, initialDimensions]);
231238

232239
return visible && initialDimensions?.width && initialDimensions?.height ? (
233240
<Modal
@@ -251,19 +258,11 @@ export const ImageEnlarged: FunctionComponent<ImageEnlargedProps> = props => {
251258
<Pressable
252259
testID={`${name}$ImageEnlargedPressable`}
253260
onPress={() => setEnlarged(false)}
254-
onLayout={
255-
source.type !== "icon" &&
256-
((!dimensions?.width && !svgProps?.width) || (!dimensions?.height && !svgProps?.height))
257-
? onLayoutSetDimensionsCallback
258-
: undefined
259-
}
260261
style={styles.backdrop}
261262
>
262-
<Pressable
263-
onPress={null}
263+
<View
264+
pointerEvents="none"
264265
style={{
265-
// The child (FastImage) needs "flexGrow: 1" so images on Android are not blurry.
266-
// Therefore we explicitly have to set width / height here to prevent the image from taking up the whole screen, which in turn prevents the user from closing the modal (bc parent Pressable will not be clickable).
267266
width: (svgProps?.width ?? dimensions?.width) as number,
268267
height: (svgProps?.height ?? dimensions?.height) as number
269268
}}
@@ -276,7 +275,7 @@ export const ImageEnlarged: FunctionComponent<ImageEnlargedProps> = props => {
276275
initialDimensions={initialDimensions}
277276
styles={styles.image}
278277
/>
279-
</Pressable>
278+
</View>
280279
</Pressable>
281280
</Modal>
282281
) : null;

‎packages/pluggableWidgets/image-native/src/components/__tests__/__snapshots__/Image.spec.tsx.snap‎

Lines changed: 25 additions & 165 deletions
Original file line numberDiff line numberDiff line change
@@ -393,49 +393,21 @@ exports[`Widget Dynamic Image SVG renders the structure inside a modal 1`] = `
393393
testID="Image1$ImageEnlargedPressable"
394394
>
395395
<View
396-
accessibilityState={
397-
{
398-
"busy": undefined,
399-
"checked": undefined,
400-
"disabled": undefined,
401-
"expanded": undefined,
402-
"selected": undefined,
403-
}
404-
}
405-
accessibilityValue={
406-
{
407-
"max": undefined,
408-
"min": undefined,
409-
"now": undefined,
410-
"text": undefined,
411-
}
412-
}
413-
accessible={true}
414-
collapsable={false}
415-
focusable={true}
416-
onBlur={[Function]}
417-
onClick={[Function]}
418-
onFocus={[Function]}
419-
onResponderGrant={[Function]}
420-
onResponderMove={[Function]}
421-
onResponderRelease={[Function]}
422-
onResponderTerminate={[Function]}
423-
onResponderTerminationRequest={[Function]}
424-
onStartShouldSetResponder={[Function]}
396+
pointerEvents="none"
425397
style={
426398
{
427-
"height": 9999,
428-
"width": 9999,
399+
"height": 750,
400+
"width": 750,
429401
}
430402
}
431403
>
432404
<RNSVGSvgViewAndroid
433405
align="xMidYMid"
434-
bbHeight={9999}
435-
bbWidth={9999}
406+
bbHeight={750}
407+
bbWidth={750}
436408
color="#000"
437409
focusable={false}
438-
height={9999}
410+
height={750}
439411
id="Layer_1"
440412
meetOrSlice={0}
441413
minX={0}
@@ -460,8 +432,8 @@ exports[`Widget Dynamic Image SVG renders the structure inside a modal 1`] = `
460432
],
461433
{
462434
"flex": 0,
463-
"height": 9999,
464-
"width": 9999,
435+
"height": 750,
436+
"width": 750,
465437
},
466438
]
467439
}
@@ -471,7 +443,7 @@ exports[`Widget Dynamic Image SVG renders the structure inside a modal 1`] = `
471443
vbHeight={9999}
472444
vbWidth={9999}
473445
version={1.1}
474-
width={9999}
446+
width={750}
475447
x="0px"
476448
xmlSpace="preserve"
477449
xmlns="http://www.w3.org/2000/svg"
@@ -1216,39 +1188,11 @@ exports[`Widget Dynamic Image renders the structure inside a modal 1`] = `
12161188
testID="Image1$ImageEnlargedPressable"
12171189
>
12181190
<View
1219-
accessibilityState={
1220-
{
1221-
"busy": undefined,
1222-
"checked": undefined,
1223-
"disabled": undefined,
1224-
"expanded": undefined,
1225-
"selected": undefined,
1226-
}
1227-
}
1228-
accessibilityValue={
1229-
{
1230-
"max": undefined,
1231-
"min": undefined,
1232-
"now": undefined,
1233-
"text": undefined,
1234-
}
1235-
}
1236-
accessible={true}
1237-
collapsable={false}
1238-
focusable={true}
1239-
onBlur={[Function]}
1240-
onClick={[Function]}
1241-
onFocus={[Function]}
1242-
onResponderGrant={[Function]}
1243-
onResponderMove={[Function]}
1244-
onResponderRelease={[Function]}
1245-
onResponderTerminate={[Function]}
1246-
onResponderTerminationRequest={[Function]}
1247-
onStartShouldSetResponder={[Function]}
1191+
pointerEvents="none"
12481192
style={
12491193
{
1250-
"height": 1111,
1251-
"width": 2222,
1194+
"height": 375,
1195+
"width": 750,
12521196
}
12531197
}
12541198
>
@@ -1263,8 +1207,8 @@ exports[`Widget Dynamic Image renders the structure inside a modal 1`] = `
12631207
"aspectRatio": 2,
12641208
},
12651209
{
1266-
"height": 1111,
1267-
"width": 2222,
1210+
"height": 375,
1211+
"width": 750,
12681212
},
12691213
{
12701214
"flexGrow": 1,
@@ -1798,39 +1742,11 @@ exports[`Widget Icon type: image/staticImage renders the structure inside a moda
17981742
testID="Image1$ImageEnlargedPressable"
17991743
>
18001744
<View
1801-
accessibilityState={
1802-
{
1803-
"busy": undefined,
1804-
"checked": undefined,
1805-
"disabled": undefined,
1806-
"expanded": undefined,
1807-
"selected": undefined,
1808-
}
1809-
}
1810-
accessibilityValue={
1811-
{
1812-
"max": undefined,
1813-
"min": undefined,
1814-
"now": undefined,
1815-
"text": undefined,
1816-
}
1817-
}
1818-
accessible={true}
1819-
collapsable={false}
1820-
focusable={true}
1821-
onBlur={[Function]}
1822-
onClick={[Function]}
1823-
onFocus={[Function]}
1824-
onResponderGrant={[Function]}
1825-
onResponderMove={[Function]}
1826-
onResponderRelease={[Function]}
1827-
onResponderTerminate={[Function]}
1828-
onResponderTerminationRequest={[Function]}
1829-
onStartShouldSetResponder={[Function]}
1745+
pointerEvents="none"
18301746
style={
18311747
{
1832-
"height": 1111,
1833-
"width": 2222,
1748+
"height": 375,
1749+
"width": 750,
18341750
}
18351751
}
18361752
>
@@ -1845,8 +1761,8 @@ exports[`Widget Icon type: image/staticImage renders the structure inside a moda
18451761
"aspectRatio": 2,
18461762
},
18471763
{
1848-
"height": 1111,
1849-
"width": 2222,
1764+
"height": 375,
1765+
"width": 750,
18501766
},
18511767
{
18521768
"flexGrow": 1,
@@ -2598,35 +2514,7 @@ exports[`Widget Static Image SVG renders the structure inside a modal 1`] = `
25982514
testID="Image1$ImageEnlargedPressable"
25992515
>
26002516
<View
2601-
accessibilityState={
2602-
{
2603-
"busy": undefined,
2604-
"checked": undefined,
2605-
"disabled": undefined,
2606-
"expanded": undefined,
2607-
"selected": undefined,
2608-
}
2609-
}
2610-
accessibilityValue={
2611-
{
2612-
"max": undefined,
2613-
"min": undefined,
2614-
"now": undefined,
2615-
"text": undefined,
2616-
}
2617-
}
2618-
accessible={true}
2619-
collapsable={false}
2620-
focusable={true}
2621-
onBlur={[Function]}
2622-
onClick={[Function]}
2623-
onFocus={[Function]}
2624-
onResponderGrant={[Function]}
2625-
onResponderMove={[Function]}
2626-
onResponderRelease={[Function]}
2627-
onResponderTerminate={[Function]}
2628-
onResponderTerminationRequest={[Function]}
2629-
onStartShouldSetResponder={[Function]}
2517+
pointerEvents="none"
26302518
style={
26312519
{
26322520
"height": 15,
@@ -3433,39 +3321,11 @@ exports[`Widget Static Image renders the structure inside a modal 1`] = `
34333321
testID="Image1$ImageEnlargedPressable"
34343322
>
34353323
<View
3436-
accessibilityState={
3437-
{
3438-
"busy": undefined,
3439-
"checked": undefined,
3440-
"disabled": undefined,
3441-
"expanded": undefined,
3442-
"selected": undefined,
3443-
}
3444-
}
3445-
accessibilityValue={
3446-
{
3447-
"max": undefined,
3448-
"min": undefined,
3449-
"now": undefined,
3450-
"text": undefined,
3451-
}
3452-
}
3453-
accessible={true}
3454-
collapsable={false}
3455-
focusable={true}
3456-
onBlur={[Function]}
3457-
onClick={[Function]}
3458-
onFocus={[Function]}
3459-
onResponderGrant={[Function]}
3460-
onResponderMove={[Function]}
3461-
onResponderRelease={[Function]}
3462-
onResponderTerminate={[Function]}
3463-
onResponderTerminationRequest={[Function]}
3464-
onStartShouldSetResponder={[Function]}
3324+
pointerEvents="none"
34653325
style={
34663326
{
3467-
"height": 1111,
3468-
"width": 2222,
3327+
"height": 375,
3328+
"width": 750,
34693329
}
34703330
}
34713331
>
@@ -3480,8 +3340,8 @@ exports[`Widget Static Image renders the structure inside a modal 1`] = `
34803340
"aspectRatio": 2,
34813341
},
34823342
{
3483-
"height": 1111,
3484-
"width": 2222,
3343+
"height": 375,
3344+
"width": 750,
34853345
},
34863346
{
34873347
"flexGrow": 1,

‎packages/pluggableWidgets/image-native/src/package.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<?xml version="1.0" encoding="utf-8" ?>
22
<package xmlns="http://www.mendix.com/package/1.0/">
3-
<clientModule name="Image" version="3.0.0" xmlns="http://www.mendix.com/clientModule/1.0/">
3+
<clientModule name="Image" version="3.0.1" xmlns="http://www.mendix.com/clientModule/1.0/">
44
<widgetFiles>
55
<widgetFile path="Image.xml" />
66
</widgetFiles>

0 commit comments

Comments
 (0)