feat(background-image-native): add default image

mendix · Mar 23, 2023 · c0ae454 · c0ae454
1 parent 9c5260a
commit c0ae454
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 5 deletions.
diff --git a/packages/pluggableWidgets/background-image-native/src/BackgroundImage.tsx b/packages/pluggableWidgets/background-image-native/src/BackgroundImage.tsx
@@ -9,7 +9,7 @@ import { BackgroundImageProps } from "../typings/BackgroundImageProps";
 
 export function BackgroundImage(props: BackgroundImageProps<BackgroundImageStyle>): JSX.Element | null {
     const styles = flattenStyles(defaultBackgroundImageStyle, props.style);
-    const { image, name, resizeMode } = props;
+    const { image, defaultImage, name, resizeMode } = props;
     let opacity = Number(props.opacity.toFixed());
 
     if (opacity < 0) {
@@ -18,15 +18,17 @@ export function BackgroundImage(props: BackgroundImageProps<BackgroundImageStyle
         opacity = 1;
     }
 
-    if (image.status !== ValueStatus.Available || !image.value) {
+    const renderImage = (image.status === ValueStatus.Available && image.value) || !defaultImage ? image : defaultImage;
+
+    if (renderImage.status !== ValueStatus.Available || !renderImage.value) {
         return null;
     }
 
     const imageStyle = [
         StyleSheet.absoluteFill,
-        typeof image.value === "number"
+        typeof renderImage.value === "number"
             ? { width: undefined, height: undefined }
-            : typeof image.value === "string"
+            : typeof renderImage.value === "string"
             ? { width: "100%", height: "100%" }
             : undefined,
         styles.image,
@@ -35,7 +37,12 @@ export function BackgroundImage(props: BackgroundImageProps<BackgroundImageStyle
 
     return (
         <View style={styles.container} testID={name}>
-            <Image source={image.value} style={imageStyle} color={styles.image.svgColor} testID={`${name}$image`} />
+            <Image
+                source={renderImage.value}
+                style={imageStyle}
+                color={styles.image.svgColor}
+                testID={`${name}$image`}
+            />
             {props.content}
         </View>
     );

diff --git a/packages/pluggableWidgets/background-image-native/src/BackgroundImage.xml b/packages/pluggableWidgets/background-image-native/src/BackgroundImage.xml
@@ -11,6 +11,10 @@
                     <caption>Image</caption>
                     <description />
                 </property>
+                <property key="defaultImage" type="image" required="false">
+                    <caption>Default image</caption>
+                    <description/>
+                </property>
                 <property key="resizeMode" type="enumeration" defaultValue="cover">
                     <caption>Resize mode</caption>
                     <description>Cover: scale to  cover space. Contain: scale to fit in space. Stretch: stretched to fit space. Center: centered and fit in space. For more information see the help page.</description>

diff --git a/packages/pluggableWidgets/background-image-native/typings/BackgroundImageProps.d.ts b/packages/pluggableWidgets/background-image-native/typings/BackgroundImageProps.d.ts
@@ -13,6 +13,7 @@ export interface BackgroundImageProps<Style> {
     name: string;
     style: Style[];
     image: DynamicValue<NativeImage>;
+    defaultImage?: DynamicValue<NativeImage>;
     resizeMode: ResizeModeEnum;
     opacity: Big;
     content?: ReactNode;
@@ -28,6 +29,7 @@ export interface BackgroundImagePreviewProps {
     styleObject?: CSSProperties;
     readOnly: boolean;
     image: { type: "static"; imageUrl: string; } | { type: "dynamic"; entity: string; } | null;
+    defaultImage: { type: "static"; imageUrl: string; } | { type: "dynamic"; entity: string; } | null;
     resizeMode: ResizeModeEnum;
     opacity: number | null;
     content: { widgetCount: number; renderer: ComponentType<{ caption?: string }> };