@nutui/nutui-react/dist/esm/Pagination.js

京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序

import { _ as __rest } from "./tslib.es6.js";
import React__default, { useMemo } from "react";
import classNames from "classnames";
import { useConfig } from "./ConfigProvider.js";
import { u as usePropsValue } from "./use-props-value.js";
import { C as ComponentDefaults } from "./typings.js";
const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { defaultValue: 1, mode: "multi", prev: null, next: null, total: 50, pageSize: 10, itemSize: 5, ellipse: false });
const Pagination = (props) => {
  const { locale } = useConfig();
  const _a = Object.assign(Object.assign({}, defaultProps), props), { value, mode, prev, next, total, pageSize, itemSize, onChange, ellipse, itemRender, defaultValue, className } = _a, rest = __rest(_a, ["value", "mode", "prev", "next", "total", "pageSize", "itemSize", "onChange", "ellipse", "itemRender", "defaultValue", "className"]);
  const classPrefix = "nut-pagination";
  const [currentPage, setCurrentPage] = usePropsValue({
    value,
    defaultValue,
    finalValue: 1,
    onChange
  });
  const pageCount = useMemo(() => {
    const num = Math.ceil(total / pageSize);
    return Number.isNaN(num) ? 1 : Math.max(1, num);
  }, [total, pageSize]);
  const pages = useMemo(() => {
    const items = [];
    let startPage = 1;
    let endPage = pageCount;
    const partialShow = pageCount > itemSize;
    if (partialShow) {
      startPage = Math.max(currentPage - Math.floor(itemSize / 2), 1);
      endPage = startPage + itemSize - 1;
      if (endPage > pageCount) {
        endPage = pageCount;
        startPage = endPage - itemSize + 1;
      }
    }
    for (let i = startPage; i <= endPage; i++) {
      items.push({ number: i, text: i });
    }
    if (partialShow && itemSize > 0 && ellipse) {
      if (startPage > 1) {
        items.unshift({ number: startPage - 1, text: "..." });
      }
      if (endPage < pageCount) {
        items.push({ number: endPage + 1, text: "..." });
      }
    }
    return items;
  }, [currentPage, itemSize, pageCount]);
  const handleSelectPage = (curPage) => {
    if (curPage > pageCount || curPage < 1)
      return;
    setCurrentPage(curPage);
  };
  return React__default.createElement(
    "div",
    Object.assign({ className: classNames(classPrefix, className) }, rest),
    (mode === "multi" || mode === "simple") && React__default.createElement(
      React__default.Fragment,
      null,
      React__default.createElement("div", { className: classNames(`${classPrefix}-prev`, mode === "multi" ? "" : "simple-border", currentPage === 1 ? "disabled" : ""), onClick: (e) => handleSelectPage(currentPage - 1) }, prev || locale.pagination.prev),
      mode === "multi" && React__default.createElement("div", { className: `${classPrefix}-contain` }, pages.map((item, index) => {
        return React__default.createElement("div", { key: `${index}pagination`, className: classNames(`${classPrefix}-item`, {
          active: item.number === currentPage
        }), onClick: (e) => {
          item.number !== currentPage && handleSelectPage(item.number);
        } }, itemRender ? itemRender(item) : item.text);
      })),
      mode === "simple" && React__default.createElement(
        "div",
        { className: `${classPrefix}-contain` },
        React__default.createElement(
          "div",
          { className: `${classPrefix}-simple` },
          currentPage,
          "/",
          pageCount
        )
      ),
      React__default.createElement("div", { className: classNames(`${classPrefix}-next`, currentPage >= pageCount ? "disabled" : ""), onClick: (e) => handleSelectPage(currentPage + 1) }, next || locale.pagination.next)
    ),
    mode === "lite" && React__default.createElement(
      "div",
      { className: `${classPrefix}-lite` },
      React__default.createElement("div", { className: `${classPrefix}-lite-active` }, 2),
      React__default.createElement("div", { className: `${classPrefix}-lite-default` }, 8)
    )
  );
};
Pagination.displayName = "NutPagination";
export {
  Pagination as default
};