feat(repeater-native): add empty content

Author: Andries-Smit

packages/pluggableWidgets/repeater-native/src/Repeater.editorConfig.ts

@@ -28,6 +28,17 @@ export function getPreview(values: RepeaterPreviewProps, isDarkMode: boolean): S
                 type: "DropZone",
                 placeholder: "Content",
                 property: values.content
+            },
+            {
+                type: "Container",
+                borders: true,
+                children: [
+                    {
+                        type: "DropZone",
+                        placeholder: "Content when Empty",
+                        property: values.contentEmpty
+                    }
+                ]
             }
         ]
     };

packages/pluggableWidgets/repeater-native/src/Repeater.tsx

@@ -7,19 +7,16 @@ import { mergeNativeStyles } from "@mendix/pluggable-widgets-tools";
 
 export function Repeater(props: RepeaterProps<RepeaterStyle>): ReactElement {
     const styles = mergeNativeStyles(defaultRepeaterStyle, props.style);
-    if (
-        props.datasource.status === ValueStatus.Loading ||
-        !props.datasource.items ||
-        props.datasource.items.length === 0
-    ) {
+    if (props.datasource.status === ValueStatus.Loading || !props.datasource.items) {
         return <View />;
     }
-
+    const contentEmpty = props.datasource.items.length === 0 ? props.contentEmpty : null;
     return (
         <View style={styles.container}>
-            {props.datasource.items?.map((item, index) => (
+            {props.datasource.items.map((item, index) => (
                 <Fragment key={`item_${index}`}>{props.content.get(item)}</Fragment>
             ))}
+            {contentEmpty}
         </View>
     );
 }

packages/pluggableWidgets/repeater-native/src/Repeater.xml

@@ -14,6 +14,10 @@
                 <property key="content" type="widgets" dataSource="datasource">
                     <caption>Content</caption>
                     <description/>
+                </property>                
+                <property key="contentEmpty" type="widgets" required="false">
+                    <caption>Content empty</caption>
+                    <description/>
                 </property>
             </propertyGroup>
             <propertyGroup caption="Common">

packages/pluggableWidgets/repeater-native/typings/RepeaterProps.d.ts

@@ -3,14 +3,15 @@
  * WARNING: All changes made to this file will be overwritten
  * @author Mendix UI Content Team
  */
-import { ComponentType, CSSProperties } from "react";
+import { ComponentType, CSSProperties, ReactNode } from "react";
 import { ListValue, ListWidgetValue } from "mendix";
 
 export interface RepeaterProps<Style> {
     name: string;
     style: Style[];
     datasource: ListValue;
     content: ListWidgetValue;
+    contentEmpty?: ReactNode;
 }
 
 export interface RepeaterPreviewProps {
@@ -20,4 +21,5 @@ export interface RepeaterPreviewProps {
     readOnly: boolean;
     datasource: {} | { type: string } | null;
     content: { widgetCount: number; renderer: ComponentType<{ caption?: string }> };
+    contentEmpty: { widgetCount: number; renderer: ComponentType<{ caption?: string }> };
 }