change chevronDirection in RTL

marmelab · Mar 9, 2020 · 48dc786 · 48dc786
1 parent 697e037
commit 48dc786
Showing 1 changed file with 5 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,7 @@ function PaginationActions(props) {
                     onClick={prevPage}
                     className="previous-page"
                 >
-                    <ChevronLeft />
+                    {theme.direction === "rtl" ? <ChevronRight /> : <ChevronLeft />}
                     {translate('ra.navigation.prev')}
                 </Button>
             )}
@@ -140,7 +141,7 @@ function PaginationActions(props) {
                     className="next-page"
                 >
                     {translate('ra.navigation.next')}
-                    <ChevronRight />
+                    {theme.direction === "rtl" ? <ChevronLeft /> : <ChevronRight />}
                 </Button>
             )}
         </div>
@@ -163,6 +164,7 @@ PaginationActions.propTypes = {
     rowsPerPage: PropTypes.number.isRequired,
     color: PropTypes.oneOf(['primary', 'secondary']),
     size: PropTypes.oneOf(['small', 'medium', 'large']),
+    theme: PropTypes.object.isRequired,
 };
 
 PaginationActions.defaultProps = {