Merge pull request #3598 from jaytula/usestyles-paginationactions

[RFR] Convert PaginationActions to hooks
marmelab · Aug 27, 2019 · 2044887 · 2044887
2 parents 2bfb7e3 + e43f222
commit 2044887
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 88 deletions.
diff --git a/packages/ra-ui-materialui/src/list/PaginationActions.js b/packages/ra-ui-materialui/src/list/PaginationActions.js
@@ -1,29 +1,33 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import pure from 'recompose/pure';
 import Button from '@material-ui/core/Button';
-import { withStyles, createStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import ChevronLeft from '@material-ui/icons/ChevronLeft';
 import ChevronRight from '@material-ui/icons/ChevronRight';
-import compose from 'recompose/compose';
-import { translate } from 'ra-core';
+import { useTranslate } from 'react-admin';
 
-const styles = theme =>
-    createStyles({
-        actions: {
-            flexShrink: 0,
-            color: theme.palette.text.secondary,
-            marginLeft: 20,
-        },
-        hellip: { padding: '1.2em' },
-    });
+const useStyles = makeStyles(theme => ({
+    actions: {
+        flexShrink: 0,
+        color: theme.palette.text.secondary,
+        marginLeft: 20,
+    },
+    hellip: { padding: '1.2em' },
+}));
 
-export class PaginationActions extends Component {
+function PaginationActions({
+    classes: classesOverride,
+    page,
+    rowsPerPage,
+    count,
+    onChangePage,
+}) {
+    const classes = useStyles({ classes: classesOverride });
+    const translate = useTranslate();
     /**
      * Warning: material-ui's page is 0-based
      */
-    range() {
-        const { page, rowsPerPage, count } = this.props;
+    const range = () => {
         const nbPages = Math.ceil(count / rowsPerPage) || 1;
         if (isNaN(page) || nbPages === 1) {
             return [];
@@ -57,101 +61,88 @@ export class PaginationActions extends Component {
         }
 
         return input;
-    }
+    };
 
-    getNbPages = () =>
-        Math.ceil(this.props.count / this.props.rowsPerPage) || 1;
+    const getNbPages = () => Math.ceil(count / rowsPerPage) || 1;
 
-    prevPage = event => {
-        if (this.props.page === 0) {
-            throw new Error(
-                this.props.translate('ra.navigation.page_out_from_begin')
-            );
+    const prevPage = event => {
+        if (page === 0) {
+            throw new Error(translate('ra.navigation.page_out_from_begin'));
         }
-        this.props.onChangePage(event, this.props.page - 1);
+        onChangePage(event, page - 1);
     };
 
-    nextPage = event => {
-        if (this.props.page > this.getNbPages() - 1) {
-            throw new Error(
-                this.props.translate('ra.navigation.page_out_from_end')
-            );
+    const nextPage = event => {
+        if (page > getNbPages() - 1) {
+            throw new Error(translate('ra.navigation.page_out_from_end'));
         }
-        this.props.onChangePage(event, this.props.page + 1);
+        onChangePage(event, page + 1);
     };
 
-    gotoPage = event => {
+    const gotoPage = event => {
         const page = parseInt(event.currentTarget.dataset.page, 10);
-        if (page < 0 || page > this.getNbPages() - 1) {
+        if (page < 0 || page > getNbPages() - 1) {
             throw new Error(
-                this.props.translate('ra.navigation.page_out_of_boundaries', {
+                translate('ra.navigation.page_out_of_boundaries', {
                     page: page + 1,
                 })
             );
         }
-        this.props.onChangePage(event, page);
+        onChangePage(event, page);
     };
 
-    renderPageNums() {
-        const { classes = {} } = this.props;
-
-        return this.range().map((pageNum, index) =>
+    const renderPageNums = () => {
+        return range().map((pageNum, index) =>
             pageNum === '.' ? (
                 <span key={`hyphen_${index}`} className={classes.hellip}>
                     &hellip;
                 </span>
             ) : (
                 <Button
                     className="page-number"
-                    color={
-                        pageNum === this.props.page + 1 ? 'default' : 'primary'
-                    }
+                    color={pageNum === page + 1 ? 'default' : 'primary'}
                     key={pageNum}
                     data-page={pageNum - 1}
-                    onClick={this.gotoPage}
+                    onClick={gotoPage}
                     size="small"
                 >
                     {pageNum}
                 </Button>
             )
         );
-    }
-
-    render() {
-        const { classes = {}, page, translate } = this.props;
+    };
 
-        const nbPages = this.getNbPages();
-        if (nbPages === 1) return <div className={classes.actions} />;
-        return (
-            <div className={classes.actions}>
-                {page > 0 && (
-                    <Button
-                        color="primary"
-                        key="prev"
-                        onClick={this.prevPage}
-                        className="previous-page"
-                        size="small"
-                    >
-                        <ChevronLeft />
-                        {translate('ra.navigation.prev')}
-                    </Button>
-                )}
-                {this.renderPageNums()}
-                {page !== nbPages - 1 && (
-                    <Button
-                        color="primary"
-                        key="next"
-                        onClick={this.nextPage}
-                        className="next-page"
-                        size="small"
-                    >
-                        {translate('ra.navigation.next')}
-                        <ChevronRight />
-                    </Button>
-                )}
-            </div>
-        );
-    }
+    const nbPages = getNbPages();
+    if (nbPages === 1) return <div className={classes.actions} />;
+    return (
+        <div className={classes.actions}>
+            {page > 0 && (
+                <Button
+                    color="primary"
+                    key="prev"
+                    onClick={prevPage}
+                    className="previous-page"
+                    size="small"
+                >
+                    <ChevronLeft />
+                    {translate('ra.navigation.prev')}
+                </Button>
+            )}
+            {renderPageNums()}
+            {page !== nbPages - 1 && (
+                <Button
+                    color="primary"
+                    key="next"
+                    onClick={nextPage}
+                    className="next-page"
+                    size="small"
+                >
+                    {translate('ra.navigation.next')}
+                    <ChevronRight />
+                </Button>
+            )}
+        </div>
+    );
 }
 
 /**
@@ -163,16 +154,11 @@ export class PaginationActions extends Component {
 PaginationActions.propTypes = {
     backIconButtonProps: PropTypes.object,
     count: PropTypes.number.isRequired,
+    classes: PropTypes.object,
     nextIconButtonProps: PropTypes.object,
     onChangePage: PropTypes.func.isRequired,
     page: PropTypes.number.isRequired,
     rowsPerPage: PropTypes.number.isRequired,
 };
 
-const enhance = compose(
-    pure,
-    translate,
-    withStyles(styles)
-);
-
-export default enhance(PaginationActions);
+export default React.memo(PaginationActions);
diff --git a/packages/ra-ui-materialui/src/list/PaginationActions.spec.js b/packages/ra-ui-materialui/src/list/PaginationActions.spec.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import { PaginationActions } from './PaginationActions';
+import PaginationActions from './PaginationActions';
 
 describe('<PaginationActions />', () => {
     it('should not render any actions when no pagination is necessary', () => {