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 '../entityRelated/providerIcons.jsx'
import EntityIcon from '../entityRelated/EntityIcon.jsx'
import EntityLink from '../entityRelated/EntityLink.jsx'
import EntityValueRow from '../entityRelated/EntityValueRow.jsx'
import EntityAuthors from '../entityRelated/EntityAuthors.jsx'
import EntityLastChangeBy from '../entityRelated/EntityLastChangeBy.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 ];
    }
};

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;

        propHtml = (<div className="cluedIn_row_properties">
            <div className="cluedIn_row">
                <div className="cluedIn_col s6">
                    <EntityValueRow name="Last Author">
                        <EntityLastChangeBy entity={entity}></EntityLastChangeBy>
                    </EntityValueRow>
                </div>
                <div className="cluedIn_col s6">
                    <EntityValueRow name="Last Modification">
                        {entity.data.modifiedDateFormatted}
                    </EntityValueRow>
                </div>
            </div>
            <div className="cluedIn_row">
                <div className="cluedIn_col s6">
                    <EntityValueRow name="Author(s)">
                        <EntityAuthors entity={entity}></EntityAuthors>
                    </EntityValueRow>
                </div>
                <div className="cluedIn_col s6">
                    <EntityValueRow name="Creation Date">
                        {entity.data.createdDateFormatted}
                    </EntityValueRow>
                </div>
            </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>

        );
    }
}