From 30bccdfc8805c6782b34eaa613112b5c3aa17854 Mon Sep 17 00:00:00 2001
From: Chris Beer <cabeer@stanford.edu>
Date: Thu, 28 Feb 2019 15:10:09 -0800
Subject: [PATCH] Pull the thumbnail click handlers up to a containing element
---
.../components/ThumbnailNavigation.test.js | 2 +-
.../WindowSideBarCanvasPanel.test.js | 10 ++----
src/components/CanvasThumbnail.js | 4 ---
src/components/ThumbnailNavigation.js | 33 ++++++++++++-------
src/components/WindowSideBarCanvasPanel.js | 6 ++--
src/containers/WindowSideBarCanvasPanel.js | 6 +---
6 files changed, 29 insertions(+), 32 deletions(-)
diff --git a/__tests__/src/components/ThumbnailNavigation.test.js b/__tests__/src/components/ThumbnailNavigation.test.js
index 133465a26..19ca09079 100644
--- a/__tests__/src/components/ThumbnailNavigation.test.js
+++ b/__tests__/src/components/ThumbnailNavigation.test.js
@@ -52,7 +52,7 @@ describe('ThumbnailNavigation', () => {
expect(wrapper.find('.mirador-thumbnail-nav-canvas-1.mirador-current-canvas'));
});
it('when clicked, updates the current canvas', () => {
- renderedGrid.find('.mirador-thumbnail-nav-canvas-0 CanvasThumbnail').simulate('click');
+ renderedGrid.find('.mirador-thumbnail-nav-canvas-0 WithStyles(GridListTile)').simulate('click');
expect(setCanvas).toHaveBeenCalledWith('foobar', 0);
});
it('sets up calculated width based off of height of area and dimensions of canvas', () => {
diff --git a/__tests__/src/components/WindowSideBarCanvasPanel.test.js b/__tests__/src/components/WindowSideBarCanvasPanel.test.js
index 14bbf8444..a5937e1c9 100644
--- a/__tests__/src/components/WindowSideBarCanvasPanel.test.js
+++ b/__tests__/src/components/WindowSideBarCanvasPanel.test.js
@@ -4,7 +4,6 @@ import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import Typography from '@material-ui/core/Typography';
import manifesto from 'manifesto.js';
-import { CanvasThumbnail } from '../../../src/components/CanvasThumbnail';
import { WindowSideBarCanvasPanel } from '../../../src/components/WindowSideBarCanvasPanel';
import manifestJson from '../../fixtures/version-2/019.json';
import { getIdAndLabelOfCanvases } from '../../../src/state/selectors';
@@ -54,13 +53,8 @@ describe('WindowSideBarCanvasPanel', () => {
.text()).toBe(idsAndLabels[1].label);
});
- it('should call the onClick handler of a navigation item\'s label', () => {
- wrapper.find(Typography).at(1).simulate('click');
- expect(setCanvas).toHaveBeenCalledTimes(1);
- });
-
- it('should call the onClick handler of a navigation item\'s thumbnail', () => {
- wrapper.find(CanvasThumbnail).at(0).simulate('click');
+ it('should call the onClick handler of a list item', () => {
+ wrapper.find(ListItem).at(1).simulate('click');
expect(setCanvas).toHaveBeenCalledTimes(1);
});
});
diff --git a/src/components/CanvasThumbnail.js b/src/components/CanvasThumbnail.js
index 76d14f690..e12e3c3f3 100644
--- a/src/components/CanvasThumbnail.js
+++ b/src/components/CanvasThumbnail.js
@@ -91,14 +91,11 @@ export class CanvasThumbnail extends Component {
/**
*/
render() {
- const { onClick } = this.props;
return (
<>
<IntersectionObserver onChange={this.handleIntersection}>
<img
alt=""
- onClick={onClick}
- onKeyPress={onClick}
role="presentation"
src={this.imageSrc()}
style={this.imageStyles()}
@@ -115,7 +112,6 @@ CanvasThumbnail.defaultImgPlaceholder = 'data:image/png;base64,iVBORw0KGgoAAAANS
CanvasThumbnail.propTypes = {
imageUrl: PropTypes.string,
isValid: PropTypes.bool,
- onClick: PropTypes.func.isRequired,
maxHeight: PropTypes.number,
maxWidth: PropTypes.number,
aspectRatio: PropTypes.number,
diff --git a/src/components/ThumbnailNavigation.js b/src/components/ThumbnailNavigation.js
index 8943df25f..33674bdcd 100644
--- a/src/components/ThumbnailNavigation.js
+++ b/src/components/ThumbnailNavigation.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types';
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
import Grid from 'react-virtualized/dist/commonjs/Grid';
+import GridListTile from '@material-ui/core/GridListTile';
import { CanvasThumbnail } from './CanvasThumbnail';
import ManifestoCanvas from '../lib/ManifestoCanvas';
import ns from '../config/css-ns';
@@ -66,18 +67,28 @@ export class ThumbnailNavigation extends Component {
}}
className={ns(['thumbnail-nav-canvas', `thumbnail-nav-canvas-${columnIndex}`, this.currentCanvasClass(currentGroupings.map(canvas => canvas.index))])}
>
- {currentGroupings.map((canvas, i) => (
- <div
- key={canvas.index}
- style={{ position: 'absolute', left: (style.width - 8) * i / 2, top: 2 }}
- >
- <CanvasThumbnail
+ {currentGroupings.map((canvas, i) => {
+ const { height } = config.thumbnailNavigation;
+ const manifestoCanvas = new ManifestoCanvas(canvas);
+
+ return (
+ <GridListTile
+ component="div"
+ key={canvas.index}
onClick={() => setCanvas(window.id, currentGroupings[0].index)}
- imageUrl={new ManifestoCanvas(canvas).thumbnail(null, config.thumbnailNavigation.height)}
- maxHeight={config.thumbnailNavigation.height}
- />
- </div>
- ))}
+ style={{
+ position: 'absolute', left: (style.width - 8) * i / 2, top: 2,
+ }}
+ >
+ <CanvasThumbnail
+ imageUrl={manifestoCanvas.thumbnail(null, height)}
+ maxHeight={config.thumbnailNavigation.height}
+ maxWidth={style.width}
+ aspectRatio={manifestoCanvas.aspectRatio}
+ />
+ </GridListTile>
+ );
+ })}
</div>
</div>
);
diff --git a/src/components/WindowSideBarCanvasPanel.js b/src/components/WindowSideBarCanvasPanel.js
index 8f457b077..8ea64a7bf 100644
--- a/src/components/WindowSideBarCanvasPanel.js
+++ b/src/components/WindowSideBarCanvasPanel.js
@@ -36,6 +36,8 @@ export class WindowSideBarCanvasPanel extends Component {
return (
<ListItem
key={canvas.id}
+ onClick={onClick}
+ button
>
<div>
<CanvasThumbnail
@@ -45,7 +47,6 @@ export class WindowSideBarCanvasPanel extends Component {
maxHeight={config.canvasNavigation.height}
maxWidth={config.canvasNavigation.width}
aspectRatio={manifestoCanvas.aspectRatio}
- onClick={onClick}
style={{
cursor: 'pointer',
height: config.canvasNavigation.height,
@@ -54,8 +55,7 @@ export class WindowSideBarCanvasPanel extends Component {
/>
</div>
<Typography
- className={classNames(classes.clickable, classes.label)}
- onClick={onClick}
+ className={classNames(classes.label)}
variant="body2"
color="secondary"
>
diff --git a/src/containers/WindowSideBarCanvasPanel.js b/src/containers/WindowSideBarCanvasPanel.js
index 7c821cc77..a5ff9e6ad 100644
--- a/src/containers/WindowSideBarCanvasPanel.js
+++ b/src/containers/WindowSideBarCanvasPanel.js
@@ -27,14 +27,10 @@ const mapDispatchToProps = { setCanvas: actions.setCanvas };
/**
*
* @param theme
- * @returns {{clickable: {cursor: string},
- * label: {fontSize: string, paddingLeft: number}, windowSideBarH2: *}}
+ * @returns {label: {fontSize: string, paddingLeft: number}, windowSideBarH2: *}}
*/
const styles = theme => ({
windowSideBarH2: theme.typography.h5,
- clickable: {
- cursor: 'pointer',
- },
label: {
fontSize: '8pt',
paddingLeft: 8,
--
GitLab