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

import React from 'react';
import {connect} from 'react-redux';

import LoadingIndicator from './../loading-indicator';
import MediaResult from './media-result';
import {GridList} from 'material-ui/GridList';
import {List} from 'material-ui/List';

import BaseView from './../../base-view';
import {Row, Col} from './../../flexbox';

/**
 * Render search results for the media search modal
 */
class RichEditorMediaResults extends BaseView {
    constructor(props) {
        super(props);
        this.displayName = 'RichEditorMediaResults';

        this.state = {};
    }

    componentDidMount() {
        if (window && window.jQuery) {
            const parent = jQuery('.RichEditor-media');

            this.setState({'height': parent.height() - 150});
        }
    }

    render() {
        // if (this.props.contentSearch.isFetching) {
        //     return <LoadingIndicator size="small" />
        // }

        let className = '';
        if (this.props.contentSearch.isFetching) {
            className = 'container-is-loading';
        }
        return (
            <Row middle='xs' className={className}>
                <Col xs={12} center='xs'>
                    <p className='small quiet center-align'>
                        Newly added items may not show up immediately in search results.
                    </p>
                </Col>
                {
                    this.props.view == 'list'
                    ? (
                        <Col xs={12}>
                            <List>
                            {this.props.contentSearch.items.map((item, i) => {
                                return (
                                    <MediaResult onSelectMedia={this.props.onSelectMedia} key={i} content={item} view={this.props.view} />
                                );
                            })}
                            </List>
                        </Col>
                    )
                    : (
                        <GridList cellHeight={180} cols={3} className='media-result grid'>
                            {this.props.contentSearch.items.map((item, i) => {
                                return (
                                    <MediaResult onSelectMedia={this.props.onSelectMedia} key={i} content={item} view={this.props.view} />
                                );
                            })}
                        </GridList>
                    )
                }
            </Row>
        );
    }
}

export default connect((state) => {
    return {
        contentSearch: state.contentSearch
    };
})(RichEditorMediaResults);