cluedin-widget/core/components/Layouts/Grid.jsx

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

import React, { Component } from 'react';

var Row          = require( '../../layout/row' );
var Column       = require( '../../layout/column' );
var ObjectHelper = require( '../../../iso' ).object;

export default class Grid extends Component {

    componentWillMount() {

        const { token, entityId } = this.props;

        this.entityId = entityId;
        this.token    = token;
    }

    renderColumn( column ) {
        //generate HTML until the first INDEX where we have a biggest than 4 widgets
        const { layoutInformation, isAdmin } = this.props;

        let widgetContent;
        let self = this;

        if ( this.currentRowIndex > 0 ) {
            for( var i = 0; i < this.currentRowIndex; i++ ) {
                var w = column.widgets.shift();
                if ( w ) {

                    var widgetParams = ObjectHelper.extend( {
                        entityId: self.entityId,
                        layoutInformation: layoutInformation,
                        isAdmin: isAdmin
                    }, w.parameters );

                    widgetContent = (<div key={i}>
                        {React.createElement( window.__cluedin_in[ w.name ], widgetParams )}
                    </div>);
                }
            }
        } else {
            widgetContent = column.widgets.map( ( w, index )=> {
                if ( w.size ) {
                    var widgetParams = ObjectHelper.extend( {
                        entityId: self.entityId,
                        layoutInformation: layoutInformation,
                        isAdmin: isAdmin
                    }, w.parameters );
                    return (<div key={index}>
                        {React.createElement( window.__cluedin_in[ w.name ], widgetParams )}
                    </div>);
                } else {
                    return (<div key={index}></div>);
                }
            } );

            column.widgets = [];
        }

        if ( !widgetContent ) {
            return (<div className="cluedIn_col s4"></div>);
        }

        return (<div className="cluedIn_col s4">
            {widgetContent}
        </div>);

    }

    renderColumns( index ) {

        let specialRowHtml;
        let col1Html;
        let col2Html;
        let col3Html;
        let normalRowHtml;

        this.findIndexWhereToCreateNewRow();

        if ( this.currentRowIndex > 0 || this.currentRowIndex === -1 ) {
            col1Html = this.renderColumn( this.Column1 );
            col2Html = this.renderColumn( this.Column2 );
            col3Html = this.renderColumn( this.Column3 );
        }

        if ( this.currentRowIndex > -1 ) {
            specialRowHtml = this.renderSpecial( index );
        }

        if ( col1Html && col2Html && col3Html ) {
            normalRowHtml = <div className="cluedIn_row">
                {col1Html}
                {col2Html}
                {col3Html}
            </div>
        }

        if ( this.currentRowIndex === 0 ) {
            return (<div key={index}>
                {specialRowHtml}
                {normalRowHtml}
            </div>);
        } else {
            return (<div key={index}>
                {normalRowHtml}
                {specialRowHtml}
            </div>);
        }
    }

    placeWidget( w ) {
        var isPlaced = false;
        this.rows.forEach( function( r ) {
            if ( !isPlaced ) {
                if ( r.hasSpace( w ) ) {
                    r.addWidget( w );
                    isPlaced = true;
                }
            }
        } );

        if ( !isPlaced ) {
            this.rows.push( new Row( w ) );
        }
    }

    buildColumns( r ) {
        if ( this.props.widgets.length === 0 ) {
            return;
        }

        this.Column1.widgets.push( r.widgets[ 0 ] );

        this.Column2.widgets.push( r.widgets[ 1 ] || { size: 0 } );

        this.Column3.widgets.push( r.widgets[ 2 ] || { size: 0 } );
    }

    generate() {
        this.rows            = [ new Row() ];
        this.Column1         = new Column();
        this.Column2         = new Column();
        this.Column3         = new Column();
        this.currentRowIndex = -1;

        this.props.widgets.forEach( this.placeWidget, this );

        this.rows.forEach( this.buildColumns, this );
    }

    findIndexWhereToCreateNewRow() {
        var content;
        var foundInColumn1   = false;
        var foundInColumn2   = false;
        var foundInColumn3   = false;
        var indexInColumn1;
        var indexInColumn2;
        var indexInColumn3;
        var minBiggestWidget = -1;

        //find the index where to put the row.

        this.Column1.widgets.forEach( function( w, index ) {
            if ( !foundInColumn1 && w.size > 4 ) {
                foundInColumn1 = true;
                indexInColumn1 = index;
            }
        } );

        this.Column2.widgets.forEach( function( w, index ) {
            if ( !foundInColumn2 && w.size > 4 ) {
                foundInColumn2 = true;
                indexInColumn2 = index;
            }
        } );

        this.Column3.widgets.forEach( function( w, index ) {
            if ( !foundInColumn3 && w.size > 4 ) {
                foundInColumn3 = true;
                indexInColumn3 = index;
            }
        } );

        var minValues = [];

        if ( indexInColumn1 >= 0 ) {
            minValues.push( indexInColumn1 );
        }

        if ( indexInColumn2 >= 0 ) {
            minValues.push( indexInColumn2 );
        }

        if ( indexInColumn3 >= 0 ) {
            minValues.push( indexInColumn3 );
        }

        if ( minValues.length > 0 ) {
            minBiggestWidget = Math.min.apply( Math, minValues );
        }

        this.currentRowIndex = minBiggestWidget;
    }

    renderSpecial( index ) {
        let w1   = this.Column1.widgets.shift();
        let w2   = this.Column2.widgets.shift();
        let w3   = this.Column3.widgets.shift();
        let w1Html;
        let w2Html;
        let w3Html;
        let self = this;

        const { layoutInformation, isAdmin } = this.props;

        if ( w1 && w1.size > 0 ) {
            var widget1ClassName = "cluedIn_col s" + w1.size;

            var widgetParamsW1 = ObjectHelper.extend( {
                entityId: self.entityId,
                layoutInformation: layoutInformation,
                isAdmin: isAdmin
            }, w1.parameters );

            w1Html = (<div className={widget1ClassName}>
                {React.createElement( window.__cluedin_in[ w1.name ], widgetParamsW1 )}
            </div>)
        }

        if ( w2 && w2.size > 0 ) {
            var widget2ClassName = "cluedIn_col s" + w2.size;

            var widgetParamsW2 = ObjectHelper.extend( {
                entityId: self.entityId,
                layoutInformation: layoutInformation,
                isAdmin: isAdmin
            }, w2.parameters );

            w2Html = (<div className={widget2ClassName}>
                {React.createElement( window.__cluedin_in[ w2.name ], widgetParamsW2 )}
            </div>)
        }

        if ( w3 && w3.size > 0 ) {
            var widget3ClassName = "cluedIn_col s" + w3.size;

            var widgetParamsW3 = ObjectHelper.extend( {
                entityId: self.entityId,
                layoutInformation: layoutInformation,
                isAdmin: isAdmin
            }, w3.parameters );

            w3Html = (<div className={widget3ClassName}>
                {React.createElement( window.__cluedin_in[ w3.name ], widgetParamsW3 )}
            </div>)
        }

        return (<div className="cluedIn_row">
            {w1Html}
            {w2Html}
            {w3Html}
        </div>);
    }

    render() {

        //const { widgets, token, entityId } = this.props;
        //this.widgets = widgets;

        var content = [];

        this.generate();

        var i = 0;
        while( this.Column1.widgets.length > 0 || this.Column2.widgets.length > 0 || this.Column3.widgets.length > 0 ) {
            content.push( this.renderColumns( i ) );
            i++;
        }

        if ( content.length === 0 ) {
            return (<div></div>);
        }

        return (<div>{content.map( ( c )=> {
            return c;
        } )}</div>);
    }
};