From 20a1ab2feb0b188729c330fc038c3e876fc2668c Mon Sep 17 00:00:00 2001 From: Andries Smit Date: Tue, 7 Feb 2023 14:42:58 +0100 Subject: [PATCH 1/3] feat(repeater-native): add empty content --- .../repeater-native/src/Repeater.editorConfig.ts | 11 +++++++++++ .../pluggableWidgets/repeater-native/src/Repeater.tsx | 11 ++++------- .../pluggableWidgets/repeater-native/src/Repeater.xml | 4 ++++ .../repeater-native/typings/RepeaterProps.d.ts | 4 +++- 4 files changed, 22 insertions(+), 8 deletions(-) diff --git a/packages/pluggableWidgets/repeater-native/src/Repeater.editorConfig.ts b/packages/pluggableWidgets/repeater-native/src/Repeater.editorConfig.ts index b954d5aad..71d988082 100644 --- a/packages/pluggableWidgets/repeater-native/src/Repeater.editorConfig.ts +++ b/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 + } + ] } ] }; 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 306137a72..1dedf5df6 100644 --- a/packages/pluggableWidgets/repeater-native/typings/RepeaterProps.d.ts +++ b/packages/pluggableWidgets/repeater-native/typings/RepeaterProps.d.ts @@ -3,7 +3,7 @@ * WARNING: All changes made to this file will be overwritten * @author Mendix Widgets Framework Team */ -import { ComponentType, CSSProperties } from "react"; +import { ComponentType, CSSProperties, ReactNode } from "react"; import { ListValue, ListWidgetValue } from "mendix"; export interface RepeaterProps