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 });
+    }
+}
 
 
 /***/ }),

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,7 @@
     "@types/react": "~16.9.0",
     "@types/react-native": "~0.61.23"
   },
-  "dependencies": {}
+  "dependencies": {
+    "react-native-camera": "^3.42.1"
+  }
 }

src/CustomGroupbox.tsx

@@ -43,17 +43,18 @@ 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);
-    
+
   render(): ReactNode {
     const icons = {
       collapseIcon: this.renderIcon(defaultCollapseIconGlyph, this.props.collapseIcon),
       expandIcon: this.renderIcon(defaultExpandIconGlyph, this.props.expandIcon),
     };
-      
+
+
     return (
       <View style={this.styles.groupboxParent}>
         <TouchableOpacity onPress={this.toggleContent}>
@@ -68,7 +69,7 @@ export class CustomGroupbox extends Component<CustomGroupboxProps<CustomStyle>,
         {this.props.showDivider && <View style={this.styles.divider}></View>}
       </View>
       </View>
-      
+
     );
   }
 
@@ -84,4 +85,4 @@ export class CustomGroupbox extends Component<CustomGroupboxProps<CustomStyle>,
 
     return <Icon icon={nativeIcon} />;
   };
-}
+}

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;
 }