@qsxy/element-plus-react 1.0.0-next.8 → 1.0.2

package/dist/Pagination/Pagination.js

@@ -1,466 +1,518 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/Pagination/Pagination.tsx
-var Pagination_exports = {};
-__export(Pagination_exports, {
-  default: () => Pagination_default
-});
-module.exports = __toCommonJS(Pagination_exports);
-var import_ahooks = require("ahooks");
-var import_classnames = __toESM(require("classnames"));
-var import_react = __toESM(require("react"));
-var import_Button = require("../Button");
-var import_Icon = require("../Icon");
-var import_Util = require("../Util");
-var import_hooks = require("../hooks");
-var import_Options = __toESM(require("./Options"));
-var import_Pager = __toESM(require("./Pager"));
-var import_util = require("./util");
-var Pagination = (0, import_react.forwardRef)((props, ref) => {
-  props = (0, import_Util.mergeDefaultProps)(
-    {
-      defaultCurrent: 1,
-      total: 0,
-      defaultPageSize: 10,
-      hideOnSinglePage: false,
-      showPrevNextJumpers: true,
-      showQuickJumper: false,
-      showLessItems: false,
-      showTitle: true,
-      itemRender: (page, type, element) => element
-    },
-    props
-  );
-  const {
-    classPrefix = "pagination",
-    className,
-    style,
-    disabled,
-    hideOnSinglePage,
-    total,
-    showQuickJumper,
-    showLessItems,
-    size,
-    showTitle,
-    showTotal,
-    simple,
-    itemRender,
-    showPrevNextJumpers,
-    pageSizeOptions,
-    showSizeChanger,
-    onChange,
-    onShowSizeChange
-  } = props;
-  const { b } = (0, import_hooks.useClassNames)(classPrefix);
-  const [current, setCurrent] = (0, import_hooks.useControlled)(props.current, props.defaultCurrent);
-  const [pageSize, setPageSize] = (0, import_hooks.useControlled)(props.pageSize, props.defaultPageSize);
-  const [hoverJumpPrev, setHoverJumpPrev] = (0, import_react.useState)(false);
-  const [hoverJumpNext, setHoverJumpNext] = (0, import_react.useState)(false);
-  const [inputValue, setInputValue] = (0, import_react.useState)(current);
-  const containerRef = (0, import_react.useRef)(null);
-  const prevIcon = (0, import_react.useMemo)(
-    () => /* @__PURE__ */ import_react.default.createElement(import_Button.Button, { className: b`item-link` }, /* @__PURE__ */ import_react.default.createElement(import_Icon.Icon, { name: "angle-left", prefix: "fal" })),
-    [b]
-  );
-  const nextIcon = (0, import_react.useMemo)(
-    () => /* @__PURE__ */ import_react.default.createElement(import_Button.Button, { className: b`item-link` }, /* @__PURE__ */ import_react.default.createElement(import_Icon.Icon, { name: "angle-right", prefix: "fal" })),
-    [b]
-  );
-  const jumpPrevIcon = (0, import_react.useMemo)(() => /* @__PURE__ */ import_react.default.createElement(import_Icon.Icon, { name: "ellipsis", className: b`item-link` }), [b]);
-  const jumpNextIcon = (0, import_react.useMemo)(() => /* @__PURE__ */ import_react.default.createElement(import_Icon.Icon, { name: "ellipsis", className: b`item-link` }), [b]);
-  (0, import_ahooks.useMount)(() => {
-    const hasOnChange = !!onChange;
-    const hasCurrent = "current" in props;
+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;
+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); }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useMount } from 'ahooks';
+import classNames from 'classnames';
+import React, { forwardRef, isValidElement, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useConfigProvider } from "../ConfigProvider/ConfigProviderContext";
+import Icon from "../Icon/Icon";
+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) {
+  props = mergeDefaultProps({
+    defaultCurrentPage: 1,
+    total: 0,
+    size: 'default',
+    defaultPageSize: 10,
+    hideOnSinglePage: false,
+    // 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,
+    classPrefix = _props$classPrefix === void 0 ? 'pagination' : _props$classPrefix,
+    className = _props.className,
+    style = _props.style,
+    disabled = _props.disabled,
+    hideOnSinglePage = _props.hideOnSinglePage,
+    total = _props.total,
+    size = _props.size,
+    prevText = _props.prevText,
+    prevIcon = _props.prevIcon,
+    pagerCount = _props.pagerCount,
+    nextText = _props.nextText,
+    nextIcon = _props.nextIcon,
+    showTotal = _props.showTotal,
+    layout = _props.layout,
+    simple = _props.simple,
+    background = _props.background,
+    pageSizes = _props.pageSizes,
+    onChange = _props.onChange,
+    onSizeChange = _props.onSizeChange;
+  var _useClassNames = useClassNames(classPrefix),
+    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];
+  var _useControlled3 = useControlled(props.pageSize, props.defaultPageSize),
+    _useControlled4 = _slicedToArray(_useControlled3, 2),
+    pageSize = _useControlled4[0],
+    setPageSize = _useControlled4[1];
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    hoverJumpPrev = _useState2[0],
+    setHoverJumpPrev = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    hoverJumpNext = _useState4[0],
+    setHoverJumpNext = _useState4[1];
+  var _useState5 = useState(current),
+    _useState6 = _slicedToArray(_useState5, 2),
+    inputValue = _useState6[0],
+    setInputValue = _useState6[1];
+  var containerRef = useRef(null);
+  useMount(function () {
+    var hasOnChange = !!onChange;
+    var hasCurrent = ('currentPage' in props);
     if (hasCurrent && !hasOnChange) {
-      console.warn("Warning: You provided a `current` prop to a Pagination component without an `onChange` handler. This will render a read-only component.");
+      // eslint-disable-next-line no-console
+      console.warn('Warning: You provided a `currentPage` prop to a Pagination component without an `onChange` handler. This will render a read-only component.');
     }
-    const _current = Math.min(current, (0, import_util.calculatePage)(pageSize, void 0, total));
+    var _current = Math.min(current, calculatePage(pageSize, undefined, total));
     if (_current <= 0) {
       setCurrent(1);
-      !disabled && (onChange == null ? void 0 : onChange(1, pageSize));
+      !disabled && (onChange === null || onChange === void 0 ? void 0 : onChange(1, pageSize));
     } else if (current !== _current) {
       setCurrent(_current);
-      !disabled && (onChange == null ? void 0 : onChange(_current, pageSize));
+      !disabled && (onChange === null || onChange === void 0 ? void 0 : onChange(_current, pageSize));
     }
   });
-  (0, import_react.useEffect)(() => {
+  useEffect(function () {
     setInputValue(current);
+    // const lastCurrentNode = paginationNode.current.querySelector(`.${prefixCls}-item-${prevState.current}`);
+    // if (lastCurrentNode && document.activeElement === lastCurrentNode) {
+    //     lastCurrentNode.blur();
+    // }
   }, [current]);
-  (0, import_react.useEffect)(() => {
-    const newCurrent = (0, import_util.calculatePage)(props.pageSize, { pageSize }, total);
-    const _current = current > newCurrent ? newCurrent : current;
+  useEffect(function () {
+    var newCurrent = calculatePage(props.pageSize, {
+      pageSize: pageSize
+    }, total);
+    var _current = current > newCurrent ? newCurrent : current;
     setInputValue(_current);
     if (current !== _current) {
-      if (!("current" in props)) {
+      if (!('current' in props)) {
         setCurrent(_current);
+        // setInputValue(_current);
       } else {
-        !disabled && (onChange == null ? void 0 : onChange(_current, pageSize));
+        !disabled && (onChange === null || onChange === void 0 ? void 0 : onChange(_current, pageSize));
       }
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pageSize, total]);
+
+  /** 是否有上一页 */
+  var hasPrev = useMemo(function () {
+    return current > 1;
+  }, [current]);
+
+  /** 是否有下一页 */
+  var hasNext = useMemo(function () {
+    return current < calculatePage(undefined, {
+      pageSize: pageSize
+    }, total);
+  }, [current, pageSize, total]);
+  var allPages = useMemo(function () {
+    return calculatePage(undefined, {
+      pageSize: pageSize
+    }, total);
   }, [pageSize, total]);
-  const getItemIcon = (0, import_react.useCallback)(
-    (icon) => {
-      return typeof icon === "function" ? (0, import_react.createElement)(icon, { ...props }) : icon || /* @__PURE__ */ import_react.default.createElement("button", { type: "button", className: b`item-link` });
-    },
-    [b, props]
-  );
-  const hasPrev = (0, import_react.useMemo)(() => current > 1, [current]);
-  const hasNext = (0, import_react.useMemo)(() => current < (0, import_util.calculatePage)(void 0, { pageSize }, total), [current, pageSize, total]);
-  const jumpPrevPage = (0, import_react.useMemo)(() => Math.max(1, current - (showLessItems ? 3 : 5)), [current, showLessItems]);
-  const jumpNextPage = (0, import_react.useMemo)(() => Math.min((0, import_util.calculatePage)(void 0, { pageSize }, total), current + (showLessItems ? 3 : 5)), [current, pageSize, total, showLessItems]);
-  const allPages = (0, import_react.useMemo)(() => (0, import_util.calculatePage)(void 0, { pageSize }, total), [pageSize, total]);
-  const prevPage = (0, import_react.useMemo)(() => {
-    const prev2 = current - 1 > 0 ? current - 1 : 0;
-    const prevButton = itemRender == null ? void 0 : itemRender(prev2, "prev", getItemIcon(prevIcon));
-    return (0, import_react.isValidElement)(prevButton) ? (0, import_react.cloneElement)(prevButton, { disabled: !hasPrev }) : prevButton;
-  }, [current, getItemIcon, hasPrev, itemRender, prevIcon]);
-  const nextPage = (0, import_react.useMemo)(() => {
-    const next2 = current + 1 < allPages ? current + 1 : allPages;
-    const nextButton = itemRender == null ? void 0 : itemRender(next2, "next", getItemIcon(nextIcon));
-    return (0, import_react.isValidElement)(nextButton) ? (0, import_react.cloneElement)(nextButton, { disabled: !hasNext }) : nextButton;
-  }, [allPages, current, getItemIcon, hasNext, itemRender, nextIcon]);
-  const totalText = (0, import_react.useMemo)(
-    () => typeof showTotal === "function" ? /* @__PURE__ */ import_react.default.createElement("li", { className: b`total-text` }, showTotal(total, [total === 0 ? 0 : (current - 1) * pageSize + 1, current * pageSize > total ? total : current * pageSize])) : null,
-    [b, current, pageSize, showTotal, total]
-  );
-  const prevDisabled = (0, import_react.useMemo)(() => !hasPrev || !allPages, [allPages, hasPrev]);
-  const nextDisabled = (0, import_react.useMemo)(() => !hasNext || !allPages, [allPages, hasNext]);
-  const pageBufferSize = (0, import_react.useMemo)(() => showLessItems ? 1 : 2, [showLessItems]);
-  const handleChange = (0, import_react.useCallback)(
-    (p) => {
-      let page = p;
-      if ((0, import_util.isValid)(page, current, total) && !disabled) {
-        const currentPage = (0, import_util.calculatePage)(void 0, { pageSize }, total);
-        if (page > currentPage) {
-          page = currentPage;
-        } else if (page < 1) {
-          page = 1;
-        }
-        setCurrent(page);
-        setInputValue(page);
-        onChange == null ? void 0 : onChange(page, pageSize);
-        return page;
+  var prevDisabled = useMemo(function () {
+    return !hasPrev || !allPages || disabled;
+  }, [allPages, disabled, hasPrev]);
+  var nextDisabled = useMemo(function () {
+    return !hasNext || !allPages || disabled;
+  }, [allPages, disabled, hasNext]);
+  var handleChange = useCallback(function (p) {
+    var page = p;
+    if (isValid(page, current, total) && !disabled) {
+      var currentPage = calculatePage(undefined, {
+        pageSize: pageSize
+      }, total);
+      if (page > currentPage) {
+        page = currentPage;
+      } else if (page < 1) {
+        page = 1;
       }
-      return current;
-    },
-    [current, disabled, onChange, pageSize, setCurrent, total]
-  );
-  const prev = (0, import_react.useCallback)(() => {
+      setCurrent(page);
+      setInputValue(page);
+      onChange === null || onChange === void 0 || onChange(page, pageSize);
+      return page;
+    }
+    return current;
+  }, [current, disabled, onChange, pageSize, setCurrent, total]);
+  var handlePrev = useCallback(function () {
     if (hasPrev) {
       handleChange(current - 1);
     }
   }, [current, handleChange, hasPrev]);
-  const next = (0, import_react.useCallback)(() => {
+  var handleNext = useCallback(function () {
     if (hasNext) {
       handleChange(current + 1);
     }
   }, [current, handleChange, hasNext]);
-  const handleGoTO = (0, import_react.useCallback)(
-    (event) => {
-      if (event.key === "Enter" || event.type === "click") {
-        handleChange(+inputValue || current);
-      }
-    },
-    [current, handleChange, inputValue]
-  );
-  const shouldDisplayQuickJumper = (0, import_react.useMemo)(() => {
-    if (total <= pageSize) {
-      return false;
+  var handleGoTO = useCallback(function (event) {
+    if (event.key === 'Enter' || event.type === 'click') {
+      handleChange(+inputValue || current);
+    }
+  }, [current, handleChange, inputValue]);
+
+  /** 改变每页条数 */
+  var changePageSize = useCallback(function (_size) {
+    var newCurrent = calculatePage(_size, {
+      pageSize: pageSize
+    }, total);
+    var _current = current > newCurrent ? newCurrent : current;
+    // // fix the issue:
+    // // Once 'total' is 0, 'current' in 'onSizeChange' is 0, which is not correct.
+    if (newCurrent === 0) {
+      _current = current;
     }
-    return showQuickJumper;
-  }, [pageSize, showQuickJumper, total]);
-  const changePageSize = (0, import_react.useCallback)(
-    (_size) => {
-      const newCurrent = (0, import_util.calculatePage)(_size, { pageSize }, total);
-      let _current = current > newCurrent ? newCurrent : current;
-      if (newCurrent === 0) {
-        _current = current;
+    if (typeof _size === 'number') {
+      if (!('pageSize' in props)) {
+        setPageSize(_size);
       }
-      if (typeof _size === "number") {
-        if (!("pageSize" in props)) {
-          setPageSize(_size);
-        }
-        if (!("current" in props)) {
-          setCurrent(_current);
-          setInputValue(_current);
-        }
+      if (!('current' in props)) {
+        setCurrent(_current);
+        setInputValue(_current);
       }
-      onShowSizeChange == null ? void 0 : onShowSizeChange(_current, _size);
-      onChange == null ? void 0 : onChange(_current, _size);
-    },
-    [current, onChange, onShowSizeChange, pageSize, props, setCurrent, setPageSize, total]
-  );
-  const getShowSizeChanger = (0, import_react.useMemo)(() => {
-    if (typeof showSizeChanger !== "undefined") {
-      return showSizeChanger;
     }
-    return total > 50;
-  }, [showSizeChanger, total]);
-  const getValidValue = (0, import_react.useCallback)(
-    (e) => {
-      const inputVal = e.target.value;
-      const _allPages = (0, import_util.calculatePage)(void 0, { pageSize }, total);
-      let value;
-      if (inputVal === "") {
-        value = +inputVal;
-      } else if (isNaN(Number(inputVal))) {
-        value = current;
-      } else if (+inputVal >= _allPages) {
-        value = _allPages;
-      } else {
-        value = Number(inputVal);
-      }
-      return value;
-    },
-    [current, pageSize, total]
-  );
-  const handleKeyDown = (0, import_react.useCallback)((e) => {
-    if (!["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "ArrowLeft", "ArrowRight", "Backspace", "Delete"].includes(e.key)) {
-      e.preventDefault();
+    onSizeChange === null || onSizeChange === void 0 || onSizeChange(_size, _current);
+    onChange === null || onChange === void 0 || onChange(_current, _size);
+  }, [current, onChange, onSizeChange, pageSize, props, setCurrent, setPageSize, total]);
+
+  /** 获取输入的跳转页码 */
+  var getValidValue = useCallback(function (event) {
+    var inputVal = event.target.value;
+    var _allPages = calculatePage(undefined, {
+      pageSize: pageSize
+    }, total);
+    var value;
+    if (inputVal === '') {
+      value = +inputVal;
+      // eslint-disable-next-line no-restricted-globals
+    } else if (isNaN(Number(inputVal))) {
+      value = current;
+    } else if (+inputVal >= _allPages) {
+      value = _allPages;
+    } else {
+      value = Number(inputVal);
+    }
+    return value;
+  }, [current, pageSize, total]);
+  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();
     }
   }, []);
-  const handleKeyUp = (0, import_react.useCallback)(
-    (e) => {
-      const value = getValidValue(e);
-      if (value !== inputValue) {
-        setInputValue(value === 0 ? 1 : value);
+  var handleKeyUp = useCallback(function (event) {
+    var value = getValidValue(event);
+    if (value !== inputValue) {
+      setInputValue(value === 0 ? 1 : value);
+    }
+    if (event.key === 'Enter') {
+      handleChange(value);
+    } else if (event.key === 'ArrowDown') {
+      handleChange(value - 1);
+    } else if (event.key === 'ArrowUp') {
+      handleChange(value + 1);
+    }
+  }, [getValidValue, handleChange, inputValue]);
+  var handleBlur = useCallback(function (event) {
+    var value = getValidValue(event);
+    handleChange(value);
+  }, [getValidValue, handleChange]);
+  useImperativeHandle(ref, function () {
+    return {
+      pageNum: current,
+      pageSize: pageSize,
+      setPageNum: handleChange,
+      setPageSize: changePageSize
+    };
+  });
+
+  /** 上一页按钮 */
+  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;
       }
-      if (e.key === "Enter") {
-        handleChange(value);
-      } else if (e.key === "ArrowDown") {
-        handleChange(value - 1);
-      } else if (e.key === "ArrowUp") {
-        handleChange(value + 1);
+    } 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;
       }
-    },
-    [getValidValue, handleChange, inputValue]
-  );
-  const handleBlur = (0, import_react.useCallback)(
-    (e) => {
-      const value = getValidValue(e);
-      handleChange(value);
-    },
-    [getValidValue, handleChange]
-  );
-  (0, import_react.useImperativeHandle)(ref, () => ({
-    pageNum: current,
-    pageSize,
-    setPageNum: handleChange,
-    setPageSize: changePageSize
-  }));
-  const pagerList = (0, import_react.useMemo)(() => {
-    if (allPages <= 3 + pageBufferSize * 2) {
-      const pagerProps = {
-        onClick: handleChange,
-        showTitle,
-        itemRender
-      };
-      if (!allPages) {
-        return [/* @__PURE__ */ import_react.default.createElement(import_Pager.default, { ...pagerProps, key: "noPager", page: 1, className: b`item-disabled` })];
+    } 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 () {
+    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((_, i) => {
-        const active = current === i + 1;
-        return /* @__PURE__ */ import_react.default.createElement(import_Pager.default, { ...pagerProps, key: i + 1, page: i + 1, active });
-      });
-    } else {
-      const _pagerList = [];
-      const prevItemTitle = showLessItems ? "向前 3 页" : "向前 5 页";
-      const nextItemTitle = showLessItems ? "向后 3 页" : "向后 5 页";
-      const jumpPrev = /* @__PURE__ */ import_react.default.createElement(
-        "li",
-        {
-          title: showTitle ? prevItemTitle : void 0,
-          key: "prev",
-          onClick: () => handleChange(jumpPrevPage),
-          tabIndex: 0,
-          className: (0, import_classnames.default)(b`jump-prev`, {
-            [b`jump-prev-custom-icon`]: !!jumpPrevIcon
-          }),
-          onMouseEnter: () => setHoverJumpPrev(true),
-          onMouseLeave: () => setHoverJumpPrev(false)
-        },
-        itemRender == null ? void 0 : itemRender(jumpPrevPage, "jump-prev", getItemIcon(hoverJumpPrev ? /* @__PURE__ */ import_react.default.createElement(import_Icon.Icon, { name: "angles-left", className: b`item-link-icon` }) : jumpPrevIcon))
-      );
-      const jumpNext = /* @__PURE__ */ import_react.default.createElement(
-        "li",
-        {
-          title: showTitle ? nextItemTitle : void 0,
-          key: "next",
-          tabIndex: 0,
-          onClick: () => handleChange(jumpNextPage),
-          className: (0, import_classnames.default)(b`jump-next`, {
-            [b`jump-next-custom-icon`]: !!jumpNextIcon
-          }),
-          onMouseEnter: () => setHoverJumpNext(true),
-          onMouseLeave: () => setHoverJumpNext(false)
-        },
-        itemRender == null ? void 0 : itemRender(jumpNextPage, "jump-next", getItemIcon(hoverJumpNext ? /* @__PURE__ */ import_react.default.createElement(import_Icon.Icon, { name: "angles-right", className: b`item-link-icon` }) : jumpNextIcon))
-      );
-      const lastPager = /* @__PURE__ */ import_react.default.createElement(import_Pager.default, { onClick: handleChange, key: allPages, page: allPages, active: false, showTitle, itemRender });
-      const firstPager = /* @__PURE__ */ import_react.default.createElement(import_Pager.default, { onClick: handleChange, key: 1, page: 1, active: false, showTitle, itemRender });
-      let left = Math.max(1, current - pageBufferSize);
-      let right = Math.min(current + pageBufferSize, allPages);
-      if (current - 1 <= pageBufferSize) {
-        right = 1 + pageBufferSize * 2;
+      if (current < allPages - halfPagerCount) {
+        showNextMore = true;
       }
-      if (allPages - current <= pageBufferSize) {
-        left = allPages - pageBufferSize * 2;
+    }
+    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);
       }
-      for (let i = left; i <= right; i += 1) {
-        const active = current === i;
-        _pagerList.push(/* @__PURE__ */ import_react.default.createElement(import_Pager.default, { onClick: handleChange, key: i, page: i, active, showTitle, itemRender }));
+    }, 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);
       }
-      if (current - 1 >= pageBufferSize * 2 && current !== 1 + 2) {
-        _pagerList[0] = (0, import_react.cloneElement)(_pagerList[0], {
-          className: b`item-after-jump-prev`
-        });
-        showPrevNextJumpers && _pagerList.unshift(jumpPrev);
+    }, 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: 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,
+          disabled: disabled
+        }));
       }
-      if (allPages - current >= pageBufferSize * 2 && current !== allPages - 2) {
-        _pagerList[_pagerList.length - 1] = (0, import_react.cloneElement)(_pagerList[_pagerList.length - 1], {
-          className: b`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
-  ]);
-  const gotoButton = (0, import_react.useMemo)(() => {
-    if (simple) {
-      if (typeof showQuickJumper === "boolean") {
-        return showQuickJumper && /* @__PURE__ */ import_react.default.createElement(import_Button.Button, { nativeType: "button", onClick: handleGoTO }, "确定");
-      } else if (showQuickJumper == null ? void 0 : showQuickJumper.goButton) {
-        return /* @__PURE__ */ import_react.default.createElement("span", { onClick: handleGoTO, onKeyUp: handleGoTO }, showQuickJumper.goButton);
-      }
-      return /* @__PURE__ */ import_react.default.createElement("li", { title: showTitle ? `跳至${current}/${allPages}` : void 0, className: b`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]);
+    return /*#__PURE__*/React.createElement("ul", {
+      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,
+      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;
   }
-  if (simple) {
-    return /* @__PURE__ */ import_react.default.createElement("ul", { className: (0, import_classnames.default)(b(), b`simple`, { [b`disabled`]: disabled }, className), style, ref: containerRef }, /* @__PURE__ */ import_react.default.createElement(
-      "li",
-      {
-        title: showTitle ? "上一页" : void 0,
-        onClick: prev,
-        className: (0, import_classnames.default)(b`prev`, {
-          [b`disabled`]: !hasPrev
-        })
-      },
-      prevPage
-    ), /* @__PURE__ */ import_react.default.createElement("li", { title: showTitle ? `${current}/${allPages}` : void 0, className: b`simple-pager` }, /* @__PURE__ */ import_react.default.createElement("input", { type: "text", value: inputValue, disabled, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onChange: handleKeyUp, onBlur: handleBlur, size: 3 }), /* @__PURE__ */ import_react.default.createElement("span", { className: b`slash` }, "/"), allPages), /* @__PURE__ */ import_react.default.createElement(
-      "li",
-      {
-        title: showTitle ? "下一页" : void 0,
-        onClick: next,
-        className: (0, import_classnames.default)(b`next`, {
-          [b`disabled`]: !hasNext
-        })
-      },
-      nextPage
-    ), gotoButton);
-  }
-  return /* @__PURE__ */ import_react.default.createElement(
-    "ul",
-    {
-      className: (0, import_classnames.default)(b(), className, {
-        [b`disabled`]: disabled || total === 0,
-        mini: size === "small"
-      }),
-      style,
-      ref: containerRef
-    },
-    totalText,
-    /* @__PURE__ */ import_react.default.createElement(
-      "li",
-      {
-        title: showTitle ? "上一页" : void 0,
-        onClick: prev,
-        className: (0, import_classnames.default)(b`prev`, {
-          [b`disabled`]: prevDisabled
-        }),
-        "aria-disabled": prevDisabled
-      },
-      prevPage
-    ),
-    pagerList,
-    /* @__PURE__ */ import_react.default.createElement(
-      "li",
-      {
-        title: showTitle ? "下一页" : void 0,
-        onClick: next,
-        className: (0, import_classnames.default)(b`next`, {
-          [b`disabled`]: nextDisabled
-        }),
-        "aria-disabled": nextDisabled
-      },
-      nextPage
-    ),
-    /* @__PURE__ */ import_react.default.createElement(
-      import_Options.default,
-      {
-        disabled,
-        rootPrefixCls: classPrefix,
-        changeSize: getShowSizeChanger ? changePageSize : null,
-        current,
-        pageSize,
-        pageSizeOptions,
-        quickGo: shouldDisplayQuickJumper ? handleChange : void 0,
-        goButton: (typeof showQuickJumper !== "boolean" && (showQuickJumper == null ? void 0 : showQuickJumper.goButton)) ?? false,
-        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
+  }, simple ? simplePage : content);
 });
-Pagination.displayName = "Pagination";
-var Pagination_default = Pagination;
+Pagination.displayName = 'ElPagination';
+export default Pagination;