cluedin-widget/core/components/entityRelated/EntityPropertyViewer.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';

export default class PropertyViewer extends Component {

  constructor(props) {
    super(props);
    this.state = {
      visible: false
    };
    this.toggleVisibility = this.toggleVisibility.bind(this);
  }

  toggleVisibility() {
    this.setState({
      visible: !this.state.visible
    })
  }

  render() {

    const { entity, schema } = this.props;
    let propertiesContent;
    const entityProperties = entity.data.properties;
    const properties = [];

    for (var key in entityProperties) {
      var foundSchema = schema.find((s) => {
        return ('property-' + s.Key.toLowerCase()) === key.toLowerCase();
      });

      if (foundSchema && foundSchema.Visibility.toLowerCase() === 'Visible'.toLowerCase()) {
        properties.push({
          value: entityProperties[key],
          schema: foundSchema,
        });
      }
    }

    propertiesContent = properties.map((propertyValueWithSchema, index) => {

      if(propertyValueWithSchema.schema.DataType === 'Uri') {
        return (
          <div key={index} className="cluedIn_propertyViewer_property">
            <div className="cluedIn_propertyViewer_property_name">
              {propertyValueWithSchema.schema.DisplayName}
            </div>
            <div className="cluedIn_propertyViewer_property_value">
              <a href={propertyValueWithSchema.value} target="_blank">{propertyValueWithSchema.value}</a>
            </div>
          </div>
        );
      }
      return (<div key={index} className="cluedIn_propertyViewer_property">
          <div className="cluedIn_propertyViewer_property_name">
            {propertyValueWithSchema.schema.DisplayName}
          </div>
          <div className="cluedIn_propertyViewer_property_value">
            {propertyValueWithSchema.value}
          </div>
        </div>
      );
    });

    return (
      <div
        className="cluedIn_propertyViewer">{propertiesContent}</div>
    );
  }
}