@qsxy/element-plus-react 1.0.0-next.17 → 1.0.0-next.18

package/dist/Pagination/Pagination.js

@@ -1,8 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
@@ -15,28 +12,28 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { useMount } from 'ahooks';
 import classNames from 'classnames';
-import React, { cloneElement, createElement, forwardRef, isValidElement, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import Button from "../Button/Button";
+import React, { forwardRef, isValidElement, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useConfigProvider } from "../ConfigProvider";
 import Icon from "../Icon/Icon";
-import { mergeDefaultProps } from "../Util";
+import { isNotEmpty, mergeDefaultProps } from "../Util";
 import { useClassNames, useControlled } from "../hooks";
 import Options from "./Options";
 import Pager from "./Pager";
 import { calculatePage, isValid } from "./util";
 var Pagination = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _ref;
   props = mergeDefaultProps({
-    defaultCurrent: 1,
+    defaultCurrentPage: 1,
     total: 0,
+    size: 'default',
     defaultPageSize: 10,
     hideOnSinglePage: false,
-    showPrevNextJumpers: true,
-    showQuickJumper: false,
-    showLessItems: false,
-    showTitle: true,
-    itemRender: function itemRender(page, type, element) {
-      return element;
-    }
+    // showQuickJumper: false,
+    pageSizes: [10, 20, 30, 40, 50, 100],
+    pagerCount: 7,
+    layout: 'prev, pager, next, jumper, ->, total',
+    prevIcon: 'angle-left',
+    nextIcon: 'angle-right'
   }, props);
   var _props = props,
     _props$classPrefix = _props.classPrefix,
@@ -46,21 +43,29 @@ var Pagination = /*#__PURE__*/forwardRef(function (props, ref) {
     disabled = _props.disabled,
     hideOnSinglePage = _props.hideOnSinglePage,
     total = _props.total,
-    showQuickJumper = _props.showQuickJumper,
-    showLessItems = _props.showLessItems,
     size = _props.size,
-    showTitle = _props.showTitle,
+    prevText = _props.prevText,
+    prevIcon = _props.prevIcon,
+    pagerCount = _props.pagerCount,
+    nextText = _props.nextText,
+    nextIcon = _props.nextIcon,
     showTotal = _props.showTotal,
+    layout = _props.layout,
     simple = _props.simple,
-    itemRender = _props.itemRender,
-    showPrevNextJumpers = _props.showPrevNextJumpers,
-    pageSizeOptions = _props.pageSizeOptions,
-    showSizeChanger = _props.showSizeChanger,
+    background = _props.background,
+    pageSizes = _props.pageSizes,
     onChange = _props.onChange,
-    onShowSizeChange = _props.onShowSizeChange;
+    onSizeChange = _props.onSizeChange;
   var _useClassNames = useClassNames(classPrefix),
-    b = _useClassNames.b;
-  var _useControlled = useControlled(props.current, props.defaultCurrent),
+    b = _useClassNames.b,
+    is = _useClassNames.is,
+    m = _useClassNames.m,
+    e = _useClassNames.e;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useConfigProvider = useConfigProvider(),
+    locale = _useConfigProvider.locale;
+  var _useControlled = useControlled(props.currentPage, props.defaultCurrentPage),
     _useControlled2 = _slicedToArray(_useControlled, 2),
     current = _useControlled2[0],
     setCurrent = _useControlled2[1];
@@ -81,43 +86,12 @@ var Pagination = /*#__PURE__*/forwardRef(function (props, ref) {
     inputValue = _useState6[0],
     setInputValue = _useState6[1];
   var containerRef = useRef(null);
-  var prevIcon = useMemo(function () {
-    return /*#__PURE__*/React.createElement(Button, {
-      className: b(_templateObject || (_templateObject = _taggedTemplateLiteral(["item-link"])))
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: "angle-left",
-      prefix: "fal"
-    }));
-  }, [b]);
-  var nextIcon = useMemo(function () {
-    return /*#__PURE__*/React.createElement(Button, {
-      className: b(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["item-link"])))
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: "angle-right",
-      prefix: "fal"
-    }));
-  }, [b]);
-  var jumpPrevIcon = useMemo(function () {
-    return /*#__PURE__*/React.createElement(Icon, {
-      name: "ellipsis",
-      className: b(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["item-link"])))
-    });
-  }, [b]);
-  var jumpNextIcon = useMemo(function () {
-    return /*#__PURE__*/React.createElement(Icon, {
-      name: "ellipsis",
-      className: b(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["item-link"])))
-    });
-  }, [b]);
-
-  // const paginationNode = useRef<HTMLUListElement>(null);
-
   useMount(function () {
     var hasOnChange = !!onChange;
-    var hasCurrent = ('current' in props);
+    var hasCurrent = ('currentPage' in props);
     if (hasCurrent && !hasOnChange) {
       // eslint-disable-next-line no-console
-      console.warn('Warning: You provided a `current` prop to a Pagination component without an `onChange` handler. This will render a read-only component.');
+      console.warn('Warning: You provided a `currentPage` prop to a Pagination component without an `onChange` handler. This will render a read-only component.');
     }
     var _current = Math.min(current, calculatePage(pageSize, undefined, total));
     if (_current <= 0) {
@@ -152,14 +126,6 @@ var Pagination = /*#__PURE__*/forwardRef(function (props, ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [pageSize, total]);
 
-  /** 页码按钮 */
-  var getItemIcon = useCallback(function (icon) {
-    return typeof icon === 'function' ? /*#__PURE__*/createElement(icon, _objectSpread({}, props)) : icon || /*#__PURE__*/React.createElement("button", {
-      type: "button",
-      className: b(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["item-link"])))
-    });
-  }, [b, props]);
-
   /** 是否有上一页 */
   var hasPrev = useMemo(function () {
     return current > 1;
@@ -171,57 +137,17 @@ var Pagination = /*#__PURE__*/forwardRef(function (props, ref) {
       pageSize: pageSize
     }, total);
   }, [current, pageSize, total]);
-
-  /** 向前快速跳转几页页码 */
-  var jumpPrevPage = useMemo(function () {
-    return Math.max(1, current - (showLessItems ? 3 : 5));
-  }, [current, showLessItems]);
-
-  /** 向后快速跳转几页页码 */
-  var jumpNextPage = useMemo(function () {
-    return Math.min(calculatePage(undefined, {
-      pageSize: pageSize
-    }, total), current + (showLessItems ? 3 : 5));
-  }, [current, pageSize, total, showLessItems]);
   var allPages = useMemo(function () {
     return calculatePage(undefined, {
       pageSize: pageSize
     }, total);
   }, [pageSize, total]);
-
-  /** 上一页按钮 */
-  var prevPage = useMemo(function () {
-    var prev = current - 1 > 0 ? current - 1 : 0;
-    var prevButton = itemRender === null || itemRender === void 0 ? void 0 : itemRender(prev, 'prev', getItemIcon(prevIcon));
-    return /*#__PURE__*/isValidElement(prevButton) ? /*#__PURE__*/cloneElement(prevButton, {
-      disabled: !hasPrev
-    }) : prevButton;
-  }, [current, getItemIcon, hasPrev, itemRender, prevIcon]);
-
-  /** 下一页按钮 */
-  var nextPage = useMemo(function () {
-    var next = current + 1 < allPages ? current + 1 : allPages;
-    var nextButton = itemRender === null || itemRender === void 0 ? void 0 : itemRender(next, 'next', getItemIcon(nextIcon));
-    return /*#__PURE__*/isValidElement(nextButton) ? /*#__PURE__*/cloneElement(nextButton, {
-      disabled: !hasNext
-    }) : nextButton;
-  }, [allPages, current, getItemIcon, hasNext, itemRender, nextIcon]);
-
-  /** 分页描述 */
-  var totalText = useMemo(function () {
-    return typeof showTotal === 'function' ? /*#__PURE__*/React.createElement("li", {
-      className: b(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["total-text"])))
-    }, showTotal(total, [total === 0 ? 0 : (current - 1) * pageSize + 1, current * pageSize > total ? total : current * pageSize])) : null;
-  }, [b, current, pageSize, showTotal, total]);
   var prevDisabled = useMemo(function () {
-    return !hasPrev || !allPages;
-  }, [allPages, hasPrev]);
+    return !hasPrev || !allPages || disabled;
+  }, [allPages, disabled, hasPrev]);
   var nextDisabled = useMemo(function () {
-    return !hasNext || !allPages;
-  }, [allPages, hasNext]);
-  var pageBufferSize = useMemo(function () {
-    return showLessItems ? 1 : 2;
-  }, [showLessItems]);
+    return !hasNext || !allPages || disabled;
+  }, [allPages, disabled, hasNext]);
   var handleChange = useCallback(function (p) {
     var page = p;
     if (isValid(page, current, total) && !disabled) {
@@ -240,12 +166,12 @@ var Pagination = /*#__PURE__*/forwardRef(function (props, ref) {
     }
     return current;
   }, [current, disabled, onChange, pageSize, setCurrent, total]);
-  var prev = useCallback(function () {
+  var handlePrev = useCallback(function () {
     if (hasPrev) {
       handleChange(current - 1);
     }
   }, [current, handleChange, hasPrev]);
-  var next = useCallback(function () {
+  var handleNext = useCallback(function () {
     if (hasNext) {
       handleChange(current + 1);
     }
@@ -255,12 +181,6 @@ var Pagination = /*#__PURE__*/forwardRef(function (props, ref) {
       handleChange(+inputValue || current);
     }
   }, [current, handleChange, inputValue]);
-  var shouldDisplayQuickJumper = useMemo(function () {
-    if (total <= pageSize) {
-      return false;
-    }
-    return showQuickJumper;
-  }, [pageSize, showQuickJumper, total]);
 
   /** 改变每页条数 */
   var changePageSize = useCallback(function (_size) {
@@ -269,7 +189,7 @@ var Pagination = /*#__PURE__*/forwardRef(function (props, ref) {
     }, total);
     var _current = current > newCurrent ? newCurrent : current;
     // // fix the issue:
-    // // Once 'total' is 0, 'current' in 'onShowSizeChange' is 0, which is not correct.
+    // // Once 'total' is 0, 'current' in 'onSizeChange' is 0, which is not correct.
     if (newCurrent === 0) {
       _current = current;
     }
@@ -282,21 +202,13 @@ var Pagination = /*#__PURE__*/forwardRef(function (props, ref) {
         setInputValue(_current);
       }
     }
-    onShowSizeChange === null || onShowSizeChange === void 0 || onShowSizeChange(_current, _size);
+    onSizeChange === null || onSizeChange === void 0 || onSizeChange(_size, _current);
     onChange === null || onChange === void 0 || onChange(_current, _size);
-  }, [current, onChange, onShowSizeChange, pageSize, props, setCurrent, setPageSize, total]);
-
-  /** 是否展示 pageSize 切换器，当 total 大于 50 时默认为 true */
-  var getShowSizeChanger = useMemo(function () {
-    if (typeof showSizeChanger !== 'undefined') {
-      return showSizeChanger;
-    }
-    return total > 50;
-  }, [showSizeChanger, total]);
+  }, [current, onChange, onSizeChange, pageSize, props, setCurrent, setPageSize, total]);
 
   /** 获取输入的跳转页码 */
-  var getValidValue = useCallback(function (e) {
-    var inputVal = e.target.value;
+  var getValidValue = useCallback(function (event) {
+    var inputVal = event.target.value;
     var _allPages = calculatePage(undefined, {
       pageSize: pageSize
     }, total);
@@ -313,26 +225,26 @@ var Pagination = /*#__PURE__*/forwardRef(function (props, ref) {
     }
     return value;
   }, [current, pageSize, total]);
-  var handleKeyDown = useCallback(function (e) {
-    if (!['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'ArrowLeft', 'ArrowRight', 'Backspace', 'Delete'].includes(e.key)) {
-      e.preventDefault();
+  var handleKeyDown = useCallback(function (event) {
+    if (!['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'ArrowLeft', 'ArrowRight', 'Backspace', 'Delete'].includes(event.key)) {
+      event.preventDefault();
     }
   }, []);
-  var handleKeyUp = useCallback(function (e) {
-    var value = getValidValue(e);
+  var handleKeyUp = useCallback(function (event) {
+    var value = getValidValue(event);
     if (value !== inputValue) {
       setInputValue(value === 0 ? 1 : value);
     }
-    if (e.key === 'Enter') {
+    if (event.key === 'Enter') {
       handleChange(value);
-    } else if (e.key === 'ArrowDown') {
+    } else if (event.key === 'ArrowDown') {
       handleChange(value - 1);
-    } else if (e.key === 'ArrowUp') {
+    } else if (event.key === 'ArrowUp') {
       handleChange(value + 1);
     }
   }, [getValidValue, handleChange, inputValue]);
-  var handleBlur = useCallback(function (e) {
-    var value = getValidValue(e);
+  var handleBlur = useCallback(function (event) {
+    var value = getValidValue(event);
     handleChange(value);
   }, [getValidValue, handleChange]);
   useImperativeHandle(ref, function () {
@@ -344,205 +256,263 @@ var Pagination = /*#__PURE__*/forwardRef(function (props, ref) {
     };
   });
 
+  /** 上一页按钮 */
+  var prevPage = useMemo(function () {
+    var comp = null;
+    if (isNotEmpty(prevIcon)) {
+      if (typeof prevIcon === 'string') {
+        comp = /*#__PURE__*/React.createElement(Icon, {
+          name: prevIcon,
+          prefix: "fal"
+        });
+      } else if ( /*#__PURE__*/isValidElement(prevIcon)) {
+        comp = prevIcon;
+      }
+    } else if (isNotEmpty(prevText)) {
+      comp = prevText;
+    }
+    return /*#__PURE__*/React.createElement("button", {
+      key: "btn-prev",
+      onClick: handlePrev,
+      className: classNames('btn-prev', b(_templateObject || (_templateObject = _taggedTemplateLiteral(["item"])))),
+      "aria-disabled": prevDisabled,
+      disabled: prevDisabled
+    }, comp);
+  }, [b, handlePrev, prevDisabled, prevIcon, prevText]);
+
+  /** 下一页按钮 */
+  var nextPage = useMemo(function () {
+    var comp = null;
+    if (isNotEmpty(nextIcon)) {
+      if (typeof nextIcon === 'string') {
+        comp = /*#__PURE__*/React.createElement(Icon, {
+          name: nextIcon,
+          prefix: "fal"
+        });
+      } else if ( /*#__PURE__*/isValidElement(nextIcon)) {
+        comp = nextIcon;
+      }
+    } else if (isNotEmpty(nextText)) {
+      comp = nextText;
+    }
+    return /*#__PURE__*/React.createElement("button", {
+      key: "btn-next",
+      onClick: handleNext,
+      className: classNames('btn-next', b(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["item"])))),
+      "aria-disabled": nextDisabled,
+      disabled: nextDisabled
+    }, comp);
+  }, [b, handleNext, nextDisabled, nextIcon, nextText]);
+
+  /** 分页描述 */
+  var totalText = useMemo(function () {
+    return typeof showTotal === 'function' ? /*#__PURE__*/React.createElement("span", {
+      className: classNames(e(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["total"]))), b(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["item"]))))
+    }, showTotal(total, [total === 0 ? 0 : (current - 1) * pageSize + 1, current * pageSize > total ? total : current * pageSize])) : /*#__PURE__*/React.createElement("span", {
+      className: classNames(e(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["total"]))), b(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["item"]))))
+    }, t('el.pagination.total', {
+      lng: locale,
+      total: total
+    }));
+  }, [b, current, e, locale, pageSize, showTotal, t, total]);
+
   /** 页码 */
   var pagerList = useMemo(function () {
-    if (allPages <= 3 + pageBufferSize * 2) {
-      var pagerProps = {
-        onClick: handleChange,
-        showTitle: showTitle,
-        itemRender: itemRender
-      };
-      if (!allPages) {
-        return [/*#__PURE__*/React.createElement(Pager, _extends({}, pagerProps, {
-          key: "noPager",
-          page: 1,
-          className: b(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["item-disabled"])))
-        }))];
+    var halfPagerCount = (pagerCount - 1) / 2;
+    var showPrevMore = false;
+    var showNextMore = false;
+    if (allPages > pagerCount) {
+      if (current > pagerCount - halfPagerCount) {
+        showPrevMore = true;
       }
-      return new Array(allPages).fill(0).map(function (_, i) {
-        var active = current === i + 1;
-        return /*#__PURE__*/React.createElement(Pager, _extends({}, pagerProps, {
-          key: i + 1,
-          page: i + 1,
-          active: active
-        }));
-      });
-    } else {
-      var _pagerList = [];
-      var prevItemTitle = showLessItems ? '向前 3 页' : '向前 5 页';
-      var nextItemTitle = showLessItems ? '向后 3 页' : '向后 5 页';
-      var jumpPrev = /*#__PURE__*/React.createElement("li", {
-        title: showTitle ? prevItemTitle : undefined,
-        key: "prev",
-        onClick: function onClick() {
-          return handleChange(jumpPrevPage);
-        },
-        tabIndex: 0,
-        className: classNames(b(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["jump-prev"]))), _defineProperty({}, b(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["jump-prev-custom-icon"]))), !!jumpPrevIcon)),
-        onMouseEnter: function onMouseEnter() {
-          return setHoverJumpPrev(true);
-        },
-        onMouseLeave: function onMouseLeave() {
-          return setHoverJumpPrev(false);
-        }
-      }, itemRender === null || itemRender === void 0 ? void 0 : itemRender(jumpPrevPage, 'jump-prev', getItemIcon(hoverJumpPrev ? /*#__PURE__*/React.createElement(Icon, {
-        name: "angles-left",
-        className: b(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["item-link-icon"])))
-      }) : jumpPrevIcon)));
-      var jumpNext = /*#__PURE__*/React.createElement("li", {
-        title: showTitle ? nextItemTitle : undefined,
-        key: "next",
-        tabIndex: 0,
-        onClick: function onClick() {
-          return handleChange(jumpNextPage);
-        },
-        className: classNames(b(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["jump-next"]))), _defineProperty({}, b(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["jump-next-custom-icon"]))), !!jumpNextIcon)),
-        onMouseEnter: function onMouseEnter() {
-          return setHoverJumpNext(true);
-        },
-        onMouseLeave: function onMouseLeave() {
-          return setHoverJumpNext(false);
-        }
-      }, itemRender === null || itemRender === void 0 ? void 0 : itemRender(jumpNextPage, 'jump-next', getItemIcon(hoverJumpNext ? /*#__PURE__*/React.createElement(Icon, {
-        name: "angles-right",
-        className: b(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["item-link-icon"])))
-      }) : jumpNextIcon)));
-      var lastPager = /*#__PURE__*/React.createElement(Pager, {
-        onClick: handleChange,
-        key: allPages,
-        page: allPages,
-        active: false,
-        showTitle: showTitle,
-        itemRender: itemRender
-      });
-      var firstPager = /*#__PURE__*/React.createElement(Pager, {
+      if (current < allPages - halfPagerCount) {
+        showNextMore = true;
+      }
+    }
+    var jumpPrev = /*#__PURE__*/React.createElement("li", {
+      key: "prev",
+      onClick: function onClick() {
+        return handleChange(current - (pagerCount - 2));
+      },
+      tabIndex: 0,
+      className: classNames(b(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["jump-prev"]))), b(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["jump-prev-custom-icon"]))), is({
+        disabled: disabled
+      })),
+      onMouseEnter: function onMouseEnter() {
+        return setHoverJumpPrev(true);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return setHoverJumpPrev(false);
+      }
+    }, hoverJumpPrev ? /*#__PURE__*/React.createElement(Icon, {
+      name: "angles-left"
+    }) : /*#__PURE__*/React.createElement(Icon, {
+      name: "ellipsis"
+    }));
+    var jumpNext = /*#__PURE__*/React.createElement("li", {
+      key: "next",
+      tabIndex: 0,
+      onClick: function onClick() {
+        return handleChange(current + pagerCount - 2);
+      },
+      className: classNames(b(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["jump-next"]))), b(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["jump-next-custom-icon"]))), is({
+        disabled: disabled
+      })),
+      onMouseEnter: function onMouseEnter() {
+        return setHoverJumpNext(true);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return setHoverJumpNext(false);
+      }
+    }, hoverJumpNext ? /*#__PURE__*/React.createElement(Icon, {
+      name: "angles-right"
+    }) : /*#__PURE__*/React.createElement(Icon, {
+      name: "ellipsis"
+    }));
+    var _pagerList = [];
+    if (allPages > 0) {
+      _pagerList.push( /*#__PURE__*/React.createElement(Pager, {
         onClick: handleChange,
         key: 1,
         page: 1,
-        active: false,
-        showTitle: showTitle,
-        itemRender: itemRender
-      });
-      var left = Math.max(1, current - pageBufferSize);
-      var right = Math.min(current + pageBufferSize, allPages);
-      if (current - 1 <= pageBufferSize) {
-        right = 1 + pageBufferSize * 2;
-      }
-      if (allPages - current <= pageBufferSize) {
-        left = allPages - pageBufferSize * 2;
-      }
-      for (var i = left; i <= right; i += 1) {
+        active: current === 1,
+        disabled: disabled
+      }));
+    }
+    if (showPrevMore && !showNextMore) {
+      _pagerList.push(jumpPrev);
+      var startPage = allPages - (pagerCount - 2);
+      for (var i = startPage; i < allPages; i++) {
         var active = current === i;
         _pagerList.push( /*#__PURE__*/React.createElement(Pager, {
           onClick: handleChange,
           key: i,
           page: i,
           active: active,
-          showTitle: showTitle,
-          itemRender: itemRender
+          disabled: disabled
         }));
       }
-      if (current - 1 >= pageBufferSize * 2 && current !== 1 + 2) {
-        _pagerList[0] = /*#__PURE__*/cloneElement(_pagerList[0], {
-          className: b(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["item-after-jump-prev"])))
-        });
-        showPrevNextJumpers && _pagerList.unshift(jumpPrev);
-      }
-      if (allPages - current >= pageBufferSize * 2 && current !== allPages - 2) {
-        _pagerList[_pagerList.length - 1] = /*#__PURE__*/cloneElement(_pagerList[_pagerList.length - 1], {
-          className: b(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["item-before-jump-next"])))
-        });
-        showPrevNextJumpers && _pagerList.push(jumpNext);
+    } else if (!showPrevMore && showNextMore) {
+      for (var _i = 2; _i < pagerCount; _i++) {
+        var _active = current === _i;
+        _pagerList.push( /*#__PURE__*/React.createElement(Pager, {
+          onClick: handleChange,
+          key: _i,
+          page: _i,
+          active: _active,
+          disabled: disabled
+        }));
       }
-      if (left !== 1) {
-        _pagerList.unshift(firstPager);
+      _pagerList.push(jumpNext);
+    } else if (showPrevMore && showNextMore) {
+      _pagerList.push(jumpPrev);
+      var offset = Math.floor(pagerCount / 2) - 1;
+      for (var _i2 = current - offset; _i2 <= current + offset; _i2++) {
+        var _active2 = current === _i2;
+        _pagerList.push( /*#__PURE__*/React.createElement(Pager, {
+          onClick: handleChange,
+          key: _i2,
+          page: _i2,
+          active: _active2,
+          disabled: disabled
+        }));
       }
-      if (right !== allPages) {
-        _pagerList.push(lastPager);
+      _pagerList.push(jumpNext);
+    } else {
+      for (var _i3 = 2; _i3 < allPages; _i3++) {
+        var _active3 = current === _i3;
+        _pagerList.push( /*#__PURE__*/React.createElement(Pager, {
+          onClick: handleChange,
+          key: _i3,
+          page: _i3,
+          active: _active3,
+          disabled: disabled
+        }));
       }
-      return _pagerList;
     }
-  }, [allPages, pageBufferSize, handleChange, showTitle, itemRender, b, current, showLessItems, jumpPrevIcon, jumpPrevPage, getItemIcon, hoverJumpPrev, jumpNextIcon, jumpNextPage, hoverJumpNext, showPrevNextJumpers]);
-
-  /** 跳页 */
-  var gotoButton = useMemo(function () {
-    if (simple) {
-      if (typeof showQuickJumper === 'boolean') {
-        return showQuickJumper && /*#__PURE__*/React.createElement(Button, {
-          nativeType: "button",
-          onClick: handleGoTO
-        }, "\u786E\u5B9A");
-      } else if (showQuickJumper !== null && showQuickJumper !== void 0 && showQuickJumper.goButton) {
-        return /*#__PURE__*/React.createElement("span", {
-          onClick: handleGoTO,
-          onKeyUp: handleGoTO
-        }, showQuickJumper.goButton);
-      }
-      return /*#__PURE__*/React.createElement("li", {
-        title: showTitle ? "\u8DF3\u81F3".concat(current, "/").concat(allPages) : undefined,
-        className: b(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["simple-pager"])))
-      }, gotoButton);
+    if (allPages > 1) {
+      var _active4 = current === allPages;
+      _pagerList.push( /*#__PURE__*/React.createElement(Pager, {
+        onClick: handleChange,
+        key: allPages,
+        page: allPages,
+        active: _active4,
+        disabled: disabled
+      }));
     }
-  }, [allPages, b, current, handleGoTO, showQuickJumper, showTitle, simple]);
-  if (hideOnSinglePage === true && total <= pageSize) {
-    return null;
-  }
-
-  // 简单分页
-  if (simple) {
     return /*#__PURE__*/React.createElement("ul", {
-      className: classNames(b(), b(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["simple"]))), _defineProperty({}, b(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["disabled"]))), disabled), className),
-      style: style,
-      ref: containerRef
-    }, /*#__PURE__*/React.createElement("li", {
-      title: showTitle ? '上一页' : undefined,
-      onClick: prev,
-      className: classNames(b(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["prev"]))), _defineProperty({}, b(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["disabled"]))), !hasPrev))
-    }, prevPage), /*#__PURE__*/React.createElement("li", {
-      title: showTitle ? "".concat(current, "/").concat(allPages) : undefined,
-      className: b(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["simple-pager"])))
-    }, /*#__PURE__*/React.createElement("input", {
-      type: "text",
-      value: inputValue,
+      key: "pager",
+      className: b('pager', false)
+    }, _pagerList);
+  }, [pagerCount, allPages, b, is, disabled, hoverJumpPrev, hoverJumpNext, current, handleChange]);
+  var sizes = useCallback(function (type) {
+    return /*#__PURE__*/React.createElement(Options, {
       disabled: disabled,
-      onKeyDown: handleKeyDown,
-      onKeyUp: handleKeyUp,
-      onChange: handleKeyUp,
-      onBlur: handleBlur,
-      size: 3
-    }), /*#__PURE__*/React.createElement("span", {
-      className: b(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["slash"])))
-    }, "/"), allPages), /*#__PURE__*/React.createElement("li", {
-      title: showTitle ? '下一页' : undefined,
-      onClick: next,
-      className: classNames(b(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["next"]))), _defineProperty({}, b(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["disabled"]))), !hasNext))
-    }, nextPage), gotoButton);
+      rootPrefixCls: classPrefix,
+      changeSize: changePageSize,
+      current: current,
+      pageSize: pageSize,
+      pageSizeOptions: pageSizes,
+      quickGo: handleChange,
+      size: size,
+      simple: simple,
+      type: type
+    });
+  }, [changePageSize, classPrefix, current, disabled, handleChange, pageSize, pageSizes, simple, size]);
+  var content = useMemo(function () {
+    var haveRightWrapper = false;
+    var rootChildren = [];
+    var rightWrapperChildren = [];
+    var components = layout.split(',').filter(function (item) {
+      return !!item;
+    }).map(function (item) {
+      switch (item.trim()) {
+        case 'prev':
+          return prevPage;
+        case 'pager':
+          return pagerList;
+        case 'next':
+          return nextPage;
+        case 'total':
+          return totalText;
+        case 'sizes':
+          return sizes('sizes');
+        case 'jumper':
+          return sizes('jumper');
+        case '->':
+          return '->';
+        default:
+          return null;
+      }
+    });
+    components.forEach(function (c) {
+      if (c === '->') {
+        haveRightWrapper = true;
+        return;
+      }
+      if (!haveRightWrapper) {
+        rootChildren.push(c);
+      } else {
+        rightWrapperChildren.push(c);
+      }
+    });
+    return /*#__PURE__*/React.createElement(React.Fragment, null, rootChildren, rightWrapperChildren.length > 0 ? /*#__PURE__*/React.createElement("div", {
+      className: e(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["rightwrapper"])))
+    }, rightWrapperChildren) : null);
+  }, [e, layout, nextPage, pagerList, prevPage, sizes, totalText]);
+  var simplePage = useMemo(function () {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, prevPage, sizes('jumper'), nextPage);
+  }, [nextPage, prevPage, sizes]);
+  if (hideOnSinglePage === true && total <= pageSize) {
+    return null;
   }
-  return /*#__PURE__*/React.createElement("ul", {
-    className: classNames(b(), className, _defineProperty(_defineProperty({}, b(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["disabled"]))), disabled || total === 0), "mini", size === 'small')),
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(b(), className, _defineProperty({}, b(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["disabled"]))), disabled || total === 0), is({
+      background: background
+    }), m(size)),
     style: style,
     ref: containerRef
-  }, totalText, /*#__PURE__*/React.createElement("li", {
-    title: showTitle ? '上一页' : undefined,
-    onClick: prev,
-    className: classNames(b(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["prev"]))), _defineProperty({}, b(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["disabled"]))), prevDisabled)),
-    "aria-disabled": prevDisabled
-  }, prevPage), pagerList, /*#__PURE__*/React.createElement("li", {
-    title: showTitle ? '下一页' : undefined,
-    onClick: next,
-    className: classNames(b(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["next"]))), _defineProperty({}, b(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["disabled"]))), nextDisabled)),
-    "aria-disabled": nextDisabled
-  }, nextPage), /*#__PURE__*/React.createElement(Options, {
-    disabled: disabled,
-    rootPrefixCls: classPrefix,
-    changeSize: getShowSizeChanger ? changePageSize : null,
-    current: current,
-    pageSize: pageSize,
-    pageSizeOptions: pageSizeOptions,
-    quickGo: shouldDisplayQuickJumper ? handleChange : undefined,
-    goButton: (_ref = typeof showQuickJumper !== 'boolean' && (showQuickJumper === null || showQuickJumper === void 0 ? void 0 : showQuickJumper.goButton)) !== null && _ref !== void 0 ? _ref : false,
-    mini: size === 'small'
-  }));
+  }, simple ? simplePage : content);
 });
-Pagination.displayName = 'Pagination';
+Pagination.displayName = 'ElPagination';
 export default Pagination;