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

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

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

File diff suppressed because one or more lines are too long