UNPKG

cluedin-widget

Version:

This is the project for creating and managing widgets in CluedIn.

65 lines (49 loc) 1.8 kB
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 ); } };