Merge pull request #4496 from alikazemkhanloo/patch-2

Fix pagination buttons are in the wrong direction in RTL languages
marmelab · Mar 10, 2020 · bb82919 · bb82919
2 parents 697e037 + 2641e12
commit bb82919
Showing 1 changed file with 13 additions and 3 deletions.
diff --git a/packages/ra-ui-materialui/src/list/PaginationActions.js b/packages/ra-ui-materialui/src/list/PaginationActions.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Button from '@material-ui/core/Button';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
 import ChevronLeft from '@material-ui/icons/ChevronLeft';
 import ChevronRight from '@material-ui/icons/ChevronRight';
 import { useTranslate } from 'ra-core';
@@ -22,6 +22,7 @@ function PaginationActions(props) {
     const { page, rowsPerPage, count, onChangePage, color, size } = props;
     const classes = useStyles(props);
     const translate = useTranslate();
+    const theme = useTheme();
     /**
      * Warning: material-ui's page is 0-based
      */
@@ -126,7 +127,11 @@ function PaginationActions(props) {
                     onClick={prevPage}
                     className="previous-page"
                 >
-                    <ChevronLeft />
+                    {theme.direction === 'rtl' ? (
+                        <ChevronRight />
+                    ) : (
+                        <ChevronLeft />
+                    )}
                     {translate('ra.navigation.prev')}
                 </Button>
             )}
@@ -140,7 +145,11 @@ function PaginationActions(props) {
                     className="next-page"
                 >
                     {translate('ra.navigation.next')}
-                    <ChevronRight />
+                    {theme.direction === 'rtl' ? (
+                        <ChevronLeft />
+                    ) : (
+                        <ChevronRight />
+                    )}
                 </Button>
             )}
         </div>
@@ -163,6 +172,7 @@ PaginationActions.propTypes = {
     rowsPerPage: PropTypes.number.isRequired,
     color: PropTypes.oneOf(['primary', 'secondary']),
     size: PropTypes.oneOf(['small', 'medium', 'large']),
+    theme: PropTypes.object,
 };
 
 PaginationActions.defaultProps = {