diff --git a/packages/pluggableWidgets/repeater-native/src/Repeater.editorConfig.ts b/packages/pluggableWidgets/repeater-native/src/Repeater.editorConfig.ts index 1fdda93cc..9f80d4ddd 100644 --- a/packages/pluggableWidgets/repeater-native/src/Repeater.editorConfig.ts +++ b/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: "No items placeholder: Place widgets here", + property: values.emptyPlaceholder + } + ] + } + ] + }; } diff --git a/packages/pluggableWidgets/repeater-native/src/Repeater.tsx b/packages/pluggableWidgets/repeater-native/src/Repeater.tsx index 7842ec535..72aa01b21 100644 --- a/packages/pluggableWidgets/repeater-native/src/Repeater.tsx +++ b/packages/pluggableWidgets/repeater-native/src/Repeater.tsx @@ -7,19 +7,16 @@ import { mergeNativeStyles } from "@mendix/pluggable-widgets-tools"; export function Repeater(props: RepeaterProps): 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 ; } - + const emptyPlaceholder = props.datasource.items.length === 0 ? props.emptyPlaceholder : null; return ( - {props.datasource.items?.map((item, index) => ( + {props.datasource.items.map((item, index) => ( {props.content.get(item)} ))} + {emptyPlaceholder} ); } diff --git a/packages/pluggableWidgets/repeater-native/src/Repeater.xml b/packages/pluggableWidgets/repeater-native/src/Repeater.xml index 79c786cde..e10f896f6 100644 --- a/packages/pluggableWidgets/repeater-native/src/Repeater.xml +++ b/packages/pluggableWidgets/repeater-native/src/Repeater.xml @@ -14,6 +14,10 @@ Content + + + Empty placeholder + diff --git a/packages/pluggableWidgets/repeater-native/typings/RepeaterProps.d.ts b/packages/pluggableWidgets/repeater-native/typings/RepeaterProps.d.ts index 8e0ac81f8..57e8a7a96 100644 --- a/packages/pluggableWidgets/repeater-native/typings/RepeaterProps.d.ts +++ b/packages/pluggableWidgets/repeater-native/typings/RepeaterProps.d.ts @@ -11,6 +11,7 @@ export interface RepeaterProps