gui-one-nutui-react-taro/dist/esm/pagination.taro-62bbd23f.js

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

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
var _excluded = ["modelValue", "mode", "prevText", "nextText", "pageCount", "totalItems", "itemsPerPage", "showPageSize", "onChange", "updatecurrent", "forceEllipses", "pageNodeRender", "defaultValue", "className"];
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
import React__default, { useState, useEffect } from 'react';
import { u as useConfig } from './configprovider.taro-6c7b3056.js';
import { c as cn } from './bem-893ad28d.js';
var defaultProps = {
  defaultValue: 1,
  mode: 'multi',
  prevText: '',
  nextText: '',
  pageCount: '',
  totalItems: '0',
  itemsPerPage: '10',
  showPageSize: '5',
  forceEllipses: false,
  className: '',
  pageNodeRender: function pageNodeRender(item) {
    return item.text;
  }
};
var Pagination = function Pagination(props) {
  var _useConfig = useConfig(),
    locale = _useConfig.locale;
  _objectSpread(_objectSpread({}, defaultProps), props);
  var modelValue = props.modelValue,
    mode = props.mode,
    prevText = props.prevText,
    nextText = props.nextText,
    pageCount = props.pageCount,
    totalItems = props.totalItems,
    itemsPerPage = props.itemsPerPage,
    showPageSize = props.showPageSize,
    onChange = props.onChange,
    updatecurrent = props.updatecurrent,
    forceEllipses = props.forceEllipses,
    pageNodeRender = props.pageNodeRender,
    defaultValue = props.defaultValue,
    className = props.className,
    rest = _objectWithoutProperties(props, _excluded);
  var _useState = useState(1),
    _useState2 = _slicedToArray(_useState, 2),
    currentPage = _useState2[0],
    setCurrent = _useState2[1];
  var _useState3 = useState([]),
    _useState4 = _slicedToArray(_useState3, 2),
    pages = _useState4[0],
    setPages = _useState4[1];
  var _useState5 = useState(Number(pageCount)),
    _useState6 = _slicedToArray(_useState5, 2),
    countRef = _useState6[0],
    setCountRef = _useState6[1];
  var paginationBem = cn('pagination');
  // 计算页面的数量
  var computedCountRef = function computedCountRef() {
    var num = Number(pageCount) || Math.ceil(Number(totalItems) / Number(itemsPerPage));
    return Number.isNaN(num) ? 1 : Math.max(1, num);
  };
  // 生成pages数组，用来遍历
  var computedPages = function computedPages(_currentPage, _countRef) {
    if (mode === 'simple') return [];
    var items = [];
    var pageCount = _countRef || countRef; // 总的页面数量
    var pageSize = Number(showPageSize); // 展示的页面个数
    var _current = _currentPage || Number(currentPage); // 当前页
    var startPage = 1;
    var endPage = pageCount;
    var partialShow = pageCount > pageSize;
    if (partialShow) {
      // 选中的page在展示的page中间
      startPage = Math.max(_current - Math.floor(pageSize / 2), 1);
      endPage = startPage + pageSize - 1;
      if (endPage > pageCount) {
        endPage = pageCount;
        startPage = endPage - pageSize + 1;
      }
    }
    // 遍历生成数组
    for (var i = startPage; i <= endPage; i++) {
      var page = setPage(i, i, _current === i);
      items.push(page);
    }
    // 判断是否有折叠
    if (partialShow && pageSize > 0 && forceEllipses) {
      if (startPage > 1) {
        var prevPage = setPage(startPage - 1, '...');
        items.unshift(prevPage);
      }
      if (endPage < pageCount) {
        var nextPage = setPage(endPage + 1, '...');
        items.push(nextPage);
      }
    }
    return items;
  };
  // 点击选择page
  var selectPage = function selectPage(curPage, isSelect) {
    if (curPage > countRef || curPage < 1) return;
    // 是否传入modelValue
    if (!('modelValue' in props)) {
      setCurrent(Number(curPage));
      if (curPage !== currentPage) {
        setPages(computedPages(curPage));
      }
    }
    if (curPage !== currentPage) {
      updatecurrent && updatecurrent(curPage);
    }
    if (isSelect) onChange && onChange(curPage);
  };
  // set page 对象
  var setPage = function setPage(number, text, active) {
    return {
      number: number,
      text: text,
      active: active
    };
  };
  useEffect(function () {
    // 初始化 判断是否传入值 计算 当前页，总页数，生成子节点
    var currentValue = props.defaultValue || 1;
    if ('modelValue' in props) {
      currentValue = Number(props.modelValue);
    }
    var pageCount = computedCountRef();
    setCountRef(pageCount);
    setPages(computedPages(currentValue, pageCount));
  }, []);
  if ('modelValue' in props) {
    var current = props.modelValue ? Number(props.modelValue) : 1;
    if (current !== currentPage) {
      setCurrent(current);
      setPages(computedPages(Number(current)));
    }
  }
  return React__default.createElement("div", _objectSpread({
    className: "".concat(paginationBem(''), " ").concat(className)
  }, rest), React__default.createElement("div", {
    className: "".concat(paginationBem('prev'), "  ").concat(mode === 'multi' ? '' : 'simple-border', " ").concat(currentPage === 1 ? 'disabled' : ''),
    onClick: function onClick(e) {
      return selectPage(Number(currentPage) - 1, true);
    }
  }, prevText || locale.pagination.prev), mode === 'multi' ? React__default.createElement("div", {
    className: "".concat(paginationBem('contain'))
  }, pages.map(function (item, index) {
    return React__default.createElement("div", {
      key: "".concat(index, "pagination"),
      className: "".concat(paginationBem('item'), " ").concat(item.active ? 'active' : ''),
      onClick: function onClick(e) {
        return !item.active ? selectPage(item.number, true) : '';
      }
    }, pageNodeRender ? pageNodeRender(item) : item.text);
  })) : '', mode === 'simple' ? React__default.createElement("div", {
    className: "".concat(paginationBem('contain'))
  }, React__default.createElement("div", {
    className: "".concat(paginationBem('simple'))
  }, currentPage, "/", countRef)) : '', React__default.createElement("div", {
    className: "".concat(paginationBem('next'), "  ").concat(Number(currentPage) >= countRef ? 'disabled' : ''),
    onClick: function onClick(e) {
      return selectPage(Number(currentPage) + 1, true);
    }
  }, nextText || locale.pagination.next));
};
Pagination.defaultProps = defaultProps;
Pagination.displayName = 'NutPagination';
export { Pagination as P };