Options.js 5.8 KB

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