Update README.md

README.md

@@ -25,3 +25,4 @@ https://github.com/IncentroBA/customgroupbox/issues
 ## Development and contribution
 - Rob Duits
 - [Bart Onstee](https://github.com/bartonstee)
+- Jowan Wondergem

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

@@ -271,7 +271,7 @@ class CustomGroupbox extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
             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, };
+        this.state = { showContent: (this.props.startCollapsed ? false : true), };
     }
     render() {
         const icons = {

package-lock.json

@@ -11237,8 +11237,7 @@
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "dev": true
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
     },
     "js-yaml": {
       "version": "3.14.0",
@@ -11997,7 +11996,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
       "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "dev": true,
       "requires": {
         "js-tokens": "^3.0.0 || ^4.0.0"
       }
@@ -14364,8 +14362,7 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
-      "dev": true
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
     },
     "object-copy": {
       "version": "0.1.0",
@@ -15409,7 +15406,6 @@
       "version": "15.7.2",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
       "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
-      "dev": true,
       "requires": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -15718,8 +15714,7 @@
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "react-lifecycles-compat": {
       "version": "3.0.4",
@@ -16198,6 +16193,14 @@
         }
       }
     },
+    "react-native-camera": {
+      "version": "3.42.1",
+      "resolved": "https://registry.npmjs.org/react-native-camera/-/react-native-camera-3.42.1.tgz",
+      "integrity": "sha512-HqKsjBoxDaAuzjRNB56xCi0V78/6AqNjbVif8Icboz4Ybez00LFZWfMGJFClCbReh3ZNhFM8kXDRdjWuaHtR1Q==",
+      "requires": {
+        "prop-types": "^15.6.2"
+      }
+    },
     "react-refresh": {
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.4.3.tgz",

package.json

@@ -28,5 +28,6 @@
     "@types/react": "~16.9.0",
     "@types/react-native": "~0.61.23"
   },
-  "dependencies": {}
+  "dependencies": {
+  }
 }

src/CustomGroupbox.tsx

@@ -43,7 +43,7 @@ export class CustomGroupbox extends Component<CustomGroupboxProps<CustomStyle>,
   constructor(props: CustomGroupboxProps<CustomStyle>){
     super(props)
     this.toggleContent = this.toggleContent.bind(this)
-    this.state = { showContent: false, }
+    this.state = { showContent: (this.props.startCollapsed ? false : true ), }
   }
 
   private readonly styles = mergeNativeStyles(defaultStyle, this.props.style);
@@ -54,6 +54,7 @@ export class CustomGroupbox extends Component<CustomGroupboxProps<CustomStyle>,
       expandIcon: this.renderIcon(defaultExpandIconGlyph, this.props.expandIcon),
     };
 
+
     return (
       <View style={this.styles.groupboxParent}>
         <TouchableOpacity onPress={this.toggleContent}>

src/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>

typings/CustomGroupboxProps.d.ts

@@ -14,6 +14,7 @@ export interface CustomGroupboxProps<Style> {
     showDivider: boolean;
     expandIcon?: DynamicValue<NativeIcon>;
     collapseIcon?: DynamicValue<NativeIcon>;
+    startCollapsed: boolean;
 }
 
 export interface CustomGroupboxPreviewProps {
@@ -24,4 +25,5 @@ export interface CustomGroupboxPreviewProps {
     showDivider: boolean;
     expandIcon: { type: "glyph"; iconClass: string; } | { type: "image"; imageUrl: string; } | null;
     collapseIcon: { type: "glyph"; iconClass: string; } | { type: "image"; imageUrl: string; } | null;
+    startCollapsed: boolean;
 }