TreeSelect.js 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
  3. var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
  4. Object.defineProperty(exports, "__esModule", {
  5. value: true
  6. });
  7. exports.default = void 0;
  8. var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
  9. var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
  10. var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
  11. var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
  12. var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
  13. var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
  14. var _rcSelect = require("rc-select");
  15. var _useId = _interopRequireDefault(require("rc-select/lib/hooks/useId"));
  16. var _conductUtil = require("rc-tree/lib/utils/conductUtil");
  17. var _useMergedState5 = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
  18. var _warning = _interopRequireDefault(require("rc-util/lib/warning"));
  19. var React = _interopRequireWildcard(require("react"));
  20. var _useCache3 = _interopRequireDefault(require("./hooks/useCache"));
  21. var _useCheckedKeys3 = _interopRequireDefault(require("./hooks/useCheckedKeys"));
  22. var _useDataEntities2 = _interopRequireDefault(require("./hooks/useDataEntities"));
  23. var _useFilterTreeData = _interopRequireDefault(require("./hooks/useFilterTreeData"));
  24. var _useRefFunc = _interopRequireDefault(require("./hooks/useRefFunc"));
  25. var _useTreeData = _interopRequireDefault(require("./hooks/useTreeData"));
  26. var _LegacyContext = _interopRequireDefault(require("./LegacyContext"));
  27. var _OptionList = _interopRequireDefault(require("./OptionList"));
  28. var _TreeNode = _interopRequireDefault(require("./TreeNode"));
  29. var _TreeSelectContext = _interopRequireDefault(require("./TreeSelectContext"));
  30. var _legacyUtil = require("./utils/legacyUtil");
  31. var _strategyUtil = require("./utils/strategyUtil");
  32. var _valueUtil = require("./utils/valueUtil");
  33. var _warningPropsUtil = _interopRequireDefault(require("./utils/warningPropsUtil"));
  34. var _excluded = ["id", "prefixCls", "value", "defaultValue", "onChange", "onSelect", "onDeselect", "searchValue", "inputValue", "onSearch", "autoClearSearchValue", "filterTreeNode", "treeNodeFilterProp", "showCheckedStrategy", "treeNodeLabelProp", "multiple", "treeCheckable", "treeCheckStrictly", "labelInValue", "maxCount", "fieldNames", "treeDataSimpleMode", "treeData", "children", "loadData", "treeLoadedKeys", "onTreeLoad", "treeDefaultExpandAll", "treeExpandedKeys", "treeDefaultExpandedKeys", "onTreeExpand", "treeExpandAction", "virtual", "listHeight", "listItemHeight", "listItemScrollOffset", "onDropdownVisibleChange", "dropdownMatchSelectWidth", "treeLine", "treeIcon", "showTreeIcon", "switcherIcon", "treeMotion", "treeTitleRender", "onPopupScroll"];
  35. function isRawValue(value) {
  36. return !value || (0, _typeof2.default)(value) !== 'object';
  37. }
  38. var TreeSelect = /*#__PURE__*/React.forwardRef(function (props, ref) {
  39. var id = props.id,
  40. _props$prefixCls = props.prefixCls,
  41. prefixCls = _props$prefixCls === void 0 ? 'rc-tree-select' : _props$prefixCls,
  42. value = props.value,
  43. defaultValue = props.defaultValue,
  44. onChange = props.onChange,
  45. onSelect = props.onSelect,
  46. onDeselect = props.onDeselect,
  47. searchValue = props.searchValue,
  48. inputValue = props.inputValue,
  49. onSearch = props.onSearch,
  50. _props$autoClearSearc = props.autoClearSearchValue,
  51. autoClearSearchValue = _props$autoClearSearc === void 0 ? true : _props$autoClearSearc,
  52. filterTreeNode = props.filterTreeNode,
  53. _props$treeNodeFilter = props.treeNodeFilterProp,
  54. treeNodeFilterProp = _props$treeNodeFilter === void 0 ? 'value' : _props$treeNodeFilter,
  55. showCheckedStrategy = props.showCheckedStrategy,
  56. treeNodeLabelProp = props.treeNodeLabelProp,
  57. multiple = props.multiple,
  58. treeCheckable = props.treeCheckable,
  59. treeCheckStrictly = props.treeCheckStrictly,
  60. labelInValue = props.labelInValue,
  61. maxCount = props.maxCount,
  62. fieldNames = props.fieldNames,
  63. treeDataSimpleMode = props.treeDataSimpleMode,
  64. treeData = props.treeData,
  65. children = props.children,
  66. loadData = props.loadData,
  67. treeLoadedKeys = props.treeLoadedKeys,
  68. onTreeLoad = props.onTreeLoad,
  69. treeDefaultExpandAll = props.treeDefaultExpandAll,
  70. treeExpandedKeys = props.treeExpandedKeys,
  71. treeDefaultExpandedKeys = props.treeDefaultExpandedKeys,
  72. onTreeExpand = props.onTreeExpand,
  73. treeExpandAction = props.treeExpandAction,
  74. virtual = props.virtual,
  75. _props$listHeight = props.listHeight,
  76. listHeight = _props$listHeight === void 0 ? 200 : _props$listHeight,
  77. _props$listItemHeight = props.listItemHeight,
  78. listItemHeight = _props$listItemHeight === void 0 ? 20 : _props$listItemHeight,
  79. _props$listItemScroll = props.listItemScrollOffset,
  80. listItemScrollOffset = _props$listItemScroll === void 0 ? 0 : _props$listItemScroll,
  81. onDropdownVisibleChange = props.onDropdownVisibleChange,
  82. _props$dropdownMatchS = props.dropdownMatchSelectWidth,
  83. dropdownMatchSelectWidth = _props$dropdownMatchS === void 0 ? true : _props$dropdownMatchS,
  84. treeLine = props.treeLine,
  85. treeIcon = props.treeIcon,
  86. showTreeIcon = props.showTreeIcon,
  87. switcherIcon = props.switcherIcon,
  88. treeMotion = props.treeMotion,
  89. treeTitleRender = props.treeTitleRender,
  90. onPopupScroll = props.onPopupScroll,
  91. restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
  92. var mergedId = (0, _useId.default)(id);
  93. var treeConduction = treeCheckable && !treeCheckStrictly;
  94. var mergedCheckable = treeCheckable || treeCheckStrictly;
  95. var mergedLabelInValue = treeCheckStrictly || labelInValue;
  96. var mergedMultiple = mergedCheckable || multiple;
  97. var _useMergedState = (0, _useMergedState5.default)(defaultValue, {
  98. value: value
  99. }),
  100. _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
  101. internalValue = _useMergedState2[0],
  102. setInternalValue = _useMergedState2[1];
  103. // `multiple` && `!treeCheckable` should be show all
  104. var mergedShowCheckedStrategy = React.useMemo(function () {
  105. if (!treeCheckable) {
  106. return _strategyUtil.SHOW_ALL;
  107. }
  108. return showCheckedStrategy || _strategyUtil.SHOW_CHILD;
  109. }, [showCheckedStrategy, treeCheckable]);
  110. // ========================== Warning ===========================
  111. if (process.env.NODE_ENV !== 'production') {
  112. (0, _warningPropsUtil.default)(props);
  113. }
  114. // ========================= FieldNames =========================
  115. var mergedFieldNames = React.useMemo(function () {
  116. return (0, _valueUtil.fillFieldNames)(fieldNames);
  117. }, /* eslint-disable react-hooks/exhaustive-deps */
  118. [JSON.stringify(fieldNames)]
  119. /* eslint-enable react-hooks/exhaustive-deps */);
  120. // =========================== Search ===========================
  121. var _useMergedState3 = (0, _useMergedState5.default)('', {
  122. value: searchValue !== undefined ? searchValue : inputValue,
  123. postState: function postState(search) {
  124. return search || '';
  125. }
  126. }),
  127. _useMergedState4 = (0, _slicedToArray2.default)(_useMergedState3, 2),
  128. mergedSearchValue = _useMergedState4[0],
  129. setSearchValue = _useMergedState4[1];
  130. var onInternalSearch = function onInternalSearch(searchText) {
  131. setSearchValue(searchText);
  132. onSearch === null || onSearch === void 0 || onSearch(searchText);
  133. };
  134. // ============================ Data ============================
  135. // `useTreeData` only do convert of `children` or `simpleMode`.
  136. // Else will return origin `treeData` for perf consideration.
  137. // Do not do anything to loop the data.
  138. var mergedTreeData = (0, _useTreeData.default)(treeData, children, treeDataSimpleMode);
  139. var _useDataEntities = (0, _useDataEntities2.default)(mergedTreeData, mergedFieldNames),
  140. keyEntities = _useDataEntities.keyEntities,
  141. valueEntities = _useDataEntities.valueEntities;
  142. /** Get `missingRawValues` which not exist in the tree yet */
  143. var splitRawValues = React.useCallback(function (newRawValues) {
  144. var missingRawValues = [];
  145. var existRawValues = [];
  146. // Keep missing value in the cache
  147. newRawValues.forEach(function (val) {
  148. if (valueEntities.has(val)) {
  149. existRawValues.push(val);
  150. } else {
  151. missingRawValues.push(val);
  152. }
  153. });
  154. return {
  155. missingRawValues: missingRawValues,
  156. existRawValues: existRawValues
  157. };
  158. }, [valueEntities]);
  159. // Filtered Tree
  160. var filteredTreeData = (0, _useFilterTreeData.default)(mergedTreeData, mergedSearchValue, {
  161. fieldNames: mergedFieldNames,
  162. treeNodeFilterProp: treeNodeFilterProp,
  163. filterTreeNode: filterTreeNode
  164. });
  165. // =========================== Label ============================
  166. var getLabel = React.useCallback(function (item) {
  167. if (item) {
  168. if (treeNodeLabelProp) {
  169. return item[treeNodeLabelProp];
  170. }
  171. // Loop from fieldNames
  172. var titleList = mergedFieldNames._title;
  173. for (var i = 0; i < titleList.length; i += 1) {
  174. var title = item[titleList[i]];
  175. if (title !== undefined) {
  176. return title;
  177. }
  178. }
  179. }
  180. }, [mergedFieldNames, treeNodeLabelProp]);
  181. // ========================= Wrap Value =========================
  182. var toLabeledValues = React.useCallback(function (draftValues) {
  183. var values = (0, _valueUtil.toArray)(draftValues);
  184. return values.map(function (val) {
  185. if (isRawValue(val)) {
  186. return {
  187. value: val
  188. };
  189. }
  190. return val;
  191. });
  192. }, []);
  193. var convert2LabelValues = React.useCallback(function (draftValues) {
  194. var values = toLabeledValues(draftValues);
  195. return values.map(function (item) {
  196. var rawLabel = item.label;
  197. var rawValue = item.value,
  198. rawHalfChecked = item.halfChecked;
  199. var rawDisabled;
  200. var entity = valueEntities.get(rawValue);
  201. // Fill missing label & status
  202. if (entity) {
  203. var _rawLabel;
  204. rawLabel = treeTitleRender ? treeTitleRender(entity.node) : (_rawLabel = rawLabel) !== null && _rawLabel !== void 0 ? _rawLabel : getLabel(entity.node);
  205. rawDisabled = entity.node.disabled;
  206. } else if (rawLabel === undefined) {
  207. // We try to find in current `labelInValue` value
  208. var labelInValueItem = toLabeledValues(internalValue).find(function (labeledItem) {
  209. return labeledItem.value === rawValue;
  210. });
  211. rawLabel = labelInValueItem.label;
  212. }
  213. return {
  214. label: rawLabel,
  215. value: rawValue,
  216. halfChecked: rawHalfChecked,
  217. disabled: rawDisabled
  218. };
  219. });
  220. }, [valueEntities, getLabel, toLabeledValues, internalValue]);
  221. // =========================== Values ===========================
  222. var rawMixedLabeledValues = React.useMemo(function () {
  223. return toLabeledValues(internalValue === null ? [] : internalValue);
  224. }, [toLabeledValues, internalValue]);
  225. // Split value into full check and half check
  226. var _React$useMemo = React.useMemo(function () {
  227. var fullCheckValues = [];
  228. var halfCheckValues = [];
  229. rawMixedLabeledValues.forEach(function (item) {
  230. if (item.halfChecked) {
  231. halfCheckValues.push(item);
  232. } else {
  233. fullCheckValues.push(item);
  234. }
  235. });
  236. return [fullCheckValues, halfCheckValues];
  237. }, [rawMixedLabeledValues]),
  238. _React$useMemo2 = (0, _slicedToArray2.default)(_React$useMemo, 2),
  239. rawLabeledValues = _React$useMemo2[0],
  240. rawHalfLabeledValues = _React$useMemo2[1];
  241. // const [mergedValues] = useCache(rawLabeledValues);
  242. var rawValues = React.useMemo(function () {
  243. return rawLabeledValues.map(function (item) {
  244. return item.value;
  245. });
  246. }, [rawLabeledValues]);
  247. // Convert value to key. Will fill missed keys for conduct check.
  248. var _useCheckedKeys = (0, _useCheckedKeys3.default)(rawLabeledValues, rawHalfLabeledValues, treeConduction, keyEntities),
  249. _useCheckedKeys2 = (0, _slicedToArray2.default)(_useCheckedKeys, 2),
  250. rawCheckedValues = _useCheckedKeys2[0],
  251. rawHalfCheckedValues = _useCheckedKeys2[1];
  252. // Convert rawCheckedKeys to check strategy related values
  253. var displayValues = React.useMemo(function () {
  254. // Collect keys which need to show
  255. var displayKeys = (0, _strategyUtil.formatStrategyValues)(rawCheckedValues, mergedShowCheckedStrategy, keyEntities, mergedFieldNames);
  256. // Convert to value and filled with label
  257. var values = displayKeys.map(function (key) {
  258. var _keyEntities$key$node, _keyEntities$key;
  259. return (_keyEntities$key$node = (_keyEntities$key = keyEntities[key]) === null || _keyEntities$key === void 0 || (_keyEntities$key = _keyEntities$key.node) === null || _keyEntities$key === void 0 ? void 0 : _keyEntities$key[mergedFieldNames.value]) !== null && _keyEntities$key$node !== void 0 ? _keyEntities$key$node : key;
  260. });
  261. // Back fill with origin label
  262. var labeledValues = values.map(function (val) {
  263. var targetItem = rawLabeledValues.find(function (item) {
  264. return item.value === val;
  265. });
  266. var label = labelInValue ? targetItem === null || targetItem === void 0 ? void 0 : targetItem.label : treeTitleRender === null || treeTitleRender === void 0 ? void 0 : treeTitleRender(targetItem);
  267. return {
  268. value: val,
  269. label: label
  270. };
  271. });
  272. var rawDisplayValues = convert2LabelValues(labeledValues);
  273. var firstVal = rawDisplayValues[0];
  274. if (!mergedMultiple && firstVal && (0, _valueUtil.isNil)(firstVal.value) && (0, _valueUtil.isNil)(firstVal.label)) {
  275. return [];
  276. }
  277. return rawDisplayValues.map(function (item) {
  278. var _item$label;
  279. return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
  280. label: (_item$label = item.label) !== null && _item$label !== void 0 ? _item$label : item.value
  281. });
  282. });
  283. // eslint-disable-next-line react-hooks/exhaustive-deps
  284. }, [mergedFieldNames, mergedMultiple, rawCheckedValues, rawLabeledValues, convert2LabelValues, mergedShowCheckedStrategy, keyEntities]);
  285. var _useCache = (0, _useCache3.default)(displayValues),
  286. _useCache2 = (0, _slicedToArray2.default)(_useCache, 1),
  287. cachedDisplayValues = _useCache2[0];
  288. // ========================== MaxCount ==========================
  289. var mergedMaxCount = React.useMemo(function () {
  290. if (mergedMultiple && (mergedShowCheckedStrategy === 'SHOW_CHILD' || treeCheckStrictly || !treeCheckable)) {
  291. return maxCount;
  292. }
  293. return null;
  294. }, [maxCount, mergedMultiple, treeCheckStrictly, mergedShowCheckedStrategy, treeCheckable]);
  295. // =========================== Change ===========================
  296. var triggerChange = (0, _useRefFunc.default)(function (newRawValues, extra, source) {
  297. var formattedKeyList = (0, _strategyUtil.formatStrategyValues)(newRawValues, mergedShowCheckedStrategy, keyEntities, mergedFieldNames);
  298. // Not allow pass with `maxCount`
  299. if (mergedMaxCount && formattedKeyList.length > mergedMaxCount) {
  300. return;
  301. }
  302. var labeledValues = convert2LabelValues(newRawValues);
  303. setInternalValue(labeledValues);
  304. // Clean up if needed
  305. if (autoClearSearchValue) {
  306. setSearchValue('');
  307. }
  308. // Generate rest parameters is costly, so only do it when necessary
  309. if (onChange) {
  310. var eventValues = newRawValues;
  311. if (treeConduction) {
  312. eventValues = formattedKeyList.map(function (key) {
  313. var entity = valueEntities.get(key);
  314. return entity ? entity.node[mergedFieldNames.value] : key;
  315. });
  316. }
  317. var _ref = extra || {
  318. triggerValue: undefined,
  319. selected: undefined
  320. },
  321. triggerValue = _ref.triggerValue,
  322. selected = _ref.selected;
  323. var returnRawValues = eventValues;
  324. // We need fill half check back
  325. if (treeCheckStrictly) {
  326. var halfValues = rawHalfLabeledValues.filter(function (item) {
  327. return !eventValues.includes(item.value);
  328. });
  329. returnRawValues = [].concat((0, _toConsumableArray2.default)(returnRawValues), (0, _toConsumableArray2.default)(halfValues));
  330. }
  331. var returnLabeledValues = convert2LabelValues(returnRawValues);
  332. var additionalInfo = {
  333. // [Legacy] Always return as array contains label & value
  334. preValue: rawLabeledValues,
  335. triggerValue: triggerValue
  336. };
  337. // [Legacy] Fill legacy data if user query.
  338. // This is expansive that we only fill when user query
  339. // https://github.com/react-component/tree-select/blob/fe33eb7c27830c9ac70cd1fdb1ebbe7bc679c16a/src/Select.jsx
  340. var showPosition = true;
  341. if (treeCheckStrictly || source === 'selection' && !selected) {
  342. showPosition = false;
  343. }
  344. (0, _legacyUtil.fillAdditionalInfo)(additionalInfo, triggerValue, newRawValues, mergedTreeData, showPosition, mergedFieldNames);
  345. if (mergedCheckable) {
  346. additionalInfo.checked = selected;
  347. } else {
  348. additionalInfo.selected = selected;
  349. }
  350. var returnValues = mergedLabelInValue ? returnLabeledValues : returnLabeledValues.map(function (item) {
  351. return item.value;
  352. });
  353. onChange(mergedMultiple ? returnValues : returnValues[0], mergedLabelInValue ? null : returnLabeledValues.map(function (item) {
  354. return item.label;
  355. }), additionalInfo);
  356. }
  357. });
  358. // ========================== Options ===========================
  359. /** Trigger by option list */
  360. var onOptionSelect = React.useCallback(function (selectedKey, _ref2) {
  361. var _node$mergedFieldName;
  362. var selected = _ref2.selected,
  363. source = _ref2.source;
  364. var entity = keyEntities[selectedKey];
  365. var node = entity === null || entity === void 0 ? void 0 : entity.node;
  366. var selectedValue = (_node$mergedFieldName = node === null || node === void 0 ? void 0 : node[mergedFieldNames.value]) !== null && _node$mergedFieldName !== void 0 ? _node$mergedFieldName : selectedKey;
  367. // Never be falsy but keep it safe
  368. if (!mergedMultiple) {
  369. // Single mode always set value
  370. triggerChange([selectedValue], {
  371. selected: true,
  372. triggerValue: selectedValue
  373. }, 'option');
  374. } else {
  375. var newRawValues = selected ? [].concat((0, _toConsumableArray2.default)(rawValues), [selectedValue]) : rawCheckedValues.filter(function (v) {
  376. return v !== selectedValue;
  377. });
  378. // Add keys if tree conduction
  379. if (treeConduction) {
  380. // Should keep missing values
  381. var _splitRawValues = splitRawValues(newRawValues),
  382. missingRawValues = _splitRawValues.missingRawValues,
  383. existRawValues = _splitRawValues.existRawValues;
  384. var keyList = existRawValues.map(function (val) {
  385. return valueEntities.get(val).key;
  386. });
  387. // Conduction by selected or not
  388. var checkedKeys;
  389. if (selected) {
  390. var _conductCheck = (0, _conductUtil.conductCheck)(keyList, true, keyEntities);
  391. checkedKeys = _conductCheck.checkedKeys;
  392. } else {
  393. var _conductCheck2 = (0, _conductUtil.conductCheck)(keyList, {
  394. checked: false,
  395. halfCheckedKeys: rawHalfCheckedValues
  396. }, keyEntities);
  397. checkedKeys = _conductCheck2.checkedKeys;
  398. }
  399. // Fill back of keys
  400. newRawValues = [].concat((0, _toConsumableArray2.default)(missingRawValues), (0, _toConsumableArray2.default)(checkedKeys.map(function (key) {
  401. return keyEntities[key].node[mergedFieldNames.value];
  402. })));
  403. }
  404. triggerChange(newRawValues, {
  405. selected: selected,
  406. triggerValue: selectedValue
  407. }, source || 'option');
  408. }
  409. // Trigger select event
  410. if (selected || !mergedMultiple) {
  411. onSelect === null || onSelect === void 0 || onSelect(selectedValue, (0, _legacyUtil.fillLegacyProps)(node));
  412. } else {
  413. onDeselect === null || onDeselect === void 0 || onDeselect(selectedValue, (0, _legacyUtil.fillLegacyProps)(node));
  414. }
  415. }, [splitRawValues, valueEntities, keyEntities, mergedFieldNames, mergedMultiple, rawValues, triggerChange, treeConduction, onSelect, onDeselect, rawCheckedValues, rawHalfCheckedValues, maxCount]);
  416. // ========================== Dropdown ==========================
  417. var onInternalDropdownVisibleChange = React.useCallback(function (open) {
  418. if (onDropdownVisibleChange) {
  419. var legacyParam = {};
  420. Object.defineProperty(legacyParam, 'documentClickClose', {
  421. get: function get() {
  422. (0, _warning.default)(false, 'Second param of `onDropdownVisibleChange` has been removed.');
  423. return false;
  424. }
  425. });
  426. onDropdownVisibleChange(open, legacyParam);
  427. }
  428. }, [onDropdownVisibleChange]);
  429. // ====================== Display Change ========================
  430. var onDisplayValuesChange = (0, _useRefFunc.default)(function (newValues, info) {
  431. var newRawValues = newValues.map(function (item) {
  432. return item.value;
  433. });
  434. if (info.type === 'clear') {
  435. triggerChange(newRawValues, {}, 'selection');
  436. return;
  437. }
  438. // TreeSelect only have multiple mode which means display change only has remove
  439. if (info.values.length) {
  440. onOptionSelect(info.values[0].value, {
  441. selected: false,
  442. source: 'selection'
  443. });
  444. }
  445. });
  446. // ========================== Context ===========================
  447. var treeSelectContext = React.useMemo(function () {
  448. return {
  449. virtual: virtual,
  450. dropdownMatchSelectWidth: dropdownMatchSelectWidth,
  451. listHeight: listHeight,
  452. listItemHeight: listItemHeight,
  453. listItemScrollOffset: listItemScrollOffset,
  454. treeData: filteredTreeData,
  455. fieldNames: mergedFieldNames,
  456. onSelect: onOptionSelect,
  457. treeExpandAction: treeExpandAction,
  458. treeTitleRender: treeTitleRender,
  459. onPopupScroll: onPopupScroll,
  460. leftMaxCount: maxCount === undefined ? null : maxCount - cachedDisplayValues.length,
  461. leafCountOnly: mergedShowCheckedStrategy === 'SHOW_CHILD' && !treeCheckStrictly && !!treeCheckable,
  462. valueEntities: valueEntities
  463. };
  464. }, [virtual, dropdownMatchSelectWidth, listHeight, listItemHeight, listItemScrollOffset, filteredTreeData, mergedFieldNames, onOptionSelect, treeExpandAction, treeTitleRender, onPopupScroll, maxCount, cachedDisplayValues.length, mergedShowCheckedStrategy, treeCheckStrictly, treeCheckable, valueEntities]);
  465. // ======================= Legacy Context =======================
  466. var legacyContext = React.useMemo(function () {
  467. return {
  468. checkable: mergedCheckable,
  469. loadData: loadData,
  470. treeLoadedKeys: treeLoadedKeys,
  471. onTreeLoad: onTreeLoad,
  472. checkedKeys: rawCheckedValues,
  473. halfCheckedKeys: rawHalfCheckedValues,
  474. treeDefaultExpandAll: treeDefaultExpandAll,
  475. treeExpandedKeys: treeExpandedKeys,
  476. treeDefaultExpandedKeys: treeDefaultExpandedKeys,
  477. onTreeExpand: onTreeExpand,
  478. treeIcon: treeIcon,
  479. treeMotion: treeMotion,
  480. showTreeIcon: showTreeIcon,
  481. switcherIcon: switcherIcon,
  482. treeLine: treeLine,
  483. treeNodeFilterProp: treeNodeFilterProp,
  484. keyEntities: keyEntities
  485. };
  486. }, [mergedCheckable, loadData, treeLoadedKeys, onTreeLoad, rawCheckedValues, rawHalfCheckedValues, treeDefaultExpandAll, treeExpandedKeys, treeDefaultExpandedKeys, onTreeExpand, treeIcon, treeMotion, showTreeIcon, switcherIcon, treeLine, treeNodeFilterProp, keyEntities]);
  487. // =========================== Render ===========================
  488. return /*#__PURE__*/React.createElement(_TreeSelectContext.default.Provider, {
  489. value: treeSelectContext
  490. }, /*#__PURE__*/React.createElement(_LegacyContext.default.Provider, {
  491. value: legacyContext
  492. }, /*#__PURE__*/React.createElement(_rcSelect.BaseSelect, (0, _extends2.default)({
  493. ref: ref
  494. }, restProps, {
  495. // >>> MISC
  496. id: mergedId,
  497. prefixCls: prefixCls,
  498. mode: mergedMultiple ? 'multiple' : undefined
  499. // >>> Display Value
  500. ,
  501. displayValues: cachedDisplayValues,
  502. onDisplayValuesChange: onDisplayValuesChange
  503. // >>> Search
  504. ,
  505. searchValue: mergedSearchValue,
  506. onSearch: onInternalSearch
  507. // >>> Options
  508. ,
  509. OptionList: _OptionList.default,
  510. emptyOptions: !mergedTreeData.length,
  511. onDropdownVisibleChange: onInternalDropdownVisibleChange,
  512. dropdownMatchSelectWidth: dropdownMatchSelectWidth
  513. }))));
  514. });
  515. // Assign name for Debug
  516. if (process.env.NODE_ENV !== 'production') {
  517. TreeSelect.displayName = 'TreeSelect';
  518. }
  519. var GenericTreeSelect = TreeSelect;
  520. GenericTreeSelect.TreeNode = _TreeNode.default;
  521. GenericTreeSelect.SHOW_ALL = _strategyUtil.SHOW_ALL;
  522. GenericTreeSelect.SHOW_PARENT = _strategyUtil.SHOW_PARENT;
  523. GenericTreeSelect.SHOW_CHILD = _strategyUtil.SHOW_CHILD;
  524. var _default = exports.default = GenericTreeSelect;