acud/es/pagination/rc-pagination/Pagination.js

acg react 组件库

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _typeof from "@babel/runtime/helpers/esm/typeof";
/**
 * @file  pagination/rc-pagination/Pagination
 * @author chenyaqiu
 */
var __rest = this && this.__rest || function (s, e) {
  var t = {};
  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  }
  return t;
};
import React, { cloneElement, isValidElement, useState, useMemo, useCallback, useEffect } from 'react';
import classNames from 'classnames';
import Pager from './Pager';
import Options from './Options';
import { KEYCODE } from './KeyCode';
import Goto from './Goto';
;
;
var noop = function noop() {};
var isInteger = function isInteger(value) {
  return typeof value === 'number' && isFinite(value) && Math.floor(value) === value;
};
var defaultItemRender = function defaultItemRender(_page, _type, element) {
  return element;
};
var calculatePage = function calculatePage(p, state, props) {
  var pageSize = typeof p === 'undefined' ? state.pageSize : p;
  return props.total ? Math.floor((props.total - 1) / pageSize) + 1 : 1;
};
var dataOrAriaAttributeProps = function dataOrAriaAttributeProps(props) {
  return Object.keys(props).reduce(function (prev, key) {
    if (key.substr(0, 5) === 'data-' || key.substr(0, 5) === 'aria-' || key === 'role') {
      prev[key] = props[key];
    }
    return prev;
  }, {});
};
var Pagination = function Pagination(_a) {
  var props = __rest(_a, []);
  var _props$defaultCurrent = props.defaultCurrent,
    defaultCurrent = _props$defaultCurrent === void 0 ? 1 : _props$defaultCurrent,
    _props$total = props.total,
    total = _props$total === void 0 ? 0 : _props$total,
    _props$defaultPageSiz = props.defaultPageSize,
    defaultPageSize = _props$defaultPageSiz === void 0 ? 10 : _props$defaultPageSiz,
    _props$onChange = props.onChange,
    onChange = _props$onChange === void 0 ? noop : _props$onChange,
    _props$className = props.className,
    className = _props$className === void 0 ? '' : _props$className,
    _props$selectPrefixCl = props.selectPrefixCls,
    selectPrefixCls = _props$selectPrefixCl === void 0 ? 'rc-select' : _props$selectPrefixCl,
    _props$prefixCls = props.prefixCls,
    prefixCls = _props$prefixCls === void 0 ? 'rc-pagination' : _props$prefixCls,
    _props$selectComponen = props.selectComponentClass,
    selectComponentClass = _props$selectComponen === void 0 ? null : _props$selectComponen,
    _props$hideOnSinglePa = props.hideOnSinglePage,
    hideOnSinglePage = _props$hideOnSinglePa === void 0 ? false : _props$hideOnSinglePa,
    _props$showPrevNextJu = props.showPrevNextJumpers,
    showPrevNextJumpers = _props$showPrevNextJu === void 0 ? true : _props$showPrevNextJu,
    _props$showQuickJumpe = props.showQuickJumper,
    showQuickJumper = _props$showQuickJumpe === void 0 ? false : _props$showQuickJumpe,
    _props$showLessItems = props.showLessItems,
    showLessItems = _props$showLessItems === void 0 ? false : _props$showLessItems,
    _props$showTitle = props.showTitle,
    showTitle = _props$showTitle === void 0 ? true : _props$showTitle,
    _props$onShowSizeChan = props.onShowSizeChange,
    onShowSizeChange = _props$onShowSizeChan === void 0 ? noop : _props$onShowSizeChan,
    locale = props.locale,
    _props$style = props.style,
    style = _props$style === void 0 ? {} : _props$style,
    _props$itemRender = props.itemRender,
    itemRender = _props$itemRender === void 0 ? defaultItemRender : _props$itemRender,
    _props$totalBoundaryS = props.totalBoundaryShowSizeChanger,
    totalBoundaryShowSizeChanger = _props$totalBoundaryS === void 0 ? 50 : _props$totalBoundaryS,
    nextIcon = props.nextIcon,
    prevIcon = props.prevIcon,
    showSizeChanger = props.showSizeChanger,
    disabled = props.disabled,
    simple = props.simple,
    jumpPrevIcon = props.jumpPrevIcon,
    jumpNextIcon = props.jumpNextIcon,
    showTotal = props.showTotal,
    pageSizeOptions = props.pageSizeOptions,
    Option = props.Option;
  var pagerList = [];
  var jumpPrevRender = null;
  var jumpNextRender = null;
  var firstPager = null;
  var lastPager = null;
  var hasCurrent = 'current' in props;
  var hasPageSize = 'pageSize' in props;
  var isReadOnly = _typeof(simple) === 'object' ? simple.readOnly : !simple;
  var _useState = useState(defaultCurrent),
    _useState2 = _slicedToArray(_useState, 2),
    current = _useState2[0],
    setCurrent = _useState2[1];
  var _useState3 = useState(defaultPageSize),
    _useState4 = _slicedToArray(_useState3, 2),
    pageSize = _useState4[0],
    setPageSize = _useState4[1];
  var _useState5 = useState(current),
    _useState6 = _slicedToArray(_useState5, 2),
    currentInputValue = _useState6[0],
    setCurrentInputValue = _useState6[1];
  var _useState7 = useState(),
    _useState8 = _slicedToArray(_useState7, 2),
    paginationNode = _useState8[0],
    setPaginationNode = _useState8[1];
  var goButton = showQuickJumper && typeof showQuickJumper !== 'boolean' && showQuickJumper.goButton;
  var pageBufferSize = showLessItems ? 1 : 2;
  var curState = useMemo(function () {
    return {
      current: current,
      currentInputValue: currentInputValue,
      pageSize: pageSize
    };
  }, [current, currentInputValue, pageSize]);
  var allPages = useMemo(function () {
    return calculatePage(undefined, curState, props);
  }, [props, curState]);
  var prevPage = current - 1 > 0 ? current - 1 : 0;
  var nextPage = current + 1 < allPages ? current + 1 : allPages;
  var hasOnChange = useMemo(function () {
    return onChange !== noop;
  }, [onChange]);
  useEffect(function () {
    if (hasCurrent) {
      var cur = props.current;
      setCurrent(cur);
      setCurrentInputValue(cur);
    }
  }, [hasCurrent, setCurrentInputValue, setCurrent, props === null || props === void 0 ? void 0 : props.current]);
  useEffect(function () {
    if (hasPageSize) {
      setPageSize(props.pageSize);
    }
  }, [hasPageSize, props.pageSize]);
  useEffect(function () {
    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.');
    }
  }, [hasCurrent, hasOnChange]);
  useEffect(function () {
    if (paginationNode) {
      var lastCurrentNode = paginationNode.querySelector(".".concat(prefixCls, "-item-").concat(current));
      if (lastCurrentNode && document.activeElement === lastCurrentNode) {
        lastCurrentNode.blur();
      }
    }
  }, [current, paginationNode, prefixCls]);
  var getJumpPrevPage = useCallback(function () {
    return Math.max(1, current - (showLessItems ? 3 : 5));
  }, [current, showLessItems]);
  var getJumpNextPage = useCallback(function () {
    return Math.min(calculatePage(undefined, curState, props), current + (showLessItems ? 3 : 5));
  }, [showLessItems, current, curState, props]);
  /**
   * computed icon node that need to be rendered.
   * @param {React.ReactNode | React.ComponentType<PaginationProps>} icon received icon.
   * @returns {React.ReactNode}
   */
  var getItemIcon = useCallback(function (icon, label) {
    var iconNode = icon || /*#__PURE__*/React.createElement("button", {
      type: "button",
      "aria-label": label,
      className: "".concat(prefixCls, "-item-link")
    });
    if (typeof icon === 'function') {
      iconNode = /*#__PURE__*/React.createElement(icon, _extends({}, props));
    }
    return iconNode;
  }, [prefixCls, props]);
  var getValidValue = useCallback(function (e) {
    var inputValue = e.target.value;
    var value;
    if (inputValue === '') {
      value = inputValue;
    } else if (isNaN(Number(inputValue))) {
      value = currentInputValue;
    } else if (inputValue >= allPages) {
      value = allPages;
    } else {
      value = Number(inputValue);
    }
    return value;
  }, [currentInputValue, allPages]);
  var savePaginationNode = useCallback(function (node) {
    return setPaginationNode(node);
  }, []);
  var isValid = useCallback(function (page) {
    return isInteger(page) && page !== current;
  }, [current]);
  var shouldDisplayQuickJumper = useMemo(function () {
    if (total <= pageSize) {
      return false;
    }
    return showQuickJumper;
  }, [total, pageSize, showQuickJumper]);
  var handleChange = useCallback(function (p) {
    var page = p;
    if (isValid(page) && !disabled) {
      var currentPage = calculatePage(undefined, curState, props);
      if (page > currentPage) {
        page = currentPage;
      } else if (page < 1) {
        page = 1;
      }
      if (!hasCurrent) {
        setCurrent(page);
        setCurrentInputValue(page);
      }
      onChange(page, pageSize);
    }
  }, [disabled, hasCurrent, curState, props, setCurrent, setCurrentInputValue, onChange, isValid, pageSize]);
  var handleKeyDown = useCallback(function (e) {
    if (e.keyCode === [KEYCODE.ARROW_UP, KEYCODE.ARROW_DOWN].includes(e.keyCode)) {
      e.preventDefault();
    }
  }, []);
  var handleKeyUp = useCallback(function (e) {
    var value = getValidValue(e);
    if (value !== currentInputValue) {
      setCurrentInputValue(value);
    }
    if (e.keyCode === KEYCODE.ENTER) {
      handleChange(value);
    } else if (e.keyCode === KEYCODE.ARROW_UP) {
      handleChange(value - 1);
    } else if (e.keyCode === KEYCODE.ARROW_DOWN) {
      handleChange(value + 1);
    }
  }, [currentInputValue, getValidValue, handleChange]);
  var handleBlur = useCallback(function () {
    if (!currentInputValue) {
      var first = 1;
      setCurrentInputValue(first);
      handleChange(first);
    } else {
      handleChange(currentInputValue);
    }
  }, [currentInputValue, handleChange]);
  var changePageSize = useCallback(function (size) {
    var newCurrent = calculatePage(size, curState, props);
    var cur = current > newCurrent ? newCurrent : current;
    if (newCurrent === 0) {
      cur = current;
    }
    if (typeof size === 'number') {
      if (!hasPageSize) {
        setPageSize(size);
      }
      if (!hasCurrent) {
        setCurrentInputValue(cur);
        setCurrent(cur);
      }
    }
    onShowSizeChange(cur, size);
    if ('onChange' in props && onChange) {
      onChange(cur, size);
    }
  }, [onShowSizeChange, props, hasPageSize, hasCurrent, curState, onChange, current]);
  var hasPrev = useMemo(function () {
    return current > 1;
  }, [current]);
  var hasNext = useMemo(function () {
    return current < calculatePage(undefined, curState, props);
  }, [current, props, curState]);
  var prev = useCallback(function () {
    if (hasPrev) {
      handleChange(current - 1);
    }
  }, [handleChange, current, hasPrev]);
  var next = useCallback(function () {
    if (hasNext) {
      handleChange(current + 1);
    }
  }, [handleChange, current, hasNext]);
  var jumpPrev = useCallback(function () {
    handleChange(getJumpPrevPage());
  }, [handleChange, getJumpPrevPage]);
  var jumpNext = useCallback(function () {
    handleChange(getJumpNextPage());
  }, [getJumpNextPage, handleChange]);
  var getShowSizeChanger = useMemo(function () {
    if (typeof showSizeChanger !== 'undefined') {
      return showSizeChanger;
    }
    return total > totalBoundaryShowSizeChanger;
  }, [total, showSizeChanger, totalBoundaryShowSizeChanger]);
  var runIfEnter = useCallback(function (event, callback) {
    if (event.key === 'Enter' || event.charCode === 13) {
      for (var _len = arguments.length, restParams = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
        restParams[_key - 2] = arguments[_key];
      }
      callback.apply(void 0, restParams);
    }
  }, []);
  var runIfEnterPrev = useCallback(function (e) {
    runIfEnter(e, prev);
  }, [runIfEnter, prev]);
  var runIfEnterNext = useCallback(function (e) {
    runIfEnter(e, next);
  }, [runIfEnter, next]);
  var runIfEnterJumpPrev = useCallback(function (e) {
    runIfEnter(e, jumpPrev);
  }, [runIfEnter, jumpPrev]);
  var runIfEnterJumpNext = useCallback(function (e) {
    runIfEnter(e, jumpNext);
  }, [runIfEnter, jumpNext]);
  var handleGoTO = useCallback(function (e) {
    if (e.keyCode === KEYCODE.ENTER || e.type === 'click') {
      handleChange(currentInputValue);
    }
  }, [handleChange, currentInputValue]);
  var renderPrev = useCallback(function (prevPage) {
    var prevButton = itemRender(prevPage, 'prev', getItemIcon(prevIcon, 'prev page'));
    var curDisabled = !hasPrev || disabled;
    return /*#__PURE__*/isValidElement(prevButton) ? /*#__PURE__*/cloneElement(prevButton, {
      disabled: curDisabled
    }) : prevButton;
  }, [prevIcon, itemRender, getItemIcon, hasPrev, disabled]);
  var renderNext = useCallback(function (nextPage) {
    var nextButton = itemRender(nextPage, 'next', getItemIcon(nextIcon, 'next page'));
    var curDisabled = !hasNext || disabled;
    return /*#__PURE__*/isValidElement(nextButton) ? /*#__PURE__*/cloneElement(nextButton, {
      disabled: curDisabled
    }) : nextButton;
  }, [itemRender, nextIcon, getItemIcon, hasNext, disabled]);
  var gotoButtonRender = function gotoButtonRender() {
    if (simple && goButton) {
      return /*#__PURE__*/React.createElement("li", {
        title: showTitle ? "".concat(locale.jump_to).concat(current, "/").concat(allPages) : null,
        className: classNames("".concat(prefixCls, "-simple-pager"), _defineProperty({}, "".concat(prefixCls, "-disabled"), disabled))
      }, typeof goButton === 'boolean' ? /*#__PURE__*/React.createElement("button", {
        type: "button",
        onClick: handleGoTO,
        onKeyUp: handleGoTO
      }, locale.jump_to_confirm) : /*#__PURE__*/React.createElement("span", {
        onClick: handleGoTO,
        onKeyUp: handleGoTO
      }, goButton));
    }
    return null;
  };
  // When hideOnSinglePage is true and there is only 1 page, hide the pager
  if (hideOnSinglePage === true && total <= pageSize) {
    return null;
  }
  var renderTotalText = function renderTotalText() {
    if (showTotal) {
      return /*#__PURE__*/React.createElement("li", {
        className: "".concat(prefixCls, "-total-text")
      }, showTotal(total, [total === 0 ? 0 : (current - 1) * pageSize + 1, current * pageSize > total ? total : current * pageSize]));
    }
    return null;
  };
  // simple mode
  if (simple) {
    return /*#__PURE__*/React.createElement("ul", _extends({
      className: classNames(prefixCls, "".concat(prefixCls, "-simple"), _defineProperty({}, "".concat(prefixCls, "-disabled"), disabled), className),
      style: style,
      ref: savePaginationNode
    }, dataOrAriaAttributeProps(props)), renderTotalText(), /*#__PURE__*/React.createElement("li", {
      title: showTitle ? locale.prev_page : null,
      onClick: prev,
      tabIndex: hasPrev ? 0 : null,
      onKeyPress: runIfEnterPrev,
      className: classNames("".concat(prefixCls, "-prev"), _defineProperty({}, "".concat(prefixCls, "-disabled"), !hasPrev || disabled)),
      "aria-disabled": !hasPrev || disabled
    }, renderPrev(prevPage)), /*#__PURE__*/React.createElement("li", {
      title: showTitle ? "".concat(current, "/").concat(allPages) : null,
      className: "".concat(prefixCls, "-simple-pager"),
      "aria-disabled": disabled
    }, isReadOnly ? currentInputValue : /*#__PURE__*/React.createElement("input", {
      type: "text",
      value: currentInputValue,
      disabled: disabled,
      onKeyDown: handleKeyDown,
      onKeyUp: handleKeyUp,
      onChange: handleKeyUp,
      onBlur: handleBlur,
      size: 3
    }), /*#__PURE__*/React.createElement("span", {
      className: "".concat(prefixCls, "-slash")
    }, "/"), allPages), /*#__PURE__*/React.createElement("li", {
      title: showTitle ? locale.next_page : null,
      onClick: next,
      tabIndex: hasPrev ? 0 : null,
      onKeyPress: runIfEnterNext,
      className: classNames("".concat(prefixCls, "-next"), _defineProperty({}, "".concat(prefixCls, "-disabled"), !hasNext || disabled)),
      "aria-disabled": !hasNext || disabled
    }, renderNext(nextPage)), gotoButtonRender());
  }
  // not simple mode
  if (allPages <= 3 + pageBufferSize * 2) {
    var pagerProps = {
      locale: locale,
      rootPrefixCls: prefixCls,
      onClick: handleChange,
      onKeyPress: runIfEnter,
      showTitle: showTitle,
      itemRender: itemRender,
      disabled: disabled
    };
    if (!allPages) {
      pagerList.push(/*#__PURE__*/React.createElement(Pager, _extends({}, pagerProps, {
        key: "noPager",
        page: allPages,
        className: "".concat(prefixCls, "-disabled")
      })));
    }
    for (var i = 1; i <= allPages; i += 1) {
      var active = current === i;
      pagerList.push(/*#__PURE__*/React.createElement(Pager, _extends({}, pagerProps, {
        key: i,
        page: i,
        active: active
      })));
    }
  } else {
    var prevItemTitle = showLessItems ? locale.prev_3 : locale.prev_5;
    var nextItemTitle = showLessItems ? locale.next_3 : locale.next_5;
    if (showPrevNextJumpers) {
      jumpPrevRender = /*#__PURE__*/React.createElement("li", {
        title: showTitle ? prevItemTitle : null,
        key: "prev",
        onClick: jumpPrev,
        tabIndex: 0,
        onKeyPress: runIfEnterJumpPrev,
        className: classNames("".concat(prefixCls, "-jump-prev"), _defineProperty({}, "".concat(prefixCls, "-jump-prev-custom-icon"), !!jumpPrevIcon)),
        "aria-disabled": disabled
      }, itemRender(getJumpPrevPage(), 'jump-prev', getItemIcon(jumpPrevIcon, 'prev page')));
      jumpNextRender = /*#__PURE__*/React.createElement("li", {
        title: showTitle ? nextItemTitle : null,
        key: "next",
        tabIndex: 0,
        onClick: jumpNext,
        onKeyPress: runIfEnterJumpNext,
        className: classNames("".concat(prefixCls, "-jump-next"), _defineProperty({}, "".concat(prefixCls, "-jump-next-custom-icon"), !!jumpNextIcon)),
        "aria-disabled": disabled
      }, itemRender(getJumpNextPage(), 'jump-next', getItemIcon(jumpNextIcon, 'next page')));
    }
    lastPager = /*#__PURE__*/React.createElement(Pager, {
      locale: locale,
      last: true,
      rootPrefixCls: prefixCls,
      onClick: handleChange,
      onKeyPress: runIfEnter,
      key: allPages,
      page: allPages,
      active: false,
      showTitle: showTitle,
      itemRender: itemRender,
      disabled: disabled
    });
    firstPager = /*#__PURE__*/React.createElement(Pager, {
      locale: locale,
      rootPrefixCls: prefixCls,
      onClick: handleChange,
      onKeyPress: runIfEnter,
      key: 1,
      page: 1,
      active: false,
      showTitle: showTitle,
      itemRender: itemRender,
      disabled: disabled
    });
    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) {
      var _active = current === _i;
      pagerList.push(/*#__PURE__*/React.createElement(Pager, {
        locale: locale,
        rootPrefixCls: prefixCls,
        onClick: handleChange,
        onKeyPress: runIfEnter,
        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: "".concat(prefixCls, "-item-after-jump-prev")
      });
      pagerList.unshift(jumpPrevRender);
    }
    if (allPages - current >= pageBufferSize * 2 && current !== allPages - 2) {
      pagerList[pagerList.length - 1] = /*#__PURE__*/cloneElement(pagerList[pagerList.length - 1], {
        className: "".concat(prefixCls, "-item-before-jump-next")
      });
      pagerList.push(jumpNextRender);
    }
    if (left !== 1) {
      pagerList.unshift(firstPager);
    }
    if (right !== allPages) {
      pagerList.push(lastPager);
    }
  }
  var prevDisabled = !hasPrev || !allPages;
  var nextDisabled = !hasNext || !allPages;
  return /*#__PURE__*/React.createElement("ul", _extends({
    className: classNames(prefixCls, className, _defineProperty({}, "".concat(prefixCls, "-disabled"), disabled)),
    style: style,
    unselectable: "on",
    ref: savePaginationNode
  }, dataOrAriaAttributeProps(props)), renderTotalText(), /*#__PURE__*/React.createElement(Options, {
    disabled: disabled,
    locale: locale,
    rootPrefixCls: prefixCls,
    selectComponentClass: selectComponentClass,
    selectPrefixCls: selectPrefixCls,
    changeSize: getShowSizeChanger ? changePageSize : null,
    current: current,
    pageSize: pageSize.toString(),
    pageSizeOptions: pageSizeOptions,
    Option: Option
  }), /*#__PURE__*/React.createElement("li", {
    title: showTitle ? locale.prev_page : null,
    onClick: prev,
    tabIndex: prevDisabled ? null : 0,
    onKeyPress: runIfEnterPrev,
    className: classNames("".concat(prefixCls, "-prev"), _defineProperty({}, "".concat(prefixCls, "-disabled"), prevDisabled || disabled)),
    "aria-disabled": prevDisabled || disabled
  }, renderPrev(prevPage)), pagerList, /*#__PURE__*/React.createElement("li", {
    title: showTitle ? locale.next_page : null,
    onClick: next,
    tabIndex: nextDisabled ? null : 0,
    onKeyPress: runIfEnterNext,
    className: classNames("".concat(prefixCls, "-next"), _defineProperty({}, "".concat(prefixCls, "-disabled"), nextDisabled || disabled)),
    "aria-disabled": nextDisabled || disabled
  }, renderNext(nextPage)), /*#__PURE__*/React.createElement(Goto, {
    disabled: disabled,
    locale: locale,
    rootPrefixCls: prefixCls,
    current: current,
    quickGo: shouldDisplayQuickJumper ? handleChange : null,
    goButton: goButton
  }));
};
export default Pagination;