cluedin-widget/core/components/entityRelated/providerIcons.jsx

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

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 } = this.props;
        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 key={i} className={providerIconClass} alt={name} src={url}/>);
        } );

        return (
            <div className="cluedin_provider_icons">

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