@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
105 lines (104 loc) • 5.05 kB
JavaScript
import { _ as _define_property } from "@swc/helpers/_/_define_property";
import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
import React from "react";
import classNames from "classnames";
import { useConfig } from "../configprovider";
import { usePropsValue } from "../../hooks/use-props-value";
import { ComponentDefaults } from "../../utils/typings";
import { usePagination } from "../../hooks/use-pagination";
var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
defaultValue: 1,
mode: 'multi',
prev: null,
next: null,
total: 50,
pageSize: 10,
itemSize: 5,
ellipse: false
});
export var Pagination = function(props) {
var locale = useConfig().locale;
var _ref = _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 = _object_without_properties(_ref, [
"value",
"mode",
"prev",
"next",
"total",
"pageSize",
"itemSize",
"onChange",
"ellipse",
"itemRender",
"defaultValue",
"className",
"style"
]);
var classPrefix = 'nut-pagination';
var _usePropsValue = _sliced_to_array(usePropsValue({
value: value,
defaultValue: defaultValue,
finalValue: 1,
onChange: onChange
}), 2), current = _usePropsValue[0], setCurrent = _usePropsValue[1];
var _usePagination = _sliced_to_array(usePagination({
total: total,
ellipse: ellipse,
current: current,
displayCount: itemSize,
itemsPerPage: pageSize
}), 2), pages = _usePagination[0], pageCount = _usePagination[1];
var handleClick = function(item) {
if (item.selected) return;
if (item.number > pageCount || item.number < 1) return;
setCurrent(item.number);
};
var prevPage = function() {
var prev = current - 1;
prev >= 1 && setCurrent(prev);
};
var nextPage = function() {
var next = current + 1;
next <= pageCount && setCurrent(next);
};
var _obj, _obj1;
return /*#__PURE__*/ React.createElement("div", _object_spread({
className: classNames(classPrefix, className)
}, rest), (mode === 'multi' || mode === 'simple') && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", {
className: classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-prev"), true), _define_property(_obj, "".concat(classPrefix, "-simple-border"), mode !== 'multi'), _define_property(_obj, "".concat(classPrefix, "-prev-disabled"), current === 1), _obj)),
onClick: function() {
return prevPage();
}
}, prev || locale.pagination.prev), mode === 'multi' && /*#__PURE__*/ React.createElement("div", {
className: "".concat(classPrefix, "-contain")
}, pages.map(function(item, index) {
var _obj;
return /*#__PURE__*/ React.createElement("div", {
key: "".concat(index, "pagination"),
className: classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-item"), true), _define_property(_obj, "".concat(classPrefix, "-item-active"), item.selected), _obj)),
onClick: function() {
handleClick(item);
}
}, itemRender ? itemRender(item, current) : item.text);
})), mode === 'simple' && /*#__PURE__*/ React.createElement("div", {
className: "".concat(classPrefix, "-contain")
}, /*#__PURE__*/ React.createElement("div", {
className: "".concat(classPrefix, "-simple")
}, current, "/", pageCount)), /*#__PURE__*/ React.createElement("div", {
className: classNames((_obj1 = {}, _define_property(_obj1, "".concat(classPrefix, "-next"), true), _define_property(_obj1, "".concat(classPrefix, "-next-disabled"), current >= pageCount), _obj1)),
onClick: function() {
return nextPage();
}
}, next || locale.pagination.next)), mode === 'lite' && /*#__PURE__*/ React.createElement("div", {
className: "".concat(classPrefix, "-lite")
}, /*#__PURE__*/ React.createElement("div", {
className: "".concat(classPrefix, "-lite-active")
}, current), /*#__PURE__*/ React.createElement("div", {
className: "".concat(classPrefix, "-lite-spliterator")
}, "/"), /*#__PURE__*/ React.createElement("div", {
className: "".concat(classPrefix, "-lite-default")
}, pageCount)));
};
Pagination.displayName = 'NutPagination';