index.js 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
  1. import _defineProperty from 'babel-runtime/helpers/defineProperty';
  2. import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
  3. import _toConsumableArray from 'babel-runtime/helpers/toConsumableArray';
  4. import _extends from 'babel-runtime/helpers/extends';
  5. import classNames from 'classnames';
  6. import omit from 'omit.js';
  7. import PropTypes from '../_util/vue-types';
  8. import VcMentions from '../vc-mentions';
  9. import { mentionsProps } from '../vc-mentions/src/mentionsProps';
  10. import Base from '../base';
  11. import Spin from '../spin';
  12. import BaseMixin from '../_util/BaseMixin';
  13. import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
  14. import { getOptionProps, getComponentFromProp, getListeners, filterEmpty } from '../_util/props-util';
  15. var Option = VcMentions.Option;
  16. function loadingFilterOption() {
  17. return true;
  18. }
  19. function getMentions() {
  20. var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
  21. var config = arguments[1];
  22. var _ref = config || {},
  23. _ref$prefix = _ref.prefix,
  24. prefix = _ref$prefix === undefined ? '@' : _ref$prefix,
  25. _ref$split = _ref.split,
  26. split = _ref$split === undefined ? ' ' : _ref$split;
  27. var prefixList = Array.isArray(prefix) ? prefix : [prefix];
  28. return value.split(split).map(function () {
  29. var str = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
  30. var hitPrefix = null;
  31. prefixList.some(function (prefixStr) {
  32. var startStr = str.slice(0, prefixStr.length);
  33. if (startStr === prefixStr) {
  34. hitPrefix = prefixStr;
  35. return true;
  36. }
  37. return false;
  38. });
  39. if (hitPrefix !== null) {
  40. return {
  41. prefix: hitPrefix,
  42. value: str.slice(hitPrefix.length)
  43. };
  44. }
  45. return null;
  46. }).filter(function (entity) {
  47. return !!entity && !!entity.value;
  48. });
  49. }
  50. var Mentions = {
  51. name: 'AMentions',
  52. mixins: [BaseMixin],
  53. inheritAttrs: false,
  54. model: {
  55. prop: 'value',
  56. event: 'change'
  57. },
  58. Option: _extends({}, Option, { name: 'AMentionsOption' }),
  59. getMentions: getMentions,
  60. props: _extends({}, mentionsProps, {
  61. loading: PropTypes.bool
  62. }),
  63. inject: {
  64. configProvider: { 'default': function _default() {
  65. return ConfigConsumerProps;
  66. } }
  67. },
  68. data: function data() {
  69. return {
  70. focused: false
  71. };
  72. },
  73. mounted: function mounted() {
  74. var _this = this;
  75. this.$nextTick(function () {
  76. if (_this.autoFocus) {
  77. _this.focus();
  78. }
  79. });
  80. },
  81. methods: {
  82. onFocus: function onFocus() {
  83. for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
  84. args[_key] = arguments[_key];
  85. }
  86. this.$emit.apply(this, ['focus'].concat(_toConsumableArray(args)));
  87. this.setState({
  88. focused: true
  89. });
  90. },
  91. onBlur: function onBlur() {
  92. for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
  93. args[_key2] = arguments[_key2];
  94. }
  95. this.$emit.apply(this, ['blur'].concat(_toConsumableArray(args)));
  96. this.setState({
  97. focused: false
  98. });
  99. },
  100. onSelect: function onSelect() {
  101. for (var _len3 = arguments.length, args = Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
  102. args[_key3] = arguments[_key3];
  103. }
  104. this.$emit.apply(this, ['select'].concat(_toConsumableArray(args)));
  105. this.setState({
  106. focused: true
  107. });
  108. },
  109. onChange: function onChange(val) {
  110. this.$emit('change', val);
  111. },
  112. getNotFoundContent: function getNotFoundContent(renderEmpty) {
  113. var h = this.$createElement;
  114. var notFoundContent = getComponentFromProp(this, 'notFoundContent');
  115. if (notFoundContent !== undefined) {
  116. return notFoundContent;
  117. }
  118. return renderEmpty(h, 'Select');
  119. },
  120. getOptions: function getOptions() {
  121. var h = this.$createElement;
  122. var loading = this.$props.loading;
  123. var children = filterEmpty(this.$slots['default'] || []);
  124. if (loading) {
  125. return h(
  126. Option,
  127. {
  128. attrs: { value: 'ANTD_SEARCHING', disabled: true }
  129. },
  130. [h(Spin, {
  131. attrs: { size: 'small' }
  132. })]
  133. );
  134. }
  135. return children;
  136. },
  137. getFilterOption: function getFilterOption() {
  138. var _$props = this.$props,
  139. filterOption = _$props.filterOption,
  140. loading = _$props.loading;
  141. if (loading) {
  142. return loadingFilterOption;
  143. }
  144. return filterOption;
  145. },
  146. focus: function focus() {
  147. this.$refs.vcMentions.focus();
  148. },
  149. blur: function blur() {
  150. this.$refs.vcMentions.blur();
  151. }
  152. },
  153. render: function render() {
  154. var _classNames;
  155. var h = arguments[0];
  156. var focused = this.$data.focused;
  157. var _configProvider = this.configProvider,
  158. getPrefixCls = _configProvider.getPrefixCls,
  159. renderEmpty = _configProvider.renderEmpty;
  160. var _getOptionProps = getOptionProps(this),
  161. customizePrefixCls = _getOptionProps.prefixCls,
  162. disabled = _getOptionProps.disabled,
  163. getPopupContainer = _getOptionProps.getPopupContainer,
  164. restProps = _objectWithoutProperties(_getOptionProps, ['prefixCls', 'disabled', 'getPopupContainer']);
  165. var prefixCls = getPrefixCls('mentions', customizePrefixCls);
  166. var otherProps = omit(restProps, ['loading']);
  167. var mergedClassName = classNames((_classNames = {}, _defineProperty(_classNames, prefixCls + '-disabled', disabled), _defineProperty(_classNames, prefixCls + '-focused', focused), _classNames));
  168. var mentionsProps = {
  169. props: _extends({
  170. prefixCls: prefixCls,
  171. notFoundContent: this.getNotFoundContent(renderEmpty)
  172. }, otherProps, {
  173. disabled: disabled,
  174. filterOption: this.getFilterOption(),
  175. getPopupContainer: getPopupContainer,
  176. children: this.getOptions()
  177. }),
  178. 'class': mergedClassName,
  179. attrs: _extends({ rows: 1 }, this.$attrs),
  180. on: _extends({}, getListeners(this), {
  181. change: this.onChange,
  182. select: this.onSelect,
  183. focus: this.onFocus,
  184. blur: this.onBlur
  185. }),
  186. ref: 'vcMentions'
  187. };
  188. return h(VcMentions, mentionsProps);
  189. }
  190. };
  191. /* istanbul ignore next */
  192. Mentions.install = function (Vue) {
  193. Vue.use(Base);
  194. Vue.component(Mentions.name, Mentions);
  195. Vue.component(Mentions.Option.name, Mentions.Option);
  196. };
  197. export default Mentions;