@sms-frontend/components
Version:
SMS Design React UI Library.
112 lines (111 loc) • 4.7 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import React from 'react';
import cs from '../_util/classNames';
import IconLeft from '../../icon/react-icon/IconLeft';
import IconRight from '../../icon/react-icon/IconRight';
import IconMore from '../../icon/react-icon/IconMore';
export var StepType;
(function (StepType) {
StepType[StepType["previous"] = 0] = "previous";
StepType[StepType["next"] = 1] = "next";
})(StepType || (StepType = {}));
/**
* default pager item
*/
function Pager(props) {
var onClick = function (e) {
var pageNum = props.pageNum, onClick = props.onClick, disabled = props.disabled;
if (e.currentTarget.dataset.active === 'true') {
return;
}
e.stopPropagation();
if (!disabled) {
onClick && onClick(pageNum);
}
};
var pageNum = props.pageNum, current = props.current, rootPrefixCls = props.rootPrefixCls, pageItemStyle = props.pageItemStyle, activePageItemStyle = props.activePageItemStyle, itemRender = props.itemRender;
var prefixCls = rootPrefixCls + "-item";
var isActive = current === pageNum;
var classnames = cs(prefixCls, isActive ? prefixCls + "-active" : '');
var style = pageItemStyle;
if (isActive) {
style = __assign(__assign({}, style), activePageItemStyle);
}
return (React.createElement("li", { style: style, className: classnames, "data-active": isActive, onClick: onClick }, itemRender ? itemRender(pageNum, 'page', pageNum) : pageNum));
}
function getIcon(name, icons) {
switch (name) {
case 'prev':
return icons && icons.prev ? icons.prev : React.createElement(IconLeft, null);
case 'next':
return icons && icons.next ? icons.next : React.createElement(IconRight, null);
case 'more':
return icons && icons.more ? icons.more : React.createElement(IconMore, null);
default:
return null;
}
}
/**
* preJump or nextJump button
* @param props
*/
export var JumpPager = function (props) {
var rootPrefixCls = props.rootPrefixCls, current = props.current, allPages = props.allPages, jumpPage = props.jumpPage, icons = props.icons, disabled = props.disabled, pageItemStyle = props.pageItemStyle, itemRender = props.itemRender;
var minCurrent = allPages > 0 ? 1 : 0;
var nextPage = Math.min(allPages, Math.max(minCurrent, current + jumpPage));
var prefix = rootPrefixCls + "-item " + rootPrefixCls + "-item-jumper";
var cls = cs(prefix);
var onClick = function () {
!disabled && props.onClick && props.onClick(nextPage);
};
var originElement = getIcon('more', icons);
return (React.createElement("li", { style: pageItemStyle, className: cls, onClick: onClick }, itemRender ? itemRender(undefined, 'more', originElement) : originElement));
};
/**
* previous or next button
* @param props
*/
export var StepPager = function (props) {
var _a;
var rootPrefixCls = props.rootPrefixCls, current = props.current, allPages = props.allPages, type = props.type, icons = props.icons, disabled = props.disabled, pageItemStyle = props.pageItemStyle, itemRender = props.itemRender;
var prefixCls = rootPrefixCls + "-item";
var StepIcon = type === StepType.previous ? getIcon('prev', icons) : getIcon('next', icons);
var _disabled = false;
if (allPages === 0) {
// total为0
_disabled = true;
}
else if (type === StepType.previous) {
// 向前翻页
_disabled = current <= 1; // current ===0 || current===1
}
else {
// 向后翻页
_disabled = current === allPages;
}
var innerDisabled = disabled || _disabled;
var nextPage = current + (type === StepType.previous ? -1 : 1);
nextPage = Math.max(0, Math.min(allPages, nextPage));
var pageType = StepType.previous === type ? 'prev' : 'next';
var cls = cs(prefixCls, prefixCls + "-" + pageType, (_a = {},
_a[prefixCls + "-disabled"] = innerDisabled,
_a));
var onClick = function () {
if (innerDisabled) {
return;
}
props.onClick && props.onClick(nextPage);
};
return (React.createElement("li", { style: pageItemStyle, className: cls, onClick: onClick }, itemRender ? itemRender(undefined, pageType, StepIcon) : StepIcon));
};
export default Pager;