Pagination.js 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  1. import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
  2. import _extends from 'babel-runtime/helpers/extends';
  3. import PropTypes from '../_util/vue-types';
  4. import VcSelect from '../select';
  5. import MiniSelect from './MiniSelect';
  6. import LocaleReceiver from '../locale-provider/LocaleReceiver';
  7. import { getOptionProps, getListeners } from '../_util/props-util';
  8. import VcPagination from '../vc-pagination';
  9. import enUS from '../vc-pagination/locale/en_US';
  10. import Icon from '../icon';
  11. import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
  12. export var PaginationProps = function PaginationProps() {
  13. return {
  14. total: PropTypes.number,
  15. defaultCurrent: PropTypes.number,
  16. disabled: PropTypes.bool,
  17. current: PropTypes.number,
  18. defaultPageSize: PropTypes.number,
  19. pageSize: PropTypes.number,
  20. hideOnSinglePage: PropTypes.bool,
  21. showSizeChanger: PropTypes.bool,
  22. pageSizeOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
  23. buildOptionText: PropTypes.func,
  24. showSizeChange: PropTypes.func,
  25. showQuickJumper: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
  26. showTotal: PropTypes.any,
  27. size: PropTypes.string,
  28. simple: PropTypes.bool,
  29. locale: PropTypes.object,
  30. prefixCls: PropTypes.string,
  31. selectPrefixCls: PropTypes.string,
  32. itemRender: PropTypes.any,
  33. role: PropTypes.string,
  34. showLessItems: PropTypes.bool
  35. };
  36. };
  37. export var PaginationConfig = function PaginationConfig() {
  38. return _extends({}, PaginationProps(), {
  39. position: PropTypes.oneOf(['top', 'bottom', 'both'])
  40. });
  41. };
  42. export default {
  43. name: 'APagination',
  44. model: {
  45. prop: 'current',
  46. event: 'change.current'
  47. },
  48. props: _extends({}, PaginationProps()),
  49. inject: {
  50. configProvider: { 'default': function _default() {
  51. return ConfigConsumerProps;
  52. } }
  53. },
  54. methods: {
  55. getIconsProps: function getIconsProps(prefixCls) {
  56. var h = this.$createElement;
  57. var prevIcon = h(
  58. 'a',
  59. { 'class': prefixCls + '-item-link' },
  60. [h(Icon, {
  61. attrs: { type: 'left' }
  62. })]
  63. );
  64. var nextIcon = h(
  65. 'a',
  66. { 'class': prefixCls + '-item-link' },
  67. [h(Icon, {
  68. attrs: { type: 'right' }
  69. })]
  70. );
  71. var jumpPrevIcon = h(
  72. 'a',
  73. { 'class': prefixCls + '-item-link' },
  74. [h(
  75. 'div',
  76. { 'class': prefixCls + '-item-container' },
  77. [h(Icon, { 'class': prefixCls + '-item-link-icon', attrs: { type: 'double-left' }
  78. }), h(
  79. 'span',
  80. { 'class': prefixCls + '-item-ellipsis' },
  81. ['\u2022\u2022\u2022']
  82. )]
  83. )]
  84. );
  85. var jumpNextIcon = h(
  86. 'a',
  87. { 'class': prefixCls + '-item-link' },
  88. [h(
  89. 'div',
  90. { 'class': prefixCls + '-item-container' },
  91. [h(Icon, { 'class': prefixCls + '-item-link-icon', attrs: { type: 'double-right' }
  92. }), h(
  93. 'span',
  94. { 'class': prefixCls + '-item-ellipsis' },
  95. ['\u2022\u2022\u2022']
  96. )]
  97. )]
  98. );
  99. return {
  100. prevIcon: prevIcon,
  101. nextIcon: nextIcon,
  102. jumpPrevIcon: jumpPrevIcon,
  103. jumpNextIcon: jumpNextIcon
  104. };
  105. },
  106. renderPagination: function renderPagination(contextLocale) {
  107. var h = this.$createElement;
  108. var _getOptionProps = getOptionProps(this),
  109. customizePrefixCls = _getOptionProps.prefixCls,
  110. customizeSelectPrefixCls = _getOptionProps.selectPrefixCls,
  111. buildOptionText = _getOptionProps.buildOptionText,
  112. size = _getOptionProps.size,
  113. customLocale = _getOptionProps.locale,
  114. restProps = _objectWithoutProperties(_getOptionProps, ['prefixCls', 'selectPrefixCls', 'buildOptionText', 'size', 'locale']);
  115. var getPrefixCls = this.configProvider.getPrefixCls;
  116. var prefixCls = getPrefixCls('pagination', customizePrefixCls);
  117. var selectPrefixCls = getPrefixCls('select', customizeSelectPrefixCls);
  118. var isSmall = size === 'small';
  119. var paginationProps = {
  120. props: _extends({
  121. prefixCls: prefixCls,
  122. selectPrefixCls: selectPrefixCls
  123. }, restProps, this.getIconsProps(prefixCls), {
  124. selectComponentClass: isSmall ? MiniSelect : VcSelect,
  125. locale: _extends({}, contextLocale, customLocale),
  126. buildOptionText: buildOptionText || this.$scopedSlots.buildOptionText
  127. }),
  128. 'class': {
  129. mini: isSmall
  130. },
  131. on: getListeners(this)
  132. };
  133. return h(VcPagination, paginationProps);
  134. }
  135. },
  136. render: function render() {
  137. var h = arguments[0];
  138. return h(LocaleReceiver, {
  139. attrs: {
  140. componentName: 'Pagination',
  141. defaultLocale: enUS
  142. },
  143. scopedSlots: { 'default': this.renderPagination }
  144. });
  145. }
  146. };