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

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

import React, { Component } from 'react'
import Loading from './loading.jsx'
import { WidgetMenu, WidgetAction } from './widgetMenu.jsx'
import MiniLoading from './MiniLoading.jsx'
import Ps from  'perfect-scrollbar'
import iso from '../../../iso';

export default class Widget extends Component {
    render() {
        let { title, minHeight, loading, noScroll, loadingHeight, menu, miniLoading } = this.props;
        let widgetClassName    = "cluedIn_widget";
        let widgetContentStyle = {};
        let loadingHtml;
        let menuContent;
        let miniLoadingContent;

        if ( loading ) {
            minHeight   = loadingHeight || '300px';
            loadingHtml = (<Loading></Loading>);
        }

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

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

        if ( menu && !miniLoading ) {
            menuContent = <WidgetMenu menu={menu}></WidgetMenu>;
        }

        if ( miniLoading ) {
            miniLoadingContent = (<div className="cluedIn_widget_title_loading"><MiniLoading></MiniLoading></div>);
        }

        if ( title ) {
            return (
                <div style={widgetStyle} className={widgetClassName}>
                    {loadingHtml}
                    <div className="cluedIn_widget_title">
                        {title}
                        {miniLoadingContent}
                        {menuContent}
                    </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>)
        }
    }

    endWidgetScroll( event ) {

        if ( !this.refs.widgetContent.contains( event.target ) ) {
            return;
        }

        const { pagingHandler, miniLoading } = this.props;

        if ( miniLoading ) {
            return;
        }

        if ( pagingHandler ) {
            pagingHandler();
        }
    }

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

        if ( loading ) {
            return;
        }

        if ( noScroll ) {
            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', iso.func.throttle( this.endWidgetScroll.bind( this ), 50 ).bind( this ) );
    }

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

        if ( noScroll ) {
            return noScroll;
        }

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

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

Widget.defaultProps = {
    noScroll: true
};