Sets up ThumbnailNavigation to support right-to-left viewing

__tests__/src/components/ThumbnailNavigation.test.js

@@ -130,4 +130,17 @@ describe('ThumbnailNavigation', () => {
       });
     });
   });
+  describe('when viewingDirection="right-to-left"', () => {
+    beforeEach(() => {
+      wrapper = createWrapper({
+        viewingDirection: 'right-to-left',
+      });
+    });
+
+    it('sets up react-window to be rtl', () => {
+      expect(wrapper
+        .find('AutoSizer').dive().find('List').dive()
+        .props().style.direction).toEqual('rtl');
+    });
+  });
 });

src/components/ThumbnailNavigation.js

@@ -176,11 +176,13 @@ export class ThumbnailNavigation extends Component {
       classes,
       config,
       position,
+      viewingDirection,
       windowId,
     } = this.props;
     if (position === 'off') {
       return <></>;
     }
+    const htmlDir = viewingDirection === 'right-to-left' ? 'rtl' : 'ltr';
     return (
       <Paper
         className={classNames(
@@ -201,6 +203,7 @@ export class ThumbnailNavigation extends Component {
         >
           {({ height, width }) => (
             <List
+              direction={htmlDir}
               height={this.areaHeight(height)}
               itemCount={this.itemCount()}
               itemSize={this.calculateScaledSize}
@@ -236,6 +239,7 @@ ThumbnailNavigation.propTypes = {
   setPreviousCanvas: PropTypes.func,
   t: PropTypes.func.isRequired,
   view: PropTypes.string,
+  viewingDirection: PropTypes.string,
   windowId: PropTypes.string.isRequired,
 };
 
@@ -245,4 +249,5 @@ ThumbnailNavigation.defaultProps = {
   setNextCanvas: () => {},
   setPreviousCanvas: () => {},
   view: undefined,
+  viewingDirection: '',
 };

src/containers/ThumbnailNavigation.js

@@ -9,6 +9,7 @@ import { ThumbnailNavigation } from '../components/ThumbnailNavigation';
 import {
   getNextCanvasGrouping, getPreviousCanvasGrouping,
   getManifestCanvases, getCanvasIndex, getWindowViewType,
+  getManifestViewingDirection,
 } from '../state/selectors';
 
 /**
@@ -29,6 +30,7 @@ const mapStateToProps = (state, { windowId }) => {
     hasPreviousCanvas: !!getPreviousCanvasGrouping(state, { windowId }),
     position: state.companionWindows[state.windows[windowId].thumbnailNavigationId].position,
     view: viewType,
+    viewingDirection: getManifestViewingDirection(state, { windowId }),
   };
 };