1 | import _extends from "@babel/runtime/helpers/esm/extends";
|
2 | import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
3 | import * as React from 'react';
|
4 | import PropTypes from 'prop-types';
|
5 | import { chainPropTypes } from '@material-ui/utils';
|
6 | import clsx from 'clsx';
|
7 | import deprecatedPropType from '../utils/deprecatedPropType';
|
8 | import withStyles from '../styles/withStyles';
|
9 | import InputBase from '../InputBase';
|
10 | import MenuItem from '../MenuItem';
|
11 | import Select from '../Select';
|
12 | import TableCell from '../TableCell';
|
13 | import Toolbar from '../Toolbar';
|
14 | import Typography from '../Typography';
|
15 | import TablePaginationActions from './TablePaginationActions';
|
16 | import useId from '../utils/unstable_useId';
|
17 | export const styles = theme => ({
|
18 |
|
19 | root: {
|
20 | color: theme.palette.text.primary,
|
21 | fontSize: theme.typography.pxToRem(14),
|
22 | overflow: 'auto',
|
23 |
|
24 | '&:last-child': {
|
25 | padding: 0
|
26 | }
|
27 | },
|
28 |
|
29 |
|
30 | toolbar: {
|
31 | minHeight: 52,
|
32 | paddingRight: 2
|
33 | },
|
34 |
|
35 |
|
36 | spacer: {
|
37 | flex: '1 1 100%'
|
38 | },
|
39 |
|
40 |
|
41 | caption: {
|
42 | flexShrink: 0
|
43 | },
|
44 |
|
45 |
|
46 |
|
47 | selectRoot: {
|
48 | marginRight: 32,
|
49 | marginLeft: 8
|
50 | },
|
51 |
|
52 |
|
53 | select: {
|
54 | paddingLeft: 8,
|
55 | paddingRight: 24,
|
56 | textAlign: 'right',
|
57 | textAlignLast: 'right'
|
58 |
|
59 | },
|
60 |
|
61 |
|
62 |
|
63 | selectIcon: {},
|
64 |
|
65 |
|
66 | input: {
|
67 | color: 'inherit',
|
68 | fontSize: 'inherit',
|
69 | flexShrink: 0
|
70 | },
|
71 |
|
72 |
|
73 | menuItem: {},
|
74 |
|
75 |
|
76 | actions: {
|
77 | flexShrink: 0,
|
78 | marginLeft: 20
|
79 | }
|
80 | });
|
81 |
|
82 | const defaultLabelDisplayedRows = ({
|
83 | from,
|
84 | to,
|
85 | count
|
86 | }) => `${from}-${to} of ${count !== -1 ? count : `more than ${to}`}`;
|
87 |
|
88 | const defaultRowsPerPageOptions = [10, 25, 50, 100];
|
89 |
|
90 |
|
91 |
|
92 |
|
93 | const TablePagination = React.forwardRef(function TablePagination(props, ref) {
|
94 | const {
|
95 | ActionsComponent = TablePaginationActions,
|
96 | backIconButtonProps,
|
97 | backIconButtonText = 'Previous page',
|
98 | classes,
|
99 | className,
|
100 | colSpan: colSpanProp,
|
101 | component: Component = TableCell,
|
102 | count,
|
103 | labelDisplayedRows = defaultLabelDisplayedRows,
|
104 | labelRowsPerPage = 'Rows per page:',
|
105 | nextIconButtonProps,
|
106 | nextIconButtonText = 'Next page',
|
107 | onChangePage,
|
108 | onPageChange,
|
109 | onChangeRowsPerPage: onChangeRowsPerPageProp,
|
110 | onRowsPerPageChange: onRowsPerPageChangeProp,
|
111 | page,
|
112 | rowsPerPage,
|
113 | rowsPerPageOptions = defaultRowsPerPageOptions,
|
114 | SelectProps = {}
|
115 | } = props,
|
116 | other = _objectWithoutPropertiesLoose(props, ["ActionsComponent", "backIconButtonProps", "backIconButtonText", "classes", "className", "colSpan", "component", "count", "labelDisplayedRows", "labelRowsPerPage", "nextIconButtonProps", "nextIconButtonText", "onChangePage", "onPageChange", "onChangeRowsPerPage", "onRowsPerPageChange", "page", "rowsPerPage", "rowsPerPageOptions", "SelectProps"]);
|
117 |
|
118 | const onChangeRowsPerPage = onChangeRowsPerPageProp || onRowsPerPageChangeProp;
|
119 | let colSpan;
|
120 |
|
121 | if (Component === TableCell || Component === 'td') {
|
122 | colSpan = colSpanProp || 1000;
|
123 | }
|
124 |
|
125 | const selectId = useId();
|
126 | const labelId = useId();
|
127 | const MenuItemComponent = SelectProps.native ? 'option' : MenuItem;
|
128 | return React.createElement(Component, _extends({
|
129 | className: clsx(classes.root, className),
|
130 | colSpan: colSpan,
|
131 | ref: ref
|
132 | }, other), React.createElement(Toolbar, {
|
133 | className: classes.toolbar
|
134 | }, React.createElement("div", {
|
135 | className: classes.spacer
|
136 | }), rowsPerPageOptions.length > 1 && React.createElement(Typography, {
|
137 | color: "inherit",
|
138 | variant: "body2",
|
139 | className: classes.caption,
|
140 | id: labelId
|
141 | }, labelRowsPerPage), rowsPerPageOptions.length > 1 && React.createElement(Select, _extends({
|
142 | classes: {
|
143 | select: classes.select,
|
144 | icon: classes.selectIcon
|
145 | },
|
146 | input: React.createElement(InputBase, {
|
147 | className: clsx(classes.input, classes.selectRoot)
|
148 | }),
|
149 | value: rowsPerPage,
|
150 | onChange: onChangeRowsPerPage,
|
151 | id: selectId,
|
152 | labelId: labelId
|
153 | }, SelectProps), rowsPerPageOptions.map(rowsPerPageOption => React.createElement(MenuItemComponent, {
|
154 | className: classes.menuItem,
|
155 | key: rowsPerPageOption.value ? rowsPerPageOption.value : rowsPerPageOption,
|
156 | value: rowsPerPageOption.value ? rowsPerPageOption.value : rowsPerPageOption
|
157 | }, rowsPerPageOption.label ? rowsPerPageOption.label : rowsPerPageOption))), React.createElement(Typography, {
|
158 | color: "inherit",
|
159 | variant: "body2",
|
160 | className: classes.caption
|
161 | }, labelDisplayedRows({
|
162 | from: count === 0 ? 0 : page * rowsPerPage + 1,
|
163 | to: count !== -1 ? Math.min(count, (page + 1) * rowsPerPage) : (page + 1) * rowsPerPage,
|
164 | count: count === -1 ? -1 : count,
|
165 | page
|
166 | })), React.createElement(ActionsComponent, {
|
167 | className: classes.actions,
|
168 | backIconButtonProps: _extends({
|
169 | title: backIconButtonText,
|
170 | 'aria-label': backIconButtonText
|
171 | }, backIconButtonProps),
|
172 | count: count,
|
173 | nextIconButtonProps: _extends({
|
174 | title: nextIconButtonText,
|
175 | 'aria-label': nextIconButtonText
|
176 | }, nextIconButtonProps),
|
177 | onChangePage: onChangePage,
|
178 | onPageChange: onPageChange,
|
179 | page: page,
|
180 | rowsPerPage: rowsPerPage
|
181 | })));
|
182 | });
|
183 | process.env.NODE_ENV !== "production" ? TablePagination.propTypes = {
|
184 | |
185 |
|
186 |
|
187 |
|
188 | ActionsComponent: PropTypes.elementType,
|
189 |
|
190 | |
191 |
|
192 |
|
193 | backIconButtonProps: PropTypes.object,
|
194 |
|
195 | |
196 |
|
197 |
|
198 |
|
199 |
|
200 | backIconButtonText: PropTypes.string,
|
201 |
|
202 | |
203 |
|
204 |
|
205 |
|
206 | classes: PropTypes.object.isRequired,
|
207 |
|
208 | |
209 |
|
210 |
|
211 | className: PropTypes.string,
|
212 |
|
213 | |
214 |
|
215 |
|
216 | colSpan: PropTypes.number,
|
217 |
|
218 | |
219 |
|
220 |
|
221 |
|
222 | component: PropTypes
|
223 |
|
224 | .elementType,
|
225 |
|
226 | |
227 |
|
228 |
|
229 |
|
230 |
|
231 | count: PropTypes.number.isRequired,
|
232 |
|
233 | |
234 |
|
235 |
|
236 |
|
237 |
|
238 |
|
239 | labelDisplayedRows: PropTypes.func,
|
240 |
|
241 | |
242 |
|
243 |
|
244 |
|
245 |
|
246 | labelRowsPerPage: PropTypes.node,
|
247 |
|
248 | |
249 |
|
250 |
|
251 | nextIconButtonProps: PropTypes.object,
|
252 |
|
253 | |
254 |
|
255 |
|
256 |
|
257 |
|
258 | nextIconButtonText: PropTypes.string,
|
259 |
|
260 | |
261 |
|
262 |
|
263 |
|
264 |
|
265 |
|
266 |
|
267 | onChangePage: deprecatedPropType(PropTypes.func, 'Use the `onPageChange` prop instead.'),
|
268 |
|
269 | |
270 |
|
271 |
|
272 |
|
273 |
|
274 |
|
275 | onChangeRowsPerPage: deprecatedPropType(PropTypes.func, 'Use the `onRowsPerPageChange` prop instead.'),
|
276 |
|
277 | |
278 |
|
279 |
|
280 |
|
281 |
|
282 |
|
283 | onPageChange: PropTypes.func.isRequired,
|
284 |
|
285 | |
286 |
|
287 |
|
288 |
|
289 |
|
290 | onRowsPerPageChange: PropTypes.func,
|
291 |
|
292 | |
293 |
|
294 |
|
295 | page: chainPropTypes(PropTypes.number.isRequired, props => {
|
296 | const {
|
297 | count,
|
298 | page,
|
299 | rowsPerPage
|
300 | } = props;
|
301 |
|
302 | if (count === -1) {
|
303 | return null;
|
304 | }
|
305 |
|
306 | const newLastPage = Math.max(0, Math.ceil(count / rowsPerPage) - 1);
|
307 |
|
308 | if (page < 0 || page > newLastPage) {
|
309 | return new Error('Material-UI: The page prop of a TablePagination is out of range ' + `(0 to ${newLastPage}, but page is ${page}).`);
|
310 | }
|
311 |
|
312 | return null;
|
313 | }),
|
314 |
|
315 | |
316 |
|
317 |
|
318 | rowsPerPage: PropTypes.number.isRequired,
|
319 |
|
320 | |
321 |
|
322 |
|
323 |
|
324 | rowsPerPageOptions: PropTypes.array,
|
325 |
|
326 | |
327 |
|
328 |
|
329 | SelectProps: PropTypes.object
|
330 | } : void 0;
|
331 | export default withStyles(styles, {
|
332 | name: 'MuiTablePagination'
|
333 | })(TablePagination); |
\ | No newline at end of file |