mxw-public/customgroupbox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added StartCollapse functionality to widget

Browse Source
This commit is contained in:
jowanwondergemincentro
2021-02-11 16:39:43 +01:00
parent 9e1b396192
commit 560283e5f6
9 changed files with 84 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
dist/1.0.0/incentro.CustomGroupbox.mpk vendored
View File

Binary file not shown.

5
dist/tmp/widgets/CustomGroupbox.xml vendored
View File

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

102
dist/tmp/widgets/incentro/customgroupbox/CustomGroupbox.js vendored
View File

@@ -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_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__ = __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__); /* 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 = { const defaultStyle = {
headerContainer: {}, headerContainer: {},
label: {}, label: {},
innerContainer: {}, innerContainer: {},
selectedContainer: {}, selectedContainer: {},
divider: { divider: {
backgroundColor: '#A2A2A2', backgroundColor: '#A2A2A2',
height: 1, height: 1,
}, },
icon: { icon: {
alignSelf: 'flex-end' alignSelf: 'flex-end'
}, },
groupboxParent: {} groupboxParent: {}
}; };
const defaultCollapseIconGlyph = "glyphicon-minus"; const defaultCollapseIconGlyph = "glyphicon-minus";
const defaultExpandIconGlyph = "glyphicon-plus"; const defaultExpandIconGlyph = "glyphicon-plus";
class CustomGroupbox extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] { class CustomGroupbox extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
constructor(props) { constructor(props) {
super(props); super(props);
this.styles = Object(_mendix_pluggable_widgets_tools__WEBPACK_IMPORTED_MODULE_3__["mergeNativeStyles"])(defaultStyle, this.props.style); this.styles = Object(_mendix_pluggable_widgets_tools__WEBPACK_IMPORTED_MODULE_3__["mergeNativeStyles"])(defaultStyle, this.props.style);
this.renderIcon = (glyph, toBeRenderedIcon) => { this.renderIcon = (glyph, toBeRenderedIcon) => {
const nativeIcon = toBeRenderedIcon && toBeRenderedIcon.status === "available" /* Available */ const nativeIcon = toBeRenderedIcon && toBeRenderedIcon.status === "available" /* Available */
? toBeRenderedIcon.value ? toBeRenderedIcon.value
: { type: "glyph", iconClass: glyph }; : { type: "glyph", iconClass: glyph };
return Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(mendix_components_native_Icon__WEBPACK_IMPORTED_MODULE_2__["Icon"], { icon: nativeIcon }); 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.toggleContent = this.toggleContent.bind(this);
this.state = { showContent: false, }; this.state = { showContent: (this.props.startCollapsed ? false : true), };
} }
render() { render() {
const icons = { const icons = {
collapseIcon: this.renderIcon(defaultCollapseIconGlyph, this.props.collapseIcon), collapseIcon: this.renderIcon(defaultCollapseIconGlyph, this.props.collapseIcon),
expandIcon: this.renderIcon(defaultExpandIconGlyph, this.props.expandIcon), 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 }, 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__["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"], { 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"], 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.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 }, 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.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 })))); this.props.showDivider && Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["View"], { style: this.styles.divider }))));
} }
toggleContent() { toggleContent() {
this.setState({ showContent: !this.state.showContent }); this.setState({ showContent: !this.state.showContent });
} }
} }
/***/ }), /***/ }),

2
dist/tmp/widgets/incentro/customgroupbox/CustomGroupbox.js.map vendored
View File

File diff suppressed because one or more lines are too long

19
package-lock.json generated
View File

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

4
package.json
View File

@@ -28,5 +28,7 @@
"@types/react": "~16.9.0", "@types/react": "~16.9.0",
"@types/react-native": "~0.61.23" "@types/react-native": "~0.61.23"
}, },
"dependencies": {} "dependencies": {
"react-native-camera": "^3.42.1"
}
} }

11
src/CustomGroupbox.tsx
View File

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

5
src/CustomGroupbox.xml
View File

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

2
typings/CustomGroupboxProps.d.ts vendored
View File

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