cluedin-widget/core/components/entities/document.jsx

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

import React, { Component } from 'react'
import ProviderIcons from '../providerIcons.jsx'
import EntityIcon from '../EntityIcon.jsx'
import EntityLink from '../EntityLink.jsx'
import { findFromKey, makeNoValueRow, makePropHtml } from '../../helpers/properties.jsx'

var extensions = {
    '.doc': 'https://s3.eu-central-1.amazonaws.com/cluedintest/doc.png',
    '.jpg': 'https://s3.eu-central-1.amazonaws.com/cluedintest/jpg.png'
};

var figureOutFileExtension = ( name, extension ) => {
    if ( extension && extensions[ extension.toLowerCase() ] ) {
        return extensions[ extension.toLowerCase() ];
    }

    if ( name.indexOf( '.' ) > -1 ) {
        var lasType = name.split( '.' ).pop();

        return extensions[ '.' + lasType ];
    }
};

var noAuthor         = makeNoValueRow( 'Author' );
var noSize           = makeNoValueRow( 'Size' );
var noCreatedAt      = makeNoValueRow( 'Created at' );
var noLastModifiedAt = makeNoValueRow( 'Last modifed at' );

export default class Document extends Component {
    render() {
        const { entity } = this.props;

        var type       = findFromKey( entity.properties, 'type' );
        let preview;
        let entityIcon = (<EntityIcon entityType={entity.data.entityType}></EntityIcon>);
        let entitiesProp;
        let propHtml;

        var authorProp     = findFromKey( entity.properties, 'author' );
        var sizeProp       = findFromKey( entity.properties, 'size' );
        var createdAtProp  = findFromKey( entity.properties, 'createdat' );
        var lastModifiedAt = findFromKey( entity.properties, 'lastmodifiedat' );

        let authorHtml         = authorProp ? makePropHtml( authorProp ) : noAuthor;
        let sizeHtml           = sizeProp ? makePropHtml( sizeProp ) : noSize;
        let createAtPropHtml   = createdAtProp ? makePropHtml( createdAtProp ) : noCreatedAt;
        let lastModifiedAtHtml = lastModifiedAt ? makePropHtml( lastModifiedAt ) : noLastModifiedAt;

        propHtml = (<div className="cluedIn_row_properties">
            <div className="cluedIn_col s6">
                {authorHtml}
            </div>
            <div className="cluedIn_col s6">
                {sizeHtml}
            </div>
            <div className="cluedIn_col s6">
                {createAtPropHtml}
            </div>
            <div className="cluedIn_col s6">
                {lastModifiedAtHtml}
            </div>
        </div>);

        if ( type && type.value ) {
            var typeURL = figureOutFileExtension( entity.name, type.value );

            if ( typeURL ) {
                entityIcon = (<img className="cluedIn_entity_fileExtension" src={typeURL}/>);
            }
        }

        if ( entity.hasPreview ) {
            var previewStyle = { backgroundImage: 'url(' + entity.previewUrl + ')' };

            preview = (
                <div className="cluedIn_entityPreview">
                    <div className="cluedIn_entityPreview_image" style={previewStyle}/>
                </div>
            );

            entitiesProp = (<div
                className="cluedIn_row cluedIn_row_properties_with_preview cluedIn_row_notCentered cluedIn_entity_table">

                <div className="cluedIn_col s9">
                    {propHtml}
                </div>
                <div className="cluedIn_col s3">
                    {preview}
                </div>
            </div>);
        } else {
            var spacerStyle = { width: '60px' };

            preview = <div style={spacerStyle}> </div>;

            entitiesProp = (<div className="cluedIn_entity_row_sub">
                {preview}
                {propHtml}
            </div>);
        }

        return (
            <div className="cluedIn_entity_row">
                <div className="cluedIn_entity_row_sub">
                    <ProviderIcons providers={entity.providers}></ProviderIcons>
                    {entityIcon}
                    <EntityLink entity={entity}></EntityLink>
                </div>
                {entitiesProp}
            </div>

        );
    }
}