From 7fcfc369cfb039d6d0a1cfbe6d8751a00b33725e Mon Sep 17 00:00:00 2001
From: Jack Reed <phillipjreed@gmail.com>
Date: Fri, 20 Dec 2019 14:12:35 -0700
Subject: [PATCH] Better RTL support in gallery mode
---
__tests__/src/components/GalleryView.test.js | 12 ++++++++++++
src/components/GalleryView.js | 6 +++++-
src/containers/GalleryView.js | 3 ++-
3 files changed, 19 insertions(+), 2 deletions(-)
diff --git a/__tests__/src/components/GalleryView.test.js b/__tests__/src/components/GalleryView.test.js
index dfee35e03..84a2c03b9 100644
--- a/__tests__/src/components/GalleryView.test.js
+++ b/__tests__/src/components/GalleryView.test.js
@@ -32,4 +32,16 @@ describe('GalleryView', () => {
it('renders gallery items for all canvases', () => {
expect(wrapper.find(GalleryViewThumbnail).length).toBe(3);
});
+
+ describe('when viewingDirection="right-to-left"', () => {
+ beforeEach(() => {
+ wrapper = createWrapper({
+ viewingDirection: 'right-to-left',
+ });
+ });
+
+ it('sets up Paper to be rtl', () => {
+ expect(wrapper.find('WithStyles(ForwardRef(Paper))').props().dir).toEqual('rtl');
+ });
+ });
});
diff --git a/src/components/GalleryView.js b/src/components/GalleryView.js
index 25d940b97..3cd865608 100644
--- a/src/components/GalleryView.js
+++ b/src/components/GalleryView.js
@@ -12,11 +12,13 @@ export class GalleryView extends Component {
*/
render() {
const {
- canvases, classes, windowId,
+ canvases, classes, viewingDirection, windowId,
} = this.props;
+ const htmlDir = viewingDirection === 'right-to-left' ? 'rtl' : 'ltr';
return (
<Paper
component="section"
+ dir={htmlDir}
square
elevation={0}
className={classes.galleryContainer}
@@ -39,9 +41,11 @@ export class GalleryView extends Component {
GalleryView.propTypes = {
canvases: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
classes: PropTypes.objectOf(PropTypes.string),
+ viewingDirection: PropTypes.string,
windowId: PropTypes.string.isRequired,
};
GalleryView.defaultProps = {
classes: {},
+ viewingDirection: '',
};
diff --git a/src/containers/GalleryView.js b/src/containers/GalleryView.js
index 68d0a83aa..4f7995c68 100644
--- a/src/containers/GalleryView.js
+++ b/src/containers/GalleryView.js
@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
import { withStyles } from '@material-ui/core/styles';
import { withPlugins } from '../extend/withPlugins';
import { GalleryView } from '../components/GalleryView';
-import { getManifestCanvases } from '../state/selectors';
+import { getManifestCanvases, getManifestViewingDirection } from '../state/selectors';
/**
* mapStateToProps - to hook up connect
@@ -13,6 +13,7 @@ import { getManifestCanvases } from '../state/selectors';
const mapStateToProps = (state, { windowId }) => (
{
canvases: getManifestCanvases(state, { windowId }),
+ viewingDirection: getManifestViewingDirection(state, { windowId }),
}
);
--
GitLab