index.js 8.6 KB

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