UNPKG

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