Search.js 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205
  1. import _defineProperty from 'babel-runtime/helpers/defineProperty';
  2. import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
  3. import _extends from 'babel-runtime/helpers/extends';
  4. import classNames from 'classnames';
  5. import { isMobile } from 'is-mobile';
  6. import Input from './Input';
  7. import Icon from '../icon';
  8. import inputProps from './inputProps';
  9. import Button from '../button';
  10. import { cloneElement } from '../_util/vnode';
  11. import PropTypes from '../_util/vue-types';
  12. import { getOptionProps, getComponentFromProp, getListeners } from '../_util/props-util';
  13. import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
  14. export default {
  15. name: 'AInputSearch',
  16. inheritAttrs: false,
  17. model: {
  18. prop: 'value',
  19. event: 'change.value'
  20. },
  21. props: _extends({}, inputProps, {
  22. // 不能设置默认值 https://github.com/vueComponent/ant-design-vue/issues/1916
  23. enterButton: PropTypes.any
  24. }),
  25. inject: {
  26. configProvider: { 'default': function _default() {
  27. return ConfigConsumerProps;
  28. } }
  29. },
  30. methods: {
  31. onChange: function onChange(e) {
  32. if (e && e.target && e.type === 'click') {
  33. this.$emit('search', e.target.value, e);
  34. }
  35. this.$emit('change', e);
  36. },
  37. onSearch: function onSearch(e) {
  38. if (this.loading || this.disabled) {
  39. return;
  40. }
  41. this.$emit('search', this.$refs.input.stateValue, e);
  42. if (!isMobile({ tablet: true })) {
  43. this.$refs.input.focus();
  44. }
  45. },
  46. focus: function focus() {
  47. this.$refs.input.focus();
  48. },
  49. blur: function blur() {
  50. this.$refs.input.blur();
  51. },
  52. renderLoading: function renderLoading(prefixCls) {
  53. var h = this.$createElement;
  54. var size = this.$props.size;
  55. var enterButton = getComponentFromProp(this, 'enterButton');
  56. // 兼容 <a-input-search enterButton />, 因enterButton类型为 any,此类写法 enterButton 为空字符串
  57. enterButton = enterButton || enterButton === '';
  58. if (enterButton) {
  59. return h(
  60. Button,
  61. { 'class': prefixCls + '-button', attrs: { type: 'primary', size: size },
  62. key: 'enterButton' },
  63. [h(Icon, {
  64. attrs: { type: 'loading' }
  65. })]
  66. );
  67. }
  68. return h(Icon, { 'class': prefixCls + '-icon', attrs: { type: 'loading' },
  69. key: 'loadingIcon' });
  70. },
  71. renderSuffix: function renderSuffix(prefixCls) {
  72. var h = this.$createElement;
  73. var loading = this.loading;
  74. var suffix = getComponentFromProp(this, 'suffix');
  75. var enterButton = getComponentFromProp(this, 'enterButton');
  76. // 兼容 <a-input-search enterButton />, 因enterButton类型为 any,此类写法 enterButton 为空字符串
  77. enterButton = enterButton || enterButton === '';
  78. if (loading && !enterButton) {
  79. return [suffix, this.renderLoading(prefixCls)];
  80. }
  81. if (enterButton) return suffix;
  82. var icon = h(Icon, { 'class': prefixCls + '-icon', attrs: { type: 'search' },
  83. key: 'searchIcon', on: {
  84. 'click': this.onSearch
  85. }
  86. });
  87. if (suffix) {
  88. // let cloneSuffix = suffix;
  89. // if (isValidElement(cloneSuffix) && !cloneSuffix.key) {
  90. // cloneSuffix = cloneElement(cloneSuffix, {
  91. // key: 'originSuffix',
  92. // });
  93. // }
  94. return [suffix, icon];
  95. }
  96. return icon;
  97. },
  98. renderAddonAfter: function renderAddonAfter(prefixCls) {
  99. var h = this.$createElement;
  100. var size = this.size,
  101. disabled = this.disabled,
  102. loading = this.loading;
  103. var btnClassName = prefixCls + '-button';
  104. var enterButton = getComponentFromProp(this, 'enterButton');
  105. enterButton = enterButton || enterButton === '';
  106. var addonAfter = getComponentFromProp(this, 'addonAfter');
  107. if (loading && enterButton) {
  108. return [this.renderLoading(prefixCls), addonAfter];
  109. }
  110. if (!enterButton) return addonAfter;
  111. var enterButtonAsElement = Array.isArray(enterButton) ? enterButton[0] : enterButton;
  112. var button = void 0;
  113. var isAntdButton = enterButtonAsElement.componentOptions && enterButtonAsElement.componentOptions.Ctor.extendOptions.__ANT_BUTTON;
  114. if (enterButtonAsElement.tag === 'button' || isAntdButton) {
  115. button = cloneElement(enterButtonAsElement, {
  116. key: 'enterButton',
  117. 'class': isAntdButton ? btnClassName : '',
  118. props: isAntdButton ? { size: size } : {},
  119. on: {
  120. click: this.onSearch
  121. }
  122. });
  123. } else {
  124. button = h(
  125. Button,
  126. {
  127. 'class': btnClassName,
  128. attrs: { type: 'primary',
  129. size: size,
  130. disabled: disabled
  131. },
  132. key: 'enterButton',
  133. on: {
  134. 'click': this.onSearch
  135. }
  136. },
  137. [enterButton === true || enterButton === '' ? h(Icon, {
  138. attrs: { type: 'search' }
  139. }) : enterButton]
  140. );
  141. }
  142. if (addonAfter) {
  143. return [button, addonAfter];
  144. }
  145. return button;
  146. }
  147. },
  148. render: function render() {
  149. var h = arguments[0];
  150. var _getOptionProps = getOptionProps(this),
  151. customizePrefixCls = _getOptionProps.prefixCls,
  152. customizeInputPrefixCls = _getOptionProps.inputPrefixCls,
  153. size = _getOptionProps.size,
  154. loading = _getOptionProps.loading,
  155. others = _objectWithoutProperties(_getOptionProps, ['prefixCls', 'inputPrefixCls', 'size', 'loading']);
  156. var getPrefixCls = this.configProvider.getPrefixCls;
  157. var prefixCls = getPrefixCls('input-search', customizePrefixCls);
  158. var inputPrefixCls = getPrefixCls('input', customizeInputPrefixCls);
  159. var enterButton = getComponentFromProp(this, 'enterButton');
  160. var addonBefore = getComponentFromProp(this, 'addonBefore');
  161. enterButton = enterButton || enterButton === '';
  162. var inputClassName = void 0;
  163. if (enterButton) {
  164. var _classNames;
  165. inputClassName = classNames(prefixCls, (_classNames = {}, _defineProperty(_classNames, prefixCls + '-enter-button', !!enterButton), _defineProperty(_classNames, prefixCls + '-' + size, !!size), _classNames));
  166. } else {
  167. inputClassName = prefixCls;
  168. }
  169. var on = _extends({}, getListeners(this));
  170. delete on.search;
  171. var inputProps = {
  172. props: _extends({}, others, {
  173. prefixCls: inputPrefixCls,
  174. size: size,
  175. suffix: this.renderSuffix(prefixCls),
  176. prefix: getComponentFromProp(this, 'prefix'),
  177. addonAfter: this.renderAddonAfter(prefixCls),
  178. addonBefore: addonBefore,
  179. className: inputClassName
  180. }),
  181. attrs: this.$attrs,
  182. ref: 'input',
  183. on: _extends({
  184. pressEnter: this.onSearch
  185. }, on, {
  186. change: this.onChange
  187. })
  188. };
  189. return h(Input, inputProps);
  190. }
  191. };