index.js 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  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 VcTreeSelect, { TreeNode, SHOW_ALL, SHOW_PARENT, SHOW_CHILD } from '../vc-tree-select';
  5. import classNames from 'classnames';
  6. import { TreeSelectProps } from './interface';
  7. import warning from '../_util/warning';
  8. import { initDefaultProps, getOptionProps, getComponentFromProp, filterEmpty, getListeners } from '../_util/props-util';
  9. import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
  10. import Base from '../base';
  11. export { TreeData, TreeSelectProps } from './interface';
  12. import Icon from '../icon';
  13. import omit from 'omit.js';
  14. var TreeSelect = {
  15. TreeNode: _extends({}, TreeNode, { name: 'ATreeSelectNode' }),
  16. SHOW_ALL: SHOW_ALL,
  17. SHOW_PARENT: SHOW_PARENT,
  18. SHOW_CHILD: SHOW_CHILD,
  19. name: 'ATreeSelect',
  20. props: initDefaultProps(TreeSelectProps(), {
  21. transitionName: 'slide-up',
  22. choiceTransitionName: 'zoom',
  23. showSearch: false
  24. }),
  25. model: {
  26. prop: 'value',
  27. event: 'change'
  28. },
  29. inject: {
  30. configProvider: { 'default': function _default() {
  31. return ConfigConsumerProps;
  32. } }
  33. },
  34. created: function created() {
  35. warning(this.multiple !== false || !this.treeCheckable, 'TreeSelect', '`multiple` will alway be `true` when `treeCheckable` is true');
  36. },
  37. methods: {
  38. focus: function focus() {
  39. this.$refs.vcTreeSelect.focus();
  40. },
  41. blur: function blur() {
  42. this.$refs.vcTreeSelect.blur();
  43. },
  44. renderSwitcherIcon: function renderSwitcherIcon(prefixCls, _ref) {
  45. var isLeaf = _ref.isLeaf,
  46. loading = _ref.loading;
  47. var h = this.$createElement;
  48. if (loading) {
  49. return h(Icon, {
  50. attrs: { type: 'loading' },
  51. 'class': prefixCls + '-switcher-loading-icon' });
  52. }
  53. if (isLeaf) {
  54. return null;
  55. }
  56. return h(Icon, {
  57. attrs: { type: 'caret-down' },
  58. 'class': prefixCls + '-switcher-icon' });
  59. },
  60. onChange: function onChange() {
  61. this.$emit.apply(this, ['change'].concat(Array.prototype.slice.call(arguments)));
  62. },
  63. updateTreeData: function updateTreeData(treeData) {
  64. var _this = this;
  65. var $scopedSlots = this.$scopedSlots;
  66. var defaultFields = {
  67. children: 'children',
  68. title: 'title',
  69. key: 'key',
  70. label: 'label',
  71. value: 'value'
  72. };
  73. var replaceFields = _extends({}, defaultFields, this.$props.replaceFields);
  74. return treeData.map(function (item) {
  75. var _item$scopedSlots = item.scopedSlots,
  76. scopedSlots = _item$scopedSlots === undefined ? {} : _item$scopedSlots;
  77. var label = item[replaceFields.label];
  78. var title = item[replaceFields.title];
  79. var value = item[replaceFields.value];
  80. var key = item[replaceFields.key];
  81. var children = item[replaceFields.children];
  82. var newLabel = typeof label === 'function' ? label(_this.$createElement) : label;
  83. var newTitle = typeof title === 'function' ? title(_this.$createElement) : title;
  84. if (!newLabel && scopedSlots.label && $scopedSlots[scopedSlots.label]) {
  85. newLabel = $scopedSlots[scopedSlots.label](item);
  86. }
  87. if (!newTitle && scopedSlots.title && $scopedSlots[scopedSlots.title]) {
  88. newTitle = $scopedSlots[scopedSlots.title](item);
  89. }
  90. var treeNodeProps = _extends({}, item, {
  91. title: newTitle || newLabel,
  92. value: value,
  93. dataRef: item,
  94. key: key
  95. });
  96. if (children) {
  97. return _extends({}, treeNodeProps, { children: _this.updateTreeData(children) });
  98. }
  99. return treeNodeProps;
  100. });
  101. }
  102. },
  103. render: function render(h) {
  104. var _cls,
  105. _this2 = this;
  106. var props = getOptionProps(this);
  107. var customizePrefixCls = props.prefixCls,
  108. size = props.size,
  109. dropdownStyle = props.dropdownStyle,
  110. dropdownClassName = props.dropdownClassName,
  111. getPopupContainer = props.getPopupContainer,
  112. restProps = _objectWithoutProperties(props, ['prefixCls', 'size', 'dropdownStyle', 'dropdownClassName', 'getPopupContainer']);
  113. var getPrefixCls = this.configProvider.getPrefixCls;
  114. var prefixCls = getPrefixCls('select', customizePrefixCls);
  115. var renderEmpty = this.configProvider.renderEmpty;
  116. var notFoundContent = getComponentFromProp(this, 'notFoundContent');
  117. var removeIcon = getComponentFromProp(this, 'removeIcon');
  118. var clearIcon = getComponentFromProp(this, 'clearIcon');
  119. var getContextPopupContainer = this.configProvider.getPopupContainer;
  120. var rest = omit(restProps, ['inputIcon', 'removeIcon', 'clearIcon', 'switcherIcon', 'suffixIcon']);
  121. var suffixIcon = getComponentFromProp(this, 'suffixIcon');
  122. suffixIcon = Array.isArray(suffixIcon) ? suffixIcon[0] : suffixIcon;
  123. var treeData = props.treeData;
  124. if (treeData) {
  125. treeData = this.updateTreeData(treeData);
  126. }
  127. var cls = (_cls = {}, _defineProperty(_cls, prefixCls + '-lg', size === 'large'), _defineProperty(_cls, prefixCls + '-sm', size === 'small'), _cls);
  128. // showSearch: single - false, multiple - true
  129. var showSearch = restProps.showSearch;
  130. if (!('showSearch' in restProps)) {
  131. showSearch = !!(restProps.multiple || restProps.treeCheckable);
  132. }
  133. var checkable = getComponentFromProp(this, 'treeCheckable');
  134. if (checkable) {
  135. checkable = h('span', { 'class': prefixCls + '-tree-checkbox-inner' });
  136. }
  137. var inputIcon = suffixIcon || h(Icon, {
  138. attrs: { type: 'down' },
  139. 'class': prefixCls + '-arrow-icon' });
  140. var finalRemoveIcon = removeIcon || h(Icon, {
  141. attrs: { type: 'close' },
  142. 'class': prefixCls + '-remove-icon' });
  143. var finalClearIcon = clearIcon || h(Icon, {
  144. attrs: { type: 'close-circle', theme: 'filled' },
  145. 'class': prefixCls + '-clear-icon' });
  146. var VcTreeSelectProps = {
  147. props: _extends(_extends({
  148. switcherIcon: function switcherIcon(nodeProps) {
  149. return _this2.renderSwitcherIcon(prefixCls, nodeProps);
  150. },
  151. inputIcon: inputIcon,
  152. removeIcon: finalRemoveIcon,
  153. clearIcon: finalClearIcon
  154. }, rest, {
  155. showSearch: showSearch,
  156. getPopupContainer: getPopupContainer || getContextPopupContainer,
  157. dropdownClassName: classNames(dropdownClassName, prefixCls + '-tree-dropdown'),
  158. prefixCls: prefixCls,
  159. dropdownStyle: _extends({ maxHeight: '100vh', overflow: 'auto' }, dropdownStyle),
  160. treeCheckable: checkable,
  161. notFoundContent: notFoundContent || renderEmpty(h, 'Select'),
  162. __propsSymbol__: Symbol()
  163. }), treeData ? { treeData: treeData } : {}),
  164. 'class': cls,
  165. on: _extends({}, getListeners(this), { change: this.onChange }),
  166. ref: 'vcTreeSelect',
  167. scopedSlots: this.$scopedSlots
  168. };
  169. return h(
  170. VcTreeSelect,
  171. VcTreeSelectProps,
  172. [filterEmpty(this.$slots['default'])]
  173. );
  174. }
  175. };
  176. /* istanbul ignore next */
  177. TreeSelect.install = function (Vue) {
  178. Vue.use(Base);
  179. Vue.component(TreeSelect.name, TreeSelect);
  180. Vue.component(TreeSelect.TreeNode.name, TreeSelect.TreeNode);
  181. };
  182. export default TreeSelect;