Initial commit.

.eslintrc.js

@@ -0,0 +1,5 @@
+const base = require("@mendix/pluggable-widgets-tools/configs/eslint.ts.base.json");
+
+module.exports = {
+    ...base
+};

.gitattributes

@@ -0,0 +1,15 @@
+* text=auto
+*.ts text eol=lf
+*.tsx text eol=lf
+*.js text eol=lf
+*.jsx text eol=lf
+*.css text eol=lf
+*.scss text eol=lf
+*.json text eol=lf
+*.xml text eol=lf
+*.md text eol=lf
+*.gitattributes eol=lf
+*.gitignore eol=lf
+*.png binary
+*.jpg binary
+*.gif binary

.gitignore

@@ -0,0 +1,5 @@
+dist/
+node_modules/
+../
+*.log
+.env

.prettierignore

@@ -0,0 +1 @@
+../

LICENSE

@@ -0,0 +1,15 @@
+The Apache License v2.0
+
+Copyright 2020 Incentro Business Acceleration B.V.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

README.md

@@ -0,0 +1,17 @@
+## CustomGroupbox
+[Groupbox with content in the header]
+
+## Features
+[feature highlights]
+
+## Usage
+[step by step instructions]
+
+## Demo project
+[link to sandbox]
+
+## Issues, suggestions and feature requests
+[link to GitHub issues]
+
+## Development and contribution
+[specify contribute]

package.json

@@ -0,0 +1,32 @@
+{
+  "name": "customgroupbox",
+  "widgetName": "CustomGroupbox",
+  "version": "1.0.0",
+  "description": "Groupbox with content in the header",
+  "copyright": "2020 Incentro Business Acceleration B.V.",
+  "author": "Bart Onstee",
+  "config": {
+    "projectPath": "../..//"
+  },
+  "packagePath": "incentro",
+  "scripts": {
+    "start": "npm run dev",
+    "build": "pluggable-widgets-tools build:native",
+    "dev": "pluggable-widgets-tools start:native",
+    "lint": "pluggable-widgets-tools lint",
+    "lint:fix": "pluggable-widgets-tools lint:fix",
+    "prerelease": "npm run lint",
+    "release": "pluggable-widgets-tools release:native"
+  },
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/Bart Onstee/customgroupbox/issues"
+  },
+  "devDependencies": {
+    "@mendix/pluggable-widgets-tools": "^8.12.0",
+    "@types/big.js": "^4.0.5",
+    "@types/react": "~16.9.0",
+    "@types/react-native": "~0.61.23"
+  },
+  "dependencies": {}
+}

prettier.config.js

@@ -0,0 +1,5 @@
+const base = require("@mendix/pluggable-widgets-tools/configs/prettier.base.json");
+
+module.exports = {
+    ...base
+};

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>

tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./node_modules/@mendix/pluggable-widgets-tools/configs/tsconfig.base.json",
+  "compileerOptions": {
+    "jsx": "react"
+  }
+}

typings/CustomGroupboxProps.d.ts

@@ -0,0 +1,27 @@
+/**
+ * This file was generated from CustomGroupbox.xml
+ * WARNING: All changes made to this file will be overwritten
+ * @author Mendix UI Content Team
+ */
+import { ComponentType, ReactNode } from "react";
+import { DynamicValue, NativeIcon } from "mendix";
+
+export interface CustomGroupboxProps<Style> {
+    name: string;
+    style: Style[];
+    header: ReactNode;
+    content?: ReactNode;
+    showDivider: boolean;
+    expandIcon?: DynamicValue<NativeIcon>;
+    collapseIcon?: DynamicValue<NativeIcon>;
+}
+
+export interface CustomGroupboxPreviewProps {
+    class: string;
+    style: string;
+    header: { widgetCount: number; renderer: ComponentType };
+    content: { widgetCount: number; renderer: ComponentType };
+    showDivider: boolean;
+    expandIcon: { type: "glyph"; iconClass: string; } | { type: "image"; imageUrl: string; } | null;
+    collapseIcon: { type: "glyph"; iconClass: string; } | { type: "image"; imageUrl: string; } | null;
+}