feat(repeater-native): add empty content

Author: Andries-Smit

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

@@ -1,15 +1,45 @@
-import { StructurePreviewProps, topBar } from "@mendix/piw-utils-internal";
+import { StructurePreviewProps } from "@mendix/piw-utils-internal";
 
 import { RepeaterPreviewProps } from "../typings/RepeaterProps";
 
 export function getPreview(values: RepeaterPreviewProps, isDarkMode: boolean): StructurePreviewProps {
-    return topBar(
-        "Repeater",
-        {
-            type: "DropZone",
-            placeholder: "Content",
-            property: values.content
-        },
-        isDarkMode
-    );
+    return {
+        type: "Container",
+        borders: true,
+        children: [
+            {
+                type: "Container",
+                backgroundColor: isDarkMode ? "#454545" : "#F5F5F5",
+                children: [
+                    {
+                        type: "Container",
+                        padding: 4,
+                        children: [
+                            {
+                                type: "Text",
+                                fontColor: isDarkMode ? "#DEDEDE" : "#6B707B",
+                                content: "Repeater"
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                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

@@ -11,6 +11,7 @@ export interface RepeaterProps<Style> {
     style: Style[];
     datasource: ListValue;
     content: ListWidgetValue;
+    contentEmpty?: ReactNode;
 }
 
 export interface RepeaterPreviewProps {
@@ -26,4 +27,5 @@ export interface RepeaterPreviewProps {
     translate: (text: string) => string;
     datasource: {} | { caption: string } | { type: string } | null;
     content: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> };
+    contentEmpty: { widgetCount: number; renderer: ComponentType<{ caption?: string }> };
 }