cluedin-widget/core/components/entityRelated/EntityListWidget.jsx

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

import React, { Component } from 'react'
import Widget from '../generics/widget.jsx'
import Overlay from '../generics/overlay.jsx'
import NoEntities from './NoEntities.jsx'
import config from '../../config'
import DefaultEntity from '../defaultEntity.jsx'
import RemovableComponent from '../base/RemovableComponent.jsx'

import { connect } from 'react-redux';

class EntityListWidget extends RemovableComponent {

    getMenu() {
        return this.getRemovableActions();
    }

    isFinishedPaging() {
        const { entities, nextPageNumber } = this.props;
        let pageNumber = nextPageNumber || 1;

        if ( pageNumber === 0 && entities.length < 10 ) {
            return true;
        }

        return ( entities.length % ( pageNumber * 10 ) !== 0);
    }

    fetchPaging() {
        const { nextPageNumber, fetch, isFake, isFetching } = this.props;

        let isFinishedPaging = this.isFinishedPaging();

        if ( isFake || isFetching || isFinishedPaging ) {
            return;
        }

        fetch( nextPageNumber );
    }

    render() {
        let content;
        let fakeHtml;
        let minHeight = 'auto';
        let menu;
        let miniLoading;
        let mainLoading;
        let noScroll;

        const { isFetching, entities, isAdmin, isFake, entityType, nextPageNumber, title } = this.props;

        if ( !isFetching || entities.length > 0 ) {
            content = entities.map( function( entity ) {
                return <DefaultEntity key={entity.id} entity={entity}></DefaultEntity>;
            } );
        }

        if ( isFake || (!isFetching && entities.length === 0) ) {
            fakeHtml = (<Overlay><NoEntities isAdmin={isAdmin} entityType={entityType}></NoEntities></Overlay>);
            menu     = this.getMenu();
        }

        miniLoading = (isFetching && entities.length > 0);
        mainLoading = (isFetching && entities.length === 0);

        //should improve this as you need to scroll when entities are bigger but infinite scroll should be disable.
        noScroll = isFake || ( !isFetching && nextPageNumber === 1 && entities.length < 10);

        return (
            <Widget pagingHandler={this.fetchPaging.bind(this)}
                    noScroll={noScroll}
                    loading={mainLoading}
                    miniLoading={miniLoading}
                    title={title}
                    menu={menu}
                    minHeight={minHeight}>
                {fakeHtml}
                <div className="cluedIn_entity_list">
                    {content}
                </div>
            </Widget>
        );
    }
}

export default connect()( EntityListWidget );