Skip to content
Snippets Groups Projects
Unverified Commit 404c449a authored by Jessie Keck's avatar Jessie Keck Committed by GitHub
Browse files

Merge pull request #2923 from ProjectMirador/rtl-gallery

Better RTL support in gallery mode
parents 807d42da 7fcfc369
No related branches found
No related tags found
No related merge requests found
......@@ -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');
});
});
});
......@@ -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: '',
};
......@@ -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 }),
}
);
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment