tdesign-react/lib/pagination/hooks/usePageNumber.js

TDesign Component for React

/**
 * tdesign v1.15.1
 * (c) 2025 tdesign
 * @license MIT
 */

import { _ as _defineProperty } from '../../_chunks/dep-cb0a3966.js';
import { _ as _slicedToArray } from '../../_chunks/dep-48805ab8.js';
import React, { useState, useMemo, useEffect } from 'react';
import classNames from 'classnames';
import { EllipsisIcon, ChevronLeftDoubleIcon, ChevronRightDoubleIcon } from 'tdesign-icons-react';
import useConfig from '../../hooks/useConfig.js';
import useGlobalIcon from '../../hooks/useGlobalIcon.js';
import '../../_chunks/dep-eca3a3de.js';
import '../../_chunks/dep-026a4c6b.js';
import '../../config-provider/ConfigContext.js';
import 'lodash-es';
import '../../_chunks/dep-f97636ce.js';
import '../../_chunks/dep-9dbbf468.js';
import 'dayjs';

function usePageNumber(props) {
  var _useConfig = useConfig(),
    classPrefix = _useConfig.classPrefix;
  var _useGlobalIcon = useGlobalIcon({
      EllipsisIcon: EllipsisIcon,
      ChevronLeftDoubleIcon: ChevronLeftDoubleIcon,
      ChevronRightDoubleIcon: ChevronRightDoubleIcon
    }),
    EllipsisIcon$1 = _useGlobalIcon.EllipsisIcon,
    ChevronLeftDoubleIcon$1 = _useGlobalIcon.ChevronLeftDoubleIcon,
    ChevronRightDoubleIcon$1 = _useGlobalIcon.ChevronRightDoubleIcon;
  var name = "".concat(classPrefix, "-pagination");
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    hoverPreMore = _useState2[0],
    toggleHoverPreMore = _useState2[1];
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    hoverNextMore = _useState4[0],
    toggleHoverNextMore = _useState4[1];
  var showPageNumber = props.showPageNumber,
    maxPageBtn = props.maxPageBtn,
    disabled = props.disabled,
    current = props.current,
    pageCount = props.pageCount,
    foldedMaxPageBtn = props.foldedMaxPageBtn,
    changeCurrent = props.changeCurrent,
    pageEllipsisMode = props.pageEllipsisMode;
  var isMidEllipsis = pageEllipsisMode === "mid";
  var pivot = Math.ceil((foldedMaxPageBtn - 1) / 2);
  var pageList = useMemo(function () {
    var isPrevMoreShow = 2 + pivot < current;
    var isNextMoreShow = pageCount - 1 - pivot > current;
    var array = [];
    var start;
    var end;
    if (pageCount > maxPageBtn) {
      if (isPrevMoreShow && isNextMoreShow) {
        start = current - pivot;
        end = current + pivot;
      } else {
        var foldedStart = isMidEllipsis ? 2 : 1;
        var foldedEnd = isMidEllipsis ? pageCount - 1 : pageCount;
        start = isPrevMoreShow ? pageCount - foldedMaxPageBtn + 1 : foldedStart;
        end = isPrevMoreShow ? foldedEnd : foldedMaxPageBtn;
      }
    } else {
      start = 1;
      end = pageCount;
    }
    for (var i = start; i <= end; i++) {
      array.push(i);
    }
    return array;
  }, [current, pageCount, foldedMaxPageBtn, isMidEllipsis, maxPageBtn, pivot]);
  var isFolded = pageCount > maxPageBtn;
  var showPrevMore = 2 + pivot < current;
  var showNextMore = pageCount - 1 - pivot > current;
  useEffect(function () {
    if (!showPrevMore) toggleHoverPreMore(false);
    if (!showNextMore) toggleHoverNextMore(false);
  }, [showNextMore, showPrevMore]);
  var pageNumberControl = showPageNumber && /* @__PURE__ */React.createElement("ul", {
    className: "".concat(name, "__pager")
  }, isFolded && isMidEllipsis && /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("li", {
    key: 1,
    className: classNames("".concat(name, "__number"), _defineProperty(_defineProperty({}, "".concat(classPrefix, "-is-disabled"), disabled), "".concat(classPrefix, "-is-current"), current === 1)),
    onClick: function onClick() {
      return changeCurrent(1);
    }
  }, "1"), showPrevMore && /* @__PURE__ */React.createElement("li", {
    className: classNames("".concat(name, "__number"), "".concat(name, "__number--more"), _defineProperty({}, "".concat(classPrefix, "-is-disabled"), disabled)),
    onMouseEnter: function onMouseEnter() {
      return toggleHoverPreMore(true);
    },
    onMouseLeave: function onMouseLeave() {
      return toggleHoverPreMore(false);
    },
    onClick: function onClick() {
      return changeCurrent(current - foldedMaxPageBtn);
    }
  }, !hoverPreMore ? /* @__PURE__ */React.createElement(EllipsisIcon$1, null) : /* @__PURE__ */React.createElement(ChevronLeftDoubleIcon$1, null))), pageList.map(function (item) {
    return /* @__PURE__ */React.createElement("li", {
      key: item,
      className: classNames("".concat(name, "__number"), _defineProperty(_defineProperty({}, "".concat(classPrefix, "-is-disabled"), disabled), "".concat(classPrefix, "-is-current"), current === item)),
      onClick: function onClick() {
        return changeCurrent(item);
      }
    }, item);
  }), isFolded && isMidEllipsis && /* @__PURE__ */React.createElement(React.Fragment, null, showNextMore && /* @__PURE__ */React.createElement("li", {
    className: classNames("".concat(name, "__number"), "".concat(name, "__number--more"), _defineProperty({}, "".concat(classPrefix, "-is-disabled"), disabled)),
    onMouseEnter: function onMouseEnter() {
      return toggleHoverNextMore(true);
    },
    onMouseLeave: function onMouseLeave() {
      return toggleHoverNextMore(false);
    },
    onClick: function onClick() {
      return changeCurrent(current + foldedMaxPageBtn);
    }
  }, !hoverNextMore ? /* @__PURE__ */React.createElement(EllipsisIcon$1, null) : /* @__PURE__ */React.createElement(ChevronRightDoubleIcon$1, null)), /* @__PURE__ */React.createElement("li", {
    key: pageCount,
    className: classNames("".concat(name, "__number"), _defineProperty(_defineProperty({}, "".concat(classPrefix, "-is-disabled"), disabled), "".concat(classPrefix, "-is-current"), current === pageCount)),
    onClick: function onClick() {
      return changeCurrent(pageCount);
    }
  }, pageCount)));
  return {
    pageNumberControl: pageNumberControl
  };
}

export { usePageNumber as default };
//# sourceMappingURL=usePageNumber.js.map