cluedin-widget/core/components/entityRelated/providerIcons.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 iso from '../../../iso';
import { providers as providersConfig, excludedProviders } from '../../config';

const validationHelper = iso.validation;
const collectionHelper = iso.collection;

export default class ProviderIcons extends Component {
  render() {
    var {providers, small} = this.props;
    let style = {};

    if (small) {
      style = {
        width: '18px'
      };
    }

    let wrapperClass = "";

    if (!providers) {
      return (<div>CluedIn</div>);
    }

    if (validationHelper.is.a.string(providers)) {
      providers = [providers];
    }

    providers = collectionHelper.reject(providers, function (n) {
      return ( excludedProviders[n.toLowerCase()] );
    });

    if (providers.length > 1) {
      if (providers.length < 5) {
        wrapperClass += 'cluedin_provider_icons_wrapper_' + providers.length;
      } else {
        wrapperClass += 'cluedin_provider_icons_wrapper_4';

        providers = providers.filter(function (p) {
          return p.toLowerCase() !== 'cluedin';
        });

        if (providers.length > 4) {
          providers = providers.splice(0, 4);
        }
      }
    }

    let content = providers.map((provider, i) => {

      let lowerProviderName = provider.toLowerCase();
      let providerInfo = providersConfig[lowerProviderName];

      if (!providerInfo) {
        return;
      }

      let url = providerInfo.icon;
      let name = providerInfo.name;
      let providerIconClass = 'cluedin_provider_image ';

      if (i === 0) {
        providerIconClass += 'first';
      }

      if (i === ( providers.length - 1 )) {
        providerIconClass += 'last';
      }

      return (<img style={style} key={i} className={providerIconClass} alt={name} src={url}/>);
    });

    return (
      <div style={style} className="cluedin_provider_icons">

        <div className={wrapperClass}>
          {content}
        </div>
      </div>
    );
  }
};