From 774674b7d68b9421093ebe7e60fb08a42ded1c5b Mon Sep 17 00:00:00 2001 From: jaytula Date: Sat, 24 Aug 2019 18:12:44 -0700 Subject: [PATCH 1/7] Convert PaginationActions to a functional component --- .../src/list/PaginationActions.js | 117 ++++++++---------- 1 file changed, 55 insertions(+), 62 deletions(-) diff --git a/packages/ra-ui-materialui/src/list/PaginationActions.js b/packages/ra-ui-materialui/src/list/PaginationActions.js index 5bce6b34ce9..ac7bc9921db 100644 --- a/packages/ra-ui-materialui/src/list/PaginationActions.js +++ b/packages/ra-ui-materialui/src/list/PaginationActions.js @@ -18,12 +18,12 @@ const styles = theme => hellip: { padding: '1.2em' }, }); -export class PaginationActions extends Component { +export function PaginationActions(props) { /** * Warning: material-ui's page is 0-based */ - range() { - const { page, rowsPerPage, count } = this.props; + const range = () => { + const { page, rowsPerPage, count } = props; const nbPages = Math.ceil(count / rowsPerPage) || 1; if (isNaN(page) || nbPages === 1) { return []; @@ -57,45 +57,42 @@ export class PaginationActions extends Component { } return input; - } + }; - getNbPages = () => - Math.ceil(this.props.count / this.props.rowsPerPage) || 1; + const getNbPages = () => Math.ceil(props.count / props.rowsPerPage) || 1; - prevPage = event => { - if (this.props.page === 0) { + const prevPage = event => { + if (props.page === 0) { throw new Error( - this.props.translate('ra.navigation.page_out_from_begin') + props.translate('ra.navigation.page_out_from_begin') ); } - this.props.onChangePage(event, this.props.page - 1); + props.onChangePage(event, props.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 (props.page > getNbPages() - 1) { + throw new Error(props.translate('ra.navigation.page_out_from_end')); } - this.props.onChangePage(event, this.props.page + 1); + props.onChangePage(event, props.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', { + props.translate('ra.navigation.page_out_of_boundaries', { page: page + 1, }) ); } - this.props.onChangePage(event, page); + props.onChangePage(event, page); }; - renderPageNums() { - const { classes = {} } = this.props; + const renderPageNums = () => { + const { classes = {} } = props; - return this.range().map((pageNum, index) => + return range().map((pageNum, index) => pageNum === '.' ? ( … @@ -103,55 +100,51 @@ export class PaginationActions extends Component { ) : ( ) ); - } + }; - render() { - const { classes = {}, page, translate } = this.props; + const { classes = {}, page, translate } = props; - const nbPages = this.getNbPages(); - if (nbPages === 1) return
; - return ( -
- {page > 0 && ( - - )} - {this.renderPageNums()} - {page !== nbPages - 1 && ( - - )} -
- ); - } + const nbPages = getNbPages(); + if (nbPages === 1) return
; + return ( +
+ {page > 0 && ( + + )} + {renderPageNums()} + {page !== nbPages - 1 && ( + + )} +
+ ); } /** From 700d728329d7b25f62947d928129b2b021d71728 Mon Sep 17 00:00:00 2001 From: jaytula Date: Sat, 24 Aug 2019 18:16:55 -0700 Subject: [PATCH 2/7] Convert PaginationActions to useStyles --- .../src/list/PaginationActions.js | 25 +++++++++---------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/packages/ra-ui-materialui/src/list/PaginationActions.js b/packages/ra-ui-materialui/src/list/PaginationActions.js index ac7bc9921db..b4654a81dd3 100644 --- a/packages/ra-ui-materialui/src/list/PaginationActions.js +++ b/packages/ra-ui-materialui/src/list/PaginationActions.js @@ -2,23 +2,23 @@ import React, { Component } 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'; -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 function PaginationActions(props) { +export function PaginationActions({ classes: classesOverride, ...props }) { + const classes = useStyles({ classes: classesOverride }); /** * Warning: material-ui's page is 0-based */ @@ -164,8 +164,7 @@ PaginationActions.propTypes = { const enhance = compose( pure, - translate, - withStyles(styles) + translate ); export default enhance(PaginationActions); From c1296609cb56c3f09d004aa26b36bffb6f33ea71 Mon Sep 17 00:00:00 2001 From: jaytula Date: Sat, 24 Aug 2019 18:34:01 -0700 Subject: [PATCH 3/7] Move prop destructuring to function argument for PaginationActions --- .../src/list/PaginationActions.js | 38 ++++++++++--------- 1 file changed, 20 insertions(+), 18 deletions(-) diff --git a/packages/ra-ui-materialui/src/list/PaginationActions.js b/packages/ra-ui-materialui/src/list/PaginationActions.js index b4654a81dd3..da700ca64d4 100644 --- a/packages/ra-ui-materialui/src/list/PaginationActions.js +++ b/packages/ra-ui-materialui/src/list/PaginationActions.js @@ -17,13 +17,20 @@ const useStyles = makeStyles(theme => ({ hellip: { padding: '1.2em' }, })); -export function PaginationActions({ classes: classesOverride, ...props }) { +export function PaginationActions({ + classes: classesOverride, + page, + rowsPerPage, + count, + translate, + onChangePage, + ...props +}) { const classes = useStyles({ classes: classesOverride }); /** * Warning: material-ui's page is 0-based */ const range = () => { - const { page, rowsPerPage, count } = props; const nbPages = Math.ceil(count / rowsPerPage) || 1; if (isNaN(page) || nbPages === 1) { return []; @@ -59,39 +66,35 @@ export function PaginationActions({ classes: classesOverride, ...props }) { return input; }; - const getNbPages = () => Math.ceil(props.count / props.rowsPerPage) || 1; + const getNbPages = () => Math.ceil(count / rowsPerPage) || 1; const prevPage = event => { - if (props.page === 0) { - throw new Error( - props.translate('ra.navigation.page_out_from_begin') - ); + if (page === 0) { + throw new Error(translate('ra.navigation.page_out_from_begin')); } - props.onChangePage(event, props.page - 1); + onChangePage(event, page - 1); }; const nextPage = event => { - if (props.page > getNbPages() - 1) { - throw new Error(props.translate('ra.navigation.page_out_from_end')); + if (page > getNbPages() - 1) { + throw new Error(translate('ra.navigation.page_out_from_end')); } - props.onChangePage(event, props.page + 1); + onChangePage(event, page + 1); }; const gotoPage = event => { const page = parseInt(event.currentTarget.dataset.page, 10); if (page < 0 || page > getNbPages() - 1) { throw new Error( - props.translate('ra.navigation.page_out_of_boundaries', { + translate('ra.navigation.page_out_of_boundaries', { page: page + 1, }) ); } - props.onChangePage(event, page); + onChangePage(event, page); }; const renderPageNums = () => { - const { classes = {} } = props; - return range().map((pageNum, index) => pageNum === '.' ? ( @@ -100,7 +103,7 @@ export function PaginationActions({ classes: classesOverride, ...props }) { ) : (