useTreeViewState.ts 31 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079
  1. import { computed, ref, shallowRef, toRaw, watch } from "vue";
  2. import { CHECK_STATUS_MAP, DefaultTreeProps } from "./constants";
  3. import type {
  4. CheckStatus,
  5. TreeCheckChangePayload,
  6. TreeDataItem,
  7. TreeKey,
  8. TreeModelValue,
  9. TreeNode,
  10. TreeProps,
  11. UniTreeViewProps
  12. } from "./types";
  13. export type TreeViewStateProps = Pick<
  14. UniTreeViewProps,
  15. | "data"
  16. | "treeProps"
  17. | "filterValue"
  18. | "filterMethod"
  19. | "modelValue"
  20. | "defaultCheckedKeys"
  21. | "multiple"
  22. | "checkStrictly"
  23. | "accordion"
  24. | "onlyRadioLeaf"
  25. | "defaultExpandAll"
  26. | "defaultExpandedKeys"
  27. | "defaultExpandParent"
  28. | "expandChecked"
  29. | "cacheExpandedKeys"
  30. | "loadMode"
  31. | "loadApi"
  32. | "isLeafFn"
  33. | "alwaysFirstLoad"
  34. | "checkedDisabled"
  35. | "packDisabledKey"
  36. | "packDisabledkey"
  37. >;
  38. export function useTreeViewState(props: TreeViewStateProps) {
  39. const treeList = ref<TreeNode[]>([]);
  40. const visibleTreeList = ref<TreeNode[]>([]);
  41. const matchedTreeList = ref<TreeNode[]>([]);
  42. const treeVersion = ref(0);
  43. const reconciledModelValue = shallowRef<{ value: TreeModelValue } | null>(null);
  44. const pendingCheckChangePayload = shallowRef<TreeCheckChangePayload | null>(null);
  45. const childrenMap = ref<Map<TreeKey, TreeNode[]>>(new Map());
  46. const nodeMap = ref<Map<TreeKey, TreeNode>>(new Map());
  47. const cachedExpandedKeys = ref<Set<TreeKey>>(new Set());
  48. let pendingCheckedKeys = new Set<TreeKey>();
  49. let pendingImperativeCheckedKeys = new Set<TreeKey>();
  50. let warnedInvalidKeys = new Set<string>();
  51. let initialized = false;
  52. const resolvedTreeProps = computed<TreeProps>(() => {
  53. return {
  54. id: props.treeProps?.id ?? DefaultTreeProps.id,
  55. label: props.treeProps?.label ?? DefaultTreeProps.label,
  56. children: props.treeProps?.children ?? DefaultTreeProps.children,
  57. disabled: props.treeProps?.disabled ?? DefaultTreeProps.disabled,
  58. leaf: props.treeProps?.leaf ?? DefaultTreeProps.leaf,
  59. append: props.treeProps?.append ?? DefaultTreeProps.append,
  60. icon: props.treeProps?.icon ?? DefaultTreeProps.icon
  61. };
  62. });
  63. const isMultiple = computed(() => Boolean(props.multiple));
  64. const resolvedPackDisabledKey = computed(() => {
  65. return props.packDisabledKey ?? props.packDisabledkey ?? true;
  66. });
  67. watch(
  68. () => [
  69. props.data,
  70. getTreeConfigSignature()
  71. ] as const,
  72. () => {
  73. initializeTree(toRaw(props.data ?? []));
  74. },
  75. {
  76. immediate: true
  77. }
  78. );
  79. watch(
  80. () => getExpansionConfigSignature(),
  81. () => {
  82. applyExpandedState();
  83. }
  84. );
  85. watch(
  86. () => [getCheckedValueSignature(), getCheckedBehaviorSignature()] as const,
  87. ([, behaviorSignature], [, previousBehaviorSignature]) => {
  88. const checkedKeys = getInitialCheckedKeys();
  89. if (behaviorSignature === previousBehaviorSignature && isConfiguredCheckedStateCurrent(checkedKeys)) {
  90. return;
  91. }
  92. applyConfiguredCheckedState(checkedKeys);
  93. }
  94. );
  95. watch(
  96. () => [props.filterValue, props.filterMethod] as const,
  97. () => {
  98. updateVisibility();
  99. }
  100. );
  101. function initializeTree(treeData: TreeDataItem[] = []) {
  102. const wasInitialized = initialized;
  103. const preserveRuntimeChecked = initialized && props.modelValue === undefined;
  104. const checkedKeys = props.modelValue !== undefined
  105. ? getInitialCheckedKeys()
  106. : preserveRuntimeChecked
  107. ? isMultiple.value
  108. ? [...getRawCheckedKeys(), ...pendingCheckedKeys]
  109. : [...pendingImperativeCheckedKeys, ...pendingCheckedKeys, ...getRawCheckedKeys()]
  110. : getInitialCheckedKeys();
  111. const pendingKeys = preserveRuntimeChecked ? [...pendingCheckedKeys] : checkedKeys;
  112. const imperativeKeys = [...pendingImperativeCheckedKeys];
  113. syncCachedExpandedKeys();
  114. childrenMap.value = new Map();
  115. nodeMap.value = new Map();
  116. warnedInvalidKeys = new Set();
  117. treeList.value = flattenTree(treeData);
  118. treeVersion.value += 1;
  119. initialized = true;
  120. applyCheckedState(checkedKeys);
  121. pendingCheckedKeys = new Set(pendingKeys.filter((key) => !nodeMap.value.has(key)));
  122. const resolvedImperativeKeys = imperativeKeys.filter((key) => nodeMap.value.has(key));
  123. pendingImperativeCheckedKeys = new Set(
  124. imperativeKeys.filter((key) => pendingCheckedKeys.has(key))
  125. );
  126. applyExpandedState();
  127. publishPendingSelectionChange(resolvedImperativeKeys);
  128. reconcileMissingControlledKeys(wasInitialized, checkedKeys);
  129. }
  130. function toggleExpand(node: TreeNode) {
  131. if (!isExpandable(node)) {
  132. return null;
  133. }
  134. const nextExpanded = !node.expanded;
  135. if (nextExpanded && props.accordion) {
  136. const siblings = node.parentId === undefined
  137. ? treeList.value.filter((item) => item.level === 0)
  138. : childrenMap.value.get(node.parentId) ?? [];
  139. for (const sibling of siblings) {
  140. if (sibling !== node && sibling.expanded) {
  141. sibling.expanded = false;
  142. syncExpandedCacheForNode(sibling);
  143. }
  144. }
  145. }
  146. node.expanded = nextExpanded;
  147. if (props.cacheExpandedKeys) {
  148. if (node.expanded) {
  149. cachedExpandedKeys.value.add(node.id);
  150. } else {
  151. cachedExpandedKeys.value.delete(node.id);
  152. }
  153. }
  154. updateVisibility();
  155. return {
  156. expanded: node.expanded,
  157. node
  158. };
  159. }
  160. function checkNode(node: TreeNode) {
  161. if (!canSelectNode(node)) {
  162. return null;
  163. }
  164. if (isMultiple.value) {
  165. const newStatus = node.checked === CHECK_STATUS_MAP.checked
  166. ? CHECK_STATUS_MAP.unchecked
  167. : CHECK_STATUS_MAP.checked;
  168. if (props.checkStrictly) {
  169. node.checked = newStatus;
  170. } else {
  171. updateNodeAndDescendantsStatus(node.id, newStatus);
  172. updateParentNodesStatus(node.id);
  173. }
  174. } else {
  175. const newStatus = node.checked === CHECK_STATUS_MAP.checked
  176. ? CHECK_STATUS_MAP.unchecked
  177. : CHECK_STATUS_MAP.checked;
  178. clearCheckedStatus();
  179. if (newStatus === CHECK_STATUS_MAP.checked) {
  180. node.checked = CHECK_STATUS_MAP.checked;
  181. }
  182. }
  183. return buildCheckChangePayload(node);
  184. }
  185. function flattenTree(
  186. list: TreeDataItem[] = [],
  187. level = 0,
  188. parentIds: TreeKey[] = [],
  189. parents: TreeDataItem[] = []
  190. ) {
  191. const nodes: TreeNode[] = [];
  192. const {
  193. id: idKey,
  194. label: labelKey,
  195. children: childrenKey,
  196. disabled: disabledKey = "disabled",
  197. append: appendKey = "append",
  198. icon: iconKey = "icon"
  199. } = resolvedTreeProps.value;
  200. list.forEach((item) => {
  201. const id = item[idKey] as TreeKey;
  202. const children = item[childrenKey];
  203. const label = String(item[labelKey] ?? "");
  204. warnAboutInvalidKey(id, label);
  205. const treeNode: TreeNode = {
  206. id,
  207. label,
  208. append: String(item[appendKey] ?? ""),
  209. icon: String(item[iconKey] ?? ""),
  210. path: [...parents.map((parent) => String(parent[labelKey] ?? "")), label],
  211. source: item,
  212. parentId: parentIds[parentIds.length - 1],
  213. parentIds,
  214. parents,
  215. level,
  216. expanded: false,
  217. visible: level === 0,
  218. disabled: Boolean(item[disabledKey]),
  219. checked: CHECK_STATUS_MAP.unchecked,
  220. isLeaf: false,
  221. loaded: false,
  222. loading: false,
  223. loadError: null
  224. };
  225. treeNode.isLeaf = resolveIsLeaf(item, treeNode);
  226. treeNode.loaded = treeNode.isLeaf || !props.loadMode || (Array.isArray(children) && children.length > 0 && !props.alwaysFirstLoad);
  227. nodes.push(treeNode);
  228. if (id !== undefined && id !== null && nodeMap.value.has(id)) {
  229. warnOnce(
  230. `duplicate:${String(id)}`,
  231. `[uni-tree-view] 检测到重复节点 key:${String(id)}。请确保 tree-props.id 映射的值在整棵树中唯一。`
  232. );
  233. }
  234. nodeMap.value.set(id, treeNode);
  235. const parentId = parentIds.slice(-1)[0];
  236. if (parentId !== undefined) {
  237. if (!childrenMap.value.has(parentId)) {
  238. childrenMap.value.set(parentId, []);
  239. }
  240. childrenMap.value.get(parentId)!.push(treeNode);
  241. }
  242. if (Array.isArray(children) && children.length > 0) {
  243. nodes.push(...flattenTree(children, level + 1, [...parentIds, id], [...parents, item]));
  244. }
  245. });
  246. return nodes;
  247. }
  248. function applyCheckedState(keys: TreeKey[]) {
  249. clearCheckedStatus();
  250. if (keys.length === 0) {
  251. return;
  252. }
  253. if (isMultiple.value) {
  254. if (props.checkStrictly) {
  255. for (const key of keys) {
  256. const node = nodeMap.value.get(key);
  257. if (node && canSelectDisabledNode(node)) {
  258. node.checked = CHECK_STATUS_MAP.checked;
  259. }
  260. }
  261. return;
  262. }
  263. updateNodeAndDescendantsStatus(keys, CHECK_STATUS_MAP.checked, Boolean(props.checkedDisabled));
  264. updateParentNodesStatus(keys);
  265. return;
  266. }
  267. const firstSelectableKey = keys.find((key) => {
  268. const node = nodeMap.value.get(key);
  269. return node && canSelectDisabledNode(node) && (!props.onlyRadioLeaf || node.isLeaf);
  270. });
  271. if (firstSelectableKey !== undefined) {
  272. const node = nodeMap.value.get(firstSelectableKey);
  273. if (node) {
  274. node.checked = CHECK_STATUS_MAP.checked;
  275. }
  276. }
  277. }
  278. function applyConfiguredCheckedState(keys: TreeKey[]) {
  279. applyCheckedState(keys);
  280. pendingCheckedKeys = new Set(keys.filter((key) => !nodeMap.value.has(key)));
  281. pendingImperativeCheckedKeys = new Set();
  282. }
  283. function applyPendingCheckedState() {
  284. const resolvedKeys = [...pendingCheckedKeys].filter((key) => nodeMap.value.has(key));
  285. if (resolvedKeys.length === 0) {
  286. return;
  287. }
  288. const resolvedImperativeKeys = resolvedKeys.filter((key) => pendingImperativeCheckedKeys.has(key));
  289. for (const key of resolvedKeys) {
  290. pendingCheckedKeys.delete(key);
  291. pendingImperativeCheckedKeys.delete(key);
  292. }
  293. if (isMultiple.value) {
  294. if (props.checkStrictly) {
  295. for (const key of resolvedKeys) {
  296. const node = nodeMap.value.get(key);
  297. if (node && canSelectDisabledNode(node)) {
  298. node.checked = CHECK_STATUS_MAP.checked;
  299. }
  300. }
  301. } else {
  302. updateNodeAndDescendantsStatus(resolvedKeys, CHECK_STATUS_MAP.checked, Boolean(props.checkedDisabled));
  303. updateParentNodesStatus(resolvedKeys);
  304. }
  305. publishPendingSelectionChange(resolvedImperativeKeys);
  306. return;
  307. }
  308. const node = resolvedKeys
  309. .map((key) => nodeMap.value.get(key))
  310. .find((item): item is TreeNode => item !== undefined && canSelectNode(item));
  311. if (node) {
  312. clearCheckedStatus();
  313. node.checked = CHECK_STATUS_MAP.checked;
  314. }
  315. publishPendingSelectionChange(resolvedImperativeKeys);
  316. }
  317. function applyExpandedState() {
  318. const defaultExpandedKeys = normalizeKeys(props.defaultExpandedKeys);
  319. const expandedKeySet = new Set<TreeKey>(defaultExpandedKeys);
  320. if (props.defaultExpandParent !== false) {
  321. for (const key of defaultExpandedKeys) {
  322. const node = nodeMap.value.get(key);
  323. if (!node) {
  324. continue;
  325. }
  326. for (const parentId of node.parentIds) {
  327. expandedKeySet.add(parentId);
  328. }
  329. }
  330. }
  331. for (const node of treeList.value) {
  332. node.expanded = Boolean(props.defaultExpandAll)
  333. || expandedKeySet.has(node.id)
  334. || (Boolean(props.cacheExpandedKeys) && cachedExpandedKeys.value.has(node.id));
  335. }
  336. applyExpandCheckedState();
  337. updateVisibility();
  338. }
  339. function applyExpandCheckedState() {
  340. if (!props.expandChecked) {
  341. return;
  342. }
  343. for (const node of getCheckedNodes()) {
  344. for (const parentId of node.parentIds) {
  345. const parent = nodeMap.value.get(parentId);
  346. if (parent) {
  347. parent.expanded = true;
  348. }
  349. }
  350. }
  351. }
  352. function updateNodeAndDescendantsStatus(
  353. targetIds: TreeKey | TreeKey[],
  354. newStatus: Exclude<CheckStatus, "indeterminate">,
  355. includeDisabled = false
  356. ) {
  357. const pendingIds = [...(Array.isArray(targetIds) ? targetIds : [targetIds])];
  358. while (pendingIds.length > 0) {
  359. const targetId = pendingIds.pop();
  360. if (targetId === undefined) {
  361. continue;
  362. }
  363. const node = nodeMap.value.get(targetId);
  364. if (!node || (node.disabled && !includeDisabled && !props.checkedDisabled)) {
  365. continue;
  366. }
  367. node.checked = newStatus;
  368. const children = childrenMap.value.get(targetId);
  369. if (children && children.length > 0) {
  370. for (const child of children) {
  371. pendingIds.push(child.id);
  372. }
  373. }
  374. }
  375. }
  376. function hasChildren(nodeId: TreeKey) {
  377. const children = childrenMap.value.get(nodeId);
  378. return Array.isArray(children) && children.length > 0;
  379. }
  380. function isExpandable(node: TreeNode) {
  381. return !node.isLeaf && (hasChildren(node.id) || Boolean(props.loadMode));
  382. }
  383. function updateParentNodesStatus(targetIds?: TreeKey | TreeKey[]) {
  384. if (props.checkStrictly || !isMultiple.value) {
  385. return;
  386. }
  387. if (targetIds === undefined) {
  388. for (let index = treeList.value.length - 1; index >= 0; index -= 1) {
  389. updateNodeFromChildren(treeList.value[index]);
  390. }
  391. return;
  392. }
  393. const affectedNodes = new Map<TreeKey, TreeNode>();
  394. const ids = Array.isArray(targetIds) ? targetIds : [targetIds];
  395. for (const id of ids) {
  396. const node = nodeMap.value.get(id);
  397. if (!node) {
  398. continue;
  399. }
  400. if (hasChildren(node.id)) {
  401. affectedNodes.set(node.id, node);
  402. }
  403. for (const parentId of node.parentIds) {
  404. const parent = nodeMap.value.get(parentId);
  405. if (parent) {
  406. affectedNodes.set(parent.id, parent);
  407. }
  408. }
  409. }
  410. [...affectedNodes.values()]
  411. .sort((a, b) => b.level - a.level)
  412. .forEach(updateNodeFromChildren);
  413. }
  414. function updateNodeFromChildren(node: TreeNode) {
  415. const children = childrenMap.value.get(node.id);
  416. if (!children?.length) {
  417. return;
  418. }
  419. const allChecked = children.every((child) => child.checked === CHECK_STATUS_MAP.checked);
  420. const allUnchecked = children.every((child) => child.checked === CHECK_STATUS_MAP.unchecked);
  421. if (allChecked) {
  422. node.checked = CHECK_STATUS_MAP.checked;
  423. } else if (allUnchecked) {
  424. node.checked = CHECK_STATUS_MAP.unchecked;
  425. } else {
  426. node.checked = CHECK_STATUS_MAP.indeterminate;
  427. }
  428. }
  429. function updateVisibility() {
  430. const rawFilterValue = String(props.filterValue ?? "").trim();
  431. const normalizedFilterValue = rawFilterValue.toLowerCase();
  432. const visibleNodes: TreeNode[] = [];
  433. if (rawFilterValue) {
  434. const visibleKeySet = new Set<TreeKey>();
  435. const matchedNodes: TreeNode[] = [];
  436. for (const node of treeList.value) {
  437. const matched = props.filterMethod
  438. ? props.filterMethod(rawFilterValue, node)
  439. : node.label.toLowerCase().includes(normalizedFilterValue);
  440. if (!matched) {
  441. continue;
  442. }
  443. matchedNodes.push(node);
  444. visibleKeySet.add(node.id);
  445. for (const parentId of node.parentIds) {
  446. visibleKeySet.add(parentId);
  447. }
  448. addDescendantVisibleKeys(node.id, visibleKeySet);
  449. }
  450. for (const node of treeList.value) {
  451. node.visible = visibleKeySet.has(node.id);
  452. if (node.visible) {
  453. visibleNodes.push(node);
  454. }
  455. }
  456. visibleTreeList.value = visibleNodes;
  457. matchedTreeList.value = matchedNodes;
  458. return buildFilterPayload(visibleNodes, matchedNodes);
  459. }
  460. matchedTreeList.value = [];
  461. // treeList is pre-order flattened, so parent visibility is already resolved here.
  462. for (const node of treeList.value) {
  463. const parent = node.parentId === undefined ? undefined : nodeMap.value.get(node.parentId);
  464. node.visible = node.level === 0 || Boolean(parent?.visible && parent.expanded);
  465. if (node.visible) {
  466. visibleNodes.push(node);
  467. }
  468. }
  469. visibleTreeList.value = visibleNodes;
  470. return buildFilterPayload(visibleNodes);
  471. }
  472. function buildFilterPayload(
  473. nodes = visibleTreeList.value,
  474. matchedNodes = matchedTreeList.value
  475. ) {
  476. return {
  477. value: String(props.filterValue ?? ""),
  478. keys: nodes.map((node) => node.id),
  479. nodes,
  480. matchedKeys: matchedNodes.map((node) => node.id),
  481. matchedNodes
  482. };
  483. }
  484. function syncCachedExpandedKeys() {
  485. if (!props.cacheExpandedKeys) {
  486. return;
  487. }
  488. for (const node of treeList.value) {
  489. if (node.expanded) {
  490. cachedExpandedKeys.value.add(node.id);
  491. } else {
  492. cachedExpandedKeys.value.delete(node.id);
  493. }
  494. }
  495. }
  496. function canSelectNode(node: TreeNode) {
  497. if (!canSelectDisabledNode(node)) {
  498. return false;
  499. }
  500. if (!isMultiple.value && props.onlyRadioLeaf && !node.isLeaf) {
  501. return false;
  502. }
  503. return true;
  504. }
  505. function canSelectDisabledNode(node: TreeNode) {
  506. return !node.disabled || Boolean(props.checkedDisabled);
  507. }
  508. function clearCheckedStatus() {
  509. for (const node of treeList.value) {
  510. if (!canSelectDisabledNode(node)) {
  511. continue;
  512. }
  513. node.checked = CHECK_STATUS_MAP.unchecked;
  514. }
  515. }
  516. function getRawCheckedKeys() {
  517. return treeList.value
  518. .filter((node) => node.checked === CHECK_STATUS_MAP.checked)
  519. .map((node) => node.id);
  520. }
  521. function normalizeKeys(value: TreeKey | TreeKey[] | null | undefined): TreeKey[] {
  522. if (value === null || value === undefined) {
  523. return [];
  524. }
  525. return Array.isArray(value) ? value : [value];
  526. }
  527. function getTreeConfigSignature() {
  528. return JSON.stringify({
  529. treeProps: resolvedTreeProps.value,
  530. loadMode: props.loadMode,
  531. alwaysFirstLoad: props.alwaysFirstLoad
  532. });
  533. }
  534. function getExpansionConfigSignature() {
  535. return JSON.stringify({
  536. defaultExpandAll: props.defaultExpandAll,
  537. defaultExpandedKeys: normalizeKeys(props.defaultExpandedKeys),
  538. defaultExpandParent: props.defaultExpandParent,
  539. expandChecked: props.expandChecked,
  540. cacheExpandedKeys: props.cacheExpandedKeys
  541. });
  542. }
  543. function getCheckedValueSignature() {
  544. return JSON.stringify({
  545. controlled: props.modelValue !== undefined,
  546. value: props.modelValue !== undefined ? props.modelValue : props.defaultCheckedKeys
  547. });
  548. }
  549. function getCheckedBehaviorSignature() {
  550. return JSON.stringify({
  551. multiple: props.multiple,
  552. checkStrictly: props.checkStrictly,
  553. onlyRadioLeaf: props.onlyRadioLeaf,
  554. checkedDisabled: props.checkedDisabled,
  555. packDisabledKey: resolvedPackDisabledKey.value
  556. });
  557. }
  558. function isConfiguredCheckedStateCurrent(keys: TreeKey[]) {
  559. const expectedKeySet = new Set(keys);
  560. const currentKeySet = new Set([...getCheckedKeys(), ...pendingCheckedKeys]);
  561. if (expectedKeySet.size !== currentKeySet.size) {
  562. return false;
  563. }
  564. return [...expectedKeySet].every((key) => currentKeySet.has(key));
  565. }
  566. function getInitialCheckedKeys() {
  567. if (props.modelValue !== undefined) {
  568. return normalizeKeys(props.modelValue);
  569. }
  570. return normalizeKeys(props.defaultCheckedKeys);
  571. }
  572. function getSelectionIconClass(node: TreeNode) {
  573. if (isMultiple.value) {
  574. if (node.checked === CHECK_STATUS_MAP.checked) {
  575. return "utv-tree-checkbox-checked";
  576. }
  577. if (node.checked === CHECK_STATUS_MAP.indeterminate) {
  578. return "utv-tree-checkbox-indeterminate";
  579. }
  580. return "utv-tree-checkbox-outline";
  581. }
  582. if (node.checked === CHECK_STATUS_MAP.checked) {
  583. return "utv-tree-radio-checked";
  584. }
  585. return "utv-tree-radio-outline";
  586. }
  587. function getCheckedKeys() {
  588. return getCheckedNodes().map((node) => node.id);
  589. }
  590. function getHalfCheckedKeys() {
  591. return getHalfCheckedNodes().map((node) => node.id);
  592. }
  593. function getUncheckedKeys() {
  594. return getUncheckedNodes().map((node) => node.id);
  595. }
  596. function getCheckedNodes() {
  597. return treeList.value.filter((node) => {
  598. if (node.checked !== CHECK_STATUS_MAP.checked) {
  599. return false;
  600. }
  601. return resolvedPackDisabledKey.value || !node.disabled;
  602. });
  603. }
  604. function getHalfCheckedNodes() {
  605. return treeList.value.filter((node) => node.checked === CHECK_STATUS_MAP.indeterminate);
  606. }
  607. function getUncheckedNodes() {
  608. return treeList.value.filter((node) => node.checked === CHECK_STATUS_MAP.unchecked);
  609. }
  610. function getExpandedKeys() {
  611. return getExpandedNodes().map((node) => node.id);
  612. }
  613. function getUnexpandedKeys() {
  614. return getUnexpandedNodes().map((node) => node.id);
  615. }
  616. function getVisibleKeys() {
  617. return getVisibleNodes().map((node) => node.id);
  618. }
  619. function getMatchedKeys() {
  620. return getMatchedNodes().map((node) => node.id);
  621. }
  622. function getExpandedNodes() {
  623. return treeList.value.filter((node) => !node.isLeaf && node.expanded);
  624. }
  625. function getUnexpandedNodes() {
  626. return treeList.value.filter((node) => !node.isLeaf && !node.expanded);
  627. }
  628. function getVisibleNodes() {
  629. return visibleTreeList.value;
  630. }
  631. function getMatchedNodes() {
  632. return matchedTreeList.value;
  633. }
  634. function getNode(key: TreeKey) {
  635. return nodeMap.value.get(key);
  636. }
  637. function getNodePath(keyOrNode: TreeKey | TreeNode) {
  638. const targetNode = typeof keyOrNode === "object" ? keyOrNode : nodeMap.value.get(keyOrNode);
  639. if (!targetNode) {
  640. return [];
  641. }
  642. return [...targetNode.parentIds, targetNode.id]
  643. .map((key) => nodeMap.value.get(key))
  644. .filter((node): node is TreeNode => Boolean(node));
  645. }
  646. function buildCheckChangePayload(node: TreeNode): TreeCheckChangePayload {
  647. const nodes = getCheckedNodes();
  648. const keys = nodes.map((checkedNode) => checkedNode.id);
  649. return {
  650. value: isMultiple.value ? keys : (keys[0] ?? null),
  651. keys,
  652. nodes,
  653. halfCheckedKeys: getHalfCheckedKeys(),
  654. halfCheckedNodes: getHalfCheckedNodes(),
  655. node
  656. };
  657. }
  658. function publishPendingSelectionChange(keys: TreeKey[]) {
  659. const changedNode = keys
  660. .map((key) => nodeMap.value.get(key))
  661. .find((node): node is TreeNode => node !== undefined && canSelectNode(node));
  662. if (changedNode) {
  663. pendingCheckChangePayload.value = buildCheckChangePayload(changedNode);
  664. }
  665. }
  666. function reconcileMissingControlledKeys(wasInitialized: boolean, configuredKeys: TreeKey[]) {
  667. if (!wasInitialized || props.modelValue === undefined || props.loadMode) {
  668. return;
  669. }
  670. if (!configuredKeys.some((key) => !nodeMap.value.has(key))) {
  671. return;
  672. }
  673. const keys = getCheckedKeys();
  674. reconciledModelValue.value = {
  675. value: isMultiple.value ? keys : (keys[0] ?? null)
  676. };
  677. }
  678. function warnAboutInvalidKey(id: TreeKey, label: string) {
  679. if (id !== undefined && id !== null) {
  680. return;
  681. }
  682. warnOnce(
  683. "missing",
  684. `[uni-tree-view] 检测到缺失节点 key。请检查 tree-props.id 映射;问题节点 label:${label || "(空)"}`
  685. );
  686. }
  687. function warnOnce(key: string, message: string) {
  688. if (!(import.meta as ImportMeta & { env?: { DEV?: boolean } }).env?.DEV || warnedInvalidKeys.has(key)) {
  689. return;
  690. }
  691. warnedInvalidKeys.add(key);
  692. console.warn(message);
  693. }
  694. function setCheckedKeys(keys: TreeKey | TreeKey[], checked = true) {
  695. const normalizedKeys = normalizeKeys(keys);
  696. if (!checked) {
  697. for (const key of normalizedKeys) {
  698. pendingCheckedKeys.delete(key);
  699. pendingImperativeCheckedKeys.delete(key);
  700. }
  701. const changedNode = normalizedKeys
  702. .map((key) => nodeMap.value.get(key))
  703. .find((node): node is TreeNode => node !== undefined && canSelectNode(node));
  704. if (!changedNode) {
  705. return null;
  706. }
  707. if (isMultiple.value) {
  708. if (props.checkStrictly) {
  709. for (const key of normalizedKeys) {
  710. const node = nodeMap.value.get(key);
  711. if (node && canSelectDisabledNode(node)) {
  712. node.checked = CHECK_STATUS_MAP.unchecked;
  713. }
  714. }
  715. } else {
  716. updateNodeAndDescendantsStatus(normalizedKeys, CHECK_STATUS_MAP.unchecked, Boolean(props.checkedDisabled));
  717. updateParentNodesStatus(normalizedKeys);
  718. }
  719. } else {
  720. for (const key of normalizedKeys) {
  721. const node = nodeMap.value.get(key);
  722. if (node && canSelectNode(node)) {
  723. node.checked = CHECK_STATUS_MAP.unchecked;
  724. }
  725. }
  726. }
  727. return buildCheckChangePayload(changedNode);
  728. }
  729. if (!isMultiple.value) {
  730. const targetKey = normalizedKeys.find((key) => {
  731. const node = nodeMap.value.get(key);
  732. return node === undefined || canSelectNode(node);
  733. });
  734. if (targetKey === undefined) {
  735. return null;
  736. }
  737. const targetNode = nodeMap.value.get(targetKey);
  738. pendingCheckedKeys = new Set();
  739. pendingImperativeCheckedKeys = new Set();
  740. if (!targetNode) {
  741. pendingCheckedKeys.add(targetKey);
  742. pendingImperativeCheckedKeys.add(targetKey);
  743. return null;
  744. }
  745. clearCheckedStatus();
  746. targetNode.checked = CHECK_STATUS_MAP.checked;
  747. return buildCheckChangePayload(targetNode);
  748. }
  749. const unresolvedKeys = normalizedKeys.filter((key) => !nodeMap.value.has(key));
  750. for (const key of unresolvedKeys) {
  751. pendingCheckedKeys.add(key);
  752. pendingImperativeCheckedKeys.add(key);
  753. }
  754. const changedNode = normalizedKeys
  755. .map((key) => nodeMap.value.get(key))
  756. .find((node): node is TreeNode => node !== undefined && canSelectNode(node));
  757. if (!changedNode) {
  758. return null;
  759. }
  760. if (props.checkStrictly) {
  761. for (const key of normalizedKeys) {
  762. const node = nodeMap.value.get(key);
  763. if (node && canSelectDisabledNode(node)) {
  764. node.checked = CHECK_STATUS_MAP.checked;
  765. }
  766. }
  767. } else {
  768. updateNodeAndDescendantsStatus(normalizedKeys, CHECK_STATUS_MAP.checked, Boolean(props.checkedDisabled));
  769. updateParentNodesStatus(normalizedKeys);
  770. }
  771. return buildCheckChangePayload(changedNode);
  772. }
  773. function setExpandedKeys(keys: TreeKey[] | "all", expanded = true) {
  774. if (keys === "all") {
  775. for (const node of treeList.value) {
  776. if (!node.isLeaf) {
  777. node.expanded = expanded;
  778. syncExpandedCacheForNode(node);
  779. }
  780. }
  781. updateVisibility();
  782. return;
  783. }
  784. for (const key of keys) {
  785. const node = nodeMap.value.get(key);
  786. if (node && !node.isLeaf) {
  787. node.expanded = expanded;
  788. syncExpandedCacheForNode(node);
  789. }
  790. }
  791. updateVisibility();
  792. }
  793. function syncExpandedCacheForNode(node: TreeNode) {
  794. if (!props.cacheExpandedKeys) {
  795. return;
  796. }
  797. if (node.expanded) {
  798. cachedExpandedKeys.value.add(node.id);
  799. } else {
  800. cachedExpandedKeys.value.delete(node.id);
  801. }
  802. }
  803. function expandAll() {
  804. setExpandedKeys("all", true);
  805. }
  806. function collapseAll() {
  807. setExpandedKeys("all", false);
  808. }
  809. function resolveIsLeaf(item: TreeDataItem, node: TreeNode) {
  810. if (props.isLeafFn) {
  811. return props.isLeafFn(item, node);
  812. }
  813. const { children: childrenKey, leaf: leafKey = "leaf" } = resolvedTreeProps.value;
  814. const children = item[childrenKey];
  815. if (props.loadMode && item[leafKey] !== undefined) {
  816. return Boolean(item[leafKey]);
  817. }
  818. if (props.loadMode) {
  819. return false;
  820. }
  821. return !(Array.isArray(children) && children.length > 0);
  822. }
  823. function addDescendantVisibleKeys(nodeId: TreeKey, visibleKeySet: Set<TreeKey>) {
  824. const pendingNodes = [...(childrenMap.value.get(nodeId) ?? [])];
  825. while (pendingNodes.length > 0) {
  826. const child = pendingNodes.pop();
  827. if (!child) {
  828. continue;
  829. }
  830. visibleKeySet.add(child.id);
  831. pendingNodes.push(...(childrenMap.value.get(child.id) ?? []));
  832. }
  833. }
  834. function removeDescendants(nodeId: TreeKey) {
  835. const children = childrenMap.value.get(nodeId) ?? [];
  836. const descendantIds = new Set<TreeKey>();
  837. for (const child of children) {
  838. collectDescendantIds(child.id, descendantIds);
  839. }
  840. if (descendantIds.size === 0) {
  841. return;
  842. }
  843. treeList.value = treeList.value.filter((node) => !descendantIds.has(node.id));
  844. for (const id of descendantIds) {
  845. nodeMap.value.delete(id);
  846. childrenMap.value.delete(id);
  847. }
  848. childrenMap.value.delete(nodeId);
  849. }
  850. function collectDescendantIds(nodeId: TreeKey, ids: Set<TreeKey>) {
  851. ids.add(nodeId);
  852. const children = childrenMap.value.get(nodeId);
  853. if (!children?.length) {
  854. return;
  855. }
  856. for (const child of children) {
  857. collectDescendantIds(child.id, ids);
  858. }
  859. }
  860. function replaceNodeChildren(node: TreeNode, children: TreeDataItem[]) {
  861. const shouldInheritChecked = isMultiple.value
  862. && !props.checkStrictly
  863. && node.checked === CHECK_STATUS_MAP.checked;
  864. removeDescendants(node.id);
  865. const childNodes = flattenTree(children, node.level + 1, [...node.parentIds, node.id], [...node.parents, node.source]);
  866. treeVersion.value += 1;
  867. const nodeIndex = treeList.value.findIndex((item) => item.id === node.id);
  868. if (nodeIndex === -1) {
  869. treeList.value.push(...childNodes);
  870. } else {
  871. treeList.value.splice(nodeIndex + 1, 0, ...childNodes);
  872. }
  873. node.isLeaf = children.length === 0 && Boolean(props.loadMode);
  874. node.loaded = true;
  875. if (shouldInheritChecked) {
  876. updateNodeAndDescendantsStatus(childNodes.map((child) => child.id), CHECK_STATUS_MAP.checked);
  877. }
  878. applyPendingCheckedState();
  879. updateParentNodesStatus(node.id);
  880. updateVisibility();
  881. }
  882. async function loadNode(node: TreeNode) {
  883. if (!props.loadMode || !props.loadApi || node.isLeaf || node.loading || node.loaded) {
  884. return [];
  885. }
  886. node.loading = true;
  887. node.loadError = null;
  888. try {
  889. const children = await props.loadApi(node);
  890. const normalizedChildren = Array.isArray(children) ? children : [];
  891. if (nodeMap.value.get(node.id) !== node) {
  892. return normalizedChildren;
  893. }
  894. replaceNodeChildren(node, normalizedChildren);
  895. return normalizedChildren;
  896. } catch (error) {
  897. if (nodeMap.value.get(node.id) !== node) {
  898. return [];
  899. }
  900. node.loadError = error;
  901. throw error;
  902. } finally {
  903. node.loading = false;
  904. }
  905. }
  906. return {
  907. treeList,
  908. childrenMap,
  909. nodeMap,
  910. resolvedTreeProps,
  911. isMultiple,
  912. visibleTreeList,
  913. matchedTreeList,
  914. treeVersion,
  915. reconciledModelValue,
  916. pendingCheckChangePayload,
  917. initializeTree,
  918. toggleExpand,
  919. checkNode,
  920. applyCheckedState,
  921. applyExpandedState,
  922. hasChildren,
  923. isExpandable,
  924. getSelectionIconClass,
  925. setCheckedKeys,
  926. getCheckedKeys,
  927. getHalfCheckedKeys,
  928. getUncheckedKeys,
  929. getCheckedNodes,
  930. getHalfCheckedNodes,
  931. getUncheckedNodes,
  932. setExpandedKeys,
  933. getExpandedKeys,
  934. getUnexpandedKeys,
  935. getVisibleKeys,
  936. getMatchedKeys,
  937. getExpandedNodes,
  938. getUnexpandedNodes,
  939. getVisibleNodes,
  940. getMatchedNodes,
  941. getNode,
  942. getNodePath,
  943. expandAll,
  944. collapseAll,
  945. loadNode
  946. };
  947. }