cluedin-widget/core/components/generics/overlayPanel.jsx

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

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 );
    }
};