Compare commits

..

No commits in common. "master" and "1.0.0" have entirely different histories.

10 changed files with 66 additions and 84 deletions

View file

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

Binary file not shown.

View file

@ -28,11 +28,6 @@
<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>

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

File diff suppressed because one or more lines are too long

19
package-lock.json generated
View file

@ -11237,7 +11237,8 @@
"js-tokens": {
"version": "4.0.0",
"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": {
"version": "3.14.0",
@ -11996,6 +11997,7 @@
"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"
}
@ -14362,7 +14364,8 @@
"object-assign": {
"version": "4.1.1",
"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": {
"version": "0.1.0",
@ -15406,6 +15409,7 @@
"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",
@ -15714,7 +15718,8 @@
"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=="
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
"dev": true
},
"react-lifecycles-compat": {
"version": "3.0.4",
@ -16193,14 +16198,6 @@
}
}
},
"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",

View file

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

View file

@ -43,18 +43,17 @@ export class CustomGroupbox extends Component<CustomGroupboxProps<CustomStyle>,
constructor(props: CustomGroupboxProps<CustomStyle>){
super(props)
this.toggleContent = this.toggleContent.bind(this)
this.state = { showContent: (this.props.startCollapsed ? false : true ), }
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.styles.groupboxParent}>
<TouchableOpacity onPress={this.toggleContent}>
@ -69,7 +68,7 @@ export class CustomGroupbox extends Component<CustomGroupboxProps<CustomStyle>,
{this.props.showDivider && <View style={this.styles.divider}></View>}
</View>
</View>
);
}
@ -85,4 +84,4 @@ export class CustomGroupbox extends Component<CustomGroupboxProps<CustomStyle>,
return <Icon icon={nativeIcon} />;
};
}
}

View file

@ -28,11 +28,6 @@
<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>

View file

@ -14,7 +14,6 @@ export interface CustomGroupboxProps<Style> {
showDivider: boolean;
expandIcon?: DynamicValue<NativeIcon>;
collapseIcon?: DynamicValue<NativeIcon>;
startCollapsed: boolean;
}
export interface CustomGroupboxPreviewProps {
@ -25,5 +24,4 @@ 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;
}