cluedin-widget/core/components/generics/SmallPreviewImage.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 { Link } from "react-router";
import config from "../../config";
import Radium from "radium";

const SmallPreviewImageStyle = {
    block: {
        display: 'inline-block'
    },
    box: {
        backgroundColor: 'rgba(0, 0, 0, 0.03)',
        borderRadius: '2px',
        boxShadow: '0 0 1px rgba(0, 0, 0, 0.11), 0 1px 2px rgba(0, 0, 0, 0.22)',
        boxSizing: 'border-box',
        color: '#757575',
        height: '88px',
        width: '385px',
        display: 'flex',
        transition: 'background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1)'
    },
    wrapImage: {
        backgroundColor: '#fff',
        textAlign: 'center',
        verticalAlign: 'top',
        borderRadius: '2px 0 0 2px',
        width: '132px',
        position: 'relative'
    },
    image: {
        backgroundSize: '100%',
        bottom: 0,
        position: 'absolute',
        top: 0,
        borderRadius: '2px 0 0 2px',
        width: '132px'
    },
    textContainer: {
        lineHeight: '1.6',
        margin: 'auto 16px',
        minWidth: 0,
        whiteSpace: 'nowrap',
        flex: '1'
    },
    text: {
        whiteSpace: 'normal'
    }
};

class SmallPreviewImage extends Component {
    render() {
        const { entity } = this.props;

        const imageStyle = {
            backgroundImage: 'url(' + (entity.previewUrl || entity.logoUrl ) + ')'
        };
        return (<div style={SmallPreviewImageStyle.block}>
                <Link to={config.location.goToEntity(entity)} style={SmallPreviewImageStyle.box}>
                    <div style={SmallPreviewImageStyle.wrapImage}>
                        <div style={[SmallPreviewImageStyle.image, imageStyle]}></div>
                    </div>
                    <div style={SmallPreviewImageStyle.textContainer}>
                        <div style={SmallPreviewImageStyle.text}>{entity.name}</div>
                    </div>
                </Link>
            </div>
        );
    }
}

export default Radium( SmallPreviewImage );