UNPKG

7.22 kBJavaScriptView Raw
1'use client';
2
3import * as React from 'react';
4import PropTypes from 'prop-types';
5import { useRtl } from '@mui/system/RtlProvider';
6import KeyboardArrowLeft from "../internal/svg-icons/KeyboardArrowLeft.js";
7import KeyboardArrowRight from "../internal/svg-icons/KeyboardArrowRight.js";
8import IconButton from "../IconButton/index.js";
9import LastPageIconDefault from "../internal/svg-icons/LastPage.js";
10import FirstPageIconDefault from "../internal/svg-icons/FirstPage.js";
11
12/**
13 * @ignore - internal component.
14 */
15import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
16const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePaginationActions(props, ref) {
17 const {
18 backIconButtonProps,
19 count,
20 disabled = false,
21 getItemAriaLabel,
22 nextIconButtonProps,
23 onPageChange,
24 page,
25 rowsPerPage,
26 showFirstButton,
27 showLastButton,
28 slots = {},
29 slotProps = {},
30 ...other
31 } = props;
32 const isRtl = useRtl();
33 const handleFirstPageButtonClick = event => {
34 onPageChange(event, 0);
35 };
36 const handleBackButtonClick = event => {
37 onPageChange(event, page - 1);
38 };
39 const handleNextButtonClick = event => {
40 onPageChange(event, page + 1);
41 };
42 const handleLastPageButtonClick = event => {
43 onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
44 };
45 const FirstButton = slots.firstButton ?? IconButton;
46 const LastButton = slots.lastButton ?? IconButton;
47 const NextButton = slots.nextButton ?? IconButton;
48 const PreviousButton = slots.previousButton ?? IconButton;
49 const FirstButtonIcon = slots.firstButtonIcon ?? FirstPageIconDefault;
50 const LastButtonIcon = slots.lastButtonIcon ?? LastPageIconDefault;
51 const NextButtonIcon = slots.nextButtonIcon ?? KeyboardArrowRight;
52 const PreviousButtonIcon = slots.previousButtonIcon ?? KeyboardArrowLeft;
53 const FirstButtonSlot = isRtl ? LastButton : FirstButton;
54 const PreviousButtonSlot = isRtl ? NextButton : PreviousButton;
55 const NextButtonSlot = isRtl ? PreviousButton : NextButton;
56 const LastButtonSlot = isRtl ? FirstButton : LastButton;
57 const firstButtonSlotProps = isRtl ? slotProps.lastButton : slotProps.firstButton;
58 const previousButtonSlotProps = isRtl ? slotProps.nextButton : slotProps.previousButton;
59 const nextButtonSlotProps = isRtl ? slotProps.previousButton : slotProps.nextButton;
60 const lastButtonSlotProps = isRtl ? slotProps.firstButton : slotProps.lastButton;
61 return /*#__PURE__*/_jsxs("div", {
62 ref: ref,
63 ...other,
64 children: [showFirstButton && /*#__PURE__*/_jsx(FirstButtonSlot, {
65 onClick: handleFirstPageButtonClick,
66 disabled: disabled || page === 0,
67 "aria-label": getItemAriaLabel('first', page),
68 title: getItemAriaLabel('first', page),
69 ...firstButtonSlotProps,
70 children: isRtl ? /*#__PURE__*/_jsx(LastButtonIcon, {
71 ...slotProps.lastButtonIcon
72 }) : /*#__PURE__*/_jsx(FirstButtonIcon, {
73 ...slotProps.firstButtonIcon
74 })
75 }), /*#__PURE__*/_jsx(PreviousButtonSlot, {
76 onClick: handleBackButtonClick,
77 disabled: disabled || page === 0,
78 color: "inherit",
79 "aria-label": getItemAriaLabel('previous', page),
80 title: getItemAriaLabel('previous', page),
81 ...(previousButtonSlotProps ?? backIconButtonProps),
82 children: isRtl ? /*#__PURE__*/_jsx(NextButtonIcon, {
83 ...slotProps.nextButtonIcon
84 }) : /*#__PURE__*/_jsx(PreviousButtonIcon, {
85 ...slotProps.previousButtonIcon
86 })
87 }), /*#__PURE__*/_jsx(NextButtonSlot, {
88 onClick: handleNextButtonClick,
89 disabled: disabled || (count !== -1 ? page >= Math.ceil(count / rowsPerPage) - 1 : false),
90 color: "inherit",
91 "aria-label": getItemAriaLabel('next', page),
92 title: getItemAriaLabel('next', page),
93 ...(nextButtonSlotProps ?? nextIconButtonProps),
94 children: isRtl ? /*#__PURE__*/_jsx(PreviousButtonIcon, {
95 ...slotProps.previousButtonIcon
96 }) : /*#__PURE__*/_jsx(NextButtonIcon, {
97 ...slotProps.nextButtonIcon
98 })
99 }), showLastButton && /*#__PURE__*/_jsx(LastButtonSlot, {
100 onClick: handleLastPageButtonClick,
101 disabled: disabled || page >= Math.ceil(count / rowsPerPage) - 1,
102 "aria-label": getItemAriaLabel('last', page),
103 title: getItemAriaLabel('last', page),
104 ...lastButtonSlotProps,
105 children: isRtl ? /*#__PURE__*/_jsx(FirstButtonIcon, {
106 ...slotProps.firstButtonIcon
107 }) : /*#__PURE__*/_jsx(LastButtonIcon, {
108 ...slotProps.lastButtonIcon
109 })
110 })]
111 });
112});
113process.env.NODE_ENV !== "production" ? TablePaginationActions.propTypes = {
114 /**
115 * Props applied to the back arrow [`IconButton`](/material-ui/api/icon-button/) element.
116 */
117 backIconButtonProps: PropTypes.object,
118 /**
119 * The total number of rows.
120 */
121 count: PropTypes.number.isRequired,
122 /**
123 * If `true`, the component is disabled.
124 * @default false
125 */
126 disabled: PropTypes.bool,
127 /**
128 * Accepts a function which returns a string value that provides a user-friendly name for the current page.
129 *
130 * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
131 *
132 * @param {string} type The link or button type to format ('page' | 'first' | 'last' | 'next' | 'previous'). Defaults to 'page'.
133 * @param {number} page The page number to format.
134 * @returns {string}
135 */
136 getItemAriaLabel: PropTypes.func.isRequired,
137 /**
138 * Props applied to the next arrow [`IconButton`](/material-ui/api/icon-button/) element.
139 */
140 nextIconButtonProps: PropTypes.object,
141 /**
142 * Callback fired when the page is changed.
143 *
144 * @param {object} event The event source of the callback.
145 * @param {number} page The page selected.
146 */
147 onPageChange: PropTypes.func.isRequired,
148 /**
149 * The zero-based index of the current page.
150 */
151 page: PropTypes.number.isRequired,
152 /**
153 * The number of rows per page.
154 */
155 rowsPerPage: PropTypes.number.isRequired,
156 /**
157 * If `true`, show the first-page button.
158 */
159 showFirstButton: PropTypes.bool.isRequired,
160 /**
161 * If `true`, show the last-page button.
162 */
163 showLastButton: PropTypes.bool.isRequired,
164 /**
165 * The props used for each slot inside the TablePaginationActions.
166 * @default {}
167 */
168 slotProps: PropTypes.shape({
169 firstButton: PropTypes.object,
170 firstButtonIcon: PropTypes.object,
171 lastButton: PropTypes.object,
172 lastButtonIcon: PropTypes.object,
173 nextButton: PropTypes.object,
174 nextButtonIcon: PropTypes.object,
175 previousButton: PropTypes.object,
176 previousButtonIcon: PropTypes.object
177 }),
178 /**
179 * The components used for each slot inside the TablePaginationActions.
180 * Either a string to use a HTML element or a component.
181 * @default {}
182 */
183 slots: PropTypes.shape({
184 firstButton: PropTypes.elementType,
185 firstButtonIcon: PropTypes.elementType,
186 lastButton: PropTypes.elementType,
187 lastButtonIcon: PropTypes.elementType,
188 nextButton: PropTypes.elementType,
189 nextButtonIcon: PropTypes.elementType,
190 previousButton: PropTypes.elementType,
191 previousButtonIcon: PropTypes.elementType
192 })
193} : void 0;
194export default TablePaginationActions;
\No newline at end of file