cluedin-widget
Version:
This is the project for creating and managing widgets in CluedIn.
287 lines (227 loc) • 8.28 kB
JSX
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>);
}
};