From 1392fc799e7deb10669e536011842a9c034c18b0 Mon Sep 17 00:00:00 2001 From: Masudur Rahman Date: Mon, 12 Mar 2018 22:59:48 -0500 Subject: [PATCH 1/2] Adding selectProps to TablePagination to pass props to Select input. --- src/Table/TablePagination.d.ts | 2 ++ src/Table/TablePagination.js | 6 ++++++ 2 files changed, 8 insertions(+) diff --git a/src/Table/TablePagination.d.ts b/src/Table/TablePagination.d.ts index 0aa6ed397f893b..9999a7f4ad9458 100644 --- a/src/Table/TablePagination.d.ts +++ b/src/Table/TablePagination.d.ts @@ -2,6 +2,7 @@ import * as React from 'react'; import { StandardProps } from '..'; import { TableCellProps, TableCellClassKey } from './TableCell.d'; import { IconButtonProps } from '../IconButton/IconButton'; +import { SelectProps } from '../Select/Select'; export interface LabelDisplayedRowsArgs { from: number; @@ -24,6 +25,7 @@ export interface TablePaginationProps page: number; rowsPerPage: number; rowsPerPageOptions?: number[]; + selectProps?: Partial; } export type TablePaginationBaseProps = TableCellProps; diff --git a/src/Table/TablePagination.js b/src/Table/TablePagination.js index bb501b2d615e6b..5d05d2fc61df05 100644 --- a/src/Table/TablePagination.js +++ b/src/Table/TablePagination.js @@ -80,6 +80,7 @@ class TablePagination extends React.Component { page, rowsPerPage, rowsPerPageOptions, + selectProps, ...other } = this.props; @@ -108,6 +109,7 @@ class TablePagination extends React.Component { input={} value={rowsPerPage} onChange={onChangeRowsPerPage} + {...selectProps} > {rowsPerPageOptions.map(rowsPerPageOption => ( @@ -204,6 +206,10 @@ TablePagination.propTypes = { * available, no select field will be displayed. */ rowsPerPageOptions: PropTypes.array, + /** + * Properties applied to the rows per page `Select` component. + */ + selectProps: PropTypes.object, }; TablePagination.defaultProps = { From 6009b3228280206d0f4b4b620a42040db55a882e Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Tue, 13 Mar 2018 10:08:24 +0100 Subject: [PATCH 2/2] follow the convention --- pages/api/table-pagination.md | 3 ++- src/Table/TablePagination.d.ts | 2 +- src/Table/TablePagination.js | 10 +++++----- src/Table/TablePaginationActions.js | 4 ++-- 4 files changed, 10 insertions(+), 9 deletions(-) diff --git a/pages/api/table-pagination.md b/pages/api/table-pagination.md index 4d4f3aacb0b4dd..31da50e89052b7 100644 --- a/pages/api/table-pagination.md +++ b/pages/api/table-pagination.md @@ -19,12 +19,13 @@ A `TableCell` based component for placing inside `TableFooter` for pagination. | count * | number | | The total number of rows. | | labelDisplayedRows | func | ({ from, to, count }) => `${from}-${to} of ${count}` | Useful to customize the displayed rows label. | | labelRowsPerPage | node | 'Rows per page:' | Useful to customize the rows per page label. Invoked with a `{ from, to, count, page }` object. | -| nextIconButtonProps | object | | Properties applied to the next arrow `IconButton` component. | +| nextIconButtonProps | object | | Properties applied to the next arrow `IconButton` element. | | onChangePage * | func | | Callback fired when the page is changed.

**Signature:**
`function(event: object, page: number) => void`
*event:* The event source of the callback
*page:* The page selected | | onChangeRowsPerPage | func | | Callback fired when the number of rows per page is changed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback | | page * | number | | The zero-based index of the current page. | | rowsPerPage * | number | | The number of rows per page. | | rowsPerPageOptions | array | [5, 10, 25] | Customizes the options of the rows per page select field. If less than two options are available, no select field will be displayed. | +| SelectProps | object | | Properties applied to the rows per page `Select` element. | Any other properties supplied will be [spread to the root element](/guides/api#spread). diff --git a/src/Table/TablePagination.d.ts b/src/Table/TablePagination.d.ts index 9999a7f4ad9458..411494a8347364 100644 --- a/src/Table/TablePagination.d.ts +++ b/src/Table/TablePagination.d.ts @@ -25,7 +25,7 @@ export interface TablePaginationProps page: number; rowsPerPage: number; rowsPerPageOptions?: number[]; - selectProps?: Partial; + SelectProps?: Partial; } export type TablePaginationBaseProps = TableCellProps; diff --git a/src/Table/TablePagination.js b/src/Table/TablePagination.js index 5d05d2fc61df05..9777e32554eddd 100644 --- a/src/Table/TablePagination.js +++ b/src/Table/TablePagination.js @@ -80,7 +80,7 @@ class TablePagination extends React.Component { page, rowsPerPage, rowsPerPageOptions, - selectProps, + SelectProps, ...other } = this.props; @@ -109,7 +109,7 @@ class TablePagination extends React.Component { input={} value={rowsPerPage} onChange={onChangeRowsPerPage} - {...selectProps} + {...SelectProps} > {rowsPerPageOptions.map(rowsPerPageOption => ( @@ -177,7 +177,7 @@ TablePagination.propTypes = { */ labelRowsPerPage: PropTypes.node, /** - * Properties applied to the next arrow `IconButton` component. + * Properties applied to the next arrow `IconButton` element. */ nextIconButtonProps: PropTypes.object, /** @@ -207,9 +207,9 @@ TablePagination.propTypes = { */ rowsPerPageOptions: PropTypes.array, /** - * Properties applied to the rows per page `Select` component. + * Properties applied to the rows per page `Select` element. */ - selectProps: PropTypes.object, + SelectProps: PropTypes.object, }; TablePagination.defaultProps = { diff --git a/src/Table/TablePaginationActions.js b/src/Table/TablePaginationActions.js index c8346ee01f45c0..81592ead6521fc 100644 --- a/src/Table/TablePaginationActions.js +++ b/src/Table/TablePaginationActions.js @@ -61,7 +61,7 @@ class TablePaginationActions extends React.Component { TablePaginationActions.propTypes = { /** - * Properties applied to the back arrow `IconButton` component. + * Properties applied to the back arrow `IconButton` element. */ backIconButtonProps: PropTypes.object, /** @@ -73,7 +73,7 @@ TablePaginationActions.propTypes = { */ count: PropTypes.number.isRequired, /** - * Properties applied to the next arrow `IconButton` component. + * Properties applied to the next arrow `IconButton` element. */ nextIconButtonProps: PropTypes.object, /**