UNPKG

5.32 kBJavaScriptView Raw
1import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
2import _extends from "@babel/runtime/helpers/esm/extends";
3import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
4var __rest = this && this.__rest || function (s, e) {
5 var t = {};
6 for (var p in s) {
7 if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
8 }
9 if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
10 if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
11 }
12 return t;
13};
14import DoubleLeftOutlined from "@ant-design/icons/es/icons/DoubleLeftOutlined";
15import DoubleRightOutlined from "@ant-design/icons/es/icons/DoubleRightOutlined";
16import LeftOutlined from "@ant-design/icons/es/icons/LeftOutlined";
17import RightOutlined from "@ant-design/icons/es/icons/RightOutlined";
18import classNames from 'classnames';
19import RcPagination from 'rc-pagination';
20import enUS from "rc-pagination/es/locale/en_US";
21import * as React from 'react';
22import { ConfigContext } from '../config-provider';
23import useBreakpoint from '../grid/hooks/useBreakpoint';
24import LocaleReceiver from '../locale-provider/LocaleReceiver';
25import { MiddleSelect, MiniSelect } from './Select';
26import useStyle from './style';
27var Pagination = function Pagination(_a) {
28 var customizePrefixCls = _a.prefixCls,
29 customizeSelectPrefixCls = _a.selectPrefixCls,
30 className = _a.className,
31 size = _a.size,
32 customLocale = _a.locale,
33 selectComponentClass = _a.selectComponentClass,
34 responsive = _a.responsive,
35 showSizeChanger = _a.showSizeChanger,
36 restProps = __rest(_a, ["prefixCls", "selectPrefixCls", "className", "size", "locale", "selectComponentClass", "responsive", "showSizeChanger"]);
37 var _useBreakpoint = useBreakpoint(responsive),
38 xs = _useBreakpoint.xs;
39 var _React$useContext = React.useContext(ConfigContext),
40 getPrefixCls = _React$useContext.getPrefixCls,
41 direction = _React$useContext.direction,
42 _React$useContext$pag = _React$useContext.pagination,
43 pagination = _React$useContext$pag === void 0 ? {} : _React$useContext$pag;
44 var prefixCls = getPrefixCls('pagination', customizePrefixCls);
45 // Style
46 var _useStyle = useStyle(prefixCls),
47 _useStyle2 = _slicedToArray(_useStyle, 2),
48 wrapSSR = _useStyle2[0],
49 hashId = _useStyle2[1];
50 var mergedShowSizeChanger = showSizeChanger !== null && showSizeChanger !== void 0 ? showSizeChanger : pagination.showSizeChanger;
51 var getIconsProps = function getIconsProps() {
52 var ellipsis = /*#__PURE__*/React.createElement("span", {
53 className: prefixCls + "-item-ellipsis"
54 }, "\u2022\u2022\u2022");
55 var prevIcon = /*#__PURE__*/React.createElement("button", {
56 className: prefixCls + "-item-link",
57 type: "button",
58 tabIndex: -1
59 }, /*#__PURE__*/React.createElement(LeftOutlined, null));
60 var nextIcon = /*#__PURE__*/React.createElement("button", {
61 className: prefixCls + "-item-link",
62 type: "button",
63 tabIndex: -1
64 }, /*#__PURE__*/React.createElement(RightOutlined, null));
65 var jumpPrevIcon = /*#__PURE__*/React.createElement("a", {
66 className: prefixCls + "-item-link"
67 }, /*#__PURE__*/React.createElement("div", {
68 className: prefixCls + "-item-container"
69 }, /*#__PURE__*/React.createElement(DoubleLeftOutlined, {
70 className: prefixCls + "-item-link-icon"
71 }), ellipsis));
72 var jumpNextIcon = /*#__PURE__*/React.createElement("a", {
73 className: prefixCls + "-item-link"
74 }, /*#__PURE__*/React.createElement("div", {
75 className: prefixCls + "-item-container"
76 }, /*#__PURE__*/React.createElement(DoubleRightOutlined, {
77 className: prefixCls + "-item-link-icon"
78 }), ellipsis));
79 // change arrows direction in right-to-left direction
80 if (direction === 'rtl') {
81 var _ref = [nextIcon, prevIcon];
82 prevIcon = _ref[0];
83 nextIcon = _ref[1];
84 var _ref2 = [jumpNextIcon, jumpPrevIcon];
85 jumpPrevIcon = _ref2[0];
86 jumpNextIcon = _ref2[1];
87 }
88 return {
89 prevIcon: prevIcon,
90 nextIcon: nextIcon,
91 jumpPrevIcon: jumpPrevIcon,
92 jumpNextIcon: jumpNextIcon
93 };
94 };
95 return /*#__PURE__*/React.createElement(LocaleReceiver, {
96 componentName: "Pagination",
97 defaultLocale: enUS
98 }, function (contextLocale) {
99 var _classNames;
100 var locale = _extends(_extends({}, contextLocale), customLocale);
101 var isSmall = size === 'small' || !!(xs && !size && responsive);
102 var selectPrefixCls = getPrefixCls('select', customizeSelectPrefixCls);
103 var extendedClassName = classNames((_classNames = {}, _defineProperty(_classNames, prefixCls + "-mini", isSmall), _defineProperty(_classNames, prefixCls + "-rtl", direction === 'rtl'), _classNames), className, hashId);
104 return wrapSSR( /*#__PURE__*/React.createElement(RcPagination, _extends({}, getIconsProps(), restProps, {
105 prefixCls: prefixCls,
106 selectPrefixCls: selectPrefixCls,
107 className: extendedClassName,
108 selectComponentClass: selectComponentClass || (isSmall ? MiniSelect : MiddleSelect),
109 locale: locale,
110 showSizeChanger: mergedShowSizeChanger
111 })));
112 });
113};
114export default Pagination;
\No newline at end of file