TreeSelect.js 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.default = void 0;
  7. exports.treeSelectProps = treeSelectProps;
  8. var _vue = require("vue");
  9. var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
  10. var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
  11. var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
  12. var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
  13. var _OptionList = _interopRequireDefault(require("./OptionList"));
  14. var _strategyUtil = require("./utils/strategyUtil");
  15. var _TreeSelectContext = require("./TreeSelectContext");
  16. var _LegacyContext = require("./LegacyContext");
  17. var _useTreeData = _interopRequireDefault(require("./hooks/useTreeData"));
  18. var _valueUtil = require("./utils/valueUtil");
  19. var _useCache3 = _interopRequireDefault(require("./hooks/useCache"));
  20. var _useDataEntities2 = _interopRequireDefault(require("./hooks/useDataEntities"));
  21. var _legacyUtil = require("./utils/legacyUtil");
  22. var _useCheckedKeys3 = _interopRequireDefault(require("./hooks/useCheckedKeys"));
  23. var _useFilterTreeData = _interopRequireDefault(require("./hooks/useFilterTreeData"));
  24. var _warningPropsUtil = _interopRequireDefault(require("./utils/warningPropsUtil"));
  25. var _BaseSelect = require("../vc-select/BaseSelect");
  26. var _omit = _interopRequireDefault(require("../_util/omit"));
  27. var _vueTypes = _interopRequireDefault(require("../_util/vue-types"));
  28. var _vcSelect = require("../vc-select");
  29. var _propsUtil = require("../_util/props-util");
  30. var _useId = _interopRequireDefault(require("../vc-select/hooks/useId"));
  31. var _useMergedState5 = _interopRequireDefault(require("../_util/hooks/useMergedState"));
  32. var _conductUtil = require("../vc-tree/utils/conductUtil");
  33. var _warning = require("../vc-util/warning");
  34. var _toReactive = require("../_util/toReactive");
  35. var _useMaxLevel2 = _interopRequireDefault(require("../vc-tree/useMaxLevel"));
  36. function treeSelectProps() {
  37. return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _omit.default)((0, _BaseSelect.baseSelectPropsWithoutPrivate)(), ['mode'])), {}, {
  38. prefixCls: String,
  39. id: String,
  40. value: {
  41. type: [String, Number, Object, Array]
  42. },
  43. defaultValue: {
  44. type: [String, Number, Object, Array]
  45. },
  46. onChange: {
  47. type: Function
  48. },
  49. searchValue: String,
  50. /** @deprecated Use `searchValue` instead */
  51. inputValue: String,
  52. onSearch: {
  53. type: Function
  54. },
  55. autoClearSearchValue: {
  56. type: Boolean,
  57. default: undefined
  58. },
  59. filterTreeNode: {
  60. type: [Boolean, Function],
  61. default: undefined
  62. },
  63. treeNodeFilterProp: String,
  64. // >>> Select
  65. onSelect: Function,
  66. onDeselect: Function,
  67. showCheckedStrategy: {
  68. type: String
  69. },
  70. treeNodeLabelProp: String,
  71. fieldNames: {
  72. type: Object
  73. },
  74. // >>> Mode
  75. multiple: {
  76. type: Boolean,
  77. default: undefined
  78. },
  79. treeCheckable: {
  80. type: Boolean,
  81. default: undefined
  82. },
  83. treeCheckStrictly: {
  84. type: Boolean,
  85. default: undefined
  86. },
  87. labelInValue: {
  88. type: Boolean,
  89. default: undefined
  90. },
  91. // >>> Data
  92. treeData: {
  93. type: Array
  94. },
  95. treeDataSimpleMode: {
  96. type: [Boolean, Object],
  97. default: undefined
  98. },
  99. loadData: {
  100. type: Function
  101. },
  102. treeLoadedKeys: {
  103. type: Array
  104. },
  105. onTreeLoad: {
  106. type: Function
  107. },
  108. // >>> Expanded
  109. treeDefaultExpandAll: {
  110. type: Boolean,
  111. default: undefined
  112. },
  113. treeExpandedKeys: {
  114. type: Array
  115. },
  116. treeDefaultExpandedKeys: {
  117. type: Array
  118. },
  119. onTreeExpand: {
  120. type: Function
  121. },
  122. // >>> Options
  123. virtual: {
  124. type: Boolean,
  125. default: undefined
  126. },
  127. listHeight: Number,
  128. listItemHeight: Number,
  129. onDropdownVisibleChange: {
  130. type: Function
  131. },
  132. // >>> Tree
  133. treeLine: {
  134. type: [Boolean, Object],
  135. default: undefined
  136. },
  137. treeIcon: _vueTypes.default.any,
  138. showTreeIcon: {
  139. type: Boolean,
  140. default: undefined
  141. },
  142. switcherIcon: _vueTypes.default.any,
  143. treeMotion: _vueTypes.default.any,
  144. children: Array,
  145. showArrow: {
  146. type: Boolean,
  147. default: undefined
  148. },
  149. showSearch: {
  150. type: Boolean,
  151. default: undefined
  152. },
  153. open: {
  154. type: Boolean,
  155. default: undefined
  156. },
  157. defaultOpen: {
  158. type: Boolean,
  159. default: undefined
  160. },
  161. disabled: {
  162. type: Boolean,
  163. default: undefined
  164. },
  165. placeholder: _vueTypes.default.any,
  166. maxTagPlaceholder: {
  167. type: Function
  168. },
  169. dropdownPopupAlign: _vueTypes.default.any,
  170. customSlots: Object
  171. });
  172. }
  173. function isRawValue(value) {
  174. return !value || (0, _typeof2.default)(value) !== 'object';
  175. }
  176. var _default = (0, _vue.defineComponent)({
  177. compatConfig: {
  178. MODE: 3
  179. },
  180. name: 'TreeSelect',
  181. inheritAttrs: false,
  182. props: (0, _propsUtil.initDefaultProps)(treeSelectProps(), {
  183. treeNodeFilterProp: 'value',
  184. autoClearSearchValue: true,
  185. showCheckedStrategy: _strategyUtil.SHOW_CHILD,
  186. listHeight: 200,
  187. listItemHeight: 20,
  188. prefixCls: 'vc-tree-select'
  189. }),
  190. setup: function setup(props, _ref) {
  191. var attrs = _ref.attrs,
  192. expose = _ref.expose,
  193. slots = _ref.slots;
  194. var mergedId = (0, _useId.default)((0, _vue.toRef)(props, 'id'));
  195. var treeConduction = (0, _vue.computed)(function () {
  196. return props.treeCheckable && !props.treeCheckStrictly;
  197. });
  198. var mergedCheckable = (0, _vue.computed)(function () {
  199. return props.treeCheckable || props.treeCheckStrictly;
  200. });
  201. var mergedLabelInValue = (0, _vue.computed)(function () {
  202. return props.treeCheckStrictly || props.labelInValue;
  203. });
  204. var mergedMultiple = (0, _vue.computed)(function () {
  205. return mergedCheckable.value || props.multiple;
  206. });
  207. // ========================== Warning ===========================
  208. if (process.env.NODE_ENV !== 'production') {
  209. (0, _vue.watchEffect)(function () {
  210. (0, _warningPropsUtil.default)(props);
  211. });
  212. }
  213. // ========================= FieldNames =========================
  214. var mergedFieldNames = (0, _vue.computed)(function () {
  215. return (0, _valueUtil.fillFieldNames)(props.fieldNames);
  216. });
  217. // =========================== Search ===========================
  218. var _useMergedState = (0, _useMergedState5.default)('', {
  219. value: (0, _vue.computed)(function () {
  220. return props.searchValue !== undefined ? props.searchValue : props.inputValue;
  221. }),
  222. postState: function postState(search) {
  223. return search || '';
  224. }
  225. }),
  226. _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
  227. mergedSearchValue = _useMergedState2[0],
  228. setSearchValue = _useMergedState2[1];
  229. var onInternalSearch = function onInternalSearch(searchText) {
  230. var _props$onSearch;
  231. setSearchValue(searchText);
  232. (_props$onSearch = props.onSearch) === null || _props$onSearch === void 0 ? void 0 : _props$onSearch.call(props, searchText);
  233. };
  234. // ============================ Data ============================
  235. // `useTreeData` only do convert of `children` or `simpleMode`.
  236. // Else will return origin `treeData` for perf consideration.
  237. // Do not do anything to loop the data.
  238. var mergedTreeData = (0, _useTreeData.default)((0, _vue.toRef)(props, 'treeData'), (0, _vue.toRef)(props, 'children'), (0, _vue.toRef)(props, 'treeDataSimpleMode'));
  239. var _useDataEntities = (0, _useDataEntities2.default)(mergedTreeData, mergedFieldNames),
  240. keyEntities = _useDataEntities.keyEntities,
  241. valueEntities = _useDataEntities.valueEntities;
  242. /** Get `missingRawValues` which not exist in the tree yet */
  243. var splitRawValues = function splitRawValues(newRawValues) {
  244. var missingRawValues = [];
  245. var existRawValues = [];
  246. // Keep missing value in the cache
  247. newRawValues.forEach(function (val) {
  248. if (valueEntities.value.has(val)) {
  249. existRawValues.push(val);
  250. } else {
  251. missingRawValues.push(val);
  252. }
  253. });
  254. return {
  255. missingRawValues: missingRawValues,
  256. existRawValues: existRawValues
  257. };
  258. };
  259. // Filtered Tree
  260. var filteredTreeData = (0, _useFilterTreeData.default)(mergedTreeData, mergedSearchValue, {
  261. fieldNames: mergedFieldNames,
  262. treeNodeFilterProp: (0, _vue.toRef)(props, 'treeNodeFilterProp'),
  263. filterTreeNode: (0, _vue.toRef)(props, 'filterTreeNode')
  264. });
  265. // =========================== Label ============================
  266. var getLabel = function getLabel(item) {
  267. if (item) {
  268. if (props.treeNodeLabelProp) {
  269. return item[props.treeNodeLabelProp];
  270. }
  271. // Loop from fieldNames
  272. var titleList = mergedFieldNames.value._title;
  273. for (var i = 0; i < titleList.length; i += 1) {
  274. var title = item[titleList[i]];
  275. if (title !== undefined) {
  276. return title;
  277. }
  278. }
  279. }
  280. };
  281. // ========================= Wrap Value =========================
  282. var toLabeledValues = function toLabeledValues(draftValues) {
  283. var values = (0, _valueUtil.toArray)(draftValues);
  284. return values.map(function (val) {
  285. if (isRawValue(val)) {
  286. return {
  287. value: val
  288. };
  289. }
  290. return val;
  291. });
  292. };
  293. var convert2LabelValues = function convert2LabelValues(draftValues) {
  294. var values = toLabeledValues(draftValues);
  295. return values.map(function (item) {
  296. var rawLabel = item.label;
  297. var rawValue = item.value,
  298. rawHalfChecked = item.halfChecked;
  299. var rawDisabled;
  300. var entity = valueEntities.value.get(rawValue);
  301. // Fill missing label & status
  302. if (entity) {
  303. var _rawLabel;
  304. rawLabel = (_rawLabel = rawLabel) !== null && _rawLabel !== void 0 ? _rawLabel : getLabel(entity.node);
  305. rawDisabled = entity.node.disabled;
  306. }
  307. return {
  308. label: rawLabel,
  309. value: rawValue,
  310. halfChecked: rawHalfChecked,
  311. disabled: rawDisabled
  312. };
  313. });
  314. };
  315. // =========================== Values ===========================
  316. var _useMergedState3 = (0, _useMergedState5.default)(props.defaultValue, {
  317. value: (0, _vue.toRef)(props, 'value')
  318. }),
  319. _useMergedState4 = (0, _slicedToArray2.default)(_useMergedState3, 2),
  320. internalValue = _useMergedState4[0],
  321. setInternalValue = _useMergedState4[1];
  322. var rawMixedLabeledValues = (0, _vue.computed)(function () {
  323. return toLabeledValues(internalValue.value);
  324. });
  325. // Split value into full check and half check
  326. var rawLabeledValues = (0, _vue.shallowRef)([]);
  327. var rawHalfLabeledValues = (0, _vue.shallowRef)([]);
  328. (0, _vue.watchEffect)(function () {
  329. var fullCheckValues = [];
  330. var halfCheckValues = [];
  331. rawMixedLabeledValues.value.forEach(function (item) {
  332. if (item.halfChecked) {
  333. halfCheckValues.push(item);
  334. } else {
  335. fullCheckValues.push(item);
  336. }
  337. });
  338. rawLabeledValues.value = fullCheckValues;
  339. rawHalfLabeledValues.value = halfCheckValues;
  340. });
  341. // const [mergedValues] = useCache(rawLabeledValues);
  342. var rawValues = (0, _vue.computed)(function () {
  343. return rawLabeledValues.value.map(function (item) {
  344. return item.value;
  345. });
  346. });
  347. var _useMaxLevel = (0, _useMaxLevel2.default)(keyEntities),
  348. maxLevel = _useMaxLevel.maxLevel,
  349. levelEntities = _useMaxLevel.levelEntities;
  350. // Convert value to key. Will fill missed keys for conduct check.
  351. var _useCheckedKeys = (0, _useCheckedKeys3.default)(rawLabeledValues, rawHalfLabeledValues, treeConduction, keyEntities, maxLevel, levelEntities),
  352. _useCheckedKeys2 = (0, _slicedToArray2.default)(_useCheckedKeys, 2),
  353. rawCheckedValues = _useCheckedKeys2[0],
  354. rawHalfCheckedValues = _useCheckedKeys2[1];
  355. // Convert rawCheckedKeys to check strategy related values
  356. var displayValues = (0, _vue.computed)(function () {
  357. // Collect keys which need to show
  358. var displayKeys = (0, _strategyUtil.formatStrategyValues)(rawCheckedValues.value, props.showCheckedStrategy, keyEntities.value, mergedFieldNames.value);
  359. // Convert to value and filled with label
  360. var values = displayKeys.map(function (key) {
  361. var _keyEntities$value$ke, _keyEntities$value$ke2, _keyEntities$value$ke3;
  362. return (_keyEntities$value$ke = (_keyEntities$value$ke2 = keyEntities.value[key]) === null || _keyEntities$value$ke2 === void 0 ? void 0 : (_keyEntities$value$ke3 = _keyEntities$value$ke2.node) === null || _keyEntities$value$ke3 === void 0 ? void 0 : _keyEntities$value$ke3[mergedFieldNames.value.value]) !== null && _keyEntities$value$ke !== void 0 ? _keyEntities$value$ke : key;
  363. });
  364. // Back fill with origin label
  365. var labeledValues = values.map(function (val) {
  366. var targetItem = rawLabeledValues.value.find(function (item) {
  367. return item.value === val;
  368. });
  369. return {
  370. value: val,
  371. label: targetItem === null || targetItem === void 0 ? void 0 : targetItem.label
  372. };
  373. });
  374. var rawDisplayValues = convert2LabelValues(labeledValues);
  375. var firstVal = rawDisplayValues[0];
  376. if (!mergedMultiple.value && firstVal && (0, _valueUtil.isNil)(firstVal.value) && (0, _valueUtil.isNil)(firstVal.label)) {
  377. return [];
  378. }
  379. return rawDisplayValues.map(function (item) {
  380. var _item$label;
  381. return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
  382. label: (_item$label = item.label) !== null && _item$label !== void 0 ? _item$label : item.value
  383. });
  384. });
  385. });
  386. var _useCache = (0, _useCache3.default)(displayValues),
  387. _useCache2 = (0, _slicedToArray2.default)(_useCache, 1),
  388. cachedDisplayValues = _useCache2[0];
  389. // =========================== Change ===========================
  390. var triggerChange = function triggerChange(newRawValues, extra, source) {
  391. var labeledValues = convert2LabelValues(newRawValues);
  392. setInternalValue(labeledValues);
  393. // Clean up if needed
  394. if (props.autoClearSearchValue) {
  395. setSearchValue('');
  396. }
  397. // Generate rest parameters is costly, so only do it when necessary
  398. if (props.onChange) {
  399. var eventValues = newRawValues;
  400. if (treeConduction.value) {
  401. var formattedKeyList = (0, _strategyUtil.formatStrategyValues)(newRawValues, props.showCheckedStrategy, keyEntities.value, mergedFieldNames.value);
  402. eventValues = formattedKeyList.map(function (key) {
  403. var entity = valueEntities.value.get(key);
  404. return entity ? entity.node[mergedFieldNames.value.value] : key;
  405. });
  406. }
  407. var _ref2 = extra || {
  408. triggerValue: undefined,
  409. selected: undefined
  410. },
  411. triggerValue = _ref2.triggerValue,
  412. selected = _ref2.selected;
  413. var returnRawValues = eventValues;
  414. // We need fill half check back
  415. if (props.treeCheckStrictly) {
  416. var halfValues = rawHalfLabeledValues.value.filter(function (item) {
  417. return !eventValues.includes(item.value);
  418. });
  419. returnRawValues = [].concat((0, _toConsumableArray2.default)(returnRawValues), (0, _toConsumableArray2.default)(halfValues));
  420. }
  421. var returnLabeledValues = convert2LabelValues(returnRawValues);
  422. var additionalInfo = {
  423. // [Legacy] Always return as array contains label & value
  424. preValue: rawLabeledValues.value,
  425. triggerValue: triggerValue
  426. };
  427. // [Legacy] Fill legacy data if user query.
  428. // This is expansive that we only fill when user query
  429. // https://github.com/react-component/tree-select/blob/fe33eb7c27830c9ac70cd1fdb1ebbe7bc679c16a/src/Select.jsx
  430. var showPosition = true;
  431. if (props.treeCheckStrictly || source === 'selection' && !selected) {
  432. showPosition = false;
  433. }
  434. (0, _legacyUtil.fillAdditionalInfo)(additionalInfo, triggerValue, newRawValues, mergedTreeData.value, showPosition, mergedFieldNames.value);
  435. if (mergedCheckable.value) {
  436. additionalInfo.checked = selected;
  437. } else {
  438. additionalInfo.selected = selected;
  439. }
  440. var returnValues = mergedLabelInValue.value ? returnLabeledValues : returnLabeledValues.map(function (item) {
  441. return item.value;
  442. });
  443. props.onChange(mergedMultiple.value ? returnValues : returnValues[0], mergedLabelInValue.value ? null : returnLabeledValues.map(function (item) {
  444. return item.label;
  445. }), additionalInfo);
  446. }
  447. };
  448. // ========================== Options ===========================
  449. /** Trigger by option list */
  450. var onOptionSelect = function onOptionSelect(selectedKey, _ref3) {
  451. var _node$mergedFieldName;
  452. var selected = _ref3.selected,
  453. source = _ref3.source;
  454. var keyEntitiesValue = (0, _vue.toRaw)(keyEntities.value);
  455. var valueEntitiesValue = (0, _vue.toRaw)(valueEntities.value);
  456. var entity = keyEntitiesValue[selectedKey];
  457. var node = entity === null || entity === void 0 ? void 0 : entity.node;
  458. var selectedValue = (_node$mergedFieldName = node === null || node === void 0 ? void 0 : node[mergedFieldNames.value.value]) !== null && _node$mergedFieldName !== void 0 ? _node$mergedFieldName : selectedKey;
  459. // Never be falsy but keep it safe
  460. if (!mergedMultiple.value) {
  461. // Single mode always set value
  462. triggerChange([selectedValue], {
  463. selected: true,
  464. triggerValue: selectedValue
  465. }, 'option');
  466. } else {
  467. var newRawValues = selected ? [].concat((0, _toConsumableArray2.default)(rawValues.value), [selectedValue]) : rawCheckedValues.value.filter(function (v) {
  468. return v !== selectedValue;
  469. });
  470. // Add keys if tree conduction
  471. if (treeConduction.value) {
  472. // Should keep missing values
  473. var _splitRawValues = splitRawValues(newRawValues),
  474. missingRawValues = _splitRawValues.missingRawValues,
  475. existRawValues = _splitRawValues.existRawValues;
  476. var keyList = existRawValues.map(function (val) {
  477. return valueEntitiesValue.get(val).key;
  478. });
  479. // Conduction by selected or not
  480. var checkedKeys;
  481. if (selected) {
  482. var _conductCheck = (0, _conductUtil.conductCheck)(keyList, true, keyEntitiesValue, maxLevel.value, levelEntities.value);
  483. checkedKeys = _conductCheck.checkedKeys;
  484. } else {
  485. var _conductCheck2 = (0, _conductUtil.conductCheck)(keyList, {
  486. checked: false,
  487. halfCheckedKeys: rawHalfCheckedValues.value
  488. }, keyEntitiesValue, maxLevel.value, levelEntities.value);
  489. checkedKeys = _conductCheck2.checkedKeys;
  490. }
  491. // Fill back of keys
  492. newRawValues = [].concat((0, _toConsumableArray2.default)(missingRawValues), (0, _toConsumableArray2.default)(checkedKeys.map(function (key) {
  493. return keyEntitiesValue[key].node[mergedFieldNames.value.value];
  494. })));
  495. }
  496. triggerChange(newRawValues, {
  497. selected: selected,
  498. triggerValue: selectedValue
  499. }, source || 'option');
  500. }
  501. // Trigger select event
  502. if (selected || !mergedMultiple.value) {
  503. var _props$onSelect;
  504. (_props$onSelect = props.onSelect) === null || _props$onSelect === void 0 ? void 0 : _props$onSelect.call(props, selectedValue, (0, _legacyUtil.fillLegacyProps)(node));
  505. } else {
  506. var _props$onDeselect;
  507. (_props$onDeselect = props.onDeselect) === null || _props$onDeselect === void 0 ? void 0 : _props$onDeselect.call(props, selectedValue, (0, _legacyUtil.fillLegacyProps)(node));
  508. }
  509. };
  510. // ========================== Dropdown ==========================
  511. var onInternalDropdownVisibleChange = function onInternalDropdownVisibleChange(open) {
  512. if (props.onDropdownVisibleChange) {
  513. var legacyParam = {};
  514. Object.defineProperty(legacyParam, 'documentClickClose', {
  515. get: function get() {
  516. (0, _warning.warning)(false, 'Second param of `onDropdownVisibleChange` has been removed.');
  517. return false;
  518. }
  519. });
  520. props.onDropdownVisibleChange(open, legacyParam);
  521. }
  522. };
  523. // ====================== Display Change ========================
  524. var onDisplayValuesChange = function onDisplayValuesChange(newValues, info) {
  525. var newRawValues = newValues.map(function (item) {
  526. return item.value;
  527. });
  528. if (info.type === 'clear') {
  529. triggerChange(newRawValues, {}, 'selection');
  530. return;
  531. }
  532. // TreeSelect only have multiple mode which means display change only has remove
  533. if (info.values.length) {
  534. onOptionSelect(info.values[0].value, {
  535. selected: false,
  536. source: 'selection'
  537. });
  538. }
  539. };
  540. var _toRefs = (0, _vue.toRefs)(props),
  541. treeNodeFilterProp = _toRefs.treeNodeFilterProp,
  542. loadData = _toRefs.loadData,
  543. treeLoadedKeys = _toRefs.treeLoadedKeys,
  544. onTreeLoad = _toRefs.onTreeLoad,
  545. treeDefaultExpandAll = _toRefs.treeDefaultExpandAll,
  546. treeExpandedKeys = _toRefs.treeExpandedKeys,
  547. treeDefaultExpandedKeys = _toRefs.treeDefaultExpandedKeys,
  548. onTreeExpand = _toRefs.onTreeExpand,
  549. virtual = _toRefs.virtual,
  550. listHeight = _toRefs.listHeight,
  551. listItemHeight = _toRefs.listItemHeight,
  552. treeLine = _toRefs.treeLine,
  553. treeIcon = _toRefs.treeIcon,
  554. showTreeIcon = _toRefs.showTreeIcon,
  555. switcherIcon = _toRefs.switcherIcon,
  556. treeMotion = _toRefs.treeMotion,
  557. customSlots = _toRefs.customSlots;
  558. _vue.toRaw;
  559. (0, _LegacyContext.useProvideLegacySelectContext)((0, _toReactive.toReactive)({
  560. checkable: mergedCheckable,
  561. loadData: loadData,
  562. treeLoadedKeys: treeLoadedKeys,
  563. onTreeLoad: onTreeLoad,
  564. checkedKeys: rawCheckedValues,
  565. halfCheckedKeys: rawHalfCheckedValues,
  566. treeDefaultExpandAll: treeDefaultExpandAll,
  567. treeExpandedKeys: treeExpandedKeys,
  568. treeDefaultExpandedKeys: treeDefaultExpandedKeys,
  569. onTreeExpand: onTreeExpand,
  570. treeIcon: treeIcon,
  571. treeMotion: treeMotion,
  572. showTreeIcon: showTreeIcon,
  573. switcherIcon: switcherIcon,
  574. treeLine: treeLine,
  575. treeNodeFilterProp: treeNodeFilterProp,
  576. keyEntities: keyEntities,
  577. customSlots: customSlots
  578. }));
  579. (0, _TreeSelectContext.useProvideSelectContext)((0, _toReactive.toReactive)({
  580. virtual: virtual,
  581. listHeight: listHeight,
  582. listItemHeight: listItemHeight,
  583. treeData: filteredTreeData,
  584. fieldNames: mergedFieldNames,
  585. onSelect: onOptionSelect
  586. }));
  587. var selectRef = (0, _vue.ref)();
  588. expose({
  589. focus: function focus() {
  590. var _selectRef$value;
  591. (_selectRef$value = selectRef.value) === null || _selectRef$value === void 0 ? void 0 : _selectRef$value.focus();
  592. },
  593. blur: function blur() {
  594. var _selectRef$value2;
  595. (_selectRef$value2 = selectRef.value) === null || _selectRef$value2 === void 0 ? void 0 : _selectRef$value2.blur();
  596. },
  597. scrollTo: function scrollTo(arg) {
  598. var _selectRef$value3;
  599. (_selectRef$value3 = selectRef.value) === null || _selectRef$value3 === void 0 ? void 0 : _selectRef$value3.scrollTo(arg);
  600. }
  601. });
  602. return function () {
  603. var _props$dropdownMatchS;
  604. var restProps = (0, _omit.default)(props, ['id', 'prefixCls',
  605. // Value
  606. 'value', 'defaultValue', 'onChange', 'onSelect', 'onDeselect',
  607. // Search
  608. 'searchValue', 'inputValue', 'onSearch', 'autoClearSearchValue', 'filterTreeNode', 'treeNodeFilterProp',
  609. // Selector
  610. 'showCheckedStrategy', 'treeNodeLabelProp',
  611. // Mode
  612. 'multiple', 'treeCheckable', 'treeCheckStrictly', 'labelInValue',
  613. // FieldNames
  614. 'fieldNames',
  615. // Data
  616. 'treeDataSimpleMode', 'treeData', 'children', 'loadData', 'treeLoadedKeys', 'onTreeLoad',
  617. // Expanded
  618. 'treeDefaultExpandAll', 'treeExpandedKeys', 'treeDefaultExpandedKeys', 'onTreeExpand',
  619. // Options
  620. 'virtual', 'listHeight', 'listItemHeight', 'onDropdownVisibleChange',
  621. // Tree
  622. 'treeLine', 'treeIcon', 'showTreeIcon', 'switcherIcon', 'treeMotion']);
  623. return (0, _vue.createVNode)(_vcSelect.BaseSelect, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({
  624. "ref": selectRef
  625. }, attrs), restProps), {}, {
  626. "id": mergedId,
  627. "prefixCls": props.prefixCls,
  628. "mode": mergedMultiple.value ? 'multiple' : undefined,
  629. "displayValues": cachedDisplayValues.value,
  630. "onDisplayValuesChange": onDisplayValuesChange,
  631. "searchValue": mergedSearchValue.value,
  632. "onSearch": onInternalSearch,
  633. "OptionList": _OptionList.default,
  634. "emptyOptions": !mergedTreeData.value.length,
  635. "onDropdownVisibleChange": onInternalDropdownVisibleChange,
  636. "tagRender": props.tagRender || slots.tagRender,
  637. "dropdownMatchSelectWidth": (_props$dropdownMatchS = props.dropdownMatchSelectWidth) !== null && _props$dropdownMatchS !== void 0 ? _props$dropdownMatchS : true
  638. }), slots);
  639. };
  640. }
  641. });
  642. exports.default = _default;