Added StartCollapse functionality to widget

dist/tmp/widgets/CustomGroupbox.xml

@@ -28,6 +28,11 @@
                 <caption>Collapse icon</caption>
                 <description>Icon used to indicate that the group box can be collapsed.</description>
             </property>
+            <property key="startCollapsed" type="boolean" defaultValue="true">
+                <caption>Start collapsed</caption>
+                <description>Start collapsed when widget is loaded</description>
+            </property>
+
         </propertyGroup>
     </properties>
 </widget>

dist/tmp/widgets/incentro/customgroupbox/CustomGroupbox.js

@@ -240,57 +240,57 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var mendix_components_native_Icon__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(mendix_components_native_Icon__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _mendix_pluggable_widgets_tools__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @mendix/pluggable-widgets-tools */ "./node_modules/@mendix/pluggable-widgets-tools/dist/index.js");
 /* harmony import */ var _mendix_pluggable_widgets_tools__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_mendix_pluggable_widgets_tools__WEBPACK_IMPORTED_MODULE_3__);
-
-
-
-
-const defaultStyle = {
-    headerContainer: {},
-    label: {},
-    innerContainer: {},
-    selectedContainer: {},
-    divider: {
-        backgroundColor: '#A2A2A2',
-        height: 1,
-    },
-    icon: {
-        alignSelf: 'flex-end'
-    },
-    groupboxParent: {}
-};
-const defaultCollapseIconGlyph = "glyphicon-minus";
-const defaultExpandIconGlyph = "glyphicon-plus";
-class CustomGroupbox extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
-    constructor(props) {
-        super(props);
-        this.styles = Object(_mendix_pluggable_widgets_tools__WEBPACK_IMPORTED_MODULE_3__["mergeNativeStyles"])(defaultStyle, this.props.style);
-        this.renderIcon = (glyph, toBeRenderedIcon) => {
-            const nativeIcon = toBeRenderedIcon && toBeRenderedIcon.status === "available" /* Available */
-                ? toBeRenderedIcon.value
-                : { type: "glyph", iconClass: glyph };
-            return Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(mendix_components_native_Icon__WEBPACK_IMPORTED_MODULE_2__["Icon"], { icon: nativeIcon });
-        };
-        this.toggleContent = this.toggleContent.bind(this);
-        this.state = { showContent: false, };
-    }
-    render() {
-        const icons = {
-            collapseIcon: this.renderIcon(defaultCollapseIconGlyph, this.props.collapseIcon),
-            expandIcon: this.renderIcon(defaultExpandIconGlyph, this.props.expandIcon),
-        };
-        return (Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["View"], { style: this.styles.groupboxParent },
-            Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["TouchableOpacity"], { onPress: this.toggleContent },
-                Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["View"], { style: this.styles.headerContainer },
-                    Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["View"], null, this.props.header),
-                    Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["View"], { style: this.styles.icon }, this.state.showContent ? icons.collapseIcon : icons.expandIcon))),
-            Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["View"], { style: this.state.showContent ? this.styles.selectedContainer : null },
-                this.state.showContent && Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["View"], { style: this.styles.innerContainer }, this.props.content),
-                this.props.showDivider && Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["View"], { style: this.styles.divider }))));
-    }
-    toggleContent() {
-        this.setState({ showContent: !this.state.showContent });
-    }
-}
+
+
+
+
+const defaultStyle = {
+    headerContainer: {},
+    label: {},
+    innerContainer: {},
+    selectedContainer: {},
+    divider: {
+        backgroundColor: '#A2A2A2',
+        height: 1,
+    },
+    icon: {
+        alignSelf: 'flex-end'
+    },
+    groupboxParent: {}
+};
+const defaultCollapseIconGlyph = "glyphicon-minus";
+const defaultExpandIconGlyph = "glyphicon-plus";
+class CustomGroupbox extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
+    constructor(props) {
+        super(props);
+        this.styles = Object(_mendix_pluggable_widgets_tools__WEBPACK_IMPORTED_MODULE_3__["mergeNativeStyles"])(defaultStyle, this.props.style);
+        this.renderIcon = (glyph, toBeRenderedIcon) => {
+            const nativeIcon = toBeRenderedIcon && toBeRenderedIcon.status === "available" /* Available */
+                ? toBeRenderedIcon.value
+                : { type: "glyph", iconClass: glyph };
+            return Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(mendix_components_native_Icon__WEBPACK_IMPORTED_MODULE_2__["Icon"], { icon: nativeIcon });
+        };
+        this.toggleContent = this.toggleContent.bind(this);
+        this.state = { showContent: (this.props.startCollapsed ? false : true), };
+    }
+    render() {
+        const icons = {
+            collapseIcon: this.renderIcon(defaultCollapseIconGlyph, this.props.collapseIcon),
+            expandIcon: this.renderIcon(defaultExpandIconGlyph, this.props.expandIcon),
+        };
+        return (Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["View"], { style: this.styles.groupboxParent },
+            Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["TouchableOpacity"], { onPress: this.toggleContent },
+                Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["View"], { style: this.styles.headerContainer },
+                    Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["View"], null, this.props.header),
+                    Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["View"], { style: this.styles.icon }, this.state.showContent ? icons.collapseIcon : icons.expandIcon))),
+            Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["View"], { style: this.state.showContent ? this.styles.selectedContainer : null },
+                this.state.showContent && Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["View"], { style: this.styles.innerContainer }, this.props.content),
+                this.props.showDivider && Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["View"], { style: this.styles.divider }))));
+    }
+    toggleContent() {
+        this.setState({ showContent: !this.state.showContent });
+    }
+}
 
 
 /***/ }),