custom-app
Version:
ITIMS��Ʒ�鿪��ר��React���,�Dz��ý��ּ�dhcc-app���������
736 lines (629 loc) • 24 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _createClass2 = require('babel-runtime/helpers/createClass');
var _createClass3 = _interopRequireDefault(_createClass2);
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = require('babel-runtime/helpers/inherits');
var _inherits3 = _interopRequireDefault(_inherits2);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _Pager = require('./Pager');
var _Pager2 = _interopRequireDefault(_Pager);
var _Options = require('./Options');
var _Options2 = _interopRequireDefault(_Options);
var _KeyCode = require('./KeyCode');
var _KeyCode2 = _interopRequireDefault(_KeyCode);
var _zh_CN = require('./locale/zh_CN');
var _zh_CN2 = _interopRequireDefault(_zh_CN);
var _reactLifecyclesCompat = require('react-lifecycles-compat');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function noop() {}
function isInteger(value) {
return typeof value === 'number' && isFinite(value) && Math.floor(value) === value;
}
function defaultItemRender(page, type, element) {
return element;
}
function calculatePage(p, state, props) {
var pageSize = p;
if (typeof pageSize === 'undefined') {
pageSize = state.pageSize;
}
return Math.floor((props.total - 1) / pageSize) + 1;
}
var Pagination = function (_React$Component) {
(0, _inherits3['default'])(Pagination, _React$Component);
function Pagination(props) {
(0, _classCallCheck3['default'])(this, Pagination);
var _this = (0, _possibleConstructorReturn3['default'])(this, (Pagination.__proto__ || Object.getPrototypeOf(Pagination)).call(this, props));
_initialiseProps.call(_this);
var hasOnChange = props.onChange !== noop;
var hasCurrent = 'current' in props;
if (hasCurrent && !hasOnChange) {
console.warn('Warning: You provided a `current` prop to a Pagination component without an `onChange` handler. This will render a read-only component.'); // eslint-disable-line
}
var current = props.defaultCurrent;
if ('current' in props) {
current = props.current;
}
var pageSize = props.defaultPageSize;
if ('pageSize' in props) {
pageSize = props.pageSize;
}
_this.state = {
current: current,
currentInputValue: current,
pageSize: pageSize
};
return _this;
}
(0, _createClass3['default'])(Pagination, [{
key: 'componentDidUpdate',
value: function componentDidUpdate(prevProps, prevState) {
// When current page change, fix focused style of prev item
// A hacky solution of https://github.com/ant-design/ant-design/issues/8948
var prefixCls = this.props.prefixCls;
if (prevState.current !== this.state.current && this.paginationNode) {
var lastCurrentNode = this.paginationNode.querySelector('.' + prefixCls + '-item-' + prevState.current);
if (lastCurrentNode && document.activeElement === lastCurrentNode) {
lastCurrentNode.blur();
}
}
}
}, {
key: 'getValidValue',
value: function getValidValue(e) {
var inputValue = e.target.value;
var currentInputValue = this.state.currentInputValue;
var value = void 0;
if (inputValue === '') {
value = inputValue;
} else if (isNaN(Number(inputValue))) {
value = currentInputValue;
} else {
value = Number(inputValue);
}
return value;
}
}, {
key: 'render',
value: function render() {
var _props = this.props,
prefixCls = _props.prefixCls,
className = _props.className,
disabled = _props.disabled;
// When hideOnSinglePage is true and there is only 1 page, hide the pager
if (this.props.hideOnSinglePage === true && this.props.total <= this.state.pageSize) {
return null;
}
var props = this.props;
var locale = props.locale;
var allPages = calculatePage(undefined, this.state, this.props);
var pagerList = [];
var jumpPrev = null;
var jumpNext = null;
var firstPager = null;
var lastPager = null;
var gotoButton = null;
var goButton = props.showQuickJumper && props.showQuickJumper.goButton;
var pageBufferSize = props.showLessItems ? 1 : 2;
var _state = this.state,
current = _state.current,
pageSize = _state.pageSize;
var prevPage = current - 1 > 0 ? current - 1 : 0;
var nextPage = current + 1 < allPages ? current + 1 : allPages;
var dataOrAriaAttributeProps = Object.keys(props).reduce(function (prev, key) {
if (key.substr(0, 5) === 'data-' || key.substr(0, 5) === 'aria-' || key === 'role') {
prev[key] = props[key];
}
return prev;
}, {});
if (props.simple) {
if (goButton) {
if (typeof goButton === 'boolean') {
gotoButton = _react2['default'].createElement(
'button',
{
type: 'button',
onClick: this.handleGoTO,
onKeyUp: this.handleGoTO
},
locale.jump_to_confirm
);
} else {
gotoButton = _react2['default'].createElement(
'span',
{
onClick: this.handleGoTO,
onKeyUp: this.handleGoTO
},
goButton
);
}
gotoButton = _react2['default'].createElement(
'li',
{
title: props.showTitle ? '' + locale.jump_to + this.state.current + '/' + allPages : null,
className: prefixCls + '-simple-pager'
},
gotoButton
);
}
return _react2['default'].createElement(
'ul',
(0, _extends3['default'])({
className: prefixCls + ' ' + prefixCls + '-simple ' + props.className,
style: props.style,
ref: this.savePaginationNode
}, dataOrAriaAttributeProps),
_react2['default'].createElement(
'li',
{
title: props.showTitle ? locale.prev_page : null,
onClick: this.prev,
tabIndex: this.hasPrev() ? 0 : null,
onKeyPress: this.runIfEnterPrev,
className: (this.hasPrev() ? '' : prefixCls + '-disabled') + ' ' + prefixCls + '-prev',
'aria-disabled': !this.hasPrev()
},
props.itemRender(prevPage, 'prev', this.getItemIcon(props.prevIcon))
),
_react2['default'].createElement(
'li',
{
title: props.showTitle ? this.state.current + '/' + allPages : null,
className: prefixCls + '-simple-pager'
},
_react2['default'].createElement('input', {
type: 'text',
value: this.state.currentInputValue,
onKeyDown: this.handleKeyDown,
onKeyUp: this.handleKeyUp,
onChange: this.handleKeyUp,
size: '3'
}),
_react2['default'].createElement(
'span',
{ className: prefixCls + '-slash' },
'\uFF0F'
),
allPages
),
_react2['default'].createElement(
'li',
{
title: props.showTitle ? locale.next_page : null,
onClick: this.next,
tabIndex: this.hasPrev() ? 0 : null,
onKeyPress: this.runIfEnterNext,
className: (this.hasNext() ? '' : prefixCls + '-disabled') + ' ' + prefixCls + '-next',
'aria-disabled': !this.hasNext()
},
props.itemRender(nextPage, 'next', this.getItemIcon(props.nextIcon))
),
gotoButton
);
}
if (allPages <= 5 + pageBufferSize * 2) {
var pagerProps = {
locale: locale,
rootPrefixCls: prefixCls,
onClick: this.handleChange,
onKeyPress: this.runIfEnter,
showTitle: props.showTitle,
itemRender: props.itemRender
};
if (!allPages) {
pagerList.push(_react2['default'].createElement(_Pager2['default'], (0, _extends3['default'])({}, pagerProps, {
key: 'noPager',
page: allPages,
className: prefixCls + '-disabled'
})));
}
for (var i = 1; i <= allPages; i++) {
var active = this.state.current === i;
pagerList.push(_react2['default'].createElement(_Pager2['default'], (0, _extends3['default'])({}, pagerProps, {
key: i,
page: i,
active: active
})));
}
} else {
var prevItemTitle = props.showLessItems ? locale.prev_3 : locale.prev_5;
var nextItemTitle = props.showLessItems ? locale.next_3 : locale.next_5;
if (props.showPrevNextJumpers) {
var jumpPrevClassString = prefixCls + '-jump-prev';
if (props.jumpPrevIcon) {
jumpPrevClassString += ' ' + prefixCls + '-jump-prev-custom-icon';
}
jumpPrev = _react2['default'].createElement(
'li',
{
title: props.showTitle ? prevItemTitle : null,
key: 'prev',
onClick: this.jumpPrev,
tabIndex: '0',
onKeyPress: this.runIfEnterJumpPrev,
className: jumpPrevClassString
},
props.itemRender(this.getJumpPrevPage(), 'jump-prev', this.getItemIcon(props.jumpPrevIcon))
);
var jumpNextClassString = prefixCls + '-jump-next';
if (props.jumpNextIcon) {
jumpNextClassString += ' ' + prefixCls + '-jump-next-custom-icon';
}
jumpNext = _react2['default'].createElement(
'li',
{
title: props.showTitle ? nextItemTitle : null,
key: 'next',
tabIndex: '0',
onClick: this.jumpNext,
onKeyPress: this.runIfEnterJumpNext,
className: jumpNextClassString
},
props.itemRender(this.getJumpNextPage(), 'jump-next', this.getItemIcon(props.jumpNextIcon))
);
}
lastPager = _react2['default'].createElement(_Pager2['default'], {
locale: props.locale,
last: true,
rootPrefixCls: prefixCls,
onClick: this.handleChange,
onKeyPress: this.runIfEnter,
key: allPages,
page: allPages,
active: false,
showTitle: props.showTitle,
itemRender: props.itemRender
});
firstPager = _react2['default'].createElement(_Pager2['default'], {
locale: props.locale,
rootPrefixCls: prefixCls,
onClick: this.handleChange,
onKeyPress: this.runIfEnter,
key: 1,
page: 1,
active: false,
showTitle: props.showTitle,
itemRender: props.itemRender
});
var left = Math.max(1, current - pageBufferSize);
var right = Math.min(current + pageBufferSize, allPages);
if (current - 1 <= pageBufferSize) {
right = 1 + pageBufferSize * 2;
}
if (allPages - current <= pageBufferSize) {
left = allPages - pageBufferSize * 2;
}
for (var _i = left; _i <= right; _i++) {
var _active = current === _i;
pagerList.push(_react2['default'].createElement(_Pager2['default'], {
locale: props.locale,
rootPrefixCls: prefixCls,
onClick: this.handleChange,
onKeyPress: this.runIfEnter,
key: _i,
page: _i,
active: _active,
showTitle: props.showTitle,
itemRender: props.itemRender
}));
}
if (current - 1 >= pageBufferSize * 2 && current !== 1 + 2) {
pagerList[0] = _react2['default'].cloneElement(pagerList[0], {
className: prefixCls + '-item-after-jump-prev'
});
pagerList.unshift(jumpPrev);
}
if (allPages - current >= pageBufferSize * 2 && current !== allPages - 2) {
pagerList[pagerList.length - 1] = _react2['default'].cloneElement(pagerList[pagerList.length - 1], {
className: prefixCls + '-item-before-jump-next'
});
pagerList.push(jumpNext);
}
if (left !== 1) {
pagerList.unshift(firstPager);
}
if (right !== allPages) {
pagerList.push(lastPager);
}
}
var totalText = null;
if (props.showTotal) {
totalText = _react2['default'].createElement(
'li',
{ className: prefixCls + '-total-text' },
props.showTotal(props.total, [props.total === 0 ? 0 : (current - 1) * pageSize + 1, current * pageSize > props.total ? props.total : current * pageSize])
);
}
var prevDisabled = !this.hasPrev() || !allPages;
var nextDisabled = !this.hasNext() || !allPages;
return _react2['default'].createElement(
'ul',
(0, _extends3['default'])({
className: (0, _classnames2['default'])(prefixCls, className, (0, _defineProperty3['default'])({}, prefixCls + '-disabled', disabled)),
style: props.style,
unselectable: 'unselectable',
ref: this.savePaginationNode
}, dataOrAriaAttributeProps),
totalText,
_react2['default'].createElement(
'li',
{
title: props.showTitle ? locale.prev_page : null,
onClick: this.prev,
tabIndex: prevDisabled ? null : 0,
onKeyPress: this.runIfEnterPrev,
className: (!prevDisabled ? '' : prefixCls + '-disabled') + ' ' + prefixCls + '-prev',
'aria-disabled': prevDisabled
},
props.itemRender(prevPage, 'prev', this.getItemIcon(props.prevIcon))
),
pagerList,
_react2['default'].createElement(
'li',
{
title: props.showTitle ? locale.next_page : null,
onClick: this.next,
tabIndex: nextDisabled ? null : 0,
onKeyPress: this.runIfEnterNext,
className: (!nextDisabled ? '' : prefixCls + '-disabled') + ' ' + prefixCls + '-next',
'aria-disabled': nextDisabled
},
props.itemRender(nextPage, 'next', this.getItemIcon(props.nextIcon))
),
_react2['default'].createElement(_Options2['default'], {
disabled: disabled,
locale: props.locale,
rootPrefixCls: prefixCls,
selectComponentClass: props.selectComponentClass,
selectPrefixCls: props.selectPrefixCls,
changeSize: this.props.showSizeChanger ? this.changePageSize : null,
current: this.state.current,
pageSize: this.state.pageSize,
pageSizeOptions: this.props.pageSizeOptions,
quickGo: this.shouldDisplayQuickJumper() ? this.handleChange : null,
goButton: goButton
})
);
}
}], [{
key: 'getDerivedStateFromProps',
value: function getDerivedStateFromProps(props, prevState) {
var newState = {};
if ('current' in props) {
newState.current = props.current;
if (props.current !== prevState.current) {
newState.currentInputValue = newState.current;
}
}
if ('pageSize' in props && props.pageSize !== prevState.pageSize) {
var current = prevState.current;
var newCurrent = calculatePage(props.pageSize, prevState, props);
current = current > newCurrent ? newCurrent : current;
if (!('current' in props)) {
newState.current = current;
newState.currentInputValue = current;
}
newState.pageSize = props.pageSize;
}
return newState;
}
/**
* computed icon node that need to be rendered.
* @param {React.ReactNode | React.ComponentType<PaginationProps>} icon received icon.
* @returns {React.ReactNode}
*/
}]);
return Pagination;
}(_react2['default'].Component);
Pagination.propTypes = {
disabled: _propTypes2['default'].bool,
prefixCls: _propTypes2['default'].string,
className: _propTypes2['default'].string,
current: _propTypes2['default'].number,
defaultCurrent: _propTypes2['default'].number,
total: _propTypes2['default'].number,
pageSize: _propTypes2['default'].number,
defaultPageSize: _propTypes2['default'].number,
onChange: _propTypes2['default'].func,
hideOnSinglePage: _propTypes2['default'].bool,
showSizeChanger: _propTypes2['default'].bool,
showLessItems: _propTypes2['default'].bool,
onShowSizeChange: _propTypes2['default'].func,
selectComponentClass: _propTypes2['default'].func,
showPrevNextJumpers: _propTypes2['default'].bool,
showQuickJumper: _propTypes2['default'].oneOfType([_propTypes2['default'].bool, _propTypes2['default'].object]),
showTitle: _propTypes2['default'].bool,
pageSizeOptions: _propTypes2['default'].arrayOf(_propTypes2['default'].string),
showTotal: _propTypes2['default'].func,
locale: _propTypes2['default'].object,
style: _propTypes2['default'].object,
itemRender: _propTypes2['default'].func,
prevIcon: _propTypes2['default'].oneOfType([_propTypes2['default'].func, _propTypes2['default'].node]),
nextIcon: _propTypes2['default'].oneOfType([_propTypes2['default'].func, _propTypes2['default'].node]),
jumpPrevIcon: _propTypes2['default'].oneOfType([_propTypes2['default'].func, _propTypes2['default'].node]),
jumpNextIcon: _propTypes2['default'].oneOfType([_propTypes2['default'].func, _propTypes2['default'].node])
};
Pagination.defaultProps = {
defaultCurrent: 1,
total: 0,
defaultPageSize: 10,
onChange: noop,
className: '',
selectPrefixCls: 'rc-select',
prefixCls: 'rc-pagination',
selectComponentClass: null,
hideOnSinglePage: false,
showPrevNextJumpers: true,
showQuickJumper: false,
showSizeChanger: false,
showLessItems: false,
showTitle: true,
onShowSizeChange: noop,
locale: _zh_CN2['default'],
style: {},
itemRender: defaultItemRender
};
var _initialiseProps = function _initialiseProps() {
var _this2 = this;
this.getJumpPrevPage = function () {
return Math.max(1, _this2.state.current - (_this2.props.showLessItems ? 3 : 5));
};
this.getJumpNextPage = function () {
return Math.min(calculatePage(undefined, _this2.state, _this2.props), _this2.state.current + (_this2.props.showLessItems ? 3 : 5));
};
this.getItemIcon = function (icon) {
var prefixCls = _this2.props.prefixCls;
var iconNode = icon || _react2['default'].createElement('a', { className: prefixCls + '-item-link' });
if (typeof icon === 'function') {
iconNode = _react2['default'].createElement(icon, (0, _extends3['default'])({}, _this2.props));
}
return iconNode;
};
this.savePaginationNode = function (node) {
_this2.paginationNode = node;
};
this.isValid = function (page) {
return isInteger(page) && page >= 1 && page !== _this2.state.current;
};
this.shouldDisplayQuickJumper = function () {
var _props2 = _this2.props,
showQuickJumper = _props2.showQuickJumper,
pageSize = _props2.pageSize,
total = _props2.total;
if (total <= pageSize) {
return false;
}
return showQuickJumper;
};
this.handleKeyDown = function (e) {
if (e.keyCode === _KeyCode2['default'].ARROW_UP || e.keyCode === _KeyCode2['default'].ARROW_DOWN) {
e.preventDefault();
}
};
this.handleKeyUp = function (e) {
var value = _this2.getValidValue(e);
var currentInputValue = _this2.state.currentInputValue;
if (value !== currentInputValue) {
_this2.setState({
currentInputValue: value
});
}
if (e.keyCode === _KeyCode2['default'].ENTER) {
_this2.handleChange(value);
} else if (e.keyCode === _KeyCode2['default'].ARROW_UP) {
_this2.handleChange(value - 1);
} else if (e.keyCode === _KeyCode2['default'].ARROW_DOWN) {
_this2.handleChange(value + 1);
}
};
this.changePageSize = function (size) {
var current = _this2.state.current;
var newCurrent = calculatePage(size, _this2.state, _this2.props);
current = current > newCurrent ? newCurrent : current;
// fix the issue:
// Once 'total' is 0, 'current' in 'onShowSizeChange' is 0, which is not correct.
if (newCurrent === 0) {
current = _this2.state.current;
}
if (typeof size === 'number') {
if (!('pageSize' in _this2.props)) {
_this2.setState({
pageSize: size
});
}
if (!('current' in _this2.props)) {
_this2.setState({
current: current,
currentInputValue: current
});
}
}
_this2.props.onShowSizeChange(current, size);
};
this.handleChange = function (p) {
var disabled = _this2.props.disabled;
var page = p;
if (_this2.isValid(page) && !disabled) {
var currentPage = calculatePage(undefined, _this2.state, _this2.props);
if (page > currentPage) {
page = currentPage;
}
if (!('current' in _this2.props)) {
_this2.setState({
current: page,
currentInputValue: page
});
}
var pageSize = _this2.state.pageSize;
_this2.props.onChange(page, pageSize);
return page;
}
return _this2.state.current;
};
this.prev = function () {
if (_this2.hasPrev()) {
_this2.handleChange(_this2.state.current - 1);
}
};
this.next = function () {
if (_this2.hasNext()) {
_this2.handleChange(_this2.state.current + 1);
}
};
this.jumpPrev = function () {
_this2.handleChange(_this2.getJumpPrevPage());
};
this.jumpNext = function () {
_this2.handleChange(_this2.getJumpNextPage());
};
this.hasPrev = function () {
return _this2.state.current > 1;
};
this.hasNext = function () {
return _this2.state.current < calculatePage(undefined, _this2.state, _this2.props);
};
this.runIfEnter = function (event, callback) {
for (var _len = arguments.length, restParams = Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
restParams[_key - 2] = arguments[_key];
}
if (event.key === 'Enter' || event.charCode === 13) {
callback.apply(undefined, restParams);
}
};
this.runIfEnterPrev = function (e) {
_this2.runIfEnter(e, _this2.prev);
};
this.runIfEnterNext = function (e) {
_this2.runIfEnter(e, _this2.next);
};
this.runIfEnterJumpPrev = function (e) {
_this2.runIfEnter(e, _this2.jumpPrev);
};
this.runIfEnterJumpNext = function (e) {
_this2.runIfEnter(e, _this2.jumpNext);
};
this.handleGoTO = function (e) {
if (e.keyCode === _KeyCode2['default'].ENTER || e.type === 'click') {
_this2.handleChange(_this2.state.currentInputValue);
}
};
};
(0, _reactLifecyclesCompat.polyfill)(Pagination);
exports['default'] = Pagination;
module.exports = exports['default'];