diff --git a/src/components/AnnotationManifestsAccordion.js b/src/components/AnnotationManifestsAccordion.js index 3a8e410fff967901705c378f3fdac5ab37c0e2ee..62766ec1cbc49628c984e486bfa2f9ace13b737a 100644 --- a/src/components/AnnotationManifestsAccordion.js +++ b/src/components/AnnotationManifestsAccordion.js @@ -30,6 +30,7 @@ export class AnnotationManifestsAccordion extends Component { const { annotation } = this.props; + annotation.manifestsOpen = false; annotation.manifests = searchManifestInID(annotation.id); if (annotation.manifests) { annotation.manifests = annotation.manifests.map(id => ({ id })); @@ -43,7 +44,10 @@ export class AnnotationManifestsAccordion extends Component { /** */ // eslint-disable-next-line class-methods-use-this,require-jsdoc handleOpenAccordion(e) { + let { annotation } = this.state; + annotation.manifestsOpen = true; e.stopPropagation(); + this.state = { annotation }; } /** */ @@ -67,16 +71,20 @@ export class AnnotationManifestsAccordion extends Component { > <Typography className={classes.heading}>{t('manifestFound')}</Typography> </AccordionSummary> - <AccordionDetails className={classes.manifestContainer}> - {annotation.manifests.map(manifest => ( - <AnnotationManifestsItem - manifestId={manifest.id} - language={i18n.language} - key={manifest} - t={t} - /> - ))} - </AccordionDetails> + { + annotation.manifestsOpen && ( + <AccordionDetails className={classes.manifestContainer}> + {annotation.manifests.map(manifest => ( + <AnnotationManifestsItem + manifestId={manifest.id} + language={i18n.language} + key={manifest} + t={t} + /> + ))} + </AccordionDetails> + ) + } </Accordion> </div> ); @@ -90,6 +98,7 @@ AnnotationManifestsAccordion.propsTypes = { content: PropTypes.string, id: PropTypes.string, manifests: PropTypes.arrayOf(PropTypes.string), + manifestsOpen: PropTypes.boolean, }, ), classes: PropTypes.objectOf(PropTypes.string), diff --git a/src/components/AnnotationManifestsItem.js b/src/components/AnnotationManifestsItem.js index 501fa3187b6a918e8754875f3bad47815ef061af..92eb5577168f1b9d67dc0f6a8d90d400f3cb131e 100644 --- a/src/components/AnnotationManifestsItem.js +++ b/src/components/AnnotationManifestsItem.js @@ -6,6 +6,7 @@ import { } from '@material-ui/core'; import Button from '@material-ui/core/Button'; import Tooltip from '@material-ui/core/Tooltip'; +import ns from '../config/css-ns'; /** * AnnotationManifestsItem @@ -39,7 +40,7 @@ export class AnnotationManifestsItem extends Component { /** */ render() { const { - classes, t, language, manifestId, thumbnail + classes, t, language, manifestId, thumbnail, title, description } = this.props; return ( @@ -49,16 +50,24 @@ export class AnnotationManifestsItem extends Component { { thumbnail && ( <CardMedia + className={classes.thumbnail} component="img" height="140" - image={[thumbnail]} + image={thumbnail} alt="green iguana" /> - )} + ) + } <CardContent> <Typography> - { manifestId } + { title || manifestId } </Typography> + { + description && ( + <Typography> + { description } + </Typography> + )} </CardContent> </CardActionArea> <CardActions> @@ -84,14 +93,15 @@ AnnotationManifestsItem.propsTypes = { addResource: PropTypes.func.isRequired, addWindow: PropTypes.func.isRequired, classes: PropTypes.objectOf(PropTypes.string), + description: PropTypes.string, + error: PropTypes.string, fetchManifest: PropTypes.func.isRequired, - manifests: PropTypes.arrayOf(PropTypes.string), - t: PropTypes.func.isRequired, + isFetching: PropTypes.bool, manifestLogo: PropTypes.string, + manifests: PropTypes.arrayOf(PropTypes.string), provider: PropTypes.string, ready: PropTypes.bool, - isFetching: PropTypes.bool, - error: PropTypes.string, + t: PropTypes.func.isRequired, thumbnail: PropTypes.string, title: PropTypes.string, }; diff --git a/src/containers/AnnotationManifestsItem.js b/src/containers/AnnotationManifestsItem.js index 74db09ef8ceb350259fc7784afa9ba9f9a4bcce3..7e9268d6d7ef6983b5fff602a7f013fd48d2867d 100644 --- a/src/containers/AnnotationManifestsItem.js +++ b/src/containers/AnnotationManifestsItem.js @@ -6,7 +6,7 @@ import { withPlugins } from '../extend/withPlugins'; import * as actions from '../state/actions'; import { AnnotationManifestsItem } from '../components/AnnotationManifestsItem'; import { - getManifest, getManifestLogo, + getManifest, getManifestDescription, getManifestLogo, getManifestProvider, getManifestThumbnail, getManifestTitle, getWindowManifests, } from '../state/selectors'; @@ -16,7 +16,9 @@ const mapStateToProps = (state, { manifestId }) => { const manifest = getManifest(state, { manifestId }) || {}; return { - active: getWindowManifests(state).includes(manifestId), + active: getWindowManifests(state) + .includes(manifestId), + description: getManifestDescription(state, { manifestId }), error: manifest.error, isFetching: manifest.isFetching, manifestLogo: getManifestLogo(state, { manifestId }),