application/components/common/rich-editor/media-result.js

import React from 'react';
import BaseView from './../../base-view';
import {Row, Col} from './../../flexbox';
import {timeToFormat} from './../../../util/strings';

import {GridList, GridTile} from 'material-ui/GridList';
import {ListItem} from 'material-ui/List';
import Subheader from 'material-ui/Subheader';
import FontIcon from 'material-ui/FontIcon';
import Avatar from 'material-ui/Avatar';
import IconButton from 'material-ui/IconButton';

/**
 * Render single media search result
 */
class RichEditorMediaResult extends BaseView {
    constructor(props) {
        super(props);
        this.displayName = 'RichEditorMediaResult';

        this.onSelect = this.onSelect.bind(this);
    }

    onSelect() {
        if (this.props.onSelectMedia) {
            this.props.onSelectMedia(this.props.content);
        }
    }

    render() {
        const avatars = {
            gallery: 'collections',
            image: 'photo',
            video: 'videocam',
            pdf: 'picture_as_pdf',
            vimeo: 'ondemand_video',
            youtube: 'ondemand_video',
            audio: 'audiotrack'
        }

        let actionIcon = 'photo';
        if (this.props.content.has('attachment')) {
            actionIcon = avatars[this.props.content.get('attachment').get('type')];
        }

        if (this.props.view == 'grid') {
            return (
                <GridTile
                    onClick={this.onSelect}
                    title={this.props.content.get('title') ? this.props.content.get('title') : this.props.content.get('slug')}
                    subtitle={timeToFormat(this.props.content.get('created_at'))}
                    actionIcon={<IconButton><FontIcon className='mui-icons' color='white'>{actionIcon}</FontIcon></IconButton>}
                    className='grid-tile'
                    >
                    <img src={this.props.content.has('attachment') ? this.props.content.get('attachment').get('public_url') : '#'} style={{maxWidth:'100%'}} />
                </GridTile>
            );
        } else {
            return (
                <ListItem
                    leftAvatar={<Avatar src={this.props.content.has('attachment') ? this.props.content.get('attachment').get('public_url') : '#'} />}
                    rightIcon={<FontIcon className='mui-icons'>{actionIcon}</FontIcon>}
                    primaryText={this.props.content.get('title') ? this.props.content.get('title') : this.props.content.get('slug')}
                    secondaryText={timeToFormat(this.props.content.get('created_at'))}
                    />
            );
        }
    }
}

export default RichEditorMediaResult;