@antmjs/vantui
Version:
一套适用于Taro3及React的vantui组件库
189 lines (187 loc) • 10.1 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Pagination = Pagination;
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _components = require("@tarojs/components");
var _react = _interopRequireWildcard(require("react"));
var _defaultProps = require("../default-props");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["modelValue", "mode", "prevText", "nextText", "pageCount", "totalItems", "itemsPerPage", "showPageSize", "onChange", "updatecurrent", "forceEllipses", "pageNodeRender", "defaultValue", "className"];
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
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) { (0, _defineProperty2.default)(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; }
var clsPrefix = 'van-pagination';
function Pagination(props) {
var _useState = (0, _react.useState)((0, _defaultProps.get)().Pagination),
_useState2 = (0, _slicedToArray2.default)(_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 = (0, _objectWithoutProperties2.default)(_d$props, _excluded);
var _useState3 = (0, _react.useState)(1),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
currentPage = _useState4[0],
setCurrent = _useState4[1];
var _useState5 = (0, _react.useState)([]),
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
pages = _useState6[0],
setPages = _useState6[1];
var _useState7 = (0, _react.useState)(Number(pageCount)),
_useState8 = (0, _slicedToArray2.default)(_useState7, 2),
countRef = _useState8[0],
setCountRef = _useState8[1];
// 计算页面的数量
// eslint-disable-next-line react-hooks/exhaustive-deps
var computedCountRef = (0, _react.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
};
};
(0, _react.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__*/(0, _jsxRuntime.jsxs)(_components.View, _objectSpread(_objectSpread({
className: "".concat(clsPrefix, " ").concat(className)
}, rest), {}, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.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__*/(0, _jsxRuntime.jsx)(_components.View, {
className: "".concat(clsPrefix, "-contain"),
children: pages.map(function (item, index) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.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__*/(0, _jsxRuntime.jsx)(_components.View, {
className: "".concat(clsPrefix, "-contain"),
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, {
className: "".concat(clsPrefix, "-simple"),
children: [currentPage, "/", countRef]
})
}) : '', /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
className: "".concat(clsPrefix, "-next ").concat(Number(currentPage) >= countRef ? 'disabled' : ''),
onClick: function onClick() {
return selectPage(Number(currentPage) + 1, true);
},
children: nextText
})]
}));
}
var _default = Pagination;
exports.default = _default;