1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069 |
- "use strict";
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
- var _typeof3 = require("@babel/runtime/helpers/typeof");
- Object.defineProperty(exports, "__esModule", {
- value: true
- });
- exports.default = void 0;
- var _vue = require("vue");
- var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
- var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
- var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
- var _contextTypes = require("./contextTypes");
- var _util = require("./util");
- var _treeUtil = require("./utils/treeUtil");
- var _NodeList = _interopRequireWildcard(require("./NodeList"));
- var _conductUtil = require("./utils/conductUtil");
- var _DropIndicator = _interopRequireDefault(require("./DropIndicator"));
- var _initDefaultProps = _interopRequireDefault(require("../_util/props-util/initDefaultProps"));
- var _props = require("./props");
- var _warning = require("../vc-util/warning");
- var _KeyCode = _interopRequireDefault(require("../_util/KeyCode"));
- var _classNames2 = _interopRequireDefault(require("../_util/classNames"));
- var _pickAttrs = _interopRequireDefault(require("../_util/pickAttrs"));
- var _useMaxLevel2 = _interopRequireDefault(require("./useMaxLevel"));
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
- var MAX_RETRY_TIMES = 10;
- var _default2 = (0, _vue.defineComponent)({
- compatConfig: {
- MODE: 3
- },
- name: 'Tree',
- inheritAttrs: false,
- slots: ['checkable', 'title', 'icon', 'titleRender'],
- props: (0, _initDefaultProps.default)((0, _props.treeProps)(), {
- prefixCls: 'vc-tree',
- showLine: false,
- showIcon: true,
- selectable: true,
- multiple: false,
- checkable: false,
- disabled: false,
- checkStrictly: false,
- draggable: false,
- defaultExpandParent: true,
- autoExpandParent: false,
- defaultExpandAll: false,
- defaultExpandedKeys: [],
- defaultCheckedKeys: [],
- defaultSelectedKeys: [],
- dropIndicatorRender: _DropIndicator.default,
- allowDrop: function allowDrop() {
- return true;
- }
- }),
- setup: function setup(props, _ref) {
- var attrs = _ref.attrs,
- slots = _ref.slots,
- expose = _ref.expose;
- var destroyed = (0, _vue.ref)(false);
- var delayedDragEnterLogic = {};
- var indent = (0, _vue.ref)();
- var selectedKeys = (0, _vue.shallowRef)([]);
- var checkedKeys = (0, _vue.shallowRef)([]);
- var halfCheckedKeys = (0, _vue.shallowRef)([]);
- var loadedKeys = (0, _vue.shallowRef)([]);
- var loadingKeys = (0, _vue.shallowRef)([]);
- var expandedKeys = (0, _vue.shallowRef)([]);
- var loadingRetryTimes = {};
- var dragState = (0, _vue.reactive)({
- draggingNodeKey: null,
- dragChildrenKeys: [],
- // dropTargetKey is the key of abstract-drop-node
- // the abstract-drop-node is the real drop node when drag and drop
- // not the DOM drag over node
- dropTargetKey: null,
- dropPosition: null,
- dropContainerKey: null,
- dropLevelOffset: null,
- dropTargetPos: null,
- dropAllowed: true,
- // the abstract-drag-over-node
- // if mouse is on the bottom of top dom node or no the top of the bottom dom node
- // abstract-drag-over-node is the top node
- dragOverNodeKey: null
- });
- var treeData = (0, _vue.shallowRef)([]);
- (0, _vue.watch)([function () {
- return props.treeData;
- }, function () {
- return props.children;
- }], function () {
- treeData.value = props.treeData !== undefined ? (0, _vue.toRaw)(props.treeData).slice() : (0, _treeUtil.convertTreeToData)((0, _vue.toRaw)(props.children));
- }, {
- immediate: true,
- deep: true
- });
- var keyEntities = (0, _vue.shallowRef)({});
- var focused = (0, _vue.ref)(false);
- var activeKey = (0, _vue.ref)(null);
- var listChanging = (0, _vue.ref)(false);
- var fieldNames = (0, _vue.computed)(function () {
- return (0, _treeUtil.fillFieldNames)(props.fieldNames);
- });
- var listRef = (0, _vue.ref)();
- var dragStartMousePosition = null;
- var dragNode = null;
- var currentMouseOverDroppableNodeKey = null;
- var treeNodeRequiredProps = (0, _vue.computed)(function () {
- return {
- expandedKeysSet: expandedKeysSet.value,
- selectedKeysSet: selectedKeysSet.value,
- loadedKeysSet: loadedKeysSet.value,
- loadingKeysSet: loadingKeysSet.value,
- checkedKeysSet: checkedKeysSet.value,
- halfCheckedKeysSet: halfCheckedKeysSet.value,
- dragOverNodeKey: dragState.dragOverNodeKey,
- dropPosition: dragState.dropPosition,
- keyEntities: keyEntities.value
- };
- });
- var expandedKeysSet = (0, _vue.computed)(function () {
- return new Set(expandedKeys.value);
- });
- var selectedKeysSet = (0, _vue.computed)(function () {
- return new Set(selectedKeys.value);
- });
- var loadedKeysSet = (0, _vue.computed)(function () {
- return new Set(loadedKeys.value);
- });
- var loadingKeysSet = (0, _vue.computed)(function () {
- return new Set(loadingKeys.value);
- });
- var checkedKeysSet = (0, _vue.computed)(function () {
- return new Set(checkedKeys.value);
- });
- var halfCheckedKeysSet = (0, _vue.computed)(function () {
- return new Set(halfCheckedKeys.value);
- });
- (0, _vue.watchEffect)(function () {
- if (treeData.value) {
- var entitiesMap = (0, _treeUtil.convertDataToEntities)(treeData.value, {
- fieldNames: fieldNames.value
- });
- keyEntities.value = (0, _objectSpread3.default)((0, _defineProperty2.default)({}, _NodeList.MOTION_KEY, _NodeList.MotionEntity), entitiesMap.keyEntities);
- }
- });
- var init = false; // 处理 defaultXxxx api, 仅仅首次有效
- (0, _vue.watch)([function () {
- return props.expandedKeys;
- }, function () {
- return props.autoExpandParent;
- }, keyEntities],
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
- function (_ref2, _ref3) {
- var _ref4 = (0, _slicedToArray2.default)(_ref2, 2),
- _newKeys = _ref4[0],
- newAutoExpandParent = _ref4[1];
- var _ref5 = (0, _slicedToArray2.default)(_ref3, 2),
- _oldKeys = _ref5[0],
- oldAutoExpandParent = _ref5[1];
- var keys = expandedKeys.value;
- // ================ expandedKeys =================
- if (props.expandedKeys !== undefined || init && newAutoExpandParent !== oldAutoExpandParent) {
- keys = props.autoExpandParent || !init && props.defaultExpandParent ? (0, _util.conductExpandParent)(props.expandedKeys, keyEntities.value) : props.expandedKeys;
- } else if (!init && props.defaultExpandAll) {
- var cloneKeyEntities = (0, _objectSpread3.default)({}, keyEntities.value);
- delete cloneKeyEntities[_NodeList.MOTION_KEY];
- keys = Object.keys(cloneKeyEntities).map(function (key) {
- return cloneKeyEntities[key].key;
- });
- } else if (!init && props.defaultExpandedKeys) {
- keys = props.autoExpandParent || props.defaultExpandParent ? (0, _util.conductExpandParent)(props.defaultExpandedKeys, keyEntities.value) : props.defaultExpandedKeys;
- }
- if (keys) {
- expandedKeys.value = keys;
- }
- init = true;
- }, {
- immediate: true
- });
- // ================ flattenNodes =================
- var flattenNodes = (0, _vue.shallowRef)([]);
- (0, _vue.watchEffect)(function () {
- flattenNodes.value = (0, _treeUtil.flattenTreeData)(treeData.value, expandedKeys.value, fieldNames.value);
- });
- // ================ selectedKeys =================
- (0, _vue.watchEffect)(function () {
- if (props.selectable) {
- if (props.selectedKeys !== undefined) {
- selectedKeys.value = (0, _util.calcSelectedKeys)(props.selectedKeys, props);
- } else if (!init && props.defaultSelectedKeys) {
- selectedKeys.value = (0, _util.calcSelectedKeys)(props.defaultSelectedKeys, props);
- }
- }
- });
- var _useMaxLevel = (0, _useMaxLevel2.default)(keyEntities),
- maxLevel = _useMaxLevel.maxLevel,
- levelEntities = _useMaxLevel.levelEntities;
- // ================= checkedKeys =================
- (0, _vue.watchEffect)(function () {
- if (props.checkable) {
- var checkedKeyEntity;
- if (props.checkedKeys !== undefined) {
- checkedKeyEntity = (0, _util.parseCheckedKeys)(props.checkedKeys) || {};
- } else if (!init && props.defaultCheckedKeys) {
- checkedKeyEntity = (0, _util.parseCheckedKeys)(props.defaultCheckedKeys) || {};
- } else if (treeData.value) {
- // If `treeData` changed, we also need check it
- checkedKeyEntity = (0, _util.parseCheckedKeys)(props.checkedKeys) || {
- checkedKeys: checkedKeys.value,
- halfCheckedKeys: halfCheckedKeys.value
- };
- }
- if (checkedKeyEntity) {
- var _checkedKeyEntity = checkedKeyEntity,
- _checkedKeyEntity$che = _checkedKeyEntity.checkedKeys,
- newCheckedKeys = _checkedKeyEntity$che === void 0 ? [] : _checkedKeyEntity$che,
- _checkedKeyEntity$hal = _checkedKeyEntity.halfCheckedKeys,
- newHalfCheckedKeys = _checkedKeyEntity$hal === void 0 ? [] : _checkedKeyEntity$hal;
- if (!props.checkStrictly) {
- var conductKeys = (0, _conductUtil.conductCheck)(newCheckedKeys, true, keyEntities.value, maxLevel.value, levelEntities.value);
- newCheckedKeys = conductKeys.checkedKeys;
- newHalfCheckedKeys = conductKeys.halfCheckedKeys;
- }
- checkedKeys.value = newCheckedKeys;
- halfCheckedKeys.value = newHalfCheckedKeys;
- }
- }
- });
- // ================= loadedKeys ==================
- (0, _vue.watchEffect)(function () {
- if (props.loadedKeys) {
- loadedKeys.value = props.loadedKeys;
- }
- });
- var resetDragState = function resetDragState() {
- (0, _extends2.default)(dragState, {
- dragOverNodeKey: null,
- dropPosition: null,
- dropLevelOffset: null,
- dropTargetKey: null,
- dropContainerKey: null,
- dropTargetPos: null,
- dropAllowed: false
- });
- };
- var scrollTo = function scrollTo(scroll) {
- listRef.value.scrollTo(scroll);
- };
- (0, _vue.watch)(function () {
- return props.activeKey;
- }, function () {
- if (props.activeKey !== undefined) {
- activeKey.value = props.activeKey;
- }
- }, {
- immediate: true
- });
- (0, _vue.watch)(activeKey, function (val) {
- (0, _vue.nextTick)(function () {
- if (val !== null) {
- scrollTo({
- key: val
- });
- }
- });
- }, {
- immediate: true,
- flush: 'post'
- });
- // =========================== Expanded ===========================
- /** Set uncontrolled `expandedKeys`. This will also auto update `flattenNodes`. */
- var setExpandedKeys = function setExpandedKeys(keys) {
- if (props.expandedKeys === undefined) {
- expandedKeys.value = keys;
- }
- };
- var cleanDragState = function cleanDragState() {
- if (dragState.draggingNodeKey !== null) {
- (0, _extends2.default)(dragState, {
- draggingNodeKey: null,
- dropPosition: null,
- dropContainerKey: null,
- dropTargetKey: null,
- dropLevelOffset: null,
- dropAllowed: true,
- dragOverNodeKey: null
- });
- }
- dragStartMousePosition = null;
- currentMouseOverDroppableNodeKey = null;
- };
- // if onNodeDragEnd is called, onWindowDragEnd won't be called since stopPropagation() is called
- var onNodeDragEnd = function onNodeDragEnd(event, node) {
- var onDragend = props.onDragend;
- dragState.dragOverNodeKey = null;
- cleanDragState();
- onDragend === null || onDragend === void 0 ? void 0 : onDragend({
- event: event,
- node: node.eventData
- });
- dragNode = null;
- };
- // since stopPropagation() is called in treeNode
- // if onWindowDrag is called, whice means state is keeped, drag state should be cleared
- var onWindowDragEnd = function onWindowDragEnd(event) {
- onNodeDragEnd(event, null, true);
- window.removeEventListener('dragend', onWindowDragEnd);
- };
- var onNodeDragStart = function onNodeDragStart(event, node) {
- var onDragstart = props.onDragstart;
- var eventKey = node.eventKey,
- eventData = node.eventData;
- dragNode = node;
- dragStartMousePosition = {
- x: event.clientX,
- y: event.clientY
- };
- var newExpandedKeys = (0, _util.arrDel)(expandedKeys.value, eventKey);
- dragState.draggingNodeKey = eventKey;
- dragState.dragChildrenKeys = (0, _util.getDragChildrenKeys)(eventKey, keyEntities.value);
- indent.value = listRef.value.getIndentWidth();
- setExpandedKeys(newExpandedKeys);
- window.addEventListener('dragend', onWindowDragEnd);
- if (onDragstart) {
- onDragstart({
- event: event,
- node: eventData
- });
- }
- };
- /**
- * [Legacy] Select handler is smaller than node,
- * so that this will trigger when drag enter node or select handler.
- * This is a little tricky if customize css without padding.
- * Better for use mouse move event to refresh drag state.
- * But let's just keep it to avoid event trigger logic change.
- */
- var onNodeDragEnter = function onNodeDragEnter(event, node) {
- var onDragenter = props.onDragenter,
- onExpand = props.onExpand,
- allowDrop = props.allowDrop,
- direction = props.direction;
- var pos = node.pos,
- eventKey = node.eventKey;
- // record the key of node which is latest entered, used in dragleave event.
- if (currentMouseOverDroppableNodeKey !== eventKey) {
- currentMouseOverDroppableNodeKey = eventKey;
- }
- if (!dragNode) {
- resetDragState();
- return;
- }
- var _calcDropPosition = (0, _util.calcDropPosition)(event, dragNode, node, indent.value, dragStartMousePosition, allowDrop, flattenNodes.value, keyEntities.value, expandedKeysSet.value, direction),
- dropPosition = _calcDropPosition.dropPosition,
- dropLevelOffset = _calcDropPosition.dropLevelOffset,
- dropTargetKey = _calcDropPosition.dropTargetKey,
- dropContainerKey = _calcDropPosition.dropContainerKey,
- dropTargetPos = _calcDropPosition.dropTargetPos,
- dropAllowed = _calcDropPosition.dropAllowed,
- dragOverNodeKey = _calcDropPosition.dragOverNodeKey;
- if (
- // don't allow drop inside its children
- dragState.dragChildrenKeys.indexOf(dropTargetKey) !== -1 ||
- // don't allow drop when drop is not allowed caculated by calcDropPosition
- !dropAllowed) {
- resetDragState();
- return;
- }
- // Side effect for delay drag
- if (!delayedDragEnterLogic) {
- delayedDragEnterLogic = {};
- }
- Object.keys(delayedDragEnterLogic).forEach(function (key) {
- clearTimeout(delayedDragEnterLogic[key]);
- });
- if (dragNode.eventKey !== node.eventKey) {
- // hoist expand logic here
- // since if logic is on the bottom
- // it will be blocked by abstract dragover node check
- // => if you dragenter from top, you mouse will still be consider as in the top node
- delayedDragEnterLogic[pos] = window.setTimeout(function () {
- if (dragState.draggingNodeKey === null) return;
- var newExpandedKeys = expandedKeys.value.slice();
- var entity = keyEntities.value[node.eventKey];
- if (entity && (entity.children || []).length) {
- newExpandedKeys = (0, _util.arrAdd)(expandedKeys.value, node.eventKey);
- }
- setExpandedKeys(newExpandedKeys);
- if (onExpand) {
- onExpand(newExpandedKeys, {
- node: node.eventData,
- expanded: true,
- nativeEvent: event
- });
- }
- }, 800);
- }
- // Skip if drag node is self
- if (dragNode.eventKey === dropTargetKey && dropLevelOffset === 0) {
- resetDragState();
- return;
- }
- // Update drag over node and drag state
- (0, _extends2.default)(dragState, {
- dragOverNodeKey: dragOverNodeKey,
- dropPosition: dropPosition,
- dropLevelOffset: dropLevelOffset,
- dropTargetKey: dropTargetKey,
- dropContainerKey: dropContainerKey,
- dropTargetPos: dropTargetPos,
- dropAllowed: dropAllowed
- });
- if (onDragenter) {
- onDragenter({
- event: event,
- node: node.eventData,
- expandedKeys: expandedKeys.value
- });
- }
- };
- var onNodeDragOver = function onNodeDragOver(event, node) {
- var onDragover = props.onDragover,
- allowDrop = props.allowDrop,
- direction = props.direction;
- if (!dragNode) {
- return;
- }
- var _calcDropPosition2 = (0, _util.calcDropPosition)(event, dragNode, node, indent.value, dragStartMousePosition, allowDrop, flattenNodes.value, keyEntities.value, expandedKeysSet.value, direction),
- dropPosition = _calcDropPosition2.dropPosition,
- dropLevelOffset = _calcDropPosition2.dropLevelOffset,
- dropTargetKey = _calcDropPosition2.dropTargetKey,
- dropContainerKey = _calcDropPosition2.dropContainerKey,
- dropAllowed = _calcDropPosition2.dropAllowed,
- dropTargetPos = _calcDropPosition2.dropTargetPos,
- dragOverNodeKey = _calcDropPosition2.dragOverNodeKey;
- if (dragState.dragChildrenKeys.indexOf(dropTargetKey) !== -1 || !dropAllowed) {
- // don't allow drop inside its children
- // don't allow drop when drop is not allowed caculated by calcDropPosition
- return;
- }
- // Update drag position
- if (dragNode.eventKey === dropTargetKey && dropLevelOffset === 0) {
- if (!(dragState.dropPosition === null && dragState.dropLevelOffset === null && dragState.dropTargetKey === null && dragState.dropContainerKey === null && dragState.dropTargetPos === null && dragState.dropAllowed === false && dragState.dragOverNodeKey === null)) {
- resetDragState();
- }
- } else if (!(dropPosition === dragState.dropPosition && dropLevelOffset === dragState.dropLevelOffset && dropTargetKey === dragState.dropTargetKey && dropContainerKey === dragState.dropContainerKey && dropTargetPos === dragState.dropTargetPos && dropAllowed === dragState.dropAllowed && dragOverNodeKey === dragState.dragOverNodeKey)) {
- (0, _extends2.default)(dragState, {
- dropPosition: dropPosition,
- dropLevelOffset: dropLevelOffset,
- dropTargetKey: dropTargetKey,
- dropContainerKey: dropContainerKey,
- dropTargetPos: dropTargetPos,
- dropAllowed: dropAllowed,
- dragOverNodeKey: dragOverNodeKey
- });
- }
- if (onDragover) {
- onDragover({
- event: event,
- node: node.eventData
- });
- }
- };
- var onNodeDragLeave = function onNodeDragLeave(event, node) {
- // if it is outside the droppable area
- // currentMouseOverDroppableNodeKey will be updated in dragenter event when into another droppable receiver.
- if (currentMouseOverDroppableNodeKey === node.eventKey && !event.currentTarget.contains(event.relatedTarget)) {
- resetDragState();
- currentMouseOverDroppableNodeKey = null;
- }
- var onDragleave = props.onDragleave;
- if (onDragleave) {
- onDragleave({
- event: event,
- node: node.eventData
- });
- }
- };
- var onNodeDrop = function onNodeDrop(event, _node) {
- var _activeItem$value;
- var outsideTree = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
- var dragChildrenKeys = dragState.dragChildrenKeys,
- dropPosition = dragState.dropPosition,
- dropTargetKey = dragState.dropTargetKey,
- dropTargetPos = dragState.dropTargetPos,
- dropAllowed = dragState.dropAllowed;
- if (!dropAllowed) return;
- var onDrop = props.onDrop;
- dragState.dragOverNodeKey = null;
- cleanDragState();
- if (dropTargetKey === null) return;
- var abstractDropNodeProps = (0, _objectSpread3.default)((0, _objectSpread3.default)({}, (0, _treeUtil.getTreeNodeProps)(dropTargetKey, (0, _vue.toRaw)(treeNodeRequiredProps.value))), {}, {
- active: ((_activeItem$value = activeItem.value) === null || _activeItem$value === void 0 ? void 0 : _activeItem$value.key) === dropTargetKey,
- data: keyEntities.value[dropTargetKey].node
- });
- var dropToChild = dragChildrenKeys.indexOf(dropTargetKey) !== -1;
- (0, _warning.warning)(!dropToChild, "Can not drop to dragNode's children node. Maybe this is a bug of ant-design-vue. Please report an issue.");
- var posArr = (0, _util.posToArr)(dropTargetPos);
- var dropResult = {
- event: event,
- node: (0, _treeUtil.convertNodePropsToEventData)(abstractDropNodeProps),
- dragNode: dragNode ? dragNode.eventData : null,
- dragNodesKeys: [dragNode.eventKey].concat(dragChildrenKeys),
- dropToGap: dropPosition !== 0,
- dropPosition: dropPosition + Number(posArr[posArr.length - 1])
- };
- if (!outsideTree) {
- onDrop === null || onDrop === void 0 ? void 0 : onDrop(dropResult);
- }
- dragNode = null;
- };
- var onNodeClick = function onNodeClick(e, treeNode) {
- var onClick = props.onClick;
- if (onClick) {
- onClick(e, treeNode);
- }
- };
- var onNodeDoubleClick = function onNodeDoubleClick(e, treeNode) {
- var onDblclick = props.onDblclick;
- if (onDblclick) {
- onDblclick(e, treeNode);
- }
- };
- var onNodeSelect = function onNodeSelect(e, treeNode) {
- var newSelectedKeys = selectedKeys.value;
- var onSelect = props.onSelect,
- multiple = props.multiple;
- var selected = treeNode.selected;
- var key = treeNode[fieldNames.value.key];
- var targetSelected = !selected;
- // Update selected keys
- if (!targetSelected) {
- newSelectedKeys = (0, _util.arrDel)(newSelectedKeys, key);
- } else if (!multiple) {
- newSelectedKeys = [key];
- } else {
- newSelectedKeys = (0, _util.arrAdd)(newSelectedKeys, key);
- }
- // [Legacy] Not found related usage in doc or upper libs
- var keyEntitiesValue = keyEntities.value;
- var selectedNodes = newSelectedKeys.map(function (selectedKey) {
- var entity = keyEntitiesValue[selectedKey];
- if (!entity) return null;
- return entity.node;
- }).filter(function (node) {
- return node;
- });
- if (props.selectedKeys === undefined) {
- selectedKeys.value = newSelectedKeys;
- }
- if (onSelect) {
- onSelect(newSelectedKeys, {
- event: 'select',
- selected: targetSelected,
- node: treeNode,
- selectedNodes: selectedNodes,
- nativeEvent: e
- });
- }
- };
- var onNodeCheck = function onNodeCheck(e, treeNode, checked) {
- var checkStrictly = props.checkStrictly,
- onCheck = props.onCheck;
- var key = treeNode[fieldNames.value.key];
- // Prepare trigger arguments
- var checkedObj;
- var eventObj = {
- event: 'check',
- node: treeNode,
- checked: checked,
- nativeEvent: e
- };
- var keyEntitiesValue = keyEntities.value;
- if (checkStrictly) {
- var newCheckedKeys = checked ? (0, _util.arrAdd)(checkedKeys.value, key) : (0, _util.arrDel)(checkedKeys.value, key);
- var newHalfCheckedKeys = (0, _util.arrDel)(halfCheckedKeys.value, key);
- checkedObj = {
- checked: newCheckedKeys,
- halfChecked: newHalfCheckedKeys
- };
- eventObj.checkedNodes = newCheckedKeys.map(function (checkedKey) {
- return keyEntitiesValue[checkedKey];
- }).filter(function (entity) {
- return entity;
- }).map(function (entity) {
- return entity.node;
- });
- if (props.checkedKeys === undefined) {
- checkedKeys.value = newCheckedKeys;
- }
- } else {
- // Always fill first
- var _conductCheck = (0, _conductUtil.conductCheck)([].concat((0, _toConsumableArray2.default)(checkedKeys.value), [key]), true, keyEntitiesValue, maxLevel.value, levelEntities.value),
- _newCheckedKeys = _conductCheck.checkedKeys,
- _newHalfCheckedKeys = _conductCheck.halfCheckedKeys;
- // If remove, we do it again to correction
- if (!checked) {
- var keySet = new Set(_newCheckedKeys);
- keySet.delete(key);
- var _conductCheck2 = (0, _conductUtil.conductCheck)(Array.from(keySet), {
- checked: false,
- halfCheckedKeys: _newHalfCheckedKeys
- }, keyEntitiesValue, maxLevel.value, levelEntities.value);
- _newCheckedKeys = _conductCheck2.checkedKeys;
- _newHalfCheckedKeys = _conductCheck2.halfCheckedKeys;
- }
- checkedObj = _newCheckedKeys;
- // [Legacy] This is used for vc-tree-select`
- eventObj.checkedNodes = [];
- eventObj.checkedNodesPositions = [];
- eventObj.halfCheckedKeys = _newHalfCheckedKeys;
- _newCheckedKeys.forEach(function (checkedKey) {
- var entity = keyEntitiesValue[checkedKey];
- if (!entity) return;
- var node = entity.node,
- pos = entity.pos;
- eventObj.checkedNodes.push(node);
- eventObj.checkedNodesPositions.push({
- node: node,
- pos: pos
- });
- });
- if (props.checkedKeys === undefined) {
- checkedKeys.value = _newCheckedKeys;
- halfCheckedKeys.value = _newHalfCheckedKeys;
- }
- }
- if (onCheck) {
- onCheck(checkedObj, eventObj);
- }
- };
- var onNodeLoad = function onNodeLoad(treeNode) {
- var key = treeNode[fieldNames.value.key];
- var loadPromise = new Promise(function (resolve, reject) {
- // We need to get the latest state of loading/loaded keys
- var loadData = props.loadData,
- onLoad = props.onLoad;
- if (!loadData || loadedKeysSet.value.has(key) || loadingKeysSet.value.has(key)) {
- return null;
- }
- // Process load data
- var promise = loadData(treeNode);
- promise.then(function () {
- var newLoadedKeys = (0, _util.arrAdd)(loadedKeys.value, key);
- var newLoadingKeys = (0, _util.arrDel)(loadingKeys.value, key);
- // onLoad should trigger before internal setState to avoid `loadData` trigger twice.
- // https://github.com/ant-design/ant-design/issues/12464
- if (onLoad) {
- onLoad(newLoadedKeys, {
- event: 'load',
- node: treeNode
- });
- }
- if (props.loadedKeys === undefined) {
- loadedKeys.value = newLoadedKeys;
- }
- loadingKeys.value = newLoadingKeys;
- resolve();
- }).catch(function (e) {
- var newLoadingKeys = (0, _util.arrDel)(loadingKeys.value, key);
- loadingKeys.value = newLoadingKeys;
- // If exceed max retry times, we give up retry
- loadingRetryTimes[key] = (loadingRetryTimes[key] || 0) + 1;
- if (loadingRetryTimes[key] >= MAX_RETRY_TIMES) {
- (0, _warning.warning)(false, 'Retry for `loadData` many times but still failed. No more retry.');
- var newLoadedKeys = (0, _util.arrAdd)(loadedKeys.value, key);
- if (props.loadedKeys === undefined) {
- loadedKeys.value = newLoadedKeys;
- }
- resolve();
- }
- reject(e);
- });
- loadingKeys.value = (0, _util.arrAdd)(loadingKeys.value, key);
- });
- // Not care warning if we ignore this
- loadPromise.catch(function () {});
- return loadPromise;
- };
- var onNodeMouseEnter = function onNodeMouseEnter(event, node) {
- var onMouseenter = props.onMouseenter;
- if (onMouseenter) {
- onMouseenter({
- event: event,
- node: node
- });
- }
- };
- var onNodeMouseLeave = function onNodeMouseLeave(event, node) {
- var onMouseleave = props.onMouseleave;
- if (onMouseleave) {
- onMouseleave({
- event: event,
- node: node
- });
- }
- };
- var onNodeContextMenu = function onNodeContextMenu(event, node) {
- var onRightClick = props.onRightClick;
- if (onRightClick) {
- event.preventDefault();
- onRightClick({
- event: event,
- node: node
- });
- }
- };
- var onFocus = function onFocus(e) {
- var onFocus = props.onFocus;
- focused.value = true;
- if (onFocus) {
- onFocus(e);
- }
- };
- var onBlur = function onBlur(e) {
- var onBlur = props.onBlur;
- focused.value = false;
- onActiveChange(null);
- if (onBlur) {
- onBlur(e);
- }
- };
- var onNodeExpand = function onNodeExpand(e, treeNode) {
- var newExpandedKeys = expandedKeys.value;
- var onExpand = props.onExpand,
- loadData = props.loadData;
- var expanded = treeNode.expanded;
- var key = treeNode[fieldNames.value.key];
- // Do nothing when motion is in progress
- if (listChanging.value) {
- return;
- }
- // Update selected keys
- var index = newExpandedKeys.indexOf(key);
- var targetExpanded = !expanded;
- (0, _warning.warning)(expanded && index !== -1 || !expanded && index === -1, 'Expand state not sync with index check');
- if (targetExpanded) {
- newExpandedKeys = (0, _util.arrAdd)(newExpandedKeys, key);
- } else {
- newExpandedKeys = (0, _util.arrDel)(newExpandedKeys, key);
- }
- setExpandedKeys(newExpandedKeys);
- if (onExpand) {
- onExpand(newExpandedKeys, {
- node: treeNode,
- expanded: targetExpanded,
- nativeEvent: e
- });
- }
- // Async Load data
- if (targetExpanded && loadData) {
- var loadPromise = onNodeLoad(treeNode);
- if (loadPromise) {
- loadPromise.then(function () {
- // [Legacy] Refresh logic
- // const newFlattenTreeData = flattenTreeData(
- // treeData.value,
- // newExpandedKeys,
- // fieldNames.value,
- // );
- // flattenNodes.value = newFlattenTreeData;
- }).catch(function (e) {
- var expandedKeysToRestore = (0, _util.arrDel)(expandedKeys.value, key);
- setExpandedKeys(expandedKeysToRestore);
- Promise.reject(e);
- });
- }
- }
- };
- var onListChangeStart = function onListChangeStart() {
- listChanging.value = true;
- };
- var onListChangeEnd = function onListChangeEnd() {
- setTimeout(function () {
- listChanging.value = false;
- });
- };
- // =========================== Keyboard ===========================
- var onActiveChange = function onActiveChange(newActiveKey) {
- var onActiveChange = props.onActiveChange;
- if (activeKey.value === newActiveKey) {
- return;
- }
- if (props.activeKey !== undefined) {
- activeKey.value = newActiveKey;
- }
- if (newActiveKey !== null) {
- scrollTo({
- key: newActiveKey
- });
- }
- if (onActiveChange) {
- onActiveChange(newActiveKey);
- }
- };
- var activeItem = (0, _vue.computed)(function () {
- if (activeKey.value === null) {
- return null;
- }
- return flattenNodes.value.find(function (_ref6) {
- var key = _ref6.key;
- return key === activeKey.value;
- }) || null;
- });
- var offsetActiveKey = function offsetActiveKey(offset) {
- var index = flattenNodes.value.findIndex(function (_ref7) {
- var key = _ref7.key;
- return key === activeKey.value;
- });
- // Align with index
- if (index === -1 && offset < 0) {
- index = flattenNodes.value.length;
- }
- index = (index + offset + flattenNodes.value.length) % flattenNodes.value.length;
- var item = flattenNodes.value[index];
- if (item) {
- var key = item.key;
- onActiveChange(key);
- } else {
- onActiveChange(null);
- }
- };
- var activeItemEventNode = (0, _vue.computed)(function () {
- return (0, _treeUtil.convertNodePropsToEventData)((0, _objectSpread3.default)((0, _objectSpread3.default)({}, (0, _treeUtil.getTreeNodeProps)(activeKey.value, treeNodeRequiredProps.value)), {}, {
- data: activeItem.value.data,
- active: true
- }));
- });
- var onKeydown = function onKeydown(event) {
- var onKeydown = props.onKeydown,
- checkable = props.checkable,
- selectable = props.selectable;
- // >>>>>>>>>> Direction
- switch (event.which) {
- case _KeyCode.default.UP:
- {
- offsetActiveKey(-1);
- event.preventDefault();
- break;
- }
- case _KeyCode.default.DOWN:
- {
- offsetActiveKey(1);
- event.preventDefault();
- break;
- }
- }
- // >>>>>>>>>> Expand & Selection
- var item = activeItem.value;
- if (item && item.data) {
- var expandable = item.data.isLeaf === false || !!(item.data.children || []).length;
- var eventNode = activeItemEventNode.value;
- switch (event.which) {
- // >>> Expand
- case _KeyCode.default.LEFT:
- {
- // Collapse if possible
- if (expandable && expandedKeysSet.value.has(activeKey.value)) {
- onNodeExpand({}, eventNode);
- } else if (item.parent) {
- onActiveChange(item.parent.key);
- }
- event.preventDefault();
- break;
- }
- case _KeyCode.default.RIGHT:
- {
- // Expand if possible
- if (expandable && !expandedKeysSet.value.has(activeKey.value)) {
- onNodeExpand({}, eventNode);
- } else if (item.children && item.children.length) {
- onActiveChange(item.children[0].key);
- }
- event.preventDefault();
- break;
- }
- // Selection
- case _KeyCode.default.ENTER:
- case _KeyCode.default.SPACE:
- {
- if (checkable && !eventNode.disabled && eventNode.checkable !== false && !eventNode.disableCheckbox) {
- onNodeCheck({}, eventNode, !checkedKeysSet.value.has(activeKey.value));
- } else if (!checkable && selectable && !eventNode.disabled && eventNode.selectable !== false) {
- onNodeSelect({}, eventNode);
- }
- break;
- }
- }
- }
- if (onKeydown) {
- onKeydown(event);
- }
- };
- expose({
- onNodeExpand: onNodeExpand,
- scrollTo: scrollTo,
- onKeydown: onKeydown,
- selectedKeys: (0, _vue.computed)(function () {
- return selectedKeys.value;
- }),
- checkedKeys: (0, _vue.computed)(function () {
- return checkedKeys.value;
- }),
- halfCheckedKeys: (0, _vue.computed)(function () {
- return halfCheckedKeys.value;
- }),
- loadedKeys: (0, _vue.computed)(function () {
- return loadedKeys.value;
- }),
- loadingKeys: (0, _vue.computed)(function () {
- return loadingKeys.value;
- }),
- expandedKeys: (0, _vue.computed)(function () {
- return expandedKeys.value;
- })
- });
- (0, _vue.onUnmounted)(function () {
- window.removeEventListener('dragend', onWindowDragEnd);
- destroyed.value = true;
- });
- (0, _contextTypes.useProvideKeysState)({
- expandedKeys: expandedKeys,
- selectedKeys: selectedKeys,
- loadedKeys: loadedKeys,
- loadingKeys: loadingKeys,
- checkedKeys: checkedKeys,
- halfCheckedKeys: halfCheckedKeys,
- expandedKeysSet: expandedKeysSet,
- selectedKeysSet: selectedKeysSet,
- loadedKeysSet: loadedKeysSet,
- loadingKeysSet: loadingKeysSet,
- checkedKeysSet: checkedKeysSet,
- halfCheckedKeysSet: halfCheckedKeysSet,
- flattenNodes: flattenNodes
- });
- return function () {
- var _classNames;
- var draggingNodeKey = dragState.draggingNodeKey,
- dropLevelOffset = dragState.dropLevelOffset,
- dropContainerKey = dragState.dropContainerKey,
- dropTargetKey = dragState.dropTargetKey,
- dropPosition = dragState.dropPosition,
- dragOverNodeKey = dragState.dragOverNodeKey;
- var prefixCls = props.prefixCls,
- showLine = props.showLine,
- focusable = props.focusable,
- _props$tabindex = props.tabindex,
- tabindex = _props$tabindex === void 0 ? 0 : _props$tabindex,
- selectable = props.selectable,
- showIcon = props.showIcon,
- _props$icon = props.icon,
- icon = _props$icon === void 0 ? slots.icon : _props$icon,
- switcherIcon = props.switcherIcon,
- draggable = props.draggable,
- checkable = props.checkable,
- checkStrictly = props.checkStrictly,
- disabled = props.disabled,
- motion = props.motion,
- loadData = props.loadData,
- filterTreeNode = props.filterTreeNode,
- height = props.height,
- itemHeight = props.itemHeight,
- virtual = props.virtual,
- dropIndicatorRender = props.dropIndicatorRender,
- onContextmenu = props.onContextmenu,
- onScroll = props.onScroll,
- direction = props.direction;
- var className = attrs.class,
- style = attrs.style;
- var domProps = (0, _pickAttrs.default)((0, _objectSpread3.default)((0, _objectSpread3.default)({}, props), attrs), {
- aria: true,
- data: true
- });
- // It's better move to hooks but we just simply keep here
- var draggableConfig;
- if (draggable) {
- if ((0, _typeof2.default)(draggable) === 'object') {
- draggableConfig = draggable;
- } else if (typeof draggable === 'function') {
- draggableConfig = {
- nodeDraggable: draggable
- };
- } else {
- draggableConfig = {};
- }
- }
- return (0, _vue.createVNode)(_contextTypes.TreeContext, {
- "value": {
- prefixCls: prefixCls,
- selectable: selectable,
- showIcon: showIcon,
- icon: icon,
- switcherIcon: switcherIcon,
- draggable: draggableConfig,
- draggingNodeKey: draggingNodeKey,
- checkable: checkable,
- customCheckable: slots.checkable,
- checkStrictly: checkStrictly,
- disabled: disabled,
- keyEntities: keyEntities.value,
- dropLevelOffset: dropLevelOffset,
- dropContainerKey: dropContainerKey,
- dropTargetKey: dropTargetKey,
- dropPosition: dropPosition,
- dragOverNodeKey: dragOverNodeKey,
- dragging: draggingNodeKey !== null,
- indent: indent.value,
- direction: direction,
- dropIndicatorRender: dropIndicatorRender,
- loadData: loadData,
- filterTreeNode: filterTreeNode,
- onNodeClick: onNodeClick,
- onNodeDoubleClick: onNodeDoubleClick,
- onNodeExpand: onNodeExpand,
- onNodeSelect: onNodeSelect,
- onNodeCheck: onNodeCheck,
- onNodeLoad: onNodeLoad,
- onNodeMouseEnter: onNodeMouseEnter,
- onNodeMouseLeave: onNodeMouseLeave,
- onNodeContextMenu: onNodeContextMenu,
- onNodeDragStart: onNodeDragStart,
- onNodeDragEnter: onNodeDragEnter,
- onNodeDragOver: onNodeDragOver,
- onNodeDragLeave: onNodeDragLeave,
- onNodeDragEnd: onNodeDragEnd,
- onNodeDrop: onNodeDrop,
- slots: slots
- }
- }, {
- default: function _default() {
- return [(0, _vue.createVNode)("div", {
- "role": "tree",
- "class": (0, _classNames2.default)(prefixCls, className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-show-line"), showLine), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-focused"), focused.value), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-active-focused"), activeKey.value !== null), _classNames))
- }, [(0, _vue.createVNode)(_NodeList.default, (0, _objectSpread3.default)({
- "ref": listRef,
- "prefixCls": prefixCls,
- "style": style,
- "disabled": disabled,
- "selectable": selectable,
- "checkable": !!checkable,
- "motion": motion,
- "height": height,
- "itemHeight": itemHeight,
- "virtual": virtual,
- "focusable": focusable,
- "focused": focused.value,
- "tabindex": tabindex,
- "activeItem": activeItem.value,
- "onFocus": onFocus,
- "onBlur": onBlur,
- "onKeydown": onKeydown,
- "onActiveChange": onActiveChange,
- "onListChangeStart": onListChangeStart,
- "onListChangeEnd": onListChangeEnd,
- "onContextmenu": onContextmenu,
- "onScroll": onScroll
- }, domProps), null)])];
- }
- });
- };
- }
- });
- exports.default = _default2;
|