diff --git a/__tests__/src/components/WindowIcon.test.js b/__tests__/src/components/WindowIcon.test.js
deleted file mode 100644
index 93a26f5f58a47466e0f039739874992d914e24df..0000000000000000000000000000000000000000
--- a/__tests__/src/components/WindowIcon.test.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import WindowIcon from '../../../src/components/WindowIcon';
-
-/** createWrapper */
-function createWrapper(props) {
- return shallow(
- <WindowIcon
- manifestLogo=""
- classses={{}}
- {...props}
- />,
- ).dive(); // to unwrap HOC created by withStyles();
-}
-
-describe('WindowIcon', () => {
- it('should render nothing if no manifest logo given', () => {
- const wrapper = createWrapper();
- expect(wrapper.find('img').length).toBe(0);
- });
-
- it('should render logo if manifest logo is given', () => {
- const manifestLogo = 'http://foo.bar';
- const wrapper = createWrapper({ manifestLogo });
- expect(wrapper.find('img').first().prop('src'))
- .toEqual(manifestLogo);
- });
-});
diff --git a/package.json b/package.json
index cfa00f5d849e886de2e60f58d41e972a02fc72bf..f1c9c8993e9f47eda47bc079452554eb7108aad4 100644
--- a/package.json
+++ b/package.json
@@ -52,6 +52,7 @@
"prop-types": "^15.6.2",
"react-full-screen": "^0.2.4",
"react-i18next": "^10.2.0",
+ "react-image": "^2.0.0",
"react-mosaic-component": "^2.1.0",
"react-placeholder": "^3.0.1",
"react-redux": "^6.0.0",
diff --git a/src/components/ManifestListItem.js b/src/components/ManifestListItem.js
index 022f2943924121f6d788435db6d99b59e5dec294..fb9f1e9357afa441fe30b3eb3a4324bccf489e91 100644
--- a/src/components/ManifestListItem.js
+++ b/src/components/ManifestListItem.js
@@ -6,8 +6,8 @@ import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import ReactPlaceholder from 'react-placeholder';
import { TextBlock, TextRow, RectShape } from 'react-placeholder/lib/placeholders';
+import Img from 'react-image';
import ManifestListItemError from '../containers/ManifestListItemError';
-import WindowIcon from '../containers/WindowIcon';
import ns from '../config/css-ns';
import 'react-placeholder/lib/reactPlaceholder.css';
@@ -41,6 +41,7 @@ export class ManifestListItem extends React.Component {
ready,
title,
thumbnail,
+ manifestLogo,
addWindow,
handleClose,
size,
@@ -94,16 +95,18 @@ export class ManifestListItem extends React.Component {
>
<Grid container spacing={24} className={classes.label}>
<Grid item xs={4} sm={3}>
- {
- <ReactPlaceholder ready={!!thumbnail} type="rect" style={{ width: 120, height: 80 }}>
- <img
- className={ns('manifest-list-item-thumb')}
- src={thumbnail}
- alt=""
- height="80"
+ <Img
+ className={ns('manifest-list-item-thumb')}
+ src={[thumbnail]}
+ alt=""
+ height="80"
+ unloader={(
+ <RectShape
+ className={classes.placeholder}
+ style={{ width: 120, height: 80 }}
/>
- </ReactPlaceholder>
- }
+ )}
+ />
</Grid>
<Grid item xs={8} sm={9}>
<Typography component="span" variant="h6">
@@ -119,7 +122,15 @@ export class ManifestListItem extends React.Component {
</Grid>
<Grid item xs={4} sm={2}>
- <WindowIcon className={ns('manifest-list-item-logo')} manifestId={manifestId} />
+ <Img
+ src={[manifestLogo]}
+ alt=""
+ role="presentation"
+ className={classes.logo}
+ unloader={
+ <RectShape className={classes.placeholder} style={{ width: 60, height: 60 }} />
+ }
+ />
</Grid>
</Grid>
</ReactPlaceholder>
@@ -136,6 +147,7 @@ ManifestListItem.propTypes = {
title: PropTypes.string,
thumbnail: PropTypes.string,
size: PropTypes.number,
+ manifestLogo: PropTypes.string,
classes: PropTypes.object, // eslint-disable-line react/forbid-prop-types
provider: PropTypes.string,
t: PropTypes.func,
@@ -155,4 +167,5 @@ ManifestListItem.defaultProps = {
t: key => key,
error: null,
isFetching: false,
+ manifestLogo: null,
};
diff --git a/src/components/WindowIcon.js b/src/components/WindowIcon.js
deleted file mode 100644
index 63894236feb9c737ba040e706ceb0c301e58d656..0000000000000000000000000000000000000000
--- a/src/components/WindowIcon.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-
-/**
- */
-class WindowIcon extends Component {
- /**
- * render
- * @return
- */
- render() {
- const { manifestLogo, classes } = this.props;
-
- const img = manifestLogo && (
- <img
- src={manifestLogo}
- alt=""
- role="presentation"
- className={classes.logo}
- />
- );
-
- return (
- <>
- {img}
- </>
- );
- }
-}
-
-WindowIcon.propTypes = {
- manifestLogo: PropTypes.string,
- classes: PropTypes.shape({ logo: PropTypes.string }).isRequired,
-};
-
-WindowIcon.defaultProps = {
- manifestLogo: null,
-};
-
-const styles = {
- logo: {
- height: '2.5rem',
- paddingRight: 8,
- },
-};
-
-export default withStyles(styles)(WindowIcon);
diff --git a/src/containers/ManifestListItem.js b/src/containers/ManifestListItem.js
index 173e0ee92b2f401505c0d52079e7d63a342cec90..62d3515fa6767d4d420e6e0b96630b5a6b36fb6e 100644
--- a/src/containers/ManifestListItem.js
+++ b/src/containers/ManifestListItem.js
@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
import { withTranslation } from 'react-i18next';
import { withStyles } from '@material-ui/core';
import {
- getManifestTitle, getManifestThumbnail, getManifestCanvases, getManifestProvider,
+ getManifestTitle, getManifestThumbnail, getManifestCanvases, getManifestLogo, getManifestProvider,
} from '../state/selectors';
import * as actions from '../state/actions';
import { ManifestListItem } from '../components/ManifestListItem';
@@ -20,6 +20,7 @@ const mapStateToProps = (state, { manifestId }) => {
thumbnail: getManifestThumbnail(manifest),
provider: getManifestProvider(manifest),
size: getManifestCanvases(manifest).length,
+ manifestLogo: getManifestLogo(state.manifests[manifestId]),
};
};
@@ -43,6 +44,13 @@ const styles = theme => ({
textTransform: 'initial',
textAlign: 'left',
},
+ logo: {
+ height: '2.5rem',
+ paddingRight: 8,
+ },
+ placeholder: {
+ backgroundColor: theme.palette.grey[300],
+ },
});
const enhance = compose(
diff --git a/src/containers/WindowIcon.js b/src/containers/WindowIcon.js
deleted file mode 100644
index fb31d154ac8992891d6997a332c3f3075b85f0a4..0000000000000000000000000000000000000000
--- a/src/containers/WindowIcon.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { connect } from 'react-redux';
-import { withStyles } from '@material-ui/core';
-import { compose } from 'redux';
-import { getManifestLogo } from '../state/selectors';
-import WindowIcon from '../components/WindowIcon';
-
-/** */
-const mapStateToProps = (state, { manifestId }) => ({
- manifestLogo: getManifestLogo(state.manifests[manifestId]),
-});
-
-const styles = {
- logo: {
- height: '2.5rem',
- paddingRight: 8,
- },
-};
-
-const enhance = compose(
- withStyles(styles),
- connect(mapStateToProps),
-);
-
-export default enhance(WindowIcon);