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

Author: Andries-Smit

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>
     );

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>

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;
@@ -29,6 +30,7 @@ export interface BackgroundImagePreviewProps {
     readOnly: boolean;
     renderMode?: "design" | "xray" | "structure";
     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<{ children: ReactNode; caption?: string }> };