index.js 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. import _typeof from 'babel-runtime/helpers/typeof';
  2. import _defineProperty from 'babel-runtime/helpers/defineProperty';
  3. import _extends from 'babel-runtime/helpers/extends';
  4. import { Option, OptGroup } from '../vc-select';
  5. import Select, { AbstractSelectProps, SelectValue } from '../select';
  6. import Input from '../input';
  7. import InputElement from './InputElement';
  8. import PropTypes from '../_util/vue-types';
  9. import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
  10. import { getComponentFromProp, getOptionProps, filterEmpty, isValidElement, getListeners } from '../_util/props-util';
  11. import Base from '../base';
  12. // const DataSourceItemObject = PropTypes.shape({
  13. // value: String,
  14. // text: String,
  15. // }).loose
  16. // const DataSourceItemType = PropTypes.oneOfType([
  17. // PropTypes.string,
  18. // DataSourceItemObject,
  19. // ]).isRequired
  20. // export interface AutoCompleteInputProps {
  21. // onChange?: React.FormEventHandler<any>;
  22. // value: any;
  23. // }
  24. var AutoCompleteProps = _extends({}, AbstractSelectProps(), {
  25. value: SelectValue,
  26. defaultValue: SelectValue,
  27. dataSource: PropTypes.array,
  28. dropdownMenuStyle: PropTypes.object,
  29. optionLabelProp: String,
  30. dropdownMatchSelectWidth: PropTypes.bool
  31. // onChange?: (value: SelectValue) => void;
  32. // onSelect?: (value: SelectValue, option: Object) => any;
  33. });
  34. var AutoComplete = {
  35. name: 'AAutoComplete',
  36. props: _extends({}, AutoCompleteProps, {
  37. prefixCls: PropTypes.string,
  38. showSearch: PropTypes.bool.def(false),
  39. transitionName: PropTypes.string.def('slide-up'),
  40. choiceTransitionName: PropTypes.string.def('zoom'),
  41. autoFocus: PropTypes.bool,
  42. backfill: PropTypes.bool,
  43. optionLabelProp: PropTypes.string.def('children'),
  44. filterOption: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]).def(false),
  45. defaultActiveFirstOption: PropTypes.bool.def(true)
  46. }),
  47. Option: _extends({}, Option, { name: 'AAutoCompleteOption' }),
  48. OptGroup: _extends({}, OptGroup, { name: 'AAutoCompleteOptGroup' }),
  49. model: {
  50. prop: 'value',
  51. event: 'change'
  52. },
  53. inject: {
  54. configProvider: { 'default': function _default() {
  55. return ConfigConsumerProps;
  56. } }
  57. },
  58. provide: function provide() {
  59. return {
  60. savePopupRef: this.savePopupRef
  61. };
  62. },
  63. methods: {
  64. savePopupRef: function savePopupRef(ref) {
  65. this.popupRef = ref;
  66. },
  67. getInputElement: function getInputElement() {
  68. var h = this.$createElement;
  69. var $slots = this.$slots,
  70. placeholder = this.placeholder;
  71. var children = filterEmpty($slots['default']);
  72. var element = children.length ? children[0] : h(Input, {
  73. attrs: { lazy: false }
  74. });
  75. return h(
  76. InputElement,
  77. {
  78. attrs: { placeholder: placeholder }
  79. },
  80. [element]
  81. );
  82. },
  83. focus: function focus() {
  84. if (this.$refs.select) {
  85. this.$refs.select.focus();
  86. }
  87. },
  88. blur: function blur() {
  89. if (this.$refs.select) {
  90. this.$refs.select.blur();
  91. }
  92. }
  93. },
  94. render: function render() {
  95. var _cls;
  96. var h = arguments[0];
  97. var size = this.size,
  98. customizePrefixCls = this.prefixCls,
  99. optionLabelProp = this.optionLabelProp,
  100. dataSource = this.dataSource,
  101. $slots = this.$slots;
  102. var getPrefixCls = this.configProvider.getPrefixCls;
  103. var prefixCls = getPrefixCls('select', customizePrefixCls);
  104. var cls = (_cls = {}, _defineProperty(_cls, prefixCls + '-lg', size === 'large'), _defineProperty(_cls, prefixCls + '-sm', size === 'small'), _defineProperty(_cls, prefixCls + '-show-search', true), _defineProperty(_cls, prefixCls + '-auto-complete', true), _cls);
  105. var options = void 0;
  106. var childArray = filterEmpty($slots.dataSource);
  107. if (childArray.length) {
  108. options = childArray;
  109. } else {
  110. options = dataSource ? dataSource.map(function (item) {
  111. if (isValidElement(item)) {
  112. return item;
  113. }
  114. switch (typeof item === 'undefined' ? 'undefined' : _typeof(item)) {
  115. case 'string':
  116. return h(
  117. Option,
  118. { key: item },
  119. [item]
  120. );
  121. case 'object':
  122. return h(
  123. Option,
  124. { key: item.value },
  125. [item.text]
  126. );
  127. default:
  128. throw new Error('AutoComplete[dataSource] only supports type `string[] | Object[]`.');
  129. }
  130. }) : [];
  131. }
  132. var selectProps = {
  133. props: _extends({}, getOptionProps(this), {
  134. mode: Select.SECRET_COMBOBOX_MODE_DO_NOT_USE,
  135. optionLabelProp: optionLabelProp,
  136. getInputElement: this.getInputElement,
  137. notFoundContent: getComponentFromProp(this, 'notFoundContent'),
  138. placeholder: ''
  139. }),
  140. 'class': cls,
  141. ref: 'select',
  142. on: getListeners(this)
  143. };
  144. return h(
  145. Select,
  146. selectProps,
  147. [options]
  148. );
  149. }
  150. };
  151. /* istanbul ignore next */
  152. AutoComplete.install = function (Vue) {
  153. Vue.use(Base);
  154. Vue.component(AutoComplete.name, AutoComplete);
  155. Vue.component(AutoComplete.Option.name, AutoComplete.Option);
  156. Vue.component(AutoComplete.OptGroup.name, AutoComplete.OptGroup);
  157. };
  158. export default AutoComplete;