UNPKG

cluedin-widget

Version:

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

287 lines (227 loc) • 8.28 kB
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>); } };