cluedin-widget
Version:
This is the project for creating and managing widgets in CluedIn.
65 lines (49 loc) • 1.8 kB
JSX
import React, { Component } from 'react';
import iso from '../../../iso';
export default class OverlayPanel extends Component {
constructor( props ) {
super( props );
this.resizeHeight = this.resizeHeight.bind( this );
this.resizeHeightWithDebounce = iso.func.debounce( this.resizeHeight.bind( this ), 100 );
}
close() {
const { onClose } = this.props;
onClose();
}
render() {
const { show } = this.props;
let style = {
display: show ? 'block' : 'none'
};
return (<div style={style} className="cluedIn_overlayPanel">
<div ref="overlayContent" className="cluedIn_overlayPanel_content">
<a onClick={this.close.bind(this)} className="cluedIn_overlayPanel_close">
<i className="fa fa-times"></i>
</a>
{this.props.children}
</div>
</div>);
}
resizeWithBodyFirst() {
let $body = $( 'body' ); //we should change that
let $elem = $( this.refs.overlayContent );
$elem.height( ( $body.height() - 50 ) );
}
resizeHeight() {
let $app = $( '.app' ); //we should change that
let $elem = $( this.refs.overlayContent );
$elem.height( ( $app.height() - 50 ) );
}
componentDidMount() {
if( !this.refs.overlayContent ) {
return;
}
this.resizeWithBodyFirst();
$( window ).bind( 'resize', this.resizeHeightWithDebounce );
$( window ).bind( 'scroll', this.resizeHeightWithDebounce );
}
componentWillUnmount() {
$( window ).unbind( 'resize', this.resizeHeightWithDebounce );
$( window ).unbind( 'scroll', this.resizeHeightWithDebounce );
}
};