From b88d65e835867b31b5cd5005637373a0e2fc6ae6 Mon Sep 17 00:00:00 2001 From: Andries Smit Date: Tue, 7 Feb 2023 14:42:58 +0100 Subject: [PATCH 1/2] feat(repeater-native): add empty content --- .../src/Repeater.editorConfig.ts | 50 +++++++++++++++---- .../repeater-native/src/Repeater.tsx | 11 ++-- .../repeater-native/src/Repeater.xml | 4 ++ .../typings/RepeaterProps.d.ts | 2 + 4 files changed, 50 insertions(+), 17 deletions(-) diff --git a/packages/pluggableWidgets/repeater-native/src/Repeater.editorConfig.ts b/packages/pluggableWidgets/repeater-native/src/Repeater.editorConfig.ts index 1fdda93cc..71d988082 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: "Content when Empty", + property: values.contentEmpty + } + ] + } + ] + }; } diff --git a/packages/pluggableWidgets/repeater-native/src/Repeater.tsx b/packages/pluggableWidgets/repeater-native/src/Repeater.tsx index 7842ec535..c43869674 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 contentEmpty = props.datasource.items.length === 0 ? props.contentEmpty : null; return ( - {props.datasource.items?.map((item, index) => ( + {props.datasource.items.map((item, index) => ( {props.content.get(item)} ))} + {contentEmpty} ); } diff --git a/packages/pluggableWidgets/repeater-native/src/Repeater.xml b/packages/pluggableWidgets/repeater-native/src/Repeater.xml index 79c786cde..9ff2ebcc8 100644 --- a/packages/pluggableWidgets/repeater-native/src/Repeater.xml +++ b/packages/pluggableWidgets/repeater-native/src/Repeater.xml @@ -14,6 +14,10 @@ Content + + + Content empty + diff --git a/packages/pluggableWidgets/repeater-native/typings/RepeaterProps.d.ts b/packages/pluggableWidgets/repeater-native/typings/RepeaterProps.d.ts index 8e0ac81f8..d164ae2a2 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