Better RTL support in gallery mode

__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');
+    });
+  });
 });

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: '',
 };

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 }),
   }
 );