1 | import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
2 | import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
3 | import _extends from "@babel/runtime/helpers/esm/extends";
|
4 |
|
5 | var _InputBase;
|
6 |
|
7 | import * as React from 'react';
|
8 | import PropTypes from 'prop-types';
|
9 | import clsx from 'clsx';
|
10 | import { chainPropTypes, integerPropType } from '@mui/utils';
|
11 | import { unstable_composeClasses as composeClasses, isHostComponent } from '@mui/base';
|
12 | import styled from '../styles/styled';
|
13 | import useThemeProps from '../styles/useThemeProps';
|
14 | import InputBase from '../InputBase';
|
15 | import MenuItem from '../MenuItem';
|
16 | import Select from '../Select';
|
17 | import TableCell from '../TableCell';
|
18 | import Toolbar from '../Toolbar';
|
19 | import TablePaginationActions from './TablePaginationActions';
|
20 | import useId from '../utils/useId';
|
21 | import tablePaginationClasses, { getTablePaginationUtilityClass } from './tablePaginationClasses';
|
22 | import { jsx as _jsx } from "react/jsx-runtime";
|
23 | import { createElement as _createElement } from "react";
|
24 | import { jsxs as _jsxs } from "react/jsx-runtime";
|
25 | var TablePaginationRoot = styled(TableCell, {
|
26 | name: 'MuiTablePagination',
|
27 | slot: 'Root',
|
28 | overridesResolver: function overridesResolver(props, styles) {
|
29 | return styles.root;
|
30 | }
|
31 | })(function (_ref) {
|
32 | var theme = _ref.theme;
|
33 | return {
|
34 | overflow: 'auto',
|
35 | color: (theme.vars || theme).palette.text.primary,
|
36 | fontSize: theme.typography.pxToRem(14),
|
37 |
|
38 | '&:last-child': {
|
39 | padding: 0
|
40 | }
|
41 | };
|
42 | });
|
43 | var TablePaginationToolbar = styled(Toolbar, {
|
44 | name: 'MuiTablePagination',
|
45 | slot: 'Toolbar',
|
46 | overridesResolver: function overridesResolver(props, styles) {
|
47 | return _extends(_defineProperty({}, "& .".concat(tablePaginationClasses.actions), styles.actions), styles.toolbar);
|
48 | }
|
49 | })(function (_ref2) {
|
50 | var _ref3;
|
51 |
|
52 | var theme = _ref2.theme;
|
53 | return _ref3 = {
|
54 | minHeight: 52,
|
55 | paddingRight: 2
|
56 | }, _defineProperty(_ref3, "".concat(theme.breakpoints.up('xs'), " and (orientation: landscape)"), {
|
57 | minHeight: 52
|
58 | }), _defineProperty(_ref3, theme.breakpoints.up('sm'), {
|
59 | minHeight: 52,
|
60 | paddingRight: 2
|
61 | }), _defineProperty(_ref3, "& .".concat(tablePaginationClasses.actions), {
|
62 | flexShrink: 0,
|
63 | marginLeft: 20
|
64 | }), _ref3;
|
65 | });
|
66 | var TablePaginationSpacer = styled('div', {
|
67 | name: 'MuiTablePagination',
|
68 | slot: 'Spacer',
|
69 | overridesResolver: function overridesResolver(props, styles) {
|
70 | return styles.spacer;
|
71 | }
|
72 | })({
|
73 | flex: '1 1 100%'
|
74 | });
|
75 | var TablePaginationSelectLabel = styled('p', {
|
76 | name: 'MuiTablePagination',
|
77 | slot: 'SelectLabel',
|
78 | overridesResolver: function overridesResolver(props, styles) {
|
79 | return styles.selectLabel;
|
80 | }
|
81 | })(function (_ref4) {
|
82 | var theme = _ref4.theme;
|
83 | return _extends({}, theme.typography.body2, {
|
84 | flexShrink: 0
|
85 | });
|
86 | });
|
87 | var TablePaginationSelect = styled(Select, {
|
88 | name: 'MuiTablePagination',
|
89 | slot: 'Select',
|
90 | overridesResolver: function overridesResolver(props, styles) {
|
91 | var _extends3;
|
92 |
|
93 | return _extends((_extends3 = {}, _defineProperty(_extends3, "& .".concat(tablePaginationClasses.selectIcon), styles.selectIcon), _defineProperty(_extends3, "& .".concat(tablePaginationClasses.select), styles.select), _extends3), styles.input, styles.selectRoot);
|
94 | }
|
95 | })(_defineProperty({
|
96 | color: 'inherit',
|
97 | fontSize: 'inherit',
|
98 | flexShrink: 0,
|
99 | marginRight: 32,
|
100 | marginLeft: 8
|
101 | }, "& .".concat(tablePaginationClasses.select), {
|
102 | paddingLeft: 8,
|
103 | paddingRight: 24,
|
104 | textAlign: 'right',
|
105 | textAlignLast: 'right'
|
106 |
|
107 | }));
|
108 | var TablePaginationMenuItem = styled(MenuItem, {
|
109 | name: 'MuiTablePagination',
|
110 | slot: 'MenuItem',
|
111 | overridesResolver: function overridesResolver(props, styles) {
|
112 | return styles.menuItem;
|
113 | }
|
114 | })({});
|
115 | var TablePaginationDisplayedRows = styled('p', {
|
116 | name: 'MuiTablePagination',
|
117 | slot: 'DisplayedRows',
|
118 | overridesResolver: function overridesResolver(props, styles) {
|
119 | return styles.displayedRows;
|
120 | }
|
121 | })(function (_ref5) {
|
122 | var theme = _ref5.theme;
|
123 | return _extends({}, theme.typography.body2, {
|
124 | flexShrink: 0
|
125 | });
|
126 | });
|
127 |
|
128 | function defaultLabelDisplayedRows(_ref6) {
|
129 | var from = _ref6.from,
|
130 | to = _ref6.to,
|
131 | count = _ref6.count;
|
132 | return "".concat(from, "\u2013").concat(to, " of ").concat(count !== -1 ? count : "more than ".concat(to));
|
133 | }
|
134 |
|
135 | function defaultGetAriaLabel(type) {
|
136 | return "Go to ".concat(type, " page");
|
137 | }
|
138 |
|
139 | var useUtilityClasses = function useUtilityClasses(ownerState) {
|
140 | var classes = ownerState.classes;
|
141 | var slots = {
|
142 | root: ['root'],
|
143 | toolbar: ['toolbar'],
|
144 | spacer: ['spacer'],
|
145 | selectLabel: ['selectLabel'],
|
146 | select: ['select'],
|
147 | input: ['input'],
|
148 | selectIcon: ['selectIcon'],
|
149 | menuItem: ['menuItem'],
|
150 | displayedRows: ['displayedRows'],
|
151 | actions: ['actions']
|
152 | };
|
153 | return composeClasses(slots, getTablePaginationUtilityClass, classes);
|
154 | };
|
155 |
|
156 |
|
157 |
|
158 |
|
159 |
|
160 | var TablePagination = React.forwardRef(function TablePagination(inProps, ref) {
|
161 | var props = useThemeProps({
|
162 | props: inProps,
|
163 | name: 'MuiTablePagination'
|
164 | });
|
165 |
|
166 | var _props$ActionsCompone = props.ActionsComponent,
|
167 | ActionsComponent = _props$ActionsCompone === void 0 ? TablePaginationActions : _props$ActionsCompone,
|
168 | backIconButtonProps = props.backIconButtonProps,
|
169 | className = props.className,
|
170 | colSpanProp = props.colSpan,
|
171 | _props$component = props.component,
|
172 | component = _props$component === void 0 ? TableCell : _props$component,
|
173 | count = props.count,
|
174 | _props$getItemAriaLab = props.getItemAriaLabel,
|
175 | getItemAriaLabel = _props$getItemAriaLab === void 0 ? defaultGetAriaLabel : _props$getItemAriaLab,
|
176 | _props$labelDisplayed = props.labelDisplayedRows,
|
177 | labelDisplayedRows = _props$labelDisplayed === void 0 ? defaultLabelDisplayedRows : _props$labelDisplayed,
|
178 | _props$labelRowsPerPa = props.labelRowsPerPage,
|
179 | labelRowsPerPage = _props$labelRowsPerPa === void 0 ? 'Rows per page:' : _props$labelRowsPerPa,
|
180 | nextIconButtonProps = props.nextIconButtonProps,
|
181 | onPageChange = props.onPageChange,
|
182 | onRowsPerPageChange = props.onRowsPerPageChange,
|
183 | page = props.page,
|
184 | rowsPerPage = props.rowsPerPage,
|
185 | _props$rowsPerPageOpt = props.rowsPerPageOptions,
|
186 | rowsPerPageOptions = _props$rowsPerPageOpt === void 0 ? [10, 25, 50, 100] : _props$rowsPerPageOpt,
|
187 | _props$SelectProps = props.SelectProps,
|
188 | SelectProps = _props$SelectProps === void 0 ? {} : _props$SelectProps,
|
189 | _props$showFirstButto = props.showFirstButton,
|
190 | showFirstButton = _props$showFirstButto === void 0 ? false : _props$showFirstButto,
|
191 | _props$showLastButton = props.showLastButton,
|
192 | showLastButton = _props$showLastButton === void 0 ? false : _props$showLastButton,
|
193 | other = _objectWithoutProperties(props, ["ActionsComponent", "backIconButtonProps", "className", "colSpan", "component", "count", "getItemAriaLabel", "labelDisplayedRows", "labelRowsPerPage", "nextIconButtonProps", "onPageChange", "onRowsPerPageChange", "page", "rowsPerPage", "rowsPerPageOptions", "SelectProps", "showFirstButton", "showLastButton"]);
|
194 |
|
195 | var ownerState = props;
|
196 | var classes = useUtilityClasses(ownerState);
|
197 | var MenuItemComponent = SelectProps.native ? 'option' : TablePaginationMenuItem;
|
198 | var colSpan;
|
199 |
|
200 | if (component === TableCell || component === 'td') {
|
201 | colSpan = colSpanProp || 1000;
|
202 | }
|
203 |
|
204 | var selectId = useId(SelectProps.id);
|
205 | var labelId = useId(SelectProps.labelId);
|
206 |
|
207 | var getLabelDisplayedRowsTo = function getLabelDisplayedRowsTo() {
|
208 | if (count === -1) {
|
209 | return (page + 1) * rowsPerPage;
|
210 | }
|
211 |
|
212 | return rowsPerPage === -1 ? count : Math.min(count, (page + 1) * rowsPerPage);
|
213 | };
|
214 |
|
215 | return _jsx(TablePaginationRoot, _extends({
|
216 | colSpan: colSpan,
|
217 | ref: ref,
|
218 | as: component,
|
219 | ownerState: ownerState,
|
220 | className: clsx(classes.root, className)
|
221 | }, other, {
|
222 | children: _jsxs(TablePaginationToolbar, {
|
223 | className: classes.toolbar,
|
224 | children: [_jsx(TablePaginationSpacer, {
|
225 | className: classes.spacer
|
226 | }), rowsPerPageOptions.length > 1 && _jsx(TablePaginationSelectLabel, {
|
227 | className: classes.selectLabel,
|
228 | id: labelId,
|
229 | children: labelRowsPerPage
|
230 | }), rowsPerPageOptions.length > 1 && _jsx(TablePaginationSelect, _extends({
|
231 | variant: "standard",
|
232 | input: _InputBase || (_InputBase = _jsx(InputBase, {})),
|
233 | value: rowsPerPage,
|
234 | onChange: onRowsPerPageChange,
|
235 | id: selectId,
|
236 | labelId: labelId
|
237 | }, SelectProps, {
|
238 | classes: _extends({}, SelectProps.classes, {
|
239 |
|
240 | root: clsx(classes.input, classes.selectRoot, (SelectProps.classes || {}).root),
|
241 | select: clsx(classes.select, (SelectProps.classes || {}).select),
|
242 |
|
243 | icon: clsx(classes.selectIcon, (SelectProps.classes || {}).icon)
|
244 | }),
|
245 | children: rowsPerPageOptions.map(function (rowsPerPageOption) {
|
246 | return _createElement(MenuItemComponent, _extends({}, !isHostComponent(MenuItemComponent) && {
|
247 | ownerState: ownerState
|
248 | }, {
|
249 | className: classes.menuItem,
|
250 | key: rowsPerPageOption.label ? rowsPerPageOption.label : rowsPerPageOption,
|
251 | value: rowsPerPageOption.value ? rowsPerPageOption.value : rowsPerPageOption
|
252 | }), rowsPerPageOption.label ? rowsPerPageOption.label : rowsPerPageOption);
|
253 | })
|
254 | })), _jsx(TablePaginationDisplayedRows, {
|
255 | className: classes.displayedRows,
|
256 | children: labelDisplayedRows({
|
257 | from: count === 0 ? 0 : page * rowsPerPage + 1,
|
258 | to: getLabelDisplayedRowsTo(),
|
259 | count: count === -1 ? -1 : count,
|
260 | page: page
|
261 | })
|
262 | }), _jsx(ActionsComponent, {
|
263 | className: classes.actions,
|
264 | backIconButtonProps: backIconButtonProps,
|
265 | count: count,
|
266 | nextIconButtonProps: nextIconButtonProps,
|
267 | onPageChange: onPageChange,
|
268 | page: page,
|
269 | rowsPerPage: rowsPerPage,
|
270 | showFirstButton: showFirstButton,
|
271 | showLastButton: showLastButton,
|
272 | getItemAriaLabel: getItemAriaLabel
|
273 | })]
|
274 | })
|
275 | }));
|
276 | });
|
277 | process.env.NODE_ENV !== "production" ? TablePagination.propTypes
|
278 |
|
279 | = {
|
280 |
|
281 |
|
282 |
|
283 |
|
284 |
|
285 | |
286 |
|
287 |
|
288 |
|
289 |
|
290 | ActionsComponent: PropTypes.elementType,
|
291 |
|
292 | |
293 |
|
294 |
|
295 | backIconButtonProps: PropTypes.object,
|
296 |
|
297 | |
298 |
|
299 |
|
300 | classes: PropTypes.object,
|
301 |
|
302 | |
303 |
|
304 |
|
305 | className: PropTypes.string,
|
306 |
|
307 | |
308 |
|
309 |
|
310 | colSpan: PropTypes.number,
|
311 |
|
312 | |
313 |
|
314 |
|
315 |
|
316 | component: PropTypes.elementType,
|
317 |
|
318 | |
319 |
|
320 |
|
321 |
|
322 |
|
323 | count: integerPropType.isRequired,
|
324 |
|
325 | |
326 |
|
327 |
|
328 |
|
329 |
|
330 |
|
331 |
|
332 |
|
333 |
|
334 |
|
335 |
|
336 | getItemAriaLabel: PropTypes.func,
|
337 |
|
338 | |
339 |
|
340 |
|
341 |
|
342 |
|
343 |
|
344 |
|
345 |
|
346 |
|
347 | labelDisplayedRows: PropTypes.func,
|
348 |
|
349 | |
350 |
|
351 |
|
352 |
|
353 |
|
354 |
|
355 | labelRowsPerPage: PropTypes.node,
|
356 |
|
357 | |
358 |
|
359 |
|
360 | nextIconButtonProps: PropTypes.object,
|
361 |
|
362 | |
363 |
|
364 |
|
365 |
|
366 |
|
367 |
|
368 | onPageChange: PropTypes.func.isRequired,
|
369 |
|
370 | |
371 |
|
372 |
|
373 |
|
374 |
|
375 | onRowsPerPageChange: PropTypes.func,
|
376 |
|
377 | |
378 |
|
379 |
|
380 | page: chainPropTypes(integerPropType.isRequired, function (props) {
|
381 | var count = props.count,
|
382 | page = props.page,
|
383 | rowsPerPage = props.rowsPerPage;
|
384 |
|
385 | if (count === -1) {
|
386 | return null;
|
387 | }
|
388 |
|
389 | var newLastPage = Math.max(0, Math.ceil(count / rowsPerPage) - 1);
|
390 |
|
391 | if (page < 0 || page > newLastPage) {
|
392 | return new Error('MUI: The page prop of a TablePagination is out of range ' + "(0 to ".concat(newLastPage, ", but page is ").concat(page, ")."));
|
393 | }
|
394 |
|
395 | return null;
|
396 | }),
|
397 |
|
398 | |
399 |
|
400 |
|
401 |
|
402 |
|
403 | rowsPerPage: integerPropType.isRequired,
|
404 |
|
405 | |
406 |
|
407 |
|
408 |
|
409 |
|
410 |
|
411 | rowsPerPageOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
|
412 | label: PropTypes.string.isRequired,
|
413 | value: PropTypes.number.isRequired
|
414 | })]).isRequired),
|
415 |
|
416 | |
417 |
|
418 |
|
419 |
|
420 | SelectProps: PropTypes.object,
|
421 |
|
422 | |
423 |
|
424 |
|
425 |
|
426 | showFirstButton: PropTypes.bool,
|
427 |
|
428 | |
429 |
|
430 |
|
431 |
|
432 | showLastButton: PropTypes.bool,
|
433 |
|
434 | |
435 |
|
436 |
|
437 | sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
|
438 | } : void 0;
|
439 | export default TablePagination; |
\ | No newline at end of file |