labo-components/app/components/search/QuickViewer.jsx

B&G UI components

import React from "react";
import PropTypes from 'prop-types';

import IDUtil from '../../util/IDUtil';
import PaginationUtil from '../../util/PaginationUtil';

import Resource from '../../model/Resource';

import SimplePaging from './SimplePaging';

import MetadataTablePreview from './MetadataTablePreview';
import HighlightOverview from './HighlightOverview';



//TODO probably also merge the MetadataTablePreview (or merge the MetadataTablePreview and the MetadataTable)
//TODO probably also move the paging functions to this component
export default class QuickViewer extends React.Component {

	constructor(props) {
		super(props);
	}

	render() {
		return (
			<div className={IDUtil.cssClassName('quick-viewer')}>
				<SimplePaging
					browseSelection={this.props.browseSelection}
					searchResult={this.props.searchResult}
					collectionConfig={this.props.collectionConfig}

					onPaged={this.props.onPaged}
					onLoading={this.props.onLoading}

					selected={this.props.selected}
					onSelect={this.props.onSelect} //when supplied, it will render a select button

					enableBackButton={false}
					enableResourceViewerButton={true}
				/>
				<MetadataTablePreview data={this.props.searchResult}/>
				<HighlightOverview
					collectionConfig={this.props.collectionConfig}
					searchResult={this.props.searchResult}
				/>
			</div>
		)
	}
}

QuickViewer.propTypes = {
	browseSelection : PropTypes.bool.isRequired, //whether to quick view the selection or result list
	searchResult: Resource.getPropTypes(true), //active resource from either the selection or result list
	selected: PropTypes.bool.isRequired, //whether the current resource is selected or not
	collectionConfig : PropTypes.object.isRequired,

	onPaged: PropTypes.func.isRequired, //callback to notify the owner when the next page of results has been fetched from the search API
	onLoading: PropTypes.func.isRequired, //callback to notify the owner new search results are being fetched
	onSelect: PropTypes.func.isRequired, //callback when selecting this resource

};