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 (minHeight) {
      widgetContentStyle.minHeight = minHeight ? minHeight : 'auto';
    }

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