cluedin-widget/core/components/widget.jsx

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

import React, { Component } from 'react';
var Ps = require( 'perfect-scrollbar' );
import Loading from './loading.jsx';

export default class Widget extends Component {
    render() {
        let { title, minHeight, loading, noScroll, loadingHeight } = this.props;
        let widgetClassName    = "cluedIn_widget";
        let widgetContentStyle = {};
        let loadingHtml;
        if ( loading ) {
            minHeight   = loadingHeight || '300px';
            loadingHtml = (<Loading></Loading>);
        }

        var widgetStyle = {
            minHeight: minHeight ? minHeight : 'auto'
        };

        if ( noScroll ) {
            widgetStyle.overflow        = 'hidden';
            widgetContentStyle.overflow = 'hidden';
        }

        if ( title ) {
            return (
                <div style={widgetStyle} className={widgetClassName}>
                    {loadingHtml}
                    <div className=" cluedIn_widget_title">
                        {title}
                    </div>
                    <div ref="widgetContent" style={widgetContentStyle} className=" cluedIn_widget_content">
                        {this.props.children}
                    </div>
                </div>
            )
        } else {
            return (<div ref="widgetContent" style={widgetStyle} className=" cluedIn_widget">
                {loadingHtml}
                {this.props.children}
            </div>)
        }
    }

    componentDidUpdate() {
        let { loading, noScroll } = this.props;

        if ( loading ) {
            return;
        }

        if ( !noScroll && this.refs.widgetContent !== null ) {
            Ps.initialize( this.refs.widgetContent, {
                scrollYMarginOffset: 20,
                suppressScrollX: true
            } );
        } else {
            Ps.destroy( this.refs.widgetContent );
        }

        document.addEventListener( 'ps-y-reach-end', function() {
            console.log( 'lalallaal!' );
        } );
    }

    componentWillUnmount() {
        let { noScroll } = this.props;

        if ( !noScroll && this.refs.widgetContent !== null ) {
            Ps.destroy( this.refs.widgetContent );
        }
    }
}

Widget.propTypes = {
    title: React.PropTypes.string
};