@nutui/nutui-react/dist/cjs/packages/pagination/pagination.js

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

"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "Pagination", {
    enumerable: true,
    get: function() {
        return Pagination;
    }
});
var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
var _define_property = require("@swc/helpers/_/_define_property");
var _object_spread = require("@swc/helpers/_/_object_spread");
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
var _react = /*#__PURE__*/ _interop_require_default._(require("react"));
var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
var _configprovider = require("../configprovider");
var _usepropsvalue = require("../../hooks/use-props-value");
var _typings = require("../../utils/typings");
var _usepagination = require("../../hooks/use-pagination");
var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
    defaultValue: 1,
    mode: 'multi',
    prev: null,
    next: null,
    total: 50,
    pageSize: 10,
    itemSize: 5,
    ellipse: false
});
var Pagination = function Pagination(props) {
    var locale = (0, _configprovider.useConfig)().locale;
    var _ref = (0, _object_spread._)({}, defaultProps, props), value = _ref.value, mode = _ref.mode, prev = _ref.prev, next = _ref.next, total = _ref.total, pageSize = _ref.pageSize, itemSize = _ref.itemSize, onChange = _ref.onChange, ellipse = _ref.ellipse, itemRender = _ref.itemRender, defaultValue = _ref.defaultValue, className = _ref.className, style = _ref.style, rest = (0, _object_without_properties._)(_ref, [
        "value",
        "mode",
        "prev",
        "next",
        "total",
        "pageSize",
        "itemSize",
        "onChange",
        "ellipse",
        "itemRender",
        "defaultValue",
        "className",
        "style"
    ]);
    var classPrefix = 'nut-pagination';
    var _usePropsValue = (0, _sliced_to_array._)((0, _usepropsvalue.usePropsValue)({
        value: value,
        defaultValue: defaultValue,
        finalValue: 1,
        onChange: onChange
    }), 2), current = _usePropsValue[0], setCurrent = _usePropsValue[1];
    var _usePagination = (0, _sliced_to_array._)((0, _usepagination.usePagination)({
        total: total,
        ellipse: ellipse,
        current: current,
        displayCount: itemSize,
        itemsPerPage: pageSize
    }), 2), pages = _usePagination[0], pageCount = _usePagination[1];
    var handleClick = function handleClick(item) {
        if (item.selected) return;
        if (item.number > pageCount || item.number < 1) return;
        setCurrent(item.number);
    };
    var prevPage = function prevPage() {
        var prev = current - 1;
        prev >= 1 && setCurrent(prev);
    };
    var nextPage = function nextPage() {
        var next = current + 1;
        next <= pageCount && setCurrent(next);
    };
    var _obj, _obj1;
    return /*#__PURE__*/ _react.default.createElement("div", (0, _object_spread._)({
        className: (0, _classnames.default)(classPrefix, className)
    }, rest), (mode === 'multi' || mode === 'simple') && /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement("div", {
        className: (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-prev"), true), (0, _define_property._)(_obj, "".concat(classPrefix, "-simple-border"), mode !== 'multi'), (0, _define_property._)(_obj, "".concat(classPrefix, "-prev-disabled"), current === 1), _obj)),
        onClick: function onClick() {
            return prevPage();
        }
    }, prev || locale.pagination.prev), mode === 'multi' && /*#__PURE__*/ _react.default.createElement("div", {
        className: "".concat(classPrefix, "-contain")
    }, pages.map(function(item, index) {
        var _obj;
        return /*#__PURE__*/ _react.default.createElement("div", {
            key: "".concat(index, "pagination"),
            className: (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-item"), true), (0, _define_property._)(_obj, "".concat(classPrefix, "-item-active"), item.selected), _obj)),
            onClick: function onClick() {
                handleClick(item);
            }
        }, itemRender ? itemRender(item, current) : item.text);
    })), mode === 'simple' && /*#__PURE__*/ _react.default.createElement("div", {
        className: "".concat(classPrefix, "-contain")
    }, /*#__PURE__*/ _react.default.createElement("div", {
        className: "".concat(classPrefix, "-simple")
    }, current, "/", pageCount)), /*#__PURE__*/ _react.default.createElement("div", {
        className: (0, _classnames.default)((_obj1 = {}, (0, _define_property._)(_obj1, "".concat(classPrefix, "-next"), true), (0, _define_property._)(_obj1, "".concat(classPrefix, "-next-disabled"), current >= pageCount), _obj1)),
        onClick: function onClick() {
            return nextPage();
        }
    }, next || locale.pagination.next)), mode === 'lite' && /*#__PURE__*/ _react.default.createElement("div", {
        className: "".concat(classPrefix, "-lite")
    }, /*#__PURE__*/ _react.default.createElement("div", {
        className: "".concat(classPrefix, "-lite-active")
    }, current), /*#__PURE__*/ _react.default.createElement("div", {
        className: "".concat(classPrefix, "-lite-spliterator")
    }, "/"), /*#__PURE__*/ _react.default.createElement("div", {
        className: "".concat(classPrefix, "-lite-default")
    }, pageCount)));
};
Pagination.displayName = 'NutPagination';