121 lines
4.8 KiB
JavaScript
121 lines
4.8 KiB
JavaScript
import React, {Component} from 'react';
|
|
import {Container, Col, Row, Popover, PopoverHeader, PopoverBody} from 'reactstrap';
|
|
|
|
let boxCount = 0;
|
|
|
|
class WiaasBox extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
if(!this.props.id){
|
|
boxCount++;
|
|
this.idBox = 'wiaas-box-' + boxCount;
|
|
}else{
|
|
this.idBox = this.props.id;
|
|
}
|
|
|
|
this.className = this.props.className ? 'wiaas-box ' + this.props.className : 'wiaas-box';
|
|
|
|
this.toggleBoxVisibility = this.toggleBoxVisibility.bind(this);
|
|
this.togglePopover = this.togglePopover.bind(this);
|
|
this.getVisibilityIcon = this.getVisibilityIcon.bind(this);
|
|
this.getExtraHeaderContentSize = this.getExtraHeaderContentSize.bind(this);
|
|
this.getMainTitleContentSize = this.getMainTitleContentSize.bind(this);
|
|
this.state = {
|
|
isContentVisible: typeof this.props.isContentVisible !== 'undefined' ? this.props.isContentVisible : true,
|
|
visibilityIcon: 'fa fa-minus',
|
|
popoverOpen: false
|
|
};
|
|
}
|
|
|
|
toggleBoxVisibility() {
|
|
this.setState({
|
|
isContentVisible: !this.state.isContentVisible,
|
|
});
|
|
}
|
|
|
|
togglePopover(){
|
|
this.setState({
|
|
popoverOpen: !this.state.popoverOpen
|
|
});
|
|
}
|
|
|
|
getVisibilityIcon() {
|
|
return this.state.isContentVisible ? 'fa fa-minus' : 'fa fa-plus';
|
|
}
|
|
|
|
getMainTitleContentSize() {
|
|
return this.props.customHeader ? 4 : 10;
|
|
}
|
|
|
|
getExtraHeaderContentSize() {
|
|
if(this.props.mainTitle) {
|
|
return this.props.customHeader ? 7 : 1;
|
|
}
|
|
|
|
return 12;
|
|
}
|
|
|
|
render() {
|
|
const {mainTitle, infoPopover} = this.props;
|
|
const CustomHeader = this.props.customHeader;
|
|
const customHeaderParams = this.props.customHeaderParams || {};
|
|
|
|
return (
|
|
<div className="wiaas-box-container">
|
|
<div id={this.idBox} className={this.className} >
|
|
{
|
|
(mainTitle || CustomHeader) &&
|
|
<div className="wiaas-box-header">
|
|
<Container fluid={true}>
|
|
<Row>
|
|
{
|
|
mainTitle &&
|
|
<Col lg={this.getMainTitleContentSize()} xs="12">
|
|
<div className="wiaas-main-title">{mainTitle}</div>
|
|
<div className="wiaas-divider"></div>
|
|
</Col>
|
|
}
|
|
<Col lg={this.getExtraHeaderContentSize()} md="12" xs="12">
|
|
{
|
|
CustomHeader && <CustomHeader params={customHeaderParams}/>
|
|
}
|
|
</Col>
|
|
{
|
|
this.props.children &&
|
|
<div className="wiaas-box-visibility-icon wiaas-icon" onClick={this.toggleBoxVisibility}>
|
|
<i className={this.getVisibilityIcon()} aria-hidden="true"></i>
|
|
</div>
|
|
}
|
|
{
|
|
infoPopover &&
|
|
<div id={'popover-' + this.idBox} onClick={this.togglePopover} className="wiaas-info-icon wiaas-icon">
|
|
<i className="fa fa-question" aria-hidden="true"></i>
|
|
<Popover placement="bottom"
|
|
container={this.idBox}
|
|
isOpen={this.state.popoverOpen}
|
|
target={'popover-' + this.idBox}
|
|
toggle={this.togglePopover}>
|
|
<PopoverHeader>{infoPopover.title}</PopoverHeader>
|
|
<PopoverBody dangerouslySetInnerHTML={{__html: infoPopover.message}}></PopoverBody>
|
|
</Popover>
|
|
</div>
|
|
}
|
|
</Row>
|
|
</Container>
|
|
</div>
|
|
}
|
|
{
|
|
this.state.isContentVisible &&
|
|
<div className="wiaas-box-content">
|
|
{this.props.children}
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default WiaasBox;
|