1 | import _extends from "@babel/runtime/helpers/esm/extends";
|
2 | import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
3 | const _excluded = ["colSpan", "count", "getItemAriaLabel", "labelDisplayedRows", "labelId", "labelRowsPerPage", "onPageChange", "onRowsPerPageChange", "page", "rowsPerPage", "rowsPerPageOptions", "selectId", "slotProps", "slots"];
|
4 | import * as React from 'react';
|
5 | import PropTypes from 'prop-types';
|
6 | import { unstable_useId as useId, chainPropTypes, integerPropType } from '@mui/utils';
|
7 | import { useSlotProps } from '../utils';
|
8 | import composeClasses from '../composeClasses';
|
9 | import isHostComponent from '../utils/isHostComponent';
|
10 | import TablePaginationActions from './TablePaginationActions';
|
11 | import { getTablePaginationUtilityClass } from './tablePaginationClasses';
|
12 | import { useClassNamesOverride } from '../utils/ClassNameConfigurator';
|
13 | import { jsx as _jsx } from "react/jsx-runtime";
|
14 | import { createElement as _createElement } from "react";
|
15 | import { jsxs as _jsxs } from "react/jsx-runtime";
|
16 | function defaultLabelDisplayedRows({
|
17 | from,
|
18 | to,
|
19 | count
|
20 | }) {
|
21 | return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
|
22 | }
|
23 | function defaultGetAriaLabel(type) {
|
24 | return `Go to ${type} page`;
|
25 | }
|
26 | const useUtilityClasses = () => {
|
27 | const slots = {
|
28 | root: ['root'],
|
29 | toolbar: ['toolbar'],
|
30 | spacer: ['spacer'],
|
31 | selectLabel: ['selectLabel'],
|
32 | select: ['select'],
|
33 | input: ['input'],
|
34 | selectIcon: ['selectIcon'],
|
35 | menuItem: ['menuItem'],
|
36 | displayedRows: ['displayedRows'],
|
37 | actions: ['actions']
|
38 | };
|
39 | return composeClasses(slots, useClassNamesOverride(getTablePaginationUtilityClass));
|
40 | };
|
41 |
|
42 |
|
43 |
|
44 |
|
45 |
|
46 |
|
47 |
|
48 |
|
49 |
|
50 |
|
51 |
|
52 |
|
53 | const TablePagination = React.forwardRef(function TablePagination(props, forwardedRef) {
|
54 | var _slots$root, _slots$select, _slots$actions, _slots$menuItem, _slots$selectLabel, _slots$displayedRows, _slots$toolbar, _slots$spacer;
|
55 | const {
|
56 | colSpan: colSpanProp,
|
57 | count,
|
58 | getItemAriaLabel = defaultGetAriaLabel,
|
59 | labelDisplayedRows = defaultLabelDisplayedRows,
|
60 | labelId: labelIdProp,
|
61 | labelRowsPerPage = 'Rows per page:',
|
62 | onPageChange,
|
63 | onRowsPerPageChange,
|
64 | page,
|
65 | rowsPerPage,
|
66 | rowsPerPageOptions = [10, 25, 50, 100],
|
67 | selectId: selectIdProp,
|
68 | slotProps = {},
|
69 | slots = {}
|
70 | } = props,
|
71 | other = _objectWithoutPropertiesLoose(props, _excluded);
|
72 | const ownerState = props;
|
73 | const classes = useUtilityClasses();
|
74 | let colSpan;
|
75 | const Root = (_slots$root = slots.root) != null ? _slots$root : 'td';
|
76 | if (Root === 'td' || !isHostComponent(Root)) {
|
77 | colSpan = colSpanProp || 1000;
|
78 | }
|
79 |
|
80 | const getLabelDisplayedRowsTo = () => {
|
81 | if (count === -1) {
|
82 | return (page + 1) * rowsPerPage;
|
83 | }
|
84 | return rowsPerPage === -1 ? count : Math.min(count, (page + 1) * rowsPerPage);
|
85 | };
|
86 | const selectId = useId(selectIdProp);
|
87 | const labelId = useId(labelIdProp);
|
88 | const rootProps = useSlotProps({
|
89 | elementType: Root,
|
90 | externalSlotProps: slotProps.root,
|
91 | externalForwardedProps: other,
|
92 | additionalProps: {
|
93 | colSpan,
|
94 | ref: forwardedRef
|
95 | },
|
96 | ownerState,
|
97 | className: classes.root
|
98 | });
|
99 | const Select = (_slots$select = slots.select) != null ? _slots$select : 'select';
|
100 | const selectProps = useSlotProps({
|
101 | elementType: Select,
|
102 | externalSlotProps: slotProps.select,
|
103 | additionalProps: {
|
104 | value: rowsPerPage,
|
105 | id: selectId,
|
106 | onChange: event => onRowsPerPageChange && onRowsPerPageChange(event),
|
107 | 'aria-label': rowsPerPage.toString(),
|
108 | 'aria-labelledby': [labelId, selectId].filter(Boolean).join(' ') || undefined
|
109 | },
|
110 | ownerState,
|
111 | className: classes.select
|
112 | });
|
113 | const Actions = (_slots$actions = slots.actions) != null ? _slots$actions : TablePaginationActions;
|
114 | const actionsProps = useSlotProps({
|
115 | elementType: Actions,
|
116 | externalSlotProps: slotProps.actions,
|
117 | additionalProps: {
|
118 | page,
|
119 | rowsPerPage,
|
120 | count,
|
121 | onPageChange,
|
122 | getItemAriaLabel
|
123 | },
|
124 | ownerState,
|
125 | className: classes.actions
|
126 | });
|
127 | const MenuItem = (_slots$menuItem = slots.menuItem) != null ? _slots$menuItem : 'option';
|
128 | const menuItemProps = useSlotProps({
|
129 | elementType: MenuItem,
|
130 | externalSlotProps: slotProps.menuItem,
|
131 | additionalProps: {
|
132 | value: undefined
|
133 | },
|
134 | ownerState,
|
135 | className: classes.menuItem
|
136 | });
|
137 | const SelectLabel = (_slots$selectLabel = slots.selectLabel) != null ? _slots$selectLabel : 'p';
|
138 | const selectLabelProps = useSlotProps({
|
139 | elementType: SelectLabel,
|
140 | externalSlotProps: slotProps.selectLabel,
|
141 | additionalProps: {
|
142 | id: labelId
|
143 | },
|
144 | ownerState,
|
145 | className: classes.selectLabel
|
146 | });
|
147 | const DisplayedRows = (_slots$displayedRows = slots.displayedRows) != null ? _slots$displayedRows : 'p';
|
148 | const displayedRowsProps = useSlotProps({
|
149 | elementType: DisplayedRows,
|
150 | externalSlotProps: slotProps.displayedRows,
|
151 | ownerState,
|
152 | className: classes.displayedRows
|
153 | });
|
154 | const Toolbar = (_slots$toolbar = slots.toolbar) != null ? _slots$toolbar : 'div';
|
155 | const toolbarProps = useSlotProps({
|
156 | elementType: Toolbar,
|
157 | externalSlotProps: slotProps.toolbar,
|
158 | ownerState,
|
159 | className: classes.toolbar
|
160 | });
|
161 | const Spacer = (_slots$spacer = slots.spacer) != null ? _slots$spacer : 'div';
|
162 | const spacerProps = useSlotProps({
|
163 | elementType: Spacer,
|
164 | externalSlotProps: slotProps.spacer,
|
165 | ownerState,
|
166 | className: classes.spacer
|
167 | });
|
168 | return _jsx(Root, _extends({}, rootProps, {
|
169 | children: _jsxs(Toolbar, _extends({}, toolbarProps, {
|
170 | children: [_jsx(Spacer, _extends({}, spacerProps)), rowsPerPageOptions.length > 1 && _jsx(SelectLabel, _extends({}, selectLabelProps, {
|
171 | children: labelRowsPerPage
|
172 | })), rowsPerPageOptions.length > 1 && _jsx(Select, _extends({}, selectProps, {
|
173 | children: rowsPerPageOptions.map(rowsPerPageOption => _createElement(MenuItem, _extends({}, menuItemProps, {
|
174 | key: typeof rowsPerPageOption !== 'number' && rowsPerPageOption.label ? rowsPerPageOption.label : rowsPerPageOption,
|
175 | value: typeof rowsPerPageOption !== 'number' && rowsPerPageOption.value ? rowsPerPageOption.value : rowsPerPageOption
|
176 | }), typeof rowsPerPageOption !== 'number' && rowsPerPageOption.label ? rowsPerPageOption.label : rowsPerPageOption))
|
177 | })), _jsx(DisplayedRows, _extends({}, displayedRowsProps, {
|
178 | children: labelDisplayedRows({
|
179 | from: count === 0 ? 0 : page * rowsPerPage + 1,
|
180 | to: getLabelDisplayedRowsTo(),
|
181 | count: count === -1 ? -1 : count,
|
182 | page
|
183 | })
|
184 | })), _jsx(Actions, _extends({}, actionsProps))]
|
185 | }))
|
186 | }));
|
187 | });
|
188 | process.env.NODE_ENV !== "production" ? TablePagination.propTypes = {
|
189 |
|
190 |
|
191 |
|
192 |
|
193 | |
194 |
|
195 |
|
196 | colSpan: PropTypes.number,
|
197 | |
198 |
|
199 |
|
200 |
|
201 |
|
202 | count: PropTypes.number.isRequired,
|
203 | |
204 |
|
205 |
|
206 |
|
207 |
|
208 |
|
209 |
|
210 |
|
211 |
|
212 |
|
213 |
|
214 | getItemAriaLabel: PropTypes.func,
|
215 | |
216 |
|
217 |
|
218 |
|
219 |
|
220 |
|
221 |
|
222 |
|
223 |
|
224 | labelDisplayedRows: PropTypes.func,
|
225 | |
226 |
|
227 |
|
228 | labelId: PropTypes.string,
|
229 | |
230 |
|
231 |
|
232 |
|
233 |
|
234 |
|
235 | labelRowsPerPage: PropTypes.node,
|
236 | |
237 |
|
238 |
|
239 |
|
240 |
|
241 |
|
242 | onPageChange: PropTypes.func.isRequired,
|
243 | |
244 |
|
245 |
|
246 |
|
247 |
|
248 | onRowsPerPageChange: PropTypes.func,
|
249 | |
250 |
|
251 |
|
252 | page: chainPropTypes(integerPropType.isRequired, props => {
|
253 | const {
|
254 | count,
|
255 | page,
|
256 | rowsPerPage
|
257 | } = props;
|
258 | if (count === -1) {
|
259 | return null;
|
260 | }
|
261 | const newLastPage = Math.max(0, Math.ceil(count / rowsPerPage) - 1);
|
262 | if (page < 0 || page > newLastPage) {
|
263 | return new Error('MUI: The page prop of a TablePagination is out of range ' + `(0 to ${newLastPage}, but page is ${page}).`);
|
264 | }
|
265 | return null;
|
266 | }),
|
267 | |
268 |
|
269 |
|
270 |
|
271 |
|
272 | rowsPerPage: integerPropType.isRequired,
|
273 | |
274 |
|
275 |
|
276 |
|
277 |
|
278 |
|
279 | rowsPerPageOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
|
280 | label: PropTypes.string.isRequired,
|
281 | value: PropTypes.number.isRequired
|
282 | })]).isRequired),
|
283 | |
284 |
|
285 |
|
286 | selectId: PropTypes.string,
|
287 | |
288 |
|
289 |
|
290 |
|
291 | slotProps: PropTypes .shape({
|
292 | actions: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
|
293 | displayedRows: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
|
294 | menuItem: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
|
295 | root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
|
296 | select: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
|
297 | selectLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
|
298 | spacer: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
|
299 | toolbar: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
|
300 | }),
|
301 | |
302 |
|
303 |
|
304 |
|
305 |
|
306 | slots: PropTypes.shape({
|
307 | actions: PropTypes.elementType,
|
308 | displayedRows: PropTypes.elementType,
|
309 | menuItem: PropTypes.elementType,
|
310 | root: PropTypes.elementType,
|
311 | select: PropTypes.elementType,
|
312 | selectLabel: PropTypes.elementType,
|
313 | spacer: PropTypes.elementType,
|
314 | toolbar: PropTypes.elementType
|
315 | })
|
316 | } : void 0;
|
317 | export default TablePagination; |
\ | No newline at end of file |