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

This project contains all the pages needed for browsing entities and searching them. The aim is to replace the CluedIn.Webapp project with this one when all the pages ( including the Admin page ) will be ported to REACT.

import React, { Component } from "react";
import Loading from "./loading.jsx";
import { WidgetMenu } from "./widgetMenu.jsx";
import MiniLoading from "./MiniLoading.jsx";
import Ps from "perfect-scrollbar";
import RaisedButton from "material-ui/RaisedButton";
import RefreshIndicator from "material-ui/RefreshIndicator";
import { FormattedMessage } from "react-intl";

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

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

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

        if( !loading && loadMoreResult ) {
            loadMoreResultText = <FormattedMessage id="Widget.LoadMoreResults"/>
            loadMoreButton     = <div style={{margin: '15px -15px -15px -15px'}}>
                <RaisedButton style={{width:'100%'}} onClick={this.nextPageHandler.bind(this)}
                              label={loadMoreResultText}></RaisedButton>
            </div>;
        }

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

        if( miniLoading ) {
            miniLoadingContent = (<div className="cluedIn_widget_title_loading"><MiniLoading></MiniLoading></div>);
            loadMoreButton     = (
                <div style={{position: 'relative',textAlign: 'center'}}>
                    <RefreshIndicator
                        style={{ display: 'inline-block', position: 'relative' }}
                        top={0} left={0}
                        status="loading"></RefreshIndicator></div>);
        }

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

        if( noMaxHeight ) {
            widgetContentStyle.maxHeight = 'none';
        }

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

    nextPageHandler( event ) {

        const { pagingHandler } = this.props;

        if( pagingHandler ) {
            pagingHandler();
        }
    }

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

        if( loading || noScroll ) {
            return;
        }

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

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

        if( loading || noScroll ) {
            return;
        }

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

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

Widget.defaultProps = {
    noScroll: true
};