UNPKG

8.49 kBJavaScriptView Raw
1"use strict";
2'use client';
3
4var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
5var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
6Object.defineProperty(exports, "__esModule", {
7 value: true
8});
9exports.default = void 0;
10var React = _interopRequireWildcard(require("react"));
11var _propTypes = _interopRequireDefault(require("prop-types"));
12var _clsx = _interopRequireDefault(require("clsx"));
13var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
14var _integerPropType = _interopRequireDefault(require("@mui/utils/integerPropType"));
15var _paginationClasses = require("./paginationClasses");
16var _usePagination = _interopRequireDefault(require("../usePagination"));
17var _PaginationItem = _interopRequireDefault(require("../PaginationItem"));
18var _zeroStyled = require("../zero-styled");
19var _DefaultPropsProvider = require("../DefaultPropsProvider");
20var _jsxRuntime = require("react/jsx-runtime");
21const useUtilityClasses = ownerState => {
22 const {
23 classes,
24 variant
25 } = ownerState;
26 const slots = {
27 root: ['root', variant],
28 ul: ['ul']
29 };
30 return (0, _composeClasses.default)(slots, _paginationClasses.getPaginationUtilityClass, classes);
31};
32const PaginationRoot = (0, _zeroStyled.styled)('nav', {
33 name: 'MuiPagination',
34 slot: 'Root',
35 overridesResolver: (props, styles) => {
36 const {
37 ownerState
38 } = props;
39 return [styles.root, styles[ownerState.variant]];
40 }
41})({});
42const PaginationUl = (0, _zeroStyled.styled)('ul', {
43 name: 'MuiPagination',
44 slot: 'Ul',
45 overridesResolver: (props, styles) => styles.ul
46})({
47 display: 'flex',
48 flexWrap: 'wrap',
49 alignItems: 'center',
50 padding: 0,
51 margin: 0,
52 listStyle: 'none'
53});
54function defaultGetAriaLabel(type, page, selected) {
55 if (type === 'page') {
56 return `${selected ? '' : 'Go to '}page ${page}`;
57 }
58 return `Go to ${type} page`;
59}
60const Pagination = /*#__PURE__*/React.forwardRef(function Pagination(inProps, ref) {
61 const props = (0, _DefaultPropsProvider.useDefaultProps)({
62 props: inProps,
63 name: 'MuiPagination'
64 });
65 const {
66 boundaryCount = 1,
67 className,
68 color = 'standard',
69 count = 1,
70 defaultPage = 1,
71 disabled = false,
72 getItemAriaLabel = defaultGetAriaLabel,
73 hideNextButton = false,
74 hidePrevButton = false,
75 onChange,
76 page,
77 renderItem = item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_PaginationItem.default, {
78 ...item
79 }),
80 shape = 'circular',
81 showFirstButton = false,
82 showLastButton = false,
83 siblingCount = 1,
84 size = 'medium',
85 variant = 'text',
86 ...other
87 } = props;
88 const {
89 items
90 } = (0, _usePagination.default)({
91 ...props,
92 componentName: 'Pagination'
93 });
94 const ownerState = {
95 ...props,
96 boundaryCount,
97 color,
98 count,
99 defaultPage,
100 disabled,
101 getItemAriaLabel,
102 hideNextButton,
103 hidePrevButton,
104 renderItem,
105 shape,
106 showFirstButton,
107 showLastButton,
108 siblingCount,
109 size,
110 variant
111 };
112 const classes = useUtilityClasses(ownerState);
113 return /*#__PURE__*/(0, _jsxRuntime.jsx)(PaginationRoot, {
114 "aria-label": "pagination navigation",
115 className: (0, _clsx.default)(classes.root, className),
116 ownerState: ownerState,
117 ref: ref,
118 ...other,
119 children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PaginationUl, {
120 className: classes.ul,
121 ownerState: ownerState,
122 children: items.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
123 children: renderItem({
124 ...item,
125 color,
126 'aria-label': getItemAriaLabel(item.type, item.page, item.selected),
127 shape,
128 size,
129 variant
130 })
131 }, index))
132 })
133 });
134});
135
136// @default tags synced with default values from usePagination
137
138process.env.NODE_ENV !== "production" ? Pagination.propTypes /* remove-proptypes */ = {
139 // ┌────────────────────────────── Warning ──────────────────────────────┐
140 // │ These PropTypes are generated from the TypeScript type definitions. │
141 // │ To update them, edit the d.ts file and run `pnpm proptypes`. │
142 // └─────────────────────────────────────────────────────────────────────┘
143 /**
144 * Number of always visible pages at the beginning and end.
145 * @default 1
146 */
147 boundaryCount: _integerPropType.default,
148 /**
149 * Override or extend the styles applied to the component.
150 */
151 classes: _propTypes.default.object,
152 /**
153 * @ignore
154 */
155 className: _propTypes.default.string,
156 /**
157 * The active color.
158 * It supports both default and custom theme colors, which can be added as shown in the
159 * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
160 * @default 'standard'
161 */
162 color: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['primary', 'secondary', 'standard']), _propTypes.default.string]),
163 /**
164 * The total number of pages.
165 * @default 1
166 */
167 count: _integerPropType.default,
168 /**
169 * The page selected by default when the component is uncontrolled.
170 * @default 1
171 */
172 defaultPage: _integerPropType.default,
173 /**
174 * If `true`, the component is disabled.
175 * @default false
176 */
177 disabled: _propTypes.default.bool,
178 /**
179 * Accepts a function which returns a string value that provides a user-friendly name for the current page.
180 * This is important for screen reader users.
181 *
182 * For localization purposes, you can use the provided [translations](https://mui.com/material-ui/guides/localization/).
183 * @param {string} type The link or button type to format ('page' | 'first' | 'last' | 'next' | 'previous' | 'start-ellipsis' | 'end-ellipsis'). Defaults to 'page'.
184 * @param {number | null} page The page number to format.
185 * @param {boolean} selected If true, the current page is selected.
186 * @returns {string}
187 */
188 getItemAriaLabel: _propTypes.default.func,
189 /**
190 * If `true`, hide the next-page button.
191 * @default false
192 */
193 hideNextButton: _propTypes.default.bool,
194 /**
195 * If `true`, hide the previous-page button.
196 * @default false
197 */
198 hidePrevButton: _propTypes.default.bool,
199 /**
200 * Callback fired when the page is changed.
201 *
202 * @param {React.ChangeEvent<unknown>} event The event source of the callback.
203 * @param {number} page The page selected.
204 */
205 onChange: _propTypes.default.func,
206 /**
207 * The current page. Unlike `TablePagination`, which starts numbering from `0`, this pagination starts from `1`.
208 */
209 page: _integerPropType.default,
210 /**
211 * Render the item.
212 * @param {PaginationRenderItemParams} params The props to spread on a PaginationItem.
213 * @returns {ReactNode}
214 * @default (item) => <PaginationItem {...item} />
215 */
216 renderItem: _propTypes.default.func,
217 /**
218 * The shape of the pagination items.
219 * @default 'circular'
220 */
221 shape: _propTypes.default.oneOf(['circular', 'rounded']),
222 /**
223 * If `true`, show the first-page button.
224 * @default false
225 */
226 showFirstButton: _propTypes.default.bool,
227 /**
228 * If `true`, show the last-page button.
229 * @default false
230 */
231 showLastButton: _propTypes.default.bool,
232 /**
233 * Number of always visible pages before and after the current page.
234 * @default 1
235 */
236 siblingCount: _integerPropType.default,
237 /**
238 * The size of the component.
239 * @default 'medium'
240 */
241 size: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['small', 'medium', 'large']), _propTypes.default.string]),
242 /**
243 * The system prop that allows defining system overrides as well as additional CSS styles.
244 */
245 sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
246 /**
247 * The variant to use.
248 * @default 'text'
249 */
250 variant: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['outlined', 'text']), _propTypes.default.string])
251} : void 0;
252var _default = exports.default = Pagination;
\No newline at end of file