Tree.js 48 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193
  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. import _typeof from "@babel/runtime/helpers/esm/typeof";
  3. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  4. import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
  5. import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
  6. import _createClass from "@babel/runtime/helpers/esm/createClass";
  7. import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
  8. import _inherits from "@babel/runtime/helpers/esm/inherits";
  9. import _createSuper from "@babel/runtime/helpers/esm/createSuper";
  10. import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  11. // TODO: https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/treeview/treeview-2/treeview-2a.html
  12. // Fully accessibility support
  13. import classNames from 'classnames';
  14. import KeyCode from "rc-util/es/KeyCode";
  15. import pickAttrs from "rc-util/es/pickAttrs";
  16. import warning from "rc-util/es/warning";
  17. import * as React from 'react';
  18. import { TreeContext } from "./contextTypes";
  19. import DropIndicator from "./DropIndicator";
  20. import NodeList, { MOTION_KEY, MotionEntity } from "./NodeList";
  21. import TreeNode from "./TreeNode";
  22. import { arrAdd, arrDel, calcDropPosition, calcSelectedKeys, conductExpandParent, getDragChildrenKeys, parseCheckedKeys, posToArr } from "./util";
  23. import { conductCheck } from "./utils/conductUtil";
  24. import getEntity from "./utils/keyUtil";
  25. import { convertDataToEntities, convertNodePropsToEventData, convertTreeToData, fillFieldNames, flattenTreeData, getTreeNodeProps, warningWithoutKey } from "./utils/treeUtil";
  26. var MAX_RETRY_TIMES = 10;
  27. var Tree = /*#__PURE__*/function (_React$Component) {
  28. _inherits(Tree, _React$Component);
  29. var _super = _createSuper(Tree);
  30. function Tree() {
  31. var _this;
  32. _classCallCheck(this, Tree);
  33. for (var _len = arguments.length, _args = new Array(_len), _key = 0; _key < _len; _key++) {
  34. _args[_key] = arguments[_key];
  35. }
  36. _this = _super.call.apply(_super, [this].concat(_args));
  37. _defineProperty(_assertThisInitialized(_this), "destroyed", false);
  38. _defineProperty(_assertThisInitialized(_this), "delayedDragEnterLogic", void 0);
  39. _defineProperty(_assertThisInitialized(_this), "loadingRetryTimes", {});
  40. _defineProperty(_assertThisInitialized(_this), "state", {
  41. keyEntities: {},
  42. indent: null,
  43. selectedKeys: [],
  44. checkedKeys: [],
  45. halfCheckedKeys: [],
  46. loadedKeys: [],
  47. loadingKeys: [],
  48. expandedKeys: [],
  49. draggingNodeKey: null,
  50. dragChildrenKeys: [],
  51. // dropTargetKey is the key of abstract-drop-node
  52. // the abstract-drop-node is the real drop node when drag and drop
  53. // not the DOM drag over node
  54. dropTargetKey: null,
  55. dropPosition: null,
  56. // the drop position of abstract-drop-node, inside 0, top -1, bottom 1
  57. dropContainerKey: null,
  58. // the container key of abstract-drop-node if dropPosition is -1 or 1
  59. dropLevelOffset: null,
  60. // the drop level offset of abstract-drag-over-node
  61. dropTargetPos: null,
  62. // the pos of abstract-drop-node
  63. dropAllowed: true,
  64. // if drop to abstract-drop-node is allowed
  65. // the abstract-drag-over-node
  66. // if mouse is on the bottom of top dom node or no the top of the bottom dom node
  67. // abstract-drag-over-node is the top node
  68. dragOverNodeKey: null,
  69. treeData: [],
  70. flattenNodes: [],
  71. focused: false,
  72. activeKey: null,
  73. listChanging: false,
  74. prevProps: null,
  75. fieldNames: fillFieldNames()
  76. });
  77. _defineProperty(_assertThisInitialized(_this), "dragStartMousePosition", null);
  78. _defineProperty(_assertThisInitialized(_this), "dragNodeProps", null);
  79. _defineProperty(_assertThisInitialized(_this), "currentMouseOverDroppableNodeKey", null);
  80. _defineProperty(_assertThisInitialized(_this), "listRef", /*#__PURE__*/React.createRef());
  81. _defineProperty(_assertThisInitialized(_this), "onNodeDragStart", function (event, nodeProps) {
  82. var _this$state = _this.state,
  83. expandedKeys = _this$state.expandedKeys,
  84. keyEntities = _this$state.keyEntities;
  85. var onDragStart = _this.props.onDragStart;
  86. var eventKey = nodeProps.eventKey;
  87. _this.dragNodeProps = nodeProps;
  88. _this.dragStartMousePosition = {
  89. x: event.clientX,
  90. y: event.clientY
  91. };
  92. var newExpandedKeys = arrDel(expandedKeys, eventKey);
  93. _this.setState({
  94. draggingNodeKey: eventKey,
  95. dragChildrenKeys: getDragChildrenKeys(eventKey, keyEntities),
  96. indent: _this.listRef.current.getIndentWidth()
  97. });
  98. _this.setExpandedKeys(newExpandedKeys);
  99. window.addEventListener('dragend', _this.onWindowDragEnd);
  100. onDragStart === null || onDragStart === void 0 || onDragStart({
  101. event: event,
  102. node: convertNodePropsToEventData(nodeProps)
  103. });
  104. });
  105. /**
  106. * [Legacy] Select handler is smaller than node,
  107. * so that this will trigger when drag enter node or select handler.
  108. * This is a little tricky if customize css without padding.
  109. * Better for use mouse move event to refresh drag state.
  110. * But let's just keep it to avoid event trigger logic change.
  111. */
  112. _defineProperty(_assertThisInitialized(_this), "onNodeDragEnter", function (event, nodeProps) {
  113. var _this$state2 = _this.state,
  114. expandedKeys = _this$state2.expandedKeys,
  115. keyEntities = _this$state2.keyEntities,
  116. dragChildrenKeys = _this$state2.dragChildrenKeys,
  117. flattenNodes = _this$state2.flattenNodes,
  118. indent = _this$state2.indent;
  119. var _this$props = _this.props,
  120. onDragEnter = _this$props.onDragEnter,
  121. onExpand = _this$props.onExpand,
  122. allowDrop = _this$props.allowDrop,
  123. direction = _this$props.direction;
  124. var pos = nodeProps.pos,
  125. eventKey = nodeProps.eventKey;
  126. // record the key of node which is latest entered, used in dragleave event.
  127. if (_this.currentMouseOverDroppableNodeKey !== eventKey) {
  128. _this.currentMouseOverDroppableNodeKey = eventKey;
  129. }
  130. if (!_this.dragNodeProps) {
  131. _this.resetDragState();
  132. return;
  133. }
  134. var _calcDropPosition = calcDropPosition(event, _this.dragNodeProps, nodeProps, indent, _this.dragStartMousePosition, allowDrop, flattenNodes, keyEntities, expandedKeys, direction),
  135. dropPosition = _calcDropPosition.dropPosition,
  136. dropLevelOffset = _calcDropPosition.dropLevelOffset,
  137. dropTargetKey = _calcDropPosition.dropTargetKey,
  138. dropContainerKey = _calcDropPosition.dropContainerKey,
  139. dropTargetPos = _calcDropPosition.dropTargetPos,
  140. dropAllowed = _calcDropPosition.dropAllowed,
  141. dragOverNodeKey = _calcDropPosition.dragOverNodeKey;
  142. if (
  143. // don't allow drop inside its children
  144. dragChildrenKeys.includes(dropTargetKey) ||
  145. // don't allow drop when drop is not allowed caculated by calcDropPosition
  146. !dropAllowed) {
  147. _this.resetDragState();
  148. return;
  149. }
  150. // Side effect for delay drag
  151. if (!_this.delayedDragEnterLogic) {
  152. _this.delayedDragEnterLogic = {};
  153. }
  154. Object.keys(_this.delayedDragEnterLogic).forEach(function (key) {
  155. clearTimeout(_this.delayedDragEnterLogic[key]);
  156. });
  157. if (_this.dragNodeProps.eventKey !== nodeProps.eventKey) {
  158. // hoist expand logic here
  159. // since if logic is on the bottom
  160. // it will be blocked by abstract dragover node check
  161. // => if you dragenter from top, you mouse will still be consider as in the top node
  162. event.persist();
  163. _this.delayedDragEnterLogic[pos] = window.setTimeout(function () {
  164. if (_this.state.draggingNodeKey === null) {
  165. return;
  166. }
  167. var newExpandedKeys = _toConsumableArray(expandedKeys);
  168. var entity = getEntity(keyEntities, nodeProps.eventKey);
  169. if (entity && (entity.children || []).length) {
  170. newExpandedKeys = arrAdd(expandedKeys, nodeProps.eventKey);
  171. }
  172. if (!_this.props.hasOwnProperty('expandedKeys')) {
  173. _this.setExpandedKeys(newExpandedKeys);
  174. }
  175. onExpand === null || onExpand === void 0 || onExpand(newExpandedKeys, {
  176. node: convertNodePropsToEventData(nodeProps),
  177. expanded: true,
  178. nativeEvent: event.nativeEvent
  179. });
  180. }, 800);
  181. }
  182. // Skip if drag node is self
  183. if (_this.dragNodeProps.eventKey === dropTargetKey && dropLevelOffset === 0) {
  184. _this.resetDragState();
  185. return;
  186. }
  187. // Update drag over node and drag state
  188. _this.setState({
  189. dragOverNodeKey: dragOverNodeKey,
  190. dropPosition: dropPosition,
  191. dropLevelOffset: dropLevelOffset,
  192. dropTargetKey: dropTargetKey,
  193. dropContainerKey: dropContainerKey,
  194. dropTargetPos: dropTargetPos,
  195. dropAllowed: dropAllowed
  196. });
  197. onDragEnter === null || onDragEnter === void 0 || onDragEnter({
  198. event: event,
  199. node: convertNodePropsToEventData(nodeProps),
  200. expandedKeys: expandedKeys
  201. });
  202. });
  203. _defineProperty(_assertThisInitialized(_this), "onNodeDragOver", function (event, nodeProps) {
  204. var _this$state3 = _this.state,
  205. dragChildrenKeys = _this$state3.dragChildrenKeys,
  206. flattenNodes = _this$state3.flattenNodes,
  207. keyEntities = _this$state3.keyEntities,
  208. expandedKeys = _this$state3.expandedKeys,
  209. indent = _this$state3.indent;
  210. var _this$props2 = _this.props,
  211. onDragOver = _this$props2.onDragOver,
  212. allowDrop = _this$props2.allowDrop,
  213. direction = _this$props2.direction;
  214. if (!_this.dragNodeProps) {
  215. return;
  216. }
  217. var _calcDropPosition2 = calcDropPosition(event, _this.dragNodeProps, nodeProps, indent, _this.dragStartMousePosition, allowDrop, flattenNodes, keyEntities, expandedKeys, direction),
  218. dropPosition = _calcDropPosition2.dropPosition,
  219. dropLevelOffset = _calcDropPosition2.dropLevelOffset,
  220. dropTargetKey = _calcDropPosition2.dropTargetKey,
  221. dropContainerKey = _calcDropPosition2.dropContainerKey,
  222. dropTargetPos = _calcDropPosition2.dropTargetPos,
  223. dropAllowed = _calcDropPosition2.dropAllowed,
  224. dragOverNodeKey = _calcDropPosition2.dragOverNodeKey;
  225. if (dragChildrenKeys.includes(dropTargetKey) || !dropAllowed) {
  226. // don't allow drop inside its children
  227. // don't allow drop when drop is not allowed calculated by calcDropPosition
  228. return;
  229. }
  230. // Update drag position
  231. if (_this.dragNodeProps.eventKey === dropTargetKey && dropLevelOffset === 0) {
  232. if (!(_this.state.dropPosition === null && _this.state.dropLevelOffset === null && _this.state.dropTargetKey === null && _this.state.dropContainerKey === null && _this.state.dropTargetPos === null && _this.state.dropAllowed === false && _this.state.dragOverNodeKey === null)) {
  233. _this.resetDragState();
  234. }
  235. } else if (!(dropPosition === _this.state.dropPosition && dropLevelOffset === _this.state.dropLevelOffset && dropTargetKey === _this.state.dropTargetKey && dropContainerKey === _this.state.dropContainerKey && dropTargetPos === _this.state.dropTargetPos && dropAllowed === _this.state.dropAllowed && dragOverNodeKey === _this.state.dragOverNodeKey)) {
  236. _this.setState({
  237. dropPosition: dropPosition,
  238. dropLevelOffset: dropLevelOffset,
  239. dropTargetKey: dropTargetKey,
  240. dropContainerKey: dropContainerKey,
  241. dropTargetPos: dropTargetPos,
  242. dropAllowed: dropAllowed,
  243. dragOverNodeKey: dragOverNodeKey
  244. });
  245. }
  246. onDragOver === null || onDragOver === void 0 || onDragOver({
  247. event: event,
  248. node: convertNodePropsToEventData(nodeProps)
  249. });
  250. });
  251. _defineProperty(_assertThisInitialized(_this), "onNodeDragLeave", function (event, nodeProps) {
  252. // if it is outside the droppable area
  253. // currentMouseOverDroppableNodeKey will be updated in dragenter event when into another droppable receiver.
  254. if (_this.currentMouseOverDroppableNodeKey === nodeProps.eventKey && !event.currentTarget.contains(event.relatedTarget)) {
  255. _this.resetDragState();
  256. _this.currentMouseOverDroppableNodeKey = null;
  257. }
  258. var onDragLeave = _this.props.onDragLeave;
  259. onDragLeave === null || onDragLeave === void 0 || onDragLeave({
  260. event: event,
  261. node: convertNodePropsToEventData(nodeProps)
  262. });
  263. });
  264. // since stopPropagation() is called in treeNode
  265. // if onWindowDrag is called, whice means state is keeped, drag state should be cleared
  266. _defineProperty(_assertThisInitialized(_this), "onWindowDragEnd", function (event) {
  267. _this.onNodeDragEnd(event, null, true);
  268. window.removeEventListener('dragend', _this.onWindowDragEnd);
  269. });
  270. // if onNodeDragEnd is called, onWindowDragEnd won't be called since stopPropagation() is called
  271. _defineProperty(_assertThisInitialized(_this), "onNodeDragEnd", function (event, nodeProps) {
  272. var onDragEnd = _this.props.onDragEnd;
  273. _this.setState({
  274. dragOverNodeKey: null
  275. });
  276. _this.cleanDragState();
  277. onDragEnd === null || onDragEnd === void 0 || onDragEnd({
  278. event: event,
  279. node: convertNodePropsToEventData(nodeProps)
  280. });
  281. _this.dragNodeProps = null;
  282. window.removeEventListener('dragend', _this.onWindowDragEnd);
  283. });
  284. _defineProperty(_assertThisInitialized(_this), "onNodeDrop", function (event, _) {
  285. var _this$getActiveItem;
  286. var outsideTree = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
  287. var _this$state4 = _this.state,
  288. dragChildrenKeys = _this$state4.dragChildrenKeys,
  289. dropPosition = _this$state4.dropPosition,
  290. dropTargetKey = _this$state4.dropTargetKey,
  291. dropTargetPos = _this$state4.dropTargetPos,
  292. dropAllowed = _this$state4.dropAllowed;
  293. if (!dropAllowed) {
  294. return;
  295. }
  296. var onDrop = _this.props.onDrop;
  297. _this.setState({
  298. dragOverNodeKey: null
  299. });
  300. _this.cleanDragState();
  301. if (dropTargetKey === null) return;
  302. var abstractDropNodeProps = _objectSpread(_objectSpread({}, getTreeNodeProps(dropTargetKey, _this.getTreeNodeRequiredProps())), {}, {
  303. active: ((_this$getActiveItem = _this.getActiveItem()) === null || _this$getActiveItem === void 0 ? void 0 : _this$getActiveItem.key) === dropTargetKey,
  304. data: getEntity(_this.state.keyEntities, dropTargetKey).node
  305. });
  306. var dropToChild = dragChildrenKeys.includes(dropTargetKey);
  307. warning(!dropToChild, "Can not drop to dragNode's children node. This is a bug of rc-tree. Please report an issue.");
  308. var posArr = posToArr(dropTargetPos);
  309. var dropResult = {
  310. event: event,
  311. node: convertNodePropsToEventData(abstractDropNodeProps),
  312. dragNode: _this.dragNodeProps ? convertNodePropsToEventData(_this.dragNodeProps) : null,
  313. dragNodesKeys: [_this.dragNodeProps.eventKey].concat(dragChildrenKeys),
  314. dropToGap: dropPosition !== 0,
  315. dropPosition: dropPosition + Number(posArr[posArr.length - 1])
  316. };
  317. if (!outsideTree) {
  318. onDrop === null || onDrop === void 0 || onDrop(dropResult);
  319. }
  320. _this.dragNodeProps = null;
  321. });
  322. _defineProperty(_assertThisInitialized(_this), "cleanDragState", function () {
  323. var draggingNodeKey = _this.state.draggingNodeKey;
  324. if (draggingNodeKey !== null) {
  325. _this.setState({
  326. draggingNodeKey: null,
  327. dropPosition: null,
  328. dropContainerKey: null,
  329. dropTargetKey: null,
  330. dropLevelOffset: null,
  331. dropAllowed: true,
  332. dragOverNodeKey: null
  333. });
  334. }
  335. _this.dragStartMousePosition = null;
  336. _this.currentMouseOverDroppableNodeKey = null;
  337. });
  338. _defineProperty(_assertThisInitialized(_this), "triggerExpandActionExpand", function (e, treeNode) {
  339. var _this$state5 = _this.state,
  340. expandedKeys = _this$state5.expandedKeys,
  341. flattenNodes = _this$state5.flattenNodes;
  342. var expanded = treeNode.expanded,
  343. key = treeNode.key,
  344. isLeaf = treeNode.isLeaf;
  345. if (isLeaf || e.shiftKey || e.metaKey || e.ctrlKey) {
  346. return;
  347. }
  348. var node = flattenNodes.filter(function (nodeItem) {
  349. return nodeItem.key === key;
  350. })[0];
  351. var eventNode = convertNodePropsToEventData(_objectSpread(_objectSpread({}, getTreeNodeProps(key, _this.getTreeNodeRequiredProps())), {}, {
  352. data: node.data
  353. }));
  354. _this.setExpandedKeys(expanded ? arrDel(expandedKeys, key) : arrAdd(expandedKeys, key));
  355. _this.onNodeExpand(e, eventNode);
  356. });
  357. _defineProperty(_assertThisInitialized(_this), "onNodeClick", function (e, treeNode) {
  358. var _this$props3 = _this.props,
  359. onClick = _this$props3.onClick,
  360. expandAction = _this$props3.expandAction;
  361. if (expandAction === 'click') {
  362. _this.triggerExpandActionExpand(e, treeNode);
  363. }
  364. onClick === null || onClick === void 0 || onClick(e, treeNode);
  365. });
  366. _defineProperty(_assertThisInitialized(_this), "onNodeDoubleClick", function (e, treeNode) {
  367. var _this$props4 = _this.props,
  368. onDoubleClick = _this$props4.onDoubleClick,
  369. expandAction = _this$props4.expandAction;
  370. if (expandAction === 'doubleClick') {
  371. _this.triggerExpandActionExpand(e, treeNode);
  372. }
  373. onDoubleClick === null || onDoubleClick === void 0 || onDoubleClick(e, treeNode);
  374. });
  375. _defineProperty(_assertThisInitialized(_this), "onNodeSelect", function (e, treeNode) {
  376. var selectedKeys = _this.state.selectedKeys;
  377. var _this$state6 = _this.state,
  378. keyEntities = _this$state6.keyEntities,
  379. fieldNames = _this$state6.fieldNames;
  380. var _this$props5 = _this.props,
  381. onSelect = _this$props5.onSelect,
  382. multiple = _this$props5.multiple;
  383. var selected = treeNode.selected;
  384. var key = treeNode[fieldNames.key];
  385. var targetSelected = !selected;
  386. // Update selected keys
  387. if (!targetSelected) {
  388. selectedKeys = arrDel(selectedKeys, key);
  389. } else if (!multiple) {
  390. selectedKeys = [key];
  391. } else {
  392. selectedKeys = arrAdd(selectedKeys, key);
  393. }
  394. // [Legacy] Not found related usage in doc or upper libs
  395. var selectedNodes = selectedKeys.map(function (selectedKey) {
  396. var entity = getEntity(keyEntities, selectedKey);
  397. return entity ? entity.node : null;
  398. }).filter(Boolean);
  399. _this.setUncontrolledState({
  400. selectedKeys: selectedKeys
  401. });
  402. onSelect === null || onSelect === void 0 || onSelect(selectedKeys, {
  403. event: 'select',
  404. selected: targetSelected,
  405. node: treeNode,
  406. selectedNodes: selectedNodes,
  407. nativeEvent: e.nativeEvent
  408. });
  409. });
  410. _defineProperty(_assertThisInitialized(_this), "onNodeCheck", function (e, treeNode, checked) {
  411. var _this$state7 = _this.state,
  412. keyEntities = _this$state7.keyEntities,
  413. oriCheckedKeys = _this$state7.checkedKeys,
  414. oriHalfCheckedKeys = _this$state7.halfCheckedKeys;
  415. var _this$props6 = _this.props,
  416. checkStrictly = _this$props6.checkStrictly,
  417. onCheck = _this$props6.onCheck;
  418. var key = treeNode.key;
  419. // Prepare trigger arguments
  420. var checkedObj;
  421. var eventObj = {
  422. event: 'check',
  423. node: treeNode,
  424. checked: checked,
  425. nativeEvent: e.nativeEvent
  426. };
  427. if (checkStrictly) {
  428. var checkedKeys = checked ? arrAdd(oriCheckedKeys, key) : arrDel(oriCheckedKeys, key);
  429. var halfCheckedKeys = arrDel(oriHalfCheckedKeys, key);
  430. checkedObj = {
  431. checked: checkedKeys,
  432. halfChecked: halfCheckedKeys
  433. };
  434. eventObj.checkedNodes = checkedKeys.map(function (checkedKey) {
  435. return getEntity(keyEntities, checkedKey);
  436. }).filter(Boolean).map(function (entity) {
  437. return entity.node;
  438. });
  439. _this.setUncontrolledState({
  440. checkedKeys: checkedKeys
  441. });
  442. } else {
  443. // Always fill first
  444. var _conductCheck = conductCheck([].concat(_toConsumableArray(oriCheckedKeys), [key]), true, keyEntities),
  445. _checkedKeys = _conductCheck.checkedKeys,
  446. _halfCheckedKeys = _conductCheck.halfCheckedKeys;
  447. // If remove, we do it again to correction
  448. if (!checked) {
  449. var keySet = new Set(_checkedKeys);
  450. keySet.delete(key);
  451. var _conductCheck2 = conductCheck(Array.from(keySet), {
  452. checked: false,
  453. halfCheckedKeys: _halfCheckedKeys
  454. }, keyEntities);
  455. _checkedKeys = _conductCheck2.checkedKeys;
  456. _halfCheckedKeys = _conductCheck2.halfCheckedKeys;
  457. }
  458. checkedObj = _checkedKeys;
  459. // [Legacy] This is used for `rc-tree-select`
  460. eventObj.checkedNodes = [];
  461. eventObj.checkedNodesPositions = [];
  462. eventObj.halfCheckedKeys = _halfCheckedKeys;
  463. _checkedKeys.forEach(function (checkedKey) {
  464. var entity = getEntity(keyEntities, checkedKey);
  465. if (!entity) return;
  466. var node = entity.node,
  467. pos = entity.pos;
  468. eventObj.checkedNodes.push(node);
  469. eventObj.checkedNodesPositions.push({
  470. node: node,
  471. pos: pos
  472. });
  473. });
  474. _this.setUncontrolledState({
  475. checkedKeys: _checkedKeys
  476. }, false, {
  477. halfCheckedKeys: _halfCheckedKeys
  478. });
  479. }
  480. onCheck === null || onCheck === void 0 || onCheck(checkedObj, eventObj);
  481. });
  482. _defineProperty(_assertThisInitialized(_this), "onNodeLoad", function (treeNode) {
  483. var _entity$children;
  484. var key = treeNode.key;
  485. var keyEntities = _this.state.keyEntities;
  486. // Skip if has children already
  487. var entity = getEntity(keyEntities, key);
  488. if (entity !== null && entity !== void 0 && (_entity$children = entity.children) !== null && _entity$children !== void 0 && _entity$children.length) {
  489. return;
  490. }
  491. var loadPromise = new Promise(function (resolve, reject) {
  492. // We need to get the latest state of loading/loaded keys
  493. _this.setState(function (_ref) {
  494. var _ref$loadedKeys = _ref.loadedKeys,
  495. loadedKeys = _ref$loadedKeys === void 0 ? [] : _ref$loadedKeys,
  496. _ref$loadingKeys = _ref.loadingKeys,
  497. loadingKeys = _ref$loadingKeys === void 0 ? [] : _ref$loadingKeys;
  498. var _this$props7 = _this.props,
  499. loadData = _this$props7.loadData,
  500. onLoad = _this$props7.onLoad;
  501. if (!loadData || loadedKeys.includes(key) || loadingKeys.includes(key)) {
  502. return null;
  503. }
  504. // Process load data
  505. var promise = loadData(treeNode);
  506. promise.then(function () {
  507. var currentLoadedKeys = _this.state.loadedKeys;
  508. var newLoadedKeys = arrAdd(currentLoadedKeys, key);
  509. // onLoad should trigger before internal setState to avoid `loadData` trigger twice.
  510. // https://github.com/ant-design/ant-design/issues/12464
  511. onLoad === null || onLoad === void 0 || onLoad(newLoadedKeys, {
  512. event: 'load',
  513. node: treeNode
  514. });
  515. _this.setUncontrolledState({
  516. loadedKeys: newLoadedKeys
  517. });
  518. _this.setState(function (prevState) {
  519. return {
  520. loadingKeys: arrDel(prevState.loadingKeys, key)
  521. };
  522. });
  523. resolve();
  524. }).catch(function (e) {
  525. _this.setState(function (prevState) {
  526. return {
  527. loadingKeys: arrDel(prevState.loadingKeys, key)
  528. };
  529. });
  530. // If exceed max retry times, we give up retry
  531. _this.loadingRetryTimes[key] = (_this.loadingRetryTimes[key] || 0) + 1;
  532. if (_this.loadingRetryTimes[key] >= MAX_RETRY_TIMES) {
  533. var currentLoadedKeys = _this.state.loadedKeys;
  534. warning(false, 'Retry for `loadData` many times but still failed. No more retry.');
  535. _this.setUncontrolledState({
  536. loadedKeys: arrAdd(currentLoadedKeys, key)
  537. });
  538. resolve();
  539. }
  540. reject(e);
  541. });
  542. return {
  543. loadingKeys: arrAdd(loadingKeys, key)
  544. };
  545. });
  546. });
  547. // Not care warning if we ignore this
  548. loadPromise.catch(function () {});
  549. return loadPromise;
  550. });
  551. _defineProperty(_assertThisInitialized(_this), "onNodeMouseEnter", function (event, node) {
  552. var onMouseEnter = _this.props.onMouseEnter;
  553. onMouseEnter === null || onMouseEnter === void 0 || onMouseEnter({
  554. event: event,
  555. node: node
  556. });
  557. });
  558. _defineProperty(_assertThisInitialized(_this), "onNodeMouseLeave", function (event, node) {
  559. var onMouseLeave = _this.props.onMouseLeave;
  560. onMouseLeave === null || onMouseLeave === void 0 || onMouseLeave({
  561. event: event,
  562. node: node
  563. });
  564. });
  565. _defineProperty(_assertThisInitialized(_this), "onNodeContextMenu", function (event, node) {
  566. var onRightClick = _this.props.onRightClick;
  567. if (onRightClick) {
  568. event.preventDefault();
  569. onRightClick({
  570. event: event,
  571. node: node
  572. });
  573. }
  574. });
  575. _defineProperty(_assertThisInitialized(_this), "onFocus", function () {
  576. var onFocus = _this.props.onFocus;
  577. _this.setState({
  578. focused: true
  579. });
  580. for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
  581. args[_key2] = arguments[_key2];
  582. }
  583. onFocus === null || onFocus === void 0 || onFocus.apply(void 0, args);
  584. });
  585. _defineProperty(_assertThisInitialized(_this), "onBlur", function () {
  586. var onBlur = _this.props.onBlur;
  587. _this.setState({
  588. focused: false
  589. });
  590. _this.onActiveChange(null);
  591. for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
  592. args[_key3] = arguments[_key3];
  593. }
  594. onBlur === null || onBlur === void 0 || onBlur.apply(void 0, args);
  595. });
  596. _defineProperty(_assertThisInitialized(_this), "getTreeNodeRequiredProps", function () {
  597. var _this$state8 = _this.state,
  598. expandedKeys = _this$state8.expandedKeys,
  599. selectedKeys = _this$state8.selectedKeys,
  600. loadedKeys = _this$state8.loadedKeys,
  601. loadingKeys = _this$state8.loadingKeys,
  602. checkedKeys = _this$state8.checkedKeys,
  603. halfCheckedKeys = _this$state8.halfCheckedKeys,
  604. dragOverNodeKey = _this$state8.dragOverNodeKey,
  605. dropPosition = _this$state8.dropPosition,
  606. keyEntities = _this$state8.keyEntities;
  607. return {
  608. expandedKeys: expandedKeys || [],
  609. selectedKeys: selectedKeys || [],
  610. loadedKeys: loadedKeys || [],
  611. loadingKeys: loadingKeys || [],
  612. checkedKeys: checkedKeys || [],
  613. halfCheckedKeys: halfCheckedKeys || [],
  614. dragOverNodeKey: dragOverNodeKey,
  615. dropPosition: dropPosition,
  616. keyEntities: keyEntities
  617. };
  618. });
  619. // =========================== Expanded ===========================
  620. /** Set uncontrolled `expandedKeys`. This will also auto update `flattenNodes`. */
  621. _defineProperty(_assertThisInitialized(_this), "setExpandedKeys", function (expandedKeys) {
  622. var _this$state9 = _this.state,
  623. treeData = _this$state9.treeData,
  624. fieldNames = _this$state9.fieldNames;
  625. var flattenNodes = flattenTreeData(treeData, expandedKeys, fieldNames);
  626. _this.setUncontrolledState({
  627. expandedKeys: expandedKeys,
  628. flattenNodes: flattenNodes
  629. }, true);
  630. });
  631. _defineProperty(_assertThisInitialized(_this), "onNodeExpand", function (e, treeNode) {
  632. var expandedKeys = _this.state.expandedKeys;
  633. var _this$state10 = _this.state,
  634. listChanging = _this$state10.listChanging,
  635. fieldNames = _this$state10.fieldNames;
  636. var _this$props8 = _this.props,
  637. onExpand = _this$props8.onExpand,
  638. loadData = _this$props8.loadData;
  639. var expanded = treeNode.expanded;
  640. var key = treeNode[fieldNames.key];
  641. // Do nothing when motion is in progress
  642. if (listChanging) {
  643. return;
  644. }
  645. // Update selected keys
  646. var certain = expandedKeys.includes(key);
  647. var targetExpanded = !expanded;
  648. warning(expanded && certain || !expanded && !certain, 'Expand state not sync with index check');
  649. expandedKeys = targetExpanded ? arrAdd(expandedKeys, key) : arrDel(expandedKeys, key);
  650. _this.setExpandedKeys(expandedKeys);
  651. onExpand === null || onExpand === void 0 || onExpand(expandedKeys, {
  652. node: treeNode,
  653. expanded: targetExpanded,
  654. nativeEvent: e.nativeEvent
  655. });
  656. // Async Load data
  657. if (targetExpanded && loadData) {
  658. var loadPromise = _this.onNodeLoad(treeNode);
  659. if (loadPromise) {
  660. loadPromise.then(function () {
  661. // [Legacy] Refresh logic
  662. var newFlattenTreeData = flattenTreeData(_this.state.treeData, expandedKeys, fieldNames);
  663. _this.setUncontrolledState({
  664. flattenNodes: newFlattenTreeData
  665. });
  666. }).catch(function () {
  667. var currentExpandedKeys = _this.state.expandedKeys;
  668. var expandedKeysToRestore = arrDel(currentExpandedKeys, key);
  669. _this.setExpandedKeys(expandedKeysToRestore);
  670. });
  671. }
  672. }
  673. });
  674. _defineProperty(_assertThisInitialized(_this), "onListChangeStart", function () {
  675. _this.setUncontrolledState({
  676. listChanging: true
  677. });
  678. });
  679. _defineProperty(_assertThisInitialized(_this), "onListChangeEnd", function () {
  680. setTimeout(function () {
  681. _this.setUncontrolledState({
  682. listChanging: false
  683. });
  684. });
  685. });
  686. // =========================== Keyboard ===========================
  687. _defineProperty(_assertThisInitialized(_this), "onActiveChange", function (newActiveKey) {
  688. var activeKey = _this.state.activeKey;
  689. var _this$props9 = _this.props,
  690. onActiveChange = _this$props9.onActiveChange,
  691. _this$props9$itemScro = _this$props9.itemScrollOffset,
  692. itemScrollOffset = _this$props9$itemScro === void 0 ? 0 : _this$props9$itemScro;
  693. if (activeKey === newActiveKey) {
  694. return;
  695. }
  696. _this.setState({
  697. activeKey: newActiveKey
  698. });
  699. if (newActiveKey !== null) {
  700. _this.scrollTo({
  701. key: newActiveKey,
  702. offset: itemScrollOffset
  703. });
  704. }
  705. onActiveChange === null || onActiveChange === void 0 || onActiveChange(newActiveKey);
  706. });
  707. _defineProperty(_assertThisInitialized(_this), "getActiveItem", function () {
  708. var _this$state11 = _this.state,
  709. activeKey = _this$state11.activeKey,
  710. flattenNodes = _this$state11.flattenNodes;
  711. if (activeKey === null) {
  712. return null;
  713. }
  714. return flattenNodes.find(function (_ref2) {
  715. var key = _ref2.key;
  716. return key === activeKey;
  717. }) || null;
  718. });
  719. _defineProperty(_assertThisInitialized(_this), "offsetActiveKey", function (offset) {
  720. var _this$state12 = _this.state,
  721. flattenNodes = _this$state12.flattenNodes,
  722. activeKey = _this$state12.activeKey;
  723. var index = flattenNodes.findIndex(function (_ref3) {
  724. var key = _ref3.key;
  725. return key === activeKey;
  726. });
  727. // Align with index
  728. if (index === -1 && offset < 0) {
  729. index = flattenNodes.length;
  730. }
  731. index = (index + offset + flattenNodes.length) % flattenNodes.length;
  732. var item = flattenNodes[index];
  733. if (item) {
  734. var _key4 = item.key;
  735. _this.onActiveChange(_key4);
  736. } else {
  737. _this.onActiveChange(null);
  738. }
  739. });
  740. _defineProperty(_assertThisInitialized(_this), "onKeyDown", function (event) {
  741. var _this$state13 = _this.state,
  742. activeKey = _this$state13.activeKey,
  743. expandedKeys = _this$state13.expandedKeys,
  744. checkedKeys = _this$state13.checkedKeys,
  745. fieldNames = _this$state13.fieldNames;
  746. var _this$props10 = _this.props,
  747. onKeyDown = _this$props10.onKeyDown,
  748. checkable = _this$props10.checkable,
  749. selectable = _this$props10.selectable;
  750. // >>>>>>>>>> Direction
  751. switch (event.which) {
  752. case KeyCode.UP:
  753. {
  754. _this.offsetActiveKey(-1);
  755. event.preventDefault();
  756. break;
  757. }
  758. case KeyCode.DOWN:
  759. {
  760. _this.offsetActiveKey(1);
  761. event.preventDefault();
  762. break;
  763. }
  764. }
  765. // >>>>>>>>>> Expand & Selection
  766. var activeItem = _this.getActiveItem();
  767. if (activeItem && activeItem.data) {
  768. var treeNodeRequiredProps = _this.getTreeNodeRequiredProps();
  769. var expandable = activeItem.data.isLeaf === false || !!(activeItem.data[fieldNames.children] || []).length;
  770. var eventNode = convertNodePropsToEventData(_objectSpread(_objectSpread({}, getTreeNodeProps(activeKey, treeNodeRequiredProps)), {}, {
  771. data: activeItem.data,
  772. active: true
  773. }));
  774. switch (event.which) {
  775. // >>> Expand
  776. case KeyCode.LEFT:
  777. {
  778. // Collapse if possible
  779. if (expandable && expandedKeys.includes(activeKey)) {
  780. _this.onNodeExpand({}, eventNode);
  781. } else if (activeItem.parent) {
  782. _this.onActiveChange(activeItem.parent.key);
  783. }
  784. event.preventDefault();
  785. break;
  786. }
  787. case KeyCode.RIGHT:
  788. {
  789. // Expand if possible
  790. if (expandable && !expandedKeys.includes(activeKey)) {
  791. _this.onNodeExpand({}, eventNode);
  792. } else if (activeItem.children && activeItem.children.length) {
  793. _this.onActiveChange(activeItem.children[0].key);
  794. }
  795. event.preventDefault();
  796. break;
  797. }
  798. // Selection
  799. case KeyCode.ENTER:
  800. case KeyCode.SPACE:
  801. {
  802. if (checkable && !eventNode.disabled && eventNode.checkable !== false && !eventNode.disableCheckbox) {
  803. _this.onNodeCheck({}, eventNode, !checkedKeys.includes(activeKey));
  804. } else if (!checkable && selectable && !eventNode.disabled && eventNode.selectable !== false) {
  805. _this.onNodeSelect({}, eventNode);
  806. }
  807. break;
  808. }
  809. }
  810. }
  811. onKeyDown === null || onKeyDown === void 0 || onKeyDown(event);
  812. });
  813. /**
  814. * Only update the value which is not in props
  815. */
  816. _defineProperty(_assertThisInitialized(_this), "setUncontrolledState", function (state) {
  817. var atomic = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  818. var forceState = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
  819. if (!_this.destroyed) {
  820. var needSync = false;
  821. var allPassed = true;
  822. var newState = {};
  823. Object.keys(state).forEach(function (name) {
  824. if (_this.props.hasOwnProperty(name)) {
  825. allPassed = false;
  826. return;
  827. }
  828. needSync = true;
  829. newState[name] = state[name];
  830. });
  831. if (needSync && (!atomic || allPassed)) {
  832. _this.setState(_objectSpread(_objectSpread({}, newState), forceState));
  833. }
  834. }
  835. });
  836. _defineProperty(_assertThisInitialized(_this), "scrollTo", function (scroll) {
  837. _this.listRef.current.scrollTo(scroll);
  838. });
  839. return _this;
  840. }
  841. _createClass(Tree, [{
  842. key: "componentDidMount",
  843. value: function componentDidMount() {
  844. this.destroyed = false;
  845. this.onUpdated();
  846. }
  847. }, {
  848. key: "componentDidUpdate",
  849. value: function componentDidUpdate() {
  850. this.onUpdated();
  851. }
  852. }, {
  853. key: "onUpdated",
  854. value: function onUpdated() {
  855. var _this$props11 = this.props,
  856. activeKey = _this$props11.activeKey,
  857. _this$props11$itemScr = _this$props11.itemScrollOffset,
  858. itemScrollOffset = _this$props11$itemScr === void 0 ? 0 : _this$props11$itemScr;
  859. if (activeKey !== undefined && activeKey !== this.state.activeKey) {
  860. this.setState({
  861. activeKey: activeKey
  862. });
  863. if (activeKey !== null) {
  864. this.scrollTo({
  865. key: activeKey,
  866. offset: itemScrollOffset
  867. });
  868. }
  869. }
  870. }
  871. }, {
  872. key: "componentWillUnmount",
  873. value: function componentWillUnmount() {
  874. window.removeEventListener('dragend', this.onWindowDragEnd);
  875. this.destroyed = true;
  876. }
  877. }, {
  878. key: "resetDragState",
  879. value: function resetDragState() {
  880. this.setState({
  881. dragOverNodeKey: null,
  882. dropPosition: null,
  883. dropLevelOffset: null,
  884. dropTargetKey: null,
  885. dropContainerKey: null,
  886. dropTargetPos: null,
  887. dropAllowed: false
  888. });
  889. }
  890. }, {
  891. key: "render",
  892. value: function render() {
  893. var _this$state14 = this.state,
  894. focused = _this$state14.focused,
  895. flattenNodes = _this$state14.flattenNodes,
  896. keyEntities = _this$state14.keyEntities,
  897. draggingNodeKey = _this$state14.draggingNodeKey,
  898. activeKey = _this$state14.activeKey,
  899. dropLevelOffset = _this$state14.dropLevelOffset,
  900. dropContainerKey = _this$state14.dropContainerKey,
  901. dropTargetKey = _this$state14.dropTargetKey,
  902. dropPosition = _this$state14.dropPosition,
  903. dragOverNodeKey = _this$state14.dragOverNodeKey,
  904. indent = _this$state14.indent;
  905. var _this$props12 = this.props,
  906. prefixCls = _this$props12.prefixCls,
  907. className = _this$props12.className,
  908. style = _this$props12.style,
  909. showLine = _this$props12.showLine,
  910. focusable = _this$props12.focusable,
  911. _this$props12$tabInde = _this$props12.tabIndex,
  912. tabIndex = _this$props12$tabInde === void 0 ? 0 : _this$props12$tabInde,
  913. selectable = _this$props12.selectable,
  914. showIcon = _this$props12.showIcon,
  915. icon = _this$props12.icon,
  916. switcherIcon = _this$props12.switcherIcon,
  917. draggable = _this$props12.draggable,
  918. checkable = _this$props12.checkable,
  919. checkStrictly = _this$props12.checkStrictly,
  920. disabled = _this$props12.disabled,
  921. motion = _this$props12.motion,
  922. loadData = _this$props12.loadData,
  923. filterTreeNode = _this$props12.filterTreeNode,
  924. height = _this$props12.height,
  925. itemHeight = _this$props12.itemHeight,
  926. scrollWidth = _this$props12.scrollWidth,
  927. virtual = _this$props12.virtual,
  928. titleRender = _this$props12.titleRender,
  929. dropIndicatorRender = _this$props12.dropIndicatorRender,
  930. onContextMenu = _this$props12.onContextMenu,
  931. onScroll = _this$props12.onScroll,
  932. direction = _this$props12.direction,
  933. rootClassName = _this$props12.rootClassName,
  934. rootStyle = _this$props12.rootStyle;
  935. var domProps = pickAttrs(this.props, {
  936. aria: true,
  937. data: true
  938. });
  939. // It's better move to hooks but we just simply keep here
  940. var draggableConfig;
  941. if (draggable) {
  942. if (_typeof(draggable) === 'object') {
  943. draggableConfig = draggable;
  944. } else if (typeof draggable === 'function') {
  945. draggableConfig = {
  946. nodeDraggable: draggable
  947. };
  948. } else {
  949. draggableConfig = {};
  950. }
  951. }
  952. var contextValue = {
  953. prefixCls: prefixCls,
  954. selectable: selectable,
  955. showIcon: showIcon,
  956. icon: icon,
  957. switcherIcon: switcherIcon,
  958. draggable: draggableConfig,
  959. draggingNodeKey: draggingNodeKey,
  960. checkable: checkable,
  961. checkStrictly: checkStrictly,
  962. disabled: disabled,
  963. keyEntities: keyEntities,
  964. dropLevelOffset: dropLevelOffset,
  965. dropContainerKey: dropContainerKey,
  966. dropTargetKey: dropTargetKey,
  967. dropPosition: dropPosition,
  968. dragOverNodeKey: dragOverNodeKey,
  969. indent: indent,
  970. direction: direction,
  971. dropIndicatorRender: dropIndicatorRender,
  972. loadData: loadData,
  973. filterTreeNode: filterTreeNode,
  974. titleRender: titleRender,
  975. onNodeClick: this.onNodeClick,
  976. onNodeDoubleClick: this.onNodeDoubleClick,
  977. onNodeExpand: this.onNodeExpand,
  978. onNodeSelect: this.onNodeSelect,
  979. onNodeCheck: this.onNodeCheck,
  980. onNodeLoad: this.onNodeLoad,
  981. onNodeMouseEnter: this.onNodeMouseEnter,
  982. onNodeMouseLeave: this.onNodeMouseLeave,
  983. onNodeContextMenu: this.onNodeContextMenu,
  984. onNodeDragStart: this.onNodeDragStart,
  985. onNodeDragEnter: this.onNodeDragEnter,
  986. onNodeDragOver: this.onNodeDragOver,
  987. onNodeDragLeave: this.onNodeDragLeave,
  988. onNodeDragEnd: this.onNodeDragEnd,
  989. onNodeDrop: this.onNodeDrop
  990. };
  991. return /*#__PURE__*/React.createElement(TreeContext.Provider, {
  992. value: contextValue
  993. }, /*#__PURE__*/React.createElement("div", {
  994. className: classNames(prefixCls, className, rootClassName, _defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-show-line"), showLine), "".concat(prefixCls, "-focused"), focused), "".concat(prefixCls, "-active-focused"), activeKey !== null)),
  995. style: rootStyle
  996. }, /*#__PURE__*/React.createElement(NodeList, _extends({
  997. ref: this.listRef,
  998. prefixCls: prefixCls,
  999. style: style,
  1000. data: flattenNodes,
  1001. disabled: disabled,
  1002. selectable: selectable,
  1003. checkable: !!checkable,
  1004. motion: motion,
  1005. dragging: draggingNodeKey !== null,
  1006. height: height,
  1007. itemHeight: itemHeight,
  1008. virtual: virtual,
  1009. focusable: focusable,
  1010. focused: focused,
  1011. tabIndex: tabIndex,
  1012. activeItem: this.getActiveItem(),
  1013. onFocus: this.onFocus,
  1014. onBlur: this.onBlur,
  1015. onKeyDown: this.onKeyDown,
  1016. onActiveChange: this.onActiveChange,
  1017. onListChangeStart: this.onListChangeStart,
  1018. onListChangeEnd: this.onListChangeEnd,
  1019. onContextMenu: onContextMenu,
  1020. onScroll: onScroll,
  1021. scrollWidth: scrollWidth
  1022. }, this.getTreeNodeRequiredProps(), domProps))));
  1023. }
  1024. }], [{
  1025. key: "getDerivedStateFromProps",
  1026. value: function getDerivedStateFromProps(props, prevState) {
  1027. var prevProps = prevState.prevProps;
  1028. var newState = {
  1029. prevProps: props
  1030. };
  1031. function needSync(name) {
  1032. return !prevProps && props.hasOwnProperty(name) || prevProps && prevProps[name] !== props[name];
  1033. }
  1034. // ================== Tree Node ==================
  1035. var treeData;
  1036. // fieldNames
  1037. var fieldNames = prevState.fieldNames;
  1038. if (needSync('fieldNames')) {
  1039. fieldNames = fillFieldNames(props.fieldNames);
  1040. newState.fieldNames = fieldNames;
  1041. }
  1042. // Check if `treeData` or `children` changed and save into the state.
  1043. if (needSync('treeData')) {
  1044. treeData = props.treeData;
  1045. } else if (needSync('children')) {
  1046. warning(false, '`children` of Tree is deprecated. Please use `treeData` instead.');
  1047. treeData = convertTreeToData(props.children);
  1048. }
  1049. // Save flatten nodes info and convert `treeData` into keyEntities
  1050. if (treeData) {
  1051. newState.treeData = treeData;
  1052. var entitiesMap = convertDataToEntities(treeData, {
  1053. fieldNames: fieldNames
  1054. });
  1055. newState.keyEntities = _objectSpread(_defineProperty({}, MOTION_KEY, MotionEntity), entitiesMap.keyEntities);
  1056. // Warning if treeNode not provide key
  1057. if (process.env.NODE_ENV !== 'production') {
  1058. warningWithoutKey(treeData, fieldNames);
  1059. }
  1060. }
  1061. var keyEntities = newState.keyEntities || prevState.keyEntities;
  1062. // ================ expandedKeys =================
  1063. if (needSync('expandedKeys') || prevProps && needSync('autoExpandParent')) {
  1064. newState.expandedKeys = props.autoExpandParent || !prevProps && props.defaultExpandParent ? conductExpandParent(props.expandedKeys, keyEntities) : props.expandedKeys;
  1065. } else if (!prevProps && props.defaultExpandAll) {
  1066. var cloneKeyEntities = _objectSpread({}, keyEntities);
  1067. delete cloneKeyEntities[MOTION_KEY];
  1068. // Only take the key who has the children to enhance the performance
  1069. var nextExpandedKeys = [];
  1070. Object.keys(cloneKeyEntities).forEach(function (key) {
  1071. var entity = cloneKeyEntities[key];
  1072. if (entity.children && entity.children.length) {
  1073. nextExpandedKeys.push(entity.key);
  1074. }
  1075. });
  1076. newState.expandedKeys = nextExpandedKeys;
  1077. } else if (!prevProps && props.defaultExpandedKeys) {
  1078. newState.expandedKeys = props.autoExpandParent || props.defaultExpandParent ? conductExpandParent(props.defaultExpandedKeys, keyEntities) : props.defaultExpandedKeys;
  1079. }
  1080. if (!newState.expandedKeys) {
  1081. delete newState.expandedKeys;
  1082. }
  1083. // ================ flattenNodes =================
  1084. if (treeData || newState.expandedKeys) {
  1085. var flattenNodes = flattenTreeData(treeData || prevState.treeData, newState.expandedKeys || prevState.expandedKeys, fieldNames);
  1086. newState.flattenNodes = flattenNodes;
  1087. }
  1088. // ================ selectedKeys =================
  1089. if (props.selectable) {
  1090. if (needSync('selectedKeys')) {
  1091. newState.selectedKeys = calcSelectedKeys(props.selectedKeys, props);
  1092. } else if (!prevProps && props.defaultSelectedKeys) {
  1093. newState.selectedKeys = calcSelectedKeys(props.defaultSelectedKeys, props);
  1094. }
  1095. }
  1096. // ================= checkedKeys =================
  1097. if (props.checkable) {
  1098. var checkedKeyEntity;
  1099. if (needSync('checkedKeys')) {
  1100. checkedKeyEntity = parseCheckedKeys(props.checkedKeys) || {};
  1101. } else if (!prevProps && props.defaultCheckedKeys) {
  1102. checkedKeyEntity = parseCheckedKeys(props.defaultCheckedKeys) || {};
  1103. } else if (treeData) {
  1104. // If `treeData` changed, we also need check it
  1105. checkedKeyEntity = parseCheckedKeys(props.checkedKeys) || {
  1106. checkedKeys: prevState.checkedKeys,
  1107. halfCheckedKeys: prevState.halfCheckedKeys
  1108. };
  1109. }
  1110. if (checkedKeyEntity) {
  1111. var _checkedKeyEntity = checkedKeyEntity,
  1112. _checkedKeyEntity$che = _checkedKeyEntity.checkedKeys,
  1113. checkedKeys = _checkedKeyEntity$che === void 0 ? [] : _checkedKeyEntity$che,
  1114. _checkedKeyEntity$hal = _checkedKeyEntity.halfCheckedKeys,
  1115. halfCheckedKeys = _checkedKeyEntity$hal === void 0 ? [] : _checkedKeyEntity$hal;
  1116. if (!props.checkStrictly) {
  1117. var conductKeys = conductCheck(checkedKeys, true, keyEntities);
  1118. checkedKeys = conductKeys.checkedKeys;
  1119. halfCheckedKeys = conductKeys.halfCheckedKeys;
  1120. }
  1121. newState.checkedKeys = checkedKeys;
  1122. newState.halfCheckedKeys = halfCheckedKeys;
  1123. }
  1124. }
  1125. // ================= loadedKeys ==================
  1126. if (needSync('loadedKeys')) {
  1127. newState.loadedKeys = props.loadedKeys;
  1128. }
  1129. return newState;
  1130. }
  1131. }]);
  1132. return Tree;
  1133. }(React.Component);
  1134. _defineProperty(Tree, "defaultProps", {
  1135. prefixCls: 'rc-tree',
  1136. showLine: false,
  1137. showIcon: true,
  1138. selectable: true,
  1139. multiple: false,
  1140. checkable: false,
  1141. disabled: false,
  1142. checkStrictly: false,
  1143. draggable: false,
  1144. defaultExpandParent: true,
  1145. autoExpandParent: false,
  1146. defaultExpandAll: false,
  1147. defaultExpandedKeys: [],
  1148. defaultCheckedKeys: [],
  1149. defaultSelectedKeys: [],
  1150. dropIndicatorRender: DropIndicator,
  1151. allowDrop: function allowDrop() {
  1152. return true;
  1153. },
  1154. expandAction: false
  1155. });
  1156. _defineProperty(Tree, "TreeNode", TreeNode);
  1157. export default Tree;