DirectoryTree.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264
  1. import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
  2. import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  3. import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
  4. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  5. var _excluded = ["icon", "blockNode"];
  6. import { resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
  7. import { nextTick, onUpdated, ref, watch, defineComponent, computed } from 'vue';
  8. import debounce from 'lodash-es/debounce';
  9. import FolderOpenOutlined from "@ant-design/icons-vue/es/icons/FolderOpenOutlined";
  10. import FolderOutlined from "@ant-design/icons-vue/es/icons/FolderOutlined";
  11. import FileOutlined from "@ant-design/icons-vue/es/icons/FileOutlined";
  12. import classNames from '../_util/classNames';
  13. import Tree, { treeProps } from './Tree';
  14. import initDefaultProps from '../_util/props-util/initDefaultProps';
  15. import { convertDataToEntities, convertTreeToData, fillFieldNames } from '../vc-tree/utils/treeUtil';
  16. import { conductExpandParent } from '../vc-tree/util';
  17. import { calcRangeKeys, convertDirectoryKeysToNodes } from './utils/dictUtil';
  18. import useConfigInject from '../_util/hooks/useConfigInject';
  19. import { filterEmpty } from '../_util/props-util';
  20. export var directoryTreeProps = function directoryTreeProps() {
  21. return _objectSpread(_objectSpread({}, treeProps()), {}, {
  22. expandAction: {
  23. type: [Boolean, String]
  24. }
  25. });
  26. };
  27. function getIcon(props) {
  28. var isLeaf = props.isLeaf,
  29. expanded = props.expanded;
  30. if (isLeaf) {
  31. return _createVNode(FileOutlined, null, null);
  32. }
  33. return expanded ? _createVNode(FolderOpenOutlined, null, null) : _createVNode(FolderOutlined, null, null);
  34. }
  35. export default defineComponent({
  36. compatConfig: {
  37. MODE: 3
  38. },
  39. name: 'ADirectoryTree',
  40. inheritAttrs: false,
  41. props: initDefaultProps(directoryTreeProps(), {
  42. showIcon: true,
  43. expandAction: 'click'
  44. }),
  45. slots: ['icon', 'title', 'switcherIcon', 'titleRender'],
  46. // emits: [
  47. // 'update:selectedKeys',
  48. // 'update:checkedKeys',
  49. // 'update:expandedKeys',
  50. // 'expand',
  51. // 'select',
  52. // 'check',
  53. // 'doubleclick',
  54. // 'dblclick',
  55. // 'click',
  56. // ],
  57. setup: function setup(props, _ref) {
  58. var _slots$default;
  59. var attrs = _ref.attrs,
  60. slots = _ref.slots,
  61. emit = _ref.emit,
  62. expose = _ref.expose;
  63. // convertTreeToData 兼容 a-tree-node 历史写法,未来a-tree-node移除后,删除相关代码,不要再render中调用 treeData,否则死循环
  64. var treeData = ref(props.treeData || convertTreeToData(filterEmpty((_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots))));
  65. watch(function () {
  66. return props.treeData;
  67. }, function () {
  68. treeData.value = props.treeData;
  69. });
  70. onUpdated(function () {
  71. nextTick(function () {
  72. if (props.treeData === undefined && slots.default) {
  73. var _slots$default2;
  74. treeData.value = convertTreeToData(filterEmpty((_slots$default2 = slots.default) === null || _slots$default2 === void 0 ? void 0 : _slots$default2.call(slots)));
  75. }
  76. });
  77. });
  78. // Shift click usage
  79. var lastSelectedKey = ref();
  80. var cachedSelectedKeys = ref();
  81. var fieldNames = computed(function () {
  82. return fillFieldNames(props.fieldNames);
  83. });
  84. var treeRef = ref();
  85. var scrollTo = function scrollTo(scroll) {
  86. var _treeRef$value;
  87. (_treeRef$value = treeRef.value) === null || _treeRef$value === void 0 ? void 0 : _treeRef$value.scrollTo(scroll);
  88. };
  89. expose({
  90. scrollTo: scrollTo,
  91. selectedKeys: computed(function () {
  92. var _treeRef$value2;
  93. return (_treeRef$value2 = treeRef.value) === null || _treeRef$value2 === void 0 ? void 0 : _treeRef$value2.selectedKeys;
  94. }),
  95. checkedKeys: computed(function () {
  96. var _treeRef$value3;
  97. return (_treeRef$value3 = treeRef.value) === null || _treeRef$value3 === void 0 ? void 0 : _treeRef$value3.checkedKeys;
  98. }),
  99. halfCheckedKeys: computed(function () {
  100. var _treeRef$value4;
  101. return (_treeRef$value4 = treeRef.value) === null || _treeRef$value4 === void 0 ? void 0 : _treeRef$value4.halfCheckedKeys;
  102. }),
  103. loadedKeys: computed(function () {
  104. var _treeRef$value5;
  105. return (_treeRef$value5 = treeRef.value) === null || _treeRef$value5 === void 0 ? void 0 : _treeRef$value5.loadedKeys;
  106. }),
  107. loadingKeys: computed(function () {
  108. var _treeRef$value6;
  109. return (_treeRef$value6 = treeRef.value) === null || _treeRef$value6 === void 0 ? void 0 : _treeRef$value6.loadingKeys;
  110. }),
  111. expandedKeys: computed(function () {
  112. var _treeRef$value7;
  113. return (_treeRef$value7 = treeRef.value) === null || _treeRef$value7 === void 0 ? void 0 : _treeRef$value7.expandedKeys;
  114. })
  115. });
  116. var getInitExpandedKeys = function getInitExpandedKeys() {
  117. var _convertDataToEntitie = convertDataToEntities(treeData.value, {
  118. fieldNames: fieldNames.value
  119. }),
  120. keyEntities = _convertDataToEntitie.keyEntities;
  121. var initExpandedKeys;
  122. // Expanded keys
  123. if (props.defaultExpandAll) {
  124. initExpandedKeys = Object.keys(keyEntities);
  125. } else if (props.defaultExpandParent) {
  126. initExpandedKeys = conductExpandParent(props.expandedKeys || props.defaultExpandedKeys || [], keyEntities);
  127. } else {
  128. initExpandedKeys = props.expandedKeys || props.defaultExpandedKeys;
  129. }
  130. return initExpandedKeys;
  131. };
  132. var selectedKeys = ref(props.selectedKeys || props.defaultSelectedKeys || []);
  133. var expandedKeys = ref(getInitExpandedKeys());
  134. watch(function () {
  135. return props.selectedKeys;
  136. }, function () {
  137. if (props.selectedKeys !== undefined) {
  138. selectedKeys.value = props.selectedKeys;
  139. }
  140. }, {
  141. immediate: true
  142. });
  143. watch(function () {
  144. return props.expandedKeys;
  145. }, function () {
  146. if (props.expandedKeys !== undefined) {
  147. expandedKeys.value = props.expandedKeys;
  148. }
  149. }, {
  150. immediate: true
  151. });
  152. var expandFolderNode = function expandFolderNode(event, node) {
  153. var isLeaf = node.isLeaf;
  154. if (isLeaf || event.shiftKey || event.metaKey || event.ctrlKey) {
  155. return;
  156. }
  157. // Call internal rc-tree expand function
  158. // https://github.com/ant-design/ant-design/issues/12567
  159. treeRef.value.onNodeExpand(event, node);
  160. };
  161. var onDebounceExpand = debounce(expandFolderNode, 200, {
  162. leading: true
  163. });
  164. var onExpand = function onExpand(keys, info) {
  165. if (props.expandedKeys === undefined) {
  166. expandedKeys.value = keys;
  167. }
  168. // Call origin function
  169. emit('update:expandedKeys', keys);
  170. emit('expand', keys, info);
  171. };
  172. var onClick = function onClick(event, node) {
  173. var expandAction = props.expandAction;
  174. // Expand the tree
  175. if (expandAction === 'click') {
  176. onDebounceExpand(event, node);
  177. }
  178. emit('click', event, node);
  179. };
  180. var onDoubleClick = function onDoubleClick(event, node) {
  181. var expandAction = props.expandAction;
  182. // Expand the tree
  183. if (expandAction === 'dblclick' || expandAction === 'doubleclick') {
  184. onDebounceExpand(event, node);
  185. }
  186. emit('doubleclick', event, node);
  187. emit('dblclick', event, node);
  188. };
  189. var onSelect = function onSelect(keys, event) {
  190. var multiple = props.multiple;
  191. var node = event.node,
  192. nativeEvent = event.nativeEvent;
  193. var key = node[fieldNames.value.key];
  194. // const newState: DirectoryTreeState = {};
  195. // We need wrap this event since some value is not same
  196. var newEvent = _objectSpread(_objectSpread({}, event), {}, {
  197. selected: true // Directory selected always true
  198. });
  199. // Windows / Mac single pick
  200. var ctrlPick = (nativeEvent === null || nativeEvent === void 0 ? void 0 : nativeEvent.ctrlKey) || (nativeEvent === null || nativeEvent === void 0 ? void 0 : nativeEvent.metaKey);
  201. var shiftPick = nativeEvent === null || nativeEvent === void 0 ? void 0 : nativeEvent.shiftKey;
  202. // Generate new selected keys
  203. var newSelectedKeys;
  204. if (multiple && ctrlPick) {
  205. // Control click
  206. newSelectedKeys = keys;
  207. lastSelectedKey.value = key;
  208. cachedSelectedKeys.value = newSelectedKeys;
  209. newEvent.selectedNodes = convertDirectoryKeysToNodes(treeData.value, newSelectedKeys, fieldNames.value);
  210. } else if (multiple && shiftPick) {
  211. // Shift click
  212. newSelectedKeys = Array.from(new Set([].concat(_toConsumableArray(cachedSelectedKeys.value || []), _toConsumableArray(calcRangeKeys({
  213. treeData: treeData.value,
  214. expandedKeys: expandedKeys.value,
  215. startKey: key,
  216. endKey: lastSelectedKey.value,
  217. fieldNames: fieldNames.value
  218. })))));
  219. newEvent.selectedNodes = convertDirectoryKeysToNodes(treeData.value, newSelectedKeys, fieldNames.value);
  220. } else {
  221. // Single click
  222. newSelectedKeys = [key];
  223. lastSelectedKey.value = key;
  224. cachedSelectedKeys.value = newSelectedKeys;
  225. newEvent.selectedNodes = convertDirectoryKeysToNodes(treeData.value, newSelectedKeys, fieldNames.value);
  226. }
  227. emit('update:selectedKeys', newSelectedKeys);
  228. emit('select', newSelectedKeys, newEvent);
  229. if (props.selectedKeys === undefined) {
  230. selectedKeys.value = newSelectedKeys;
  231. }
  232. };
  233. var onCheck = function onCheck(checkedObjOrKeys, eventObj) {
  234. emit('update:checkedKeys', checkedObjOrKeys);
  235. emit('check', checkedObjOrKeys, eventObj);
  236. };
  237. var _useConfigInject = useConfigInject('tree', props),
  238. prefixCls = _useConfigInject.prefixCls,
  239. direction = _useConfigInject.direction;
  240. return function () {
  241. var connectClassName = classNames("".concat(prefixCls.value, "-directory"), _defineProperty({}, "".concat(prefixCls.value, "-directory-rtl"), direction.value === 'rtl'), attrs.class);
  242. var _props$icon = props.icon,
  243. icon = _props$icon === void 0 ? slots.icon : _props$icon,
  244. _props$blockNode = props.blockNode,
  245. blockNode = _props$blockNode === void 0 ? true : _props$blockNode,
  246. otherProps = _objectWithoutProperties(props, _excluded);
  247. return _createVNode(Tree, _objectSpread(_objectSpread(_objectSpread({}, attrs), {}, {
  248. "icon": icon || getIcon,
  249. "ref": treeRef,
  250. "blockNode": blockNode
  251. }, otherProps), {}, {
  252. "prefixCls": prefixCls.value,
  253. "class": connectClassName,
  254. "expandedKeys": expandedKeys.value,
  255. "selectedKeys": selectedKeys.value,
  256. "onSelect": onSelect,
  257. "onClick": onClick,
  258. "onDblclick": onDoubleClick,
  259. "onExpand": onExpand,
  260. "onCheck": onCheck
  261. }), slots);
  262. };
  263. }
  264. });