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

This project contains all the pages needed for browsing entities and searching them. The aim is to replace the CluedIn.Webapp project with this one when all the pages ( including the Admin page ) will be ported to REACT.

import React, { Component } from 'react'

import EntityDefaultHeader from '../entityRelated/EntityDefaultHeader.jsx'
import EntityValueRow from '../entityRelated/EntityValueRow.jsx'
import EntityAuthors from '../entityRelated/EntityAuthors.jsx'
import EntityLastChangeBy from '../entityRelated/EntityLastChangeBy.jsx'

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

        let preview;
        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( 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">
                <EntityDefaultHeader entity={entity}></EntityDefaultHeader>
                {entitiesProp}
            </div>

        );
    }
}