Skip to content

Commit

Permalink
[TablePagination] Add the rest of slots and slotProps. (#44570)
Browse files Browse the repository at this point in the history
  • Loading branch information
siriwatknp authored Dec 20, 2024
1 parent cef5e6c commit 95ae871
Show file tree
Hide file tree
Showing 16 changed files with 608 additions and 182 deletions.
89 changes: 45 additions & 44 deletions docs/pages/material-ui/api/table-pagination.json
Original file line number Diff line number Diff line change
Expand Up @@ -60,14 +60,14 @@
"slotProps": {
"type": {
"name": "shape",
"description": "{ actions?: { firstButton?: object, firstButtonIcon?: object, lastButton?: object, lastButtonIcon?: object, nextButton?: object, nextButtonIcon?: object, previousButton?: object, previousButtonIcon?: object }, select?: object }"
"description": "{ actions?: { firstButton?: object, firstButtonIcon?: object, lastButton?: object, lastButtonIcon?: object, nextButton?: object, nextButtonIcon?: object, previousButton?: object, previousButtonIcon?: object }, displayedRows?: func<br>&#124;&nbsp;object, menuItem?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object, select?: object, selectLabel?: func<br>&#124;&nbsp;object, spacer?: func<br>&#124;&nbsp;object, toolbar?: func<br>&#124;&nbsp;object }"
},
"default": "{}"
},
"slots": {
"type": {
"name": "shape",
"description": "{ actions?: { firstButton?: elementType, firstButtonIcon?: elementType, lastButton?: elementType, lastButtonIcon?: elementType, nextButton?: elementType, nextButtonIcon?: elementType, previousButton?: elementType, previousButtonIcon?: elementType } }"
"description": "{ actions?: { firstButton?: elementType, firstButtonIcon?: elementType, lastButton?: elementType, lastButtonIcon?: elementType, nextButton?: elementType, nextButtonIcon?: elementType, previousButton?: elementType, previousButtonIcon?: elementType }, displayedRows?: elementType, menuItem?: elementType, root?: elementType, select?: elementType, selectLabel?: elementType, spacer?: elementType, toolbar?: elementType }"
},
"default": "{}"
},
Expand All @@ -84,71 +84,72 @@
"import TablePagination from '@mui/material/TablePagination';",
"import { TablePagination } from '@mui/material';"
],
"classes": [
"slots": [
{
"key": "actions",
"className": "MuiTablePagination-actions",
"description": "Styles applied to the internal `TablePaginationActions` component.",
"isGlobal": false
"name": "root",
"description": "The component that renders the root slot.\n[Follow this guide](https://mui.com/material-ui/api/table-cell/#props) to learn more about the requirements for this component.",
"default": "TableCell",
"class": "MuiTablePagination-root"
},
{
"key": "displayedRows",
"className": "MuiTablePagination-displayedRows",
"description": "Styles applied to the displayed rows Typography element.",
"isGlobal": false
"name": "toolbar",
"description": "The component that renders the toolbar slot.\n[Follow this guide](https://mui.com/material-ui/api/toolbar/#props) to learn more about the requirements for this component.",
"default": "Toolbar",
"class": "MuiTablePagination-toolbar"
},
{
"key": "input",
"className": "MuiTablePagination-input",
"description": "Styles applied to the Select component `root` element.",
"isGlobal": false
"name": "spacer",
"description": "The tag that renders the spacer slot.",
"default": "'div'",
"class": "MuiTablePagination-spacer"
},
{
"key": "menuItem",
"className": "MuiTablePagination-menuItem",
"description": "Styles applied to the MenuItem component.",
"isGlobal": false
"name": "selectLabel",
"description": "The tag that renders the selectLabel slot.",
"default": "'p'",
"class": "MuiTablePagination-selectLabel"
},
{
"key": "root",
"className": "MuiTablePagination-root",
"description": "Styles applied to the root element.",
"isGlobal": false
"name": "select",
"description": "The component that renders the select slot.\n[Follow this guide](https://mui.com/material-ui/api/select/#props) to learn more about the requirements for this component.",
"default": "Select",
"class": "MuiTablePagination-select"
},
{
"key": "select",
"className": "MuiTablePagination-select",
"description": "Styles applied to the Select component `select` class.",
"isGlobal": false
"name": "menuItem",
"description": "The component that renders the select slot.\n[Follow this guide](https://mui.com/material-ui/api/menu-item/#props) to learn more about the requirements for this component.",
"default": "MenuItem",
"class": "MuiTablePagination-menuItem"
},
{
"key": "selectIcon",
"className": "MuiTablePagination-selectIcon",
"description": "Styles applied to the Select component `icon` class.",
"isGlobal": false
"name": "displayedRows",
"description": "The tag that renders the displayedRows slot.",
"default": "'p'",
"class": "MuiTablePagination-displayedRows"
},
{
"key": "selectLabel",
"className": "MuiTablePagination-selectLabel",
"description": "Styles applied to the select label Typography element.",
"isGlobal": false
},
"name": "actions",
"description": "The slots that passed to the actions slot.",
"class": "MuiTablePagination-actions"
}
],
"classes": [
{
"key": "selectRoot",
"className": "MuiTablePagination-selectRoot",
"key": "input",
"className": "MuiTablePagination-input",
"description": "Styles applied to the Select component `root` element.",
"isGlobal": false
},
{
"key": "spacer",
"className": "MuiTablePagination-spacer",
"description": "Styles applied to the spacer element.",
"key": "selectIcon",
"className": "MuiTablePagination-selectIcon",
"description": "Styles applied to the Select component `icon` class.",
"isGlobal": false
},
{
"key": "toolbar",
"className": "MuiTablePagination-toolbar",
"description": "Styles applied to the Toolbar component.",
"key": "selectRoot",
"className": "MuiTablePagination-selectRoot",
"description": "Styles applied to the Select component `root` element.",
"isGlobal": false
}
],
Expand Down
45 changes: 12 additions & 33 deletions docs/translations/api-docs/table-pagination/table-pagination.json
Original file line number Diff line number Diff line change
Expand Up @@ -53,55 +53,34 @@
},
"showFirstButton": { "description": "If <code>true</code>, show the first-page button." },
"showLastButton": { "description": "If <code>true</code>, show the last-page button." },
"slotProps": { "description": "The props used for each slot inside the TablePagination." },
"slots": {
"description": "The components used for each slot inside the TablePagination. Either a string to use a HTML element or a component."
},
"slotProps": { "description": "The props used for each slot inside." },
"slots": { "description": "The components used for each slot inside." },
"sx": {
"description": "The system prop that allows defining system overrides as well as additional CSS styles."
}
},
"classDescriptions": {
"actions": {
"description": "Styles applied to {{nodeName}}.",
"nodeName": "the internal <code>TablePaginationActions</code> component"
},
"displayedRows": {
"description": "Styles applied to {{nodeName}}.",
"nodeName": "the displayed rows Typography element"
},
"input": {
"description": "Styles applied to {{nodeName}}.",
"nodeName": "the Select component <code>root</code> element"
},
"menuItem": {
"description": "Styles applied to {{nodeName}}.",
"nodeName": "the MenuItem component"
},
"root": { "description": "Styles applied to the root element." },
"select": {
"description": "Styles applied to {{nodeName}}.",
"nodeName": "the Select component <code>select</code> class"
},
"selectIcon": {
"description": "Styles applied to {{nodeName}}.",
"nodeName": "the Select component <code>icon</code> class"
},
"selectLabel": {
"description": "Styles applied to {{nodeName}}.",
"nodeName": "the select label Typography element"
},
"selectRoot": {
"description": "Styles applied to {{nodeName}}.",
"nodeName": "the Select component <code>root</code> element"
},
"spacer": {
"description": "Styles applied to {{nodeName}}.",
"nodeName": "the spacer element"
},
"toolbar": {
"description": "Styles applied to {{nodeName}}.",
"nodeName": "the Toolbar component"
}
},
"slotDescriptions": {
"actions": "The slots that passed to the actions slot.",
"displayedRows": "The tag that renders the displayedRows slot.",
"menuItem": "The component that renders the select slot. <a href=\"https://mui.com/material-ui/api/menu-item/#props\">Follow this guide</a> to learn more about the requirements for this component.",
"root": "The component that renders the root slot. <a href=\"https://mui.com/material-ui/api/table-cell/#props\">Follow this guide</a> to learn more about the requirements for this component.",
"select": "The component that renders the select slot. <a href=\"https://mui.com/material-ui/api/select/#props\">Follow this guide</a> to learn more about the requirements for this component.",
"selectLabel": "The tag that renders the selectLabel slot.",
"spacer": "The tag that renders the spacer slot.",
"toolbar": "The component that renders the toolbar slot. <a href=\"https://mui.com/material-ui/api/toolbar/#props\">Follow this guide</a> to learn more about the requirements for this component."
}
}
2 changes: 2 additions & 0 deletions packages/mui-codemod/src/deprecations/all/deprecations-all.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ import transformTextFieldProps from '../text-field-props';
import transformTabClasses from '../tab-classes';
import transformToggleButtonGroupClasses from '../toggle-button-group-classes';
import transformTooltipProps from '../tooltip-props';
import transformTablePaginationProps from '../table-pagination-props';

/**
* @param {import('jscodeshift').FileInfo} file
Expand Down Expand Up @@ -64,6 +65,7 @@ export default function deprecationsAll(file, api, options) {
file.source = transformTabClasses(file, api, options);
file.source = transformToggleButtonGroupClasses(file, api, options);
file.source = transformTooltipProps(file, api, options);
file.source = transformTablePaginationProps(file, api, options);

return file.source;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from './table-pagination-props';
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import movePropIntoSlots from '../utils/movePropIntoSlots';
import movePropIntoSlotProps from '../utils/movePropIntoSlotProps';

/**
* @param {import('jscodeshift').FileInfo} file
* @param {import('jscodeshift').API} api
*/
export default function transformer(file, api, options) {
const j = api.jscodeshift;
const root = j(file.source);
const printOptions = options.printOptions;

movePropIntoSlots(j, {
root,
componentName: 'TablePagination',
propName: 'ActionsComponent',
slotName: 'actions',
});

movePropIntoSlotProps(j, {
root,
componentName: 'TablePagination',
propName: 'SelectProps',
slotName: 'select',
});

return root.toSource(printOptions);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { describeJscodeshiftTransform } from '../../../testUtils';
import transform from './table-pagination-props';

describe('@mui/codemod', () => {
describe('deprecations', () => {
describeJscodeshiftTransform({
transform,
transformName: 'table-pagination-props',
dirname: __dirname,
testCases: [
{ actual: '/test-cases/actual.js', expected: '/test-cases/expected.js' },
{ actual: '/test-cases/theme.actual.js', expected: '/test-cases/theme.expected.js' },
],
});
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import TablePagination from '@mui/material/TablePagination';
import { TablePagination as MyTablePagination } from '@mui/material';

<TablePagination ActionsComponent="div" SelectProps={{ native: true }} />;
<TablePagination
ActionsComponent="div"
SelectProps={{ native: true }}
slots={{
actions: 'div',
select: 'div',
}}
/>;
<TablePagination
ActionsComponent="div"
SelectProps={{ native: true }}
slots={{
root: 'div',
}}
slotProps={{
root: { 'aria-label': '' },
}}
/>;
<TablePagination
ActionsComponent="div"
SelectProps={{ native: true }}
slots={{ actions: () => null }}
slotProps={{ select: { native: false } }}
/>;

<MyTablePagination ActionsComponent="div" SelectProps={{ native: true }} />;

<CustomTablePagination ActionsComponent="div" SelectProps={{ native: true }} />;
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import TablePagination from '@mui/material/TablePagination';
import { TablePagination as MyTablePagination } from '@mui/material';

<TablePagination slots={{
actions: "div"
}} slotProps={{
select: { native: true }
}} />;
<TablePagination
slots={{
actions: 'div',
select: 'div',
}}
slotProps={{
select: { native: true }
}} />;
<TablePagination
slots={{
root: 'div',
actions: "div"
}}
slotProps={{
root: { 'aria-label': '' },
select: { native: true }
}} />;
<TablePagination
slots={{ actions: () => null }}
slotProps={{ select: {
...{ native: true },
...{ native: false }
} }} />;

<MyTablePagination slots={{
actions: "div"
}} slotProps={{
select: { native: true }
}} />;

<CustomTablePagination ActionsComponent="div" SelectProps={{ native: true }} />;
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
fn({
MuiTablePagination: {
defaultProps: {
ActionsComponent: 'div',
SelectProps: { native: true },
},
},
});

fn({
MuiTablePagination: {
defaultProps: {
ActionsComponent: 'div',
SelectProps: { native: true },
slotProps: {
root: { id: 'test' },
},
slots: {
root: 'div',
},
},
},
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
fn({
MuiTablePagination: {
defaultProps: {
slots: {
actions: 'div'
},

slotProps: {
select: { native: true }
}
},
},
});

fn({
MuiTablePagination: {
defaultProps: {
slotProps: {
root: { id: 'test' },
select: { native: true }
},

slots: {
root: 'div',
actions: 'div'
}
},
},
});
Loading

0 comments on commit 95ae871

Please sign in to comment.