get ready for v5

mui · May 12, 2020 · 2feb2d1 · 2feb2d1
1 parent 832824f
commit 2feb2d1
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 119 deletions.
diff --git a/docs/pages/api-docs/table-pagination.md b/docs/pages/api-docs/table-pagination.md
@@ -34,8 +34,8 @@ The `MuiTablePagination` name can be used for providing [default props](/customi
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
 | <span class="prop-name">component</span> | <span class="prop-type">elementType</span> | <span class="prop-default">TableCell</span> | The component used for the root node. Either a string to use a HTML element or a component. |
 | <span class="prop-name required">count&nbsp;*</span> | <span class="prop-type">number</span> |  | The total number of rows.<br>To enable server side pagination for an unknown number of items, provide -1. |
-| <span class="prop-name">getItemAriaLabel</span> | <span class="prop-type">func</span> | <span class="prop-default">(type) => `Go to ${type} page`</span> | Accepts a function which returns a string value that provides a user-friendly name for the current page.<br>For localization purposes, you can use the provided [translations](/guides/localization/).<br><br>**Signature:**<br>`function(type: string, page: number) => string`<br>*type:* The link or button type to format ('page' | 'first' | 'last' | 'next' | 'previous'). Defaults to 'page'.<br>*page:* The page number to format. |
-| <span class="prop-name">labelDisplayedRows</span> | <span class="prop-type">func</span> | <span class="prop-default">({ from, to, count }) =>`${from}-${to === -1 ? count : to} of ${count !== -1 ? count : `more than ${to}`}`</span> | Customize the displayed rows label. Invoked with a `{ from, to, count, page }` object.<br>For localization purposes, you can use the provided [translations](/guides/localization/). |
+| <span class="prop-name">getItemAriaLabel</span> | <span class="prop-type">func</span> | <span class="prop-default">function defaultGetAriaLabel(type) {  return `Go to ${type} page`;}</span> | Accepts a function which returns a string value that provides a user-friendly name for the current page.<br>For localization purposes, you can use the provided [translations](/guides/localization/).<br><br>**Signature:**<br>`function(type: string) => string`<br>*type:* The link or button type to format ('first' | 'last' | 'next' | 'previous'). |
+| <span class="prop-name">labelDisplayedRows</span> | <span class="prop-type">func</span> |  | Customize the displayed rows label. Invoked with a `{ from, to, count, page }` object.<br>For localization purposes, you can use the provided [translations](/guides/localization/). |
 | <span class="prop-name">labelRowsPerPage</span> | <span class="prop-type">string</span> | <span class="prop-default">'Rows per page:'</span> | Customize the rows per page label.<br>For localization purposes, you can use the provided [translations](/guides/localization/). |
 | <span class="prop-name">nextIconButtonProps</span> | <span class="prop-type">object</span> |  | Props applied to the next arrow [`IconButton`](/api/icon-button/) element. |
 | <span class="prop-name">nextIconButtonText</span> | <span class="prop-type">string</span> | <span class="prop-default">'Next page'</span> | Text label for the next arrow icon button.<br>For localization purposes, you can use the provided [translations](/guides/localization/). |

diff --git a/packages/material-ui-lab/src/Pagination/Pagination.js b/packages/material-ui-lab/src/Pagination/Pagination.js
@@ -35,7 +35,7 @@ const Pagination = React.forwardRef(function Pagination(props, ref) {
     count,
     defaultPage,
     disabled,
-    getItemAriaLabel: getAriaLabel = defaultGetAriaLabel,
+    getItemAriaLabel = defaultGetAriaLabel,
     hideNextButton,
     hidePrevButton,
     onChange,
@@ -65,7 +65,7 @@ const Pagination = React.forwardRef(function Pagination(props, ref) {
             {renderItem({
               ...item,
               color,
-              'aria-label': getAriaLabel(item.type, item.page, item.selected),
+              'aria-label': getItemAriaLabel(item.type, item.page, item.selected),
               shape,
               size,
               variant,

diff --git a/packages/material-ui/src/TablePagination/TablePagination.d.ts b/packages/material-ui/src/TablePagination/TablePagination.d.ts
@@ -20,6 +20,15 @@ export interface TablePaginationTypeMap<P, D extends React.ElementType> {
       backIconButtonText?: string;
       backIconButtonProps?: Partial<IconButtonProps>;
       count: number;
+      /**
+       * Accepts a function which returns a string value that provides a user-friendly name for the current page.
+       *
+       * For localization purposes, you can use the provided [translations](/guides/localization/).
+       *
+       * @param {string} type The link or button type to format ('first' | 'last' | 'next' | 'previous').
+       * @returns {string}
+       */
+      getItemAriaLabel?: (type: 'first' | 'last' | 'next' | 'previous') => string;
       labelDisplayedRows?: (paginationInfo: LabelDisplayedRowsArgs) => React.ReactNode;
       labelRowsPerPage?: string;
       nextIconButtonProps?: Partial<IconButtonProps>;
@@ -30,10 +39,14 @@ export interface TablePaginationTypeMap<P, D extends React.ElementType> {
       rowsPerPage: number;
       rowsPerPageOptions?: Array<number | { value: number; label: string }>;
       SelectProps?: Partial<SelectProps>;
-      getItemAriaLabel?: (
-        type: 'page' | 'first' | 'last' | 'next' | 'previous',
-        page: number
-      ) => string;
+      /**
+       * If `true`, show the first-page button.
+       */
+      showFirstButton?: boolean;
+      /**
+       * If `true`, show the last-page button.
+       */
+      showLastButton?: boolean;
     };
   defaultComponent: D;
   classKey: TablePaginationClassKey;

diff --git a/packages/material-ui/src/TablePagination/TablePagination.js b/packages/material-ui/src/TablePagination/TablePagination.js
@@ -66,11 +66,15 @@ export const styles = (theme) => ({
   },
 });
 
-const defaultLabelDisplayedRows = ({ from, to, count }) =>
-  `${from}-${to === -1 ? count : to} of ${count !== -1 ? count : `more than ${to}`}`;
+function defaultLabelDisplayedRows({ from, to, count }) {
+  return `${from}-${to === -1 ? count : to} of ${count !== -1 ? count : `more than ${to}`}`;
+}
+
 const defaultRowsPerPageOptions = [10, 25, 50, 100];
 
-const defaultGetAriaLabel = (type) => `Go to ${type} page`;
+function defaultGetAriaLabel(type) {
+  return `Go to ${type} page`;
+}
 
 /**
  * A `TableCell` based component for placing inside `TableFooter` for pagination.
@@ -85,6 +89,7 @@ const TablePagination = React.forwardRef(function TablePagination(props, ref) {
     colSpan: colSpanProp,
     component: Component = TableCell,
     count,
+    getItemAriaLabel = defaultGetAriaLabel,
     labelDisplayedRows = defaultLabelDisplayedRows,
     labelRowsPerPage = 'Rows per page:',
     nextIconButtonProps,
@@ -97,7 +102,6 @@ const TablePagination = React.forwardRef(function TablePagination(props, ref) {
     SelectProps = {},
     showFirstButton = false,
     showLastButton = false,
-    getItemAriaLabel: getAriaLabel = defaultGetAriaLabel,
     ...other
   } = props;
 
@@ -167,7 +171,7 @@ const TablePagination = React.forwardRef(function TablePagination(props, ref) {
           rowsPerPage={rowsPerPage}
           showFirstButton={showFirstButton}
           showLastButton={showLastButton}
-          getAriaLabel={getAriaLabel}
+          getItemAriaLabel={getItemAriaLabel}
         />
       </Toolbar>
     </Component>
@@ -219,8 +223,7 @@ TablePagination.propTypes = {
    *
    * For localization purposes, you can use the provided [translations](/guides/localization/).
    *
-   * @param {string} type The link or button type to format ('page' | 'first' | 'last' | 'next' | 'previous'). Defaults to 'page'.
-   * @param {number} page The page number to format.
+   * @param {string} type The link or button type to format ('first' | 'last' | 'next' | 'previous').
    * @returns {string}
    */
   getItemAriaLabel: PropTypes.func,

diff --git a/packages/material-ui/src/TablePagination/TablePagination.test.js b/packages/material-ui/src/TablePagination/TablePagination.test.js
@@ -295,101 +295,4 @@ describe('<TablePagination />', () => {
       );
     });
   });
-
-  describe('prop: showFirstButton', () => {
-    it('should disable showFirstButton when it is on first page', () => {
-      const wrapper = mount(
-        <table>
-          <TableFooter>
-            <TableRow>
-              <TablePagination
-                count={30}
-                page={0}
-                onChangePage={noop}
-                onChangeRowsPerPage={noop}
-                rowsPerPage={10}
-                showFirstButton
-              />
-            </TableRow>
-          </TableFooter>
-        </table>,
-      );
-
-      const firstButton = wrapper.find(IconButton).at(0);
-      assert.strictEqual(firstButton.props().disabled, true);
-    });
-  });
-  it('should go to first page on click', () => {
-    let page = 2;
-    const wrapper = mount(
-      <table>
-        <TableFooter>
-          <TableRow>
-            <TablePagination
-              count={30}
-              page={page}
-              onChangePage={(event, nextPage) => {
-                page = nextPage;
-              }}
-              onChangeRowsPerPage={noop}
-              rowsPerPage={10}
-              showFirstButton
-            />
-          </TableRow>
-        </TableFooter>
-      </table>,
-    );
-
-    const firstButton = wrapper.find(IconButton).at(0);
-    firstButton.simulate('click');
-    assert.strictEqual(page, 0);
-  });
-  describe('prop: showLastButton', () => {
-    it('should disable showLastButton when it is on last page', () => {
-      const wrapper = mount(
-        <table>
-          <TableFooter>
-            <TableRow>
-              <TablePagination
-                count={30}
-                page={2}
-                onChangePage={noop}
-                onChangeRowsPerPage={noop}
-                rowsPerPage={10}
-                showLastButton
-              />
-            </TableRow>
-          </TableFooter>
-        </table>,
-      );
-
-      const lastButton = wrapper.find(IconButton).at(2);
-      assert.strictEqual(lastButton.props().disabled, true);
-    });
-  });
-  it('should go to last page on click', () => {
-    let page = 0;
-    const wrapper = mount(
-      <table>
-        <TableFooter>
-          <TableRow>
-            <TablePagination
-              count={30}
-              page={page}
-              onChangePage={(event, nextPage) => {
-                page = nextPage;
-              }}
-              onChangeRowsPerPage={noop}
-              rowsPerPage={10}
-              showLastButton
-            />
-          </TableRow>
-        </TableFooter>
-      </table>,
-    );
-
-    const lastButton = wrapper.find(IconButton).at(2);
-    lastButton.simulate('click');
-    assert.strictEqual(page, 2);
-  });
 });
diff --git a/packages/material-ui/src/TablePagination/TablePaginationActions.d.ts b/packages/material-ui/src/TablePagination/TablePaginationActions.d.ts
@@ -4,13 +4,21 @@ import { IconButtonProps } from '../IconButton/IconButton';
 export interface TablePaginationActionsProps extends React.HTMLAttributes<HTMLDivElement> {
   backIconButtonProps?: Partial<IconButtonProps>;
   count: number;
+  /**
+   * Accepts a function which returns a string value that provides a user-friendly name for the current page.
+   *
+   * For localization purposes, you can use the provided [translations](/guides/localization/).
+   *
+   * @param {string} type The link or button type to format ('first' | 'last' | 'next' | 'previous').
+   * @returns {string}
+   */
+  getItemAriaLabel?: (type: 'first' | 'last' | 'next' | 'previous') => string;
   nextIconButtonProps?: Partial<IconButtonProps>;
   onChangePage: (event: React.MouseEvent<HTMLButtonElement> | null, page: number) => void;
   page: number;
   rowsPerPage: number;
   showFirstButton?: boolean;
   showLastButton?: boolean;
-  getAriaLabel?: (type: 'page' | 'first' | 'last' | 'next' | 'previous', page: number) => string;
 }
 
 declare const TablePaginationActions: React.ComponentType<TablePaginationActionsProps>;

diff --git a/packages/material-ui/src/TablePagination/TablePaginationActions.js b/packages/material-ui/src/TablePagination/TablePaginationActions.js
@@ -14,13 +14,13 @@ const TablePaginationActions = React.forwardRef(function TablePaginationActions(
   const {
     backIconButtonProps,
     count,
+    getItemAriaLabel,
     nextIconButtonProps,
     onChangePage,
     page,
     rowsPerPage,
     showFirstButton,
     showLastButton,
-    getAriaLabel,
     ...other
   } = props;
 
@@ -48,7 +48,7 @@ const TablePaginationActions = React.forwardRef(function TablePaginationActions(
         <IconButton
           onClick={handleFirstPageButtonClick}
           disabled={page === 0}
-          aria-label={getAriaLabel('first', page)}
+          aria-label={getItemAriaLabel('first', page)}
         >
           {theme.direction === 'rtl' ? <LastPageIcon /> : <FirstPageIcon />}
         </IconButton>
@@ -57,7 +57,7 @@ const TablePaginationActions = React.forwardRef(function TablePaginationActions(
         onClick={handleBackButtonClick}
         disabled={page === 0}
         color="inherit"
-        aria-label={getAriaLabel('previous', page)}
+        aria-label={getItemAriaLabel('previous', page)}
         {...backIconButtonProps}
       >
         {theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}
@@ -66,7 +66,7 @@ const TablePaginationActions = React.forwardRef(function TablePaginationActions(
         onClick={handleNextButtonClick}
         disabled={count !== -1 ? page >= Math.ceil(count / rowsPerPage) - 1 : false}
         color="inherit"
-        aria-label={getAriaLabel('next', page)}
+        aria-label={getItemAriaLabel('next', page)}
         {...nextIconButtonProps}
       >
         {theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
@@ -75,7 +75,7 @@ const TablePaginationActions = React.forwardRef(function TablePaginationActions(
         <IconButton
           onClick={handleLastPageButtonClick}
           disabled={page >= Math.ceil(count / rowsPerPage) - 1}
-          aria-label={getAriaLabel('last', page)}
+          aria-label={getItemAriaLabel('last', page)}
         >
           {theme.direction === 'rtl' ? <FirstPageIcon /> : <LastPageIcon />}
         </IconButton>
@@ -102,7 +102,7 @@ TablePaginationActions.propTypes = {
    * @param {number} page The page number to format.
    * @returns {string}
    */
-  getAriaLabel: PropTypes.func,
+  getItemAriaLabel: PropTypes.func,
   /**
    * Props applied to the next arrow [`IconButton`](/api/icon-button/) element.
    */