Initial commit.

src/CustomGroupbox.tsx

@@ -0,0 +1,80 @@
+import { Component, ReactNode, createElement } from "react";
+import { TextStyle, ViewStyle, View, TouchableOpacity } from "react-native";
+import { DynamicValue, NativeIcon, ValueStatus } from "mendix";
+import { Icon } from 'mendix/components/native/Icon';
+
+import { Style, mergeNativeStyles } from '@mendix/pluggable-widgets-tools';
+
+import { CustomGroupboxProps } from '../typings/CustomGroupboxProps';
+
+export interface CustomStyle extends Style {
+  container: ViewStyle;
+  label: TextStyle;
+  innerContainer: ViewStyle;
+  selectedContainer: ViewStyle;
+  divider: ViewStyle;
+  icon: ViewStyle;
+}
+
+const defaultStyle: CustomStyle = {
+  container: {},
+  label: {},
+  innerContainer: {},
+  selectedContainer: {},
+  divider: {
+    backgroundColor: '#A2A2A2',
+    height: 1,
+  },
+  icon: {
+    alignSelf: 'flex-end'
+  }
+};
+
+interface State {
+  showContent: boolean;
+}
+
+const defaultCollapseIconGlyph = "glyphicon-minus";
+const defaultExpandIconGlyph = "glyphicon-plus";
+
+export class CustomGroupbox extends Component<CustomGroupboxProps<CustomStyle>, State> {
+  constructor(props: CustomGroupboxProps<CustomStyle>){
+    super(props)
+    this.toggleContent = this.toggleContent.bind(this)
+    this.state = { showContent: false, }
+  }
+
+  private readonly styles = mergeNativeStyles(defaultStyle, this.props.style);
+    
+  render(): ReactNode {
+    const icons = {
+      collapseIcon: this.renderIcon(defaultCollapseIconGlyph, this.props.collapseIcon),
+      expandIcon: this.renderIcon(defaultExpandIconGlyph, this.props.expandIcon),
+    };
+      
+    return (
+      <View style={this.state.showContent ? this.styles.selectedContainer : this.styles.container}>
+        <View style={this.styles.icon}>{this.state.showContent ? icons.collapseIcon : icons.expandIcon}</View>
+
+        <TouchableOpacity onPress={this.toggleContent}>{this.props.header}</TouchableOpacity>
+        
+        {this.state.showContent && <View style={this.styles.innerContainer}>{this.props.content}</View>}
+
+        {this.props.showDivider && <View style={this.styles.divider}></View>}
+      </View>
+    );
+  }
+
+  toggleContent() {
+    this.setState({showContent: !this.state.showContent})
+  }
+
+  private renderIcon = (glyph: string, toBeRenderedIcon?: DynamicValue<NativeIcon>) => {
+    const nativeIcon: NativeIcon =
+      toBeRenderedIcon && toBeRenderedIcon.status === ValueStatus.Available
+        ? toBeRenderedIcon.value
+        : { type: "glyph", iconClass: glyph };
+
+    return <Icon icon={nativeIcon} />;
+  };
+}

src/CustomGroupbox.xml

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="utf-8"?>
+<widget id="incentro.customgroupbox.CustomGroupbox" pluginWidget="true" needsEntityContext="true" offlineCapable="true"
+        supportedPlatform="Native"
+        xmlns="http://www.mendix.com/widget/1.0/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+        xsi:schemaLocation="http://www.mendix.com/widget/1.0/ ../node_modules/mendix/custom_widget.xsd">
+    <name>Custom Groupbox</name>
+    <description>Groupbox with content in the header</description>
+    <icon/>
+    <properties>
+        <propertyGroup caption="General">
+            <property key="header" type="widgets" required="true">
+	            <caption>Header</caption>
+	            <description>Content of the header</description>
+            </property>
+            <property key="content" type="widgets" required="false">
+	            <caption>Content</caption>
+	            <description>Content of the groupbox</description>
+            </property>
+            <property key="showDivider" type="boolean" defaultValue="false">
+                <caption>Divider</caption>
+                <description>Show a simple divider between items.</description>
+            </property>
+            <property key="expandIcon" type="icon" required="false">
+                <caption>Expand icon</caption>
+                <description>Icon used to indicate that the group box can be expanded.</description>
+            </property>
+            <property key="collapseIcon" type="icon" required="false">
+                <caption>Collapse icon</caption>
+                <description>Icon used to indicate that the group box can be collapsed.</description>
+            </property>
+        </propertyGroup>
+    </properties>
+</widget>

src/package.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<package xmlns="http://www.mendix.com/package/1.0/">
+    <clientModule name="CustomGroupbox" version="1.0.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+        <widgetFiles>
+            <widgetFile path="CustomGroupbox.xml"/>
+        </widgetFiles>
+        <files>
+            <file path="incentro/customgroupbox"/>
+        </files>
+    </clientModule>
+</package>