labo-components/app/components/collection/CollectionSelector.jsx

B&G UI components

import React from 'react';
import Select from 'react-select';
import PropTypes from 'prop-types';

import IDUtil from '../../util/IDUtil';
import ReadMoreLink from '../helpers/ReadMoreLink';

export default class CollectionSelector extends React.Component {

	constructor(props) {
		super(props);
		this.state = {
			activeCollection: ''
		};
	}

	selectCollection = collectionId => {
		const __getCollectionConfig = collectionId => this.props.collectionList.filter(collection => collection.index === collectionId);
		if (collectionId) {
			this.setState({activeCollection: collectionId},
				() => this.onOutput(__getCollectionConfig(collectionId)[0])
			);
		}
	};

	/* ------------------------------------------------------------------------------
	------------------------------- COMMUNICATION WITH OWNER/RECIPE -----------------
	------------------------------------------------------------------------------- */

	onOutput = collectionMetadata => {
		if (this.props.onOutput) {
			if (collectionMetadata.index) {
				this.props.onOutput(this.constructor.name, collectionMetadata);
			} else {
				console.debug('No collection selected...');
			}
		}
	};

	onInputChange = (inputValue, { action }) => {
		console.debug(inputValue, action);
		if (action === 'select-option') {
			this.selectCollection(inputValue.index)
		}
	};

	render() {
		let markup;

		if (this.props.collectionList) {
			let collectionSelect = null;
			let collectionBrowser = null;

			if (this.props.showSelect) {
				const collectionOptionsArray = this.props.collectionList.map(collection => {
					return {
						"value": collection.index,
						"label": collection.title,
						"index": collection.index
					}
				});

				/*
				<PowerSelect
					options={collectionOptionsArray}
					onChange={(e) => this.selectCollection(e.option.index)}
					optionLabelPath="title"
					placeholder="-- Select a collection -- "
				/>
				*/

				collectionSelect = (
					<Select
					options={collectionOptionsArray}
					onChange={this.onInputChange}
					optionLabelPath="title"
					placeholder="-- Select a collection -- "
					/>
				);
			}

			if (this.props.showBrowser) {

				const collectionBlocks = this.props.collectionList.map(collection => {
					let organisationImage = null;
					let ckanLink = null;

					if (collection.organization.image_url) {
						organisationImage = (<img src={collection.organization.image_url} alt={collection.organization.title ? collection.organization.title : 'No title available'} className="w-50"/>)
					}

					if (collection.registryUrl) {
						ckanLink = (<ReadMoreLink linkUrl={collection.registryUrl}/>)
					}

					return (
 						<div className={IDUtil.cssClassName('collection-block') + " col mt-4"} key={collection.index}>
							<div className="card h-100 text-center">
								<div className="card-body" onClick={() => this.selectCollection(collection.index)}>
									<h6 className="card-title">{collection.title}</h6>
									<p className="card-text"><small>{collection.organization.title}</small></p>
									{organisationImage}
								</div>
								<div className="card-footer border-0 bg-transparent">
								{ckanLink}
								</div>
							</div>
						</div>
					)
				});

				collectionBrowser = (
					<div className="row row-cols-1 row-cols-md-3">
					{collectionBlocks}
					</div>
				)

			}

			markup = (
				<div>
				{collectionSelect}
				{collectionBrowser}
				</div>
			)

		} else {

			markup = (<h3>Loading collection list...</h3>)

		}

		//always return everything wrapped in an identifyable div
		return (
			<div className={IDUtil.cssClassName('collection-selector')}>
			{markup}
			</div>
		)
	}

}

CollectionSelector.propTypes = {
	onOutput: PropTypes.func.isRequired,
	showBrowser: PropTypes.bool,
	showSelect: PropTypes.bool,
	collectionList : PropTypes.array.isRequired
};