1 | import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
2 | import _extends from "@babel/runtime/helpers/esm/extends";
|
3 | const _excluded = ["className", "color", "component", "components", "disabled", "page", "selected", "shape", "size", "type", "variant"];
|
4 | import * as React from 'react';
|
5 | import PropTypes from 'prop-types';
|
6 | import clsx from 'clsx';
|
7 | import { unstable_composeClasses as composeClasses } from '@mui/base';
|
8 | import { alpha } from '@mui/system';
|
9 | import useThemeProps from '../styles/useThemeProps';
|
10 | import paginationItemClasses, { getPaginationItemUtilityClass } from './paginationItemClasses';
|
11 | import useTheme from '../styles/useTheme';
|
12 | import ButtonBase from '../ButtonBase';
|
13 | import capitalize from '../utils/capitalize';
|
14 | import FirstPageIcon from '../internal/svg-icons/FirstPage';
|
15 | import LastPageIcon from '../internal/svg-icons/LastPage';
|
16 | import NavigateBeforeIcon from '../internal/svg-icons/NavigateBefore';
|
17 | import NavigateNextIcon from '../internal/svg-icons/NavigateNext';
|
18 | import styled from '../styles/styled';
|
19 | import { jsx as _jsx } from "react/jsx-runtime";
|
20 | import { jsxs as _jsxs } from "react/jsx-runtime";
|
21 |
|
22 | const overridesResolver = (props, styles) => {
|
23 | const {
|
24 | ownerState
|
25 | } = props;
|
26 | return [styles.root, styles[ownerState.variant], styles[`size${capitalize(ownerState.size)}`], ownerState.variant === 'text' && styles[`text${capitalize(ownerState.color)}`], ownerState.variant === 'outlined' && styles[`outlined${capitalize(ownerState.color)}`], ownerState.shape === 'rounded' && styles.rounded, ownerState.type === 'page' && styles.page, (ownerState.type === 'start-ellipsis' || ownerState.type === 'end-ellipsis') && styles.ellipsis, (ownerState.type === 'previous' || ownerState.type === 'next') && styles.previousNext, (ownerState.type === 'first' || ownerState.type === 'last') && styles.firstLast];
|
27 | };
|
28 |
|
29 | const useUtilityClasses = ownerState => {
|
30 | const {
|
31 | classes,
|
32 | color,
|
33 | disabled,
|
34 | selected,
|
35 | size,
|
36 | shape,
|
37 | type,
|
38 | variant
|
39 | } = ownerState;
|
40 | const slots = {
|
41 | root: ['root', `size${capitalize(size)}`, variant, shape, color !== 'standard' && `${variant}${capitalize(color)}`, disabled && 'disabled', selected && 'selected', {
|
42 | page: 'page',
|
43 | first: 'firstLast',
|
44 | last: 'firstLast',
|
45 | 'start-ellipsis': 'ellipsis',
|
46 | 'end-ellipsis': 'ellipsis',
|
47 | previous: 'previousNext',
|
48 | next: 'previousNext'
|
49 | }[type]],
|
50 | icon: ['icon']
|
51 | };
|
52 | return composeClasses(slots, getPaginationItemUtilityClass, classes);
|
53 | };
|
54 |
|
55 | const PaginationItemEllipsis = styled('div', {
|
56 | name: 'MuiPaginationItem',
|
57 | slot: 'Root',
|
58 | overridesResolver
|
59 | })(({
|
60 | theme,
|
61 | ownerState
|
62 | }) => _extends({}, theme.typography.body2, {
|
63 | borderRadius: 32 / 2,
|
64 | textAlign: 'center',
|
65 | boxSizing: 'border-box',
|
66 | minWidth: 32,
|
67 | padding: '0 6px',
|
68 | margin: '0 3px',
|
69 | color: (theme.vars || theme).palette.text.primary,
|
70 | height: 'auto',
|
71 | [`&.${paginationItemClasses.disabled}`]: {
|
72 | opacity: (theme.vars || theme).palette.action.disabledOpacity
|
73 | }
|
74 | }, ownerState.size === 'small' && {
|
75 | minWidth: 26,
|
76 | borderRadius: 26 / 2,
|
77 | margin: '0 1px',
|
78 | padding: '0 4px'
|
79 | }, ownerState.size === 'large' && {
|
80 | minWidth: 40,
|
81 | borderRadius: 40 / 2,
|
82 | padding: '0 10px',
|
83 | fontSize: theme.typography.pxToRem(15)
|
84 | }));
|
85 | const PaginationItemPage = styled(ButtonBase, {
|
86 | name: 'MuiPaginationItem',
|
87 | slot: 'Root',
|
88 | overridesResolver
|
89 | })(({
|
90 | theme,
|
91 | ownerState
|
92 | }) => _extends({}, theme.typography.body2, {
|
93 | borderRadius: 32 / 2,
|
94 | textAlign: 'center',
|
95 | boxSizing: 'border-box',
|
96 | minWidth: 32,
|
97 | height: 32,
|
98 | padding: '0 6px',
|
99 | margin: '0 3px',
|
100 | color: (theme.vars || theme).palette.text.primary,
|
101 | [`&.${paginationItemClasses.focusVisible}`]: {
|
102 | backgroundColor: (theme.vars || theme).palette.action.focus
|
103 | },
|
104 | [`&.${paginationItemClasses.disabled}`]: {
|
105 | opacity: (theme.vars || theme).palette.action.disabledOpacity
|
106 | },
|
107 | transition: theme.transitions.create(['color', 'background-color'], {
|
108 | duration: theme.transitions.duration.short
|
109 | }),
|
110 | '&:hover': {
|
111 | backgroundColor: (theme.vars || theme).palette.action.hover,
|
112 |
|
113 | '@media (hover: none)': {
|
114 | backgroundColor: 'transparent'
|
115 | }
|
116 | },
|
117 | [`&.${paginationItemClasses.selected}`]: {
|
118 | backgroundColor: (theme.vars || theme).palette.action.selected,
|
119 | '&:hover': {
|
120 | backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selected} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
|
121 |
|
122 | '@media (hover: none)': {
|
123 | backgroundColor: (theme.vars || theme).palette.action.selected
|
124 | }
|
125 | },
|
126 | [`&.${paginationItemClasses.focusVisible}`]: {
|
127 | backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selected} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
|
128 | },
|
129 | [`&.${paginationItemClasses.disabled}`]: {
|
130 | opacity: 1,
|
131 | color: (theme.vars || theme).palette.action.disabled,
|
132 | backgroundColor: (theme.vars || theme).palette.action.selected
|
133 | }
|
134 | }
|
135 | }, ownerState.size === 'small' && {
|
136 | minWidth: 26,
|
137 | height: 26,
|
138 | borderRadius: 26 / 2,
|
139 | margin: '0 1px',
|
140 | padding: '0 4px'
|
141 | }, ownerState.size === 'large' && {
|
142 | minWidth: 40,
|
143 | height: 40,
|
144 | borderRadius: 40 / 2,
|
145 | padding: '0 10px',
|
146 | fontSize: theme.typography.pxToRem(15)
|
147 | }, ownerState.shape === 'rounded' && {
|
148 | borderRadius: (theme.vars || theme).shape.borderRadius
|
149 | }), ({
|
150 | theme,
|
151 | ownerState
|
152 | }) => _extends({}, ownerState.variant === 'text' && {
|
153 | [`&.${paginationItemClasses.selected}`]: _extends({}, ownerState.color !== 'standard' && {
|
154 | color: (theme.vars || theme).palette[ownerState.color].contrastText,
|
155 | backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
|
156 | '&:hover': {
|
157 | backgroundColor: (theme.vars || theme).palette[ownerState.color].dark,
|
158 |
|
159 | '@media (hover: none)': {
|
160 | backgroundColor: (theme.vars || theme).palette[ownerState.color].main
|
161 | }
|
162 | },
|
163 | [`&.${paginationItemClasses.focusVisible}`]: {
|
164 | backgroundColor: (theme.vars || theme).palette[ownerState.color].dark
|
165 | }
|
166 | }, {
|
167 | [`&.${paginationItemClasses.disabled}`]: {
|
168 | color: (theme.vars || theme).palette.action.disabled
|
169 | }
|
170 | })
|
171 | }, ownerState.variant === 'outlined' && {
|
172 | border: theme.vars ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
|
173 | [`&.${paginationItemClasses.selected}`]: _extends({}, ownerState.color !== 'standard' && {
|
174 | color: (theme.vars || theme).palette[ownerState.color].main,
|
175 | border: `1px solid ${theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` : alpha(theme.palette[ownerState.color].main, 0.5)}`,
|
176 | backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.activatedOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.activatedOpacity),
|
177 | '&:hover': {
|
178 | backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / calc(${theme.vars.palette.action.activatedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette[ownerState.color].main, theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity),
|
179 |
|
180 | '@media (hover: none)': {
|
181 | backgroundColor: 'transparent'
|
182 | }
|
183 | },
|
184 | [`&.${paginationItemClasses.focusVisible}`]: {
|
185 | backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / calc(${theme.vars.palette.action.activatedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette[ownerState.color].main, theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity)
|
186 | }
|
187 | }, {
|
188 | [`&.${paginationItemClasses.disabled}`]: {
|
189 | borderColor: (theme.vars || theme).palette.action.disabledBackground,
|
190 | color: (theme.vars || theme).palette.action.disabled
|
191 | }
|
192 | })
|
193 | }));
|
194 | const PaginationItemPageIcon = styled('div', {
|
195 | name: 'MuiPaginationItem',
|
196 | slot: 'Icon',
|
197 | overridesResolver: (props, styles) => styles.icon
|
198 | })(({
|
199 | theme,
|
200 | ownerState
|
201 | }) => _extends({
|
202 | fontSize: theme.typography.pxToRem(20),
|
203 | margin: '0 -8px'
|
204 | }, ownerState.size === 'small' && {
|
205 | fontSize: theme.typography.pxToRem(18)
|
206 | }, ownerState.size === 'large' && {
|
207 | fontSize: theme.typography.pxToRem(22)
|
208 | }));
|
209 | const PaginationItem = React.forwardRef(function PaginationItem(inProps, ref) {
|
210 | const props = useThemeProps({
|
211 | props: inProps,
|
212 | name: 'MuiPaginationItem'
|
213 | });
|
214 |
|
215 | const {
|
216 | className,
|
217 | color = 'standard',
|
218 | component,
|
219 | components = {
|
220 | first: FirstPageIcon,
|
221 | last: LastPageIcon,
|
222 | next: NavigateNextIcon,
|
223 | previous: NavigateBeforeIcon
|
224 | },
|
225 | disabled = false,
|
226 | page,
|
227 | selected = false,
|
228 | shape = 'circular',
|
229 | size = 'medium',
|
230 | type = 'page',
|
231 | variant = 'text'
|
232 | } = props,
|
233 | other = _objectWithoutPropertiesLoose(props, _excluded);
|
234 |
|
235 | const ownerState = _extends({}, props, {
|
236 | color,
|
237 | disabled,
|
238 | selected,
|
239 | shape,
|
240 | size,
|
241 | type,
|
242 | variant
|
243 | });
|
244 |
|
245 | const theme = useTheme();
|
246 | const classes = useUtilityClasses(ownerState);
|
247 | const normalizedIcons = theme.direction === 'rtl' ? {
|
248 | previous: components.next || NavigateNextIcon,
|
249 | next: components.previous || NavigateBeforeIcon,
|
250 | last: components.first || FirstPageIcon,
|
251 | first: components.last || LastPageIcon
|
252 | } : {
|
253 | previous: components.previous || NavigateBeforeIcon,
|
254 | next: components.next || NavigateNextIcon,
|
255 | first: components.first || FirstPageIcon,
|
256 | last: components.last || LastPageIcon
|
257 | };
|
258 | const Icon = normalizedIcons[type];
|
259 | return type === 'start-ellipsis' || type === 'end-ellipsis' ? _jsx(PaginationItemEllipsis, {
|
260 | ref: ref,
|
261 | ownerState: ownerState,
|
262 | className: clsx(classes.root, className),
|
263 | children: "\u2026"
|
264 | }) : _jsxs(PaginationItemPage, _extends({
|
265 | ref: ref,
|
266 | ownerState: ownerState,
|
267 | component: component,
|
268 | disabled: disabled,
|
269 | className: clsx(classes.root, className)
|
270 | }, other, {
|
271 | children: [type === 'page' && page, Icon ? _jsx(PaginationItemPageIcon, {
|
272 | as: Icon,
|
273 | ownerState: ownerState,
|
274 | className: classes.icon
|
275 | }) : null]
|
276 | }));
|
277 | });
|
278 | process.env.NODE_ENV !== "production" ? PaginationItem.propTypes
|
279 |
|
280 | = {
|
281 |
|
282 |
|
283 |
|
284 |
|
285 |
|
286 | |
287 |
|
288 |
|
289 | children: PropTypes.node,
|
290 |
|
291 | |
292 |
|
293 |
|
294 | classes: PropTypes.object,
|
295 |
|
296 | |
297 |
|
298 |
|
299 | className: PropTypes.string,
|
300 |
|
301 | |
302 |
|
303 |
|
304 |
|
305 |
|
306 |
|
307 | color: PropTypes
|
308 |
|
309 | .oneOfType([PropTypes.oneOf(['primary', 'secondary', 'standard']), PropTypes.string]),
|
310 |
|
311 | |
312 |
|
313 |
|
314 |
|
315 | component: PropTypes.elementType,
|
316 |
|
317 | |
318 |
|
319 |
|
320 |
|
321 |
|
322 |
|
323 |
|
324 |
|
325 |
|
326 | components: PropTypes.shape({
|
327 | first: PropTypes.elementType,
|
328 | last: PropTypes.elementType,
|
329 | next: PropTypes.elementType,
|
330 | previous: PropTypes.elementType
|
331 | }),
|
332 |
|
333 | |
334 |
|
335 |
|
336 |
|
337 | disabled: PropTypes.bool,
|
338 |
|
339 | |
340 |
|
341 |
|
342 | page: PropTypes.node,
|
343 |
|
344 | |
345 |
|
346 |
|
347 |
|
348 | selected: PropTypes.bool,
|
349 |
|
350 | |
351 |
|
352 |
|
353 |
|
354 | shape: PropTypes.oneOf(['circular', 'rounded']),
|
355 |
|
356 | |
357 |
|
358 |
|
359 |
|
360 | size: PropTypes
|
361 |
|
362 | .oneOfType([PropTypes.oneOf(['small', 'medium', 'large']), PropTypes.string]),
|
363 |
|
364 | |
365 |
|
366 |
|
367 | sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
|
368 |
|
369 | |
370 |
|
371 |
|
372 |
|
373 | type: PropTypes.oneOf(['end-ellipsis', 'first', 'last', 'next', 'page', 'previous', 'start-ellipsis']),
|
374 |
|
375 | |
376 |
|
377 |
|
378 |
|
379 | variant: PropTypes
|
380 |
|
381 | .oneOfType([PropTypes.oneOf(['outlined', 'text']), PropTypes.string])
|
382 | } : void 0;
|
383 | export default PaginationItem; |
\ | No newline at end of file |