Options.js 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
  1. import _mergeJSXProps from 'babel-helper-vue-jsx-merge-props';
  2. import PropTypes from '../_util/vue-types';
  3. import KEYCODE from './KeyCode';
  4. import BaseMixin from '../_util/BaseMixin';
  5. export default {
  6. mixins: [BaseMixin],
  7. props: {
  8. disabled: PropTypes.bool,
  9. changeSize: PropTypes.func,
  10. quickGo: PropTypes.func,
  11. selectComponentClass: PropTypes.any,
  12. current: PropTypes.number,
  13. pageSizeOptions: PropTypes.array.def(['10', '20', '30', '40']),
  14. pageSize: PropTypes.number,
  15. buildOptionText: PropTypes.func,
  16. locale: PropTypes.object,
  17. rootPrefixCls: PropTypes.string,
  18. selectPrefixCls: PropTypes.string,
  19. goButton: PropTypes.any
  20. },
  21. data: function data() {
  22. return {
  23. goInputText: ''
  24. };
  25. },
  26. methods: {
  27. getValidValue: function getValidValue() {
  28. var goInputText = this.goInputText,
  29. current = this.current;
  30. return !goInputText || isNaN(goInputText) ? current : Number(goInputText);
  31. },
  32. defaultBuildOptionText: function defaultBuildOptionText(opt) {
  33. return opt.value + ' ' + this.locale.items_per_page;
  34. },
  35. handleChange: function handleChange(e) {
  36. var _e$target = e.target,
  37. value = _e$target.value,
  38. composing = _e$target.composing;
  39. if (e.isComposing || composing || this.goInputText === value) return;
  40. this.setState({
  41. goInputText: value
  42. });
  43. },
  44. handleBlur: function handleBlur(e) {
  45. var _$props = this.$props,
  46. goButton = _$props.goButton,
  47. quickGo = _$props.quickGo,
  48. rootPrefixCls = _$props.rootPrefixCls;
  49. if (goButton) {
  50. return;
  51. }
  52. if (e.relatedTarget && (e.relatedTarget.className.indexOf(rootPrefixCls + '-prev') >= 0 || e.relatedTarget.className.indexOf(rootPrefixCls + '-next') >= 0)) {
  53. return;
  54. }
  55. quickGo(this.getValidValue());
  56. },
  57. go: function go(e) {
  58. var goInputText = this.goInputText;
  59. if (goInputText === '') {
  60. return;
  61. }
  62. if (e.keyCode === KEYCODE.ENTER || e.type === 'click') {
  63. // https://github.com/vueComponent/ant-design-vue/issues/1316
  64. this.quickGo(this.getValidValue());
  65. this.setState({
  66. goInputText: ''
  67. });
  68. }
  69. }
  70. },
  71. render: function render() {
  72. var _this = this;
  73. var h = arguments[0];
  74. var rootPrefixCls = this.rootPrefixCls,
  75. locale = this.locale,
  76. changeSize = this.changeSize,
  77. quickGo = this.quickGo,
  78. goButton = this.goButton,
  79. Select = this.selectComponentClass,
  80. defaultBuildOptionText = this.defaultBuildOptionText,
  81. selectPrefixCls = this.selectPrefixCls,
  82. pageSize = this.pageSize,
  83. pageSizeOptions = this.pageSizeOptions,
  84. goInputText = this.goInputText,
  85. disabled = this.disabled;
  86. var prefixCls = rootPrefixCls + '-options';
  87. var changeSelect = null;
  88. var goInput = null;
  89. var gotoButton = null;
  90. if (!changeSize && !quickGo) {
  91. return null;
  92. }
  93. if (changeSize && Select) {
  94. var buildOptionText = this.buildOptionText || defaultBuildOptionText;
  95. var options = pageSizeOptions.map(function (opt, i) {
  96. return h(
  97. Select.Option,
  98. { key: i, attrs: { value: opt }
  99. },
  100. [buildOptionText({ value: opt })]
  101. );
  102. });
  103. changeSelect = h(
  104. Select,
  105. {
  106. attrs: {
  107. disabled: disabled,
  108. prefixCls: selectPrefixCls,
  109. showSearch: false,
  110. optionLabelProp: 'children',
  111. dropdownMatchSelectWidth: false,
  112. value: (pageSize || pageSizeOptions[0]).toString(),
  113. getPopupContainer: function getPopupContainer(triggerNode) {
  114. return triggerNode.parentNode;
  115. }
  116. },
  117. 'class': prefixCls + '-size-changer', on: {
  118. 'change': function change(value) {
  119. return _this.changeSize(Number(value));
  120. }
  121. }
  122. },
  123. [options]
  124. );
  125. }
  126. if (quickGo) {
  127. if (goButton) {
  128. gotoButton = typeof goButton === 'boolean' ? h(
  129. 'button',
  130. {
  131. attrs: { type: 'button', disabled: disabled },
  132. on: {
  133. 'click': this.go,
  134. 'keyup': this.go
  135. }
  136. },
  137. [locale.jump_to_confirm]
  138. ) : h(
  139. 'span',
  140. {
  141. on: {
  142. 'click': this.go,
  143. 'keyup': this.go
  144. }
  145. },
  146. [goButton]
  147. );
  148. }
  149. goInput = h(
  150. 'div',
  151. { 'class': prefixCls + '-quick-jumper' },
  152. [locale.jump_to, h('input', _mergeJSXProps([{
  153. attrs: {
  154. disabled: disabled,
  155. type: 'text'
  156. },
  157. domProps: {
  158. 'value': goInputText
  159. },
  160. on: {
  161. 'input': this.handleChange,
  162. 'keyup': this.go,
  163. 'blur': this.handleBlur
  164. }
  165. }, {
  166. directives: [{
  167. name: 'ant-input'
  168. }]
  169. }])), locale.page, gotoButton]
  170. );
  171. }
  172. return h(
  173. 'li',
  174. { 'class': '' + prefixCls },
  175. [changeSelect, goInput]
  176. );
  177. }
  178. };