@antmjs/vantui
Version:
一套适用于Taro3及React的vantui组件库
178 lines (177 loc) • 8.26 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
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 { View } from '@tarojs/components';
import React, { useCallback, useEffect, useState } from 'react';
import { get } from '../default-props';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var clsPrefix = 'van-pagination';
export function Pagination(props) {
var _useState = useState(get().Pagination),
_useState2 = _slicedToArray(_useState, 1),
d = _useState2[0];
var _d$props = _objectSpread(_objectSpread({}, d), props),
modelValue = _d$props.modelValue,
_d$props$mode = _d$props.mode,
mode = _d$props$mode === void 0 ? 'multi' : _d$props$mode,
_d$props$prevText = _d$props.prevText,
prevText = _d$props$prevText === void 0 ? '上一页' : _d$props$prevText,
_d$props$nextText = _d$props.nextText,
nextText = _d$props$nextText === void 0 ? '下一页' : _d$props$nextText,
_d$props$pageCount = _d$props.pageCount,
pageCount = _d$props$pageCount === void 0 ? '' : _d$props$pageCount,
_d$props$totalItems = _d$props.totalItems,
totalItems = _d$props$totalItems === void 0 ? '0' : _d$props$totalItems,
_d$props$itemsPerPage = _d$props.itemsPerPage,
itemsPerPage = _d$props$itemsPerPage === void 0 ? '10' : _d$props$itemsPerPage,
_d$props$showPageSize = _d$props.showPageSize,
showPageSize = _d$props$showPageSize === void 0 ? '5' : _d$props$showPageSize,
onChange = _d$props.onChange,
updatecurrent = _d$props.updatecurrent,
_d$props$forceEllipse = _d$props.forceEllipses,
forceEllipses = _d$props$forceEllipse === void 0 ? false : _d$props$forceEllipse,
pageNodeRender = _d$props.pageNodeRender,
_d$props$defaultValue = _d$props.defaultValue,
defaultValue = _d$props$defaultValue === void 0 ? 1 : _d$props$defaultValue,
_d$props$className = _d$props.className,
className = _d$props$className === void 0 ? function (item) {
return item.text;
} : _d$props$className,
rest = _objectWithoutProperties(_d$props, _excluded);
var _useState3 = useState(1),
_useState4 = _slicedToArray(_useState3, 2),
currentPage = _useState4[0],
setCurrent = _useState4[1];
var _useState5 = useState([]),
_useState6 = _slicedToArray(_useState5, 2),
pages = _useState6[0],
setPages = _useState6[1];
var _useState7 = useState(Number(pageCount)),
_useState8 = _slicedToArray(_useState7, 2),
countRef = _useState8[0],
setCountRef = _useState8[1];
// 计算页面的数量
// eslint-disable-next-line react-hooks/exhaustive-deps
var computedCountRef = useCallback(function () {
var num = Number(pageCount) || Math.ceil(Number(totalItems) / Number(itemsPerPage));
return num + '' === 'NaN' ? 1 : Math.max(1, num);
}, [itemsPerPage, pageCount, totalItems]);
// 生成pages数组，用来遍历
// eslint-disable-next-line react-hooks/exhaustive-deps
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));
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props, computedCountRef]);
if ('modelValue' in props) {
var current = props.modelValue ? Number(props.modelValue) : 1;
if (current !== currentPage) {
setCurrent(current);
setPages(computedPages(Number(current)));
}
}
return /*#__PURE__*/_jsxs(View, _objectSpread(_objectSpread({
className: "".concat(clsPrefix, " ").concat(className)
}, rest), {}, {
children: [/*#__PURE__*/_jsx(View, {
className: "".concat(clsPrefix, "-prev ").concat(mode == 'multi' ? '' : 'simple-border', " ").concat(currentPage == 1 ? 'disabled' : ''),
onClick: function onClick() {
return selectPage(Number(currentPage) - 1, true);
},
children: prevText
}), mode == 'multi' ? /*#__PURE__*/_jsx(View, {
className: "".concat(clsPrefix, "-contain"),
children: pages.map(function (item, index) {
return /*#__PURE__*/_jsx(View, {
className: "".concat(clsPrefix, "-item ").concat(item.active ? 'active' : ''),
onClick: function onClick() {
return !item.active ? selectPage(item.number, true) : '';
},
children: pageNodeRender ? pageNodeRender(item) : item.text
}, "".concat(index, "pagination"));
})
}) : '', mode == 'simple' ? /*#__PURE__*/_jsx(View, {
className: "".concat(clsPrefix, "-contain"),
children: /*#__PURE__*/_jsxs(View, {
className: "".concat(clsPrefix, "-simple"),
children: [currentPage, "/", countRef]
})
}) : '', /*#__PURE__*/_jsx(View, {
className: "".concat(clsPrefix, "-next ").concat(Number(currentPage) >= countRef ? 'disabled' : ''),
onClick: function onClick() {
return selectPage(Number(currentPage) + 1, true);
},
children: nextText
})]
}));
}
export default Pagination;