@fe6/water-pro
Version:
An enterprise-class UI design language and Vue-based implementation
768 lines (650 loc) • 29.7 kB
JavaScript
"use strict";
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.Tree = void 0;
var _vue = require("vue");
var _vueTypes = _interopRequireWildcard(require("../../_util/vue-types"));
var _classNames2 = _interopRequireDefault(require("../../_util/classNames"));
var _warning = _interopRequireDefault(require("../../_util/warning"));
var _propsUtil = require("../../_util/props-util");
var _vnode = require("../../_util/vnode");
var _BaseMixin = _interopRequireDefault(require("../../_util/BaseMixin"));
var _util = require("./util");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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 || _typeof(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; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
/**
* Thought we still use `cloneElement` to pass `key`,
* other props can pass with context for future refactor.
*/
function getWatch() {
var keys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
var watch = {};
keys.forEach(function (k) {
watch[k] = {
handler: function handler() {
this.needSyncKeys[k] = true;
},
flush: 'sync'
};
});
return watch;
}
var Tree = (0, _vue.defineComponent)({
name: 'Tree',
mixins: [_BaseMixin.default],
provide: function provide() {
return {
vcTree: this
};
},
inheritAttrs: false,
props: (0, _propsUtil.initDefaultProps)({
prefixCls: _vueTypes.default.string,
tabindex: _vueTypes.default.oneOfType([_vueTypes.default.string, _vueTypes.default.number]),
children: _vueTypes.default.any,
treeData: _vueTypes.default.array,
showLine: _vueTypes.default.looseBool,
showIcon: _vueTypes.default.looseBool,
icon: _vueTypes.default.oneOfType([_vueTypes.default.object, _vueTypes.default.func]),
focusable: _vueTypes.default.looseBool,
selectable: _vueTypes.default.looseBool,
disabled: _vueTypes.default.looseBool,
multiple: _vueTypes.default.looseBool,
checkable: (0, _vueTypes.withUndefined)(_vueTypes.default.oneOfType([_vueTypes.default.object, _vueTypes.default.looseBool])),
checkStrictly: _vueTypes.default.looseBool,
draggable: _vueTypes.default.looseBool,
defaultExpandParent: _vueTypes.default.looseBool,
autoExpandParent: _vueTypes.default.looseBool,
defaultExpandAll: _vueTypes.default.looseBool,
defaultExpandedKeys: _vueTypes.default.array,
expandedKeys: _vueTypes.default.array,
defaultCheckedKeys: _vueTypes.default.array,
checkedKeys: _vueTypes.default.oneOfType([_vueTypes.default.array, _vueTypes.default.object]),
defaultSelectedKeys: _vueTypes.default.array,
selectedKeys: _vueTypes.default.array,
// onClick: PropTypes.func,
// onDoubleClick: PropTypes.func,
// onExpand: PropTypes.func,
// onCheck: PropTypes.func,
// onSelect: PropTypes.func,
loadData: _vueTypes.default.func,
loadedKeys: _vueTypes.default.array,
// onMouseEnter: PropTypes.func,
// onMouseLeave: PropTypes.func,
// onRightClick: PropTypes.func,
// onDragStart: PropTypes.func,
// onDragEnter: PropTypes.func,
// onDragOver: PropTypes.func,
// onDragLeave: PropTypes.func,
// onDragEnd: PropTypes.func,
// onDrop: PropTypes.func,
filterTreeNode: _vueTypes.default.func,
openTransitionName: _vueTypes.default.string,
openAnimation: _vueTypes.default.oneOfType([_vueTypes.default.string, _vueTypes.default.object]),
switcherIcon: _vueTypes.default.any,
__propsSymbol__: _vueTypes.default.any
}, {
prefixCls: 'rc-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: []
}),
data: function data() {
(0, _warning.default)(this.$props.__propsSymbol__, 'must pass __propsSymbol__');
(0, _warning.default)(this.$props.children, 'please use children prop replace slots.default');
this.needSyncKeys = {};
this.domTreeNodes = {};
var state = {
_posEntities: new Map(),
_keyEntities: new Map(),
_expandedKeys: [],
_selectedKeys: [],
_checkedKeys: [],
_halfCheckedKeys: [],
_loadedKeys: [],
_loadingKeys: [],
_treeNode: [],
_prevProps: null,
_dragOverNodeKey: '',
_dropPosition: null,
_dragNodesKeys: []
};
return _extends(_extends({}, state), this.getDerivedState((0, _propsUtil.getOptionProps)(this), state));
},
watch: _extends(_extends({}, getWatch(['treeData', 'children', 'expandedKeys', 'autoExpandParent', 'selectedKeys', 'checkedKeys', 'loadedKeys'])), {
__propsSymbol__: function __propsSymbol__() {
this.setState(this.getDerivedState((0, _propsUtil.getOptionProps)(this), this.$data));
this.needSyncKeys = {};
}
}),
methods: {
getDerivedState: function getDerivedState(props, prevState) {
var _prevProps = prevState._prevProps;
var newState = {
_prevProps: _extends({}, props)
};
var self = this;
function needSync(name) {
return !_prevProps && name in props || _prevProps && self.needSyncKeys[name];
} // ================== Tree Node ==================
var treeNode = null; // Check if `treeData` or `children` changed and save into the state.
if (needSync('treeData')) {
treeNode = (0, _util.convertDataToTree)(props.treeData);
} else if (needSync('children')) {
treeNode = props.children;
} // Tree support filter function which will break the tree structure in the vdm.
// We cache the treeNodes in state so that we can return the treeNode in event trigger.
if (treeNode) {
newState._treeNode = treeNode; // Calculate the entities data for quick match
var entitiesMap = (0, _util.convertTreeToEntities)(treeNode);
newState._keyEntities = entitiesMap.keyEntities;
}
var keyEntities = newState._keyEntities || prevState._keyEntities; // ================ expandedKeys =================
if (needSync('expandedKeys') || _prevProps && needSync('autoExpandParent')) {
newState._expandedKeys = props.autoExpandParent || !_prevProps && props.defaultExpandParent ? (0, _util.conductExpandParent)(props.expandedKeys, keyEntities) : props.expandedKeys;
} else if (!_prevProps && props.defaultExpandAll) {
newState._expandedKeys = _toConsumableArray(keyEntities.keys());
} else if (!_prevProps && props.defaultExpandedKeys) {
newState._expandedKeys = props.autoExpandParent || props.defaultExpandParent ? (0, _util.conductExpandParent)(props.defaultExpandedKeys, keyEntities) : props.defaultExpandedKeys;
} // ================ selectedKeys =================
if (props.selectable) {
if (needSync('selectedKeys')) {
newState._selectedKeys = (0, _util.calcSelectedKeys)(props.selectedKeys, props);
} else if (!_prevProps && props.defaultSelectedKeys) {
newState._selectedKeys = (0, _util.calcSelectedKeys)(props.defaultSelectedKeys, props);
}
} // ================= checkedKeys =================
if (props.checkable) {
var checkedKeyEntity;
if (needSync('checkedKeys')) {
checkedKeyEntity = (0, _util.parseCheckedKeys)(props.checkedKeys) || {};
} else if (!_prevProps && props.defaultCheckedKeys) {
checkedKeyEntity = (0, _util.parseCheckedKeys)(props.defaultCheckedKeys) || {};
} else if (treeNode) {
// If treeNode changed, we also need check it
checkedKeyEntity = (0, _util.parseCheckedKeys)(props.checkedKeys) || {
checkedKeys: prevState._checkedKeys,
halfCheckedKeys: prevState._halfCheckedKeys
};
}
if (checkedKeyEntity) {
var _checkedKeyEntity = checkedKeyEntity,
_checkedKeyEntity$che = _checkedKeyEntity.checkedKeys,
checkedKeys = _checkedKeyEntity$che === void 0 ? [] : _checkedKeyEntity$che,
_checkedKeyEntity$hal = _checkedKeyEntity.halfCheckedKeys,
halfCheckedKeys = _checkedKeyEntity$hal === void 0 ? [] : _checkedKeyEntity$hal;
if (!props.checkStrictly) {
var conductKeys = (0, _util.conductCheck)(checkedKeys, true, keyEntities);
checkedKeys = conductKeys.checkedKeys;
halfCheckedKeys = conductKeys.halfCheckedKeys;
}
newState._checkedKeys = checkedKeys;
newState._halfCheckedKeys = halfCheckedKeys;
}
} // ================= loadedKeys ==================
if (needSync('loadedKeys')) {
newState._loadedKeys = props.loadedKeys;
}
return newState;
},
onNodeDragStart: function onNodeDragStart(event, node) {
var _expandedKeys = this.$data._expandedKeys;
var eventKey = node.eventKey;
var children = (0, _propsUtil.getSlot)(node);
this.dragNode = node;
this.setState({
_dragNodesKeys: (0, _util.getDragNodesKeys)(typeof children === 'function' ? children() : children, node),
_expandedKeys: (0, _util.arrDel)(_expandedKeys, eventKey)
});
this.__emit('dragstart', {
event: event,
node: node
});
},
/**
* [Legacy] Select handler is less small 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.
*/
onNodeDragEnter: function onNodeDragEnter(event, node) {
var _this = this;
var expandedKeys = this.$data._expandedKeys;
var pos = node.pos,
eventKey = node.eventKey;
if (!this.dragNode || !node.selectHandle) {
return;
}
var dropPosition = (0, _util.calcDropPosition)(event, node); // Skip if drag node is self
if (this.dragNode.eventKey === eventKey && dropPosition === 0) {
this.setState({
_dragOverNodeKey: '',
_dropPosition: null
});
return;
} // Ref: https://github.com/react-component/tree/issues/132
// Add timeout to let onDragLevel fire before onDragEnter,
// so that we can clean drag props for onDragLeave node.
// Macro task for this:
// https://html.spec.whatwg.org/multipage/webappapis.html#clean-up-after-running-script
setTimeout(function () {
// Update drag over node
_this.setState({
_dragOverNodeKey: eventKey,
_dropPosition: dropPosition
}); // Side effect for delay drag
if (!_this.delayedDragEnterLogic) {
_this.delayedDragEnterLogic = {};
}
Object.keys(_this.delayedDragEnterLogic).forEach(function (key) {
clearTimeout(_this.delayedDragEnterLogic[key]);
});
_this.delayedDragEnterLogic[pos] = setTimeout(function () {
var newExpandedKeys = (0, _util.arrAdd)(expandedKeys, eventKey);
if (!(0, _propsUtil.hasProp)(_this, 'expandedKeys')) {
_this.setState({
_expandedKeys: newExpandedKeys
});
}
_this.__emit('dragenter', {
event: event,
node: node,
expandedKeys: newExpandedKeys
});
}, 400);
}, 0);
},
onNodeDragOver: function onNodeDragOver(event, node) {
var eventKey = node.eventKey;
var _this$$data = this.$data,
_dragOverNodeKey = _this$$data._dragOverNodeKey,
_dropPosition = _this$$data._dropPosition; // Update drag position
if (this.dragNode && eventKey === _dragOverNodeKey && node.selectHandle) {
var dropPosition = (0, _util.calcDropPosition)(event, node);
if (dropPosition === _dropPosition) {
return;
}
this.setState({
_dropPosition: dropPosition
});
}
this.__emit('dragover', {
event: event,
node: node
});
},
onNodeDragLeave: function onNodeDragLeave(event, node) {
this.setState({
_dragOverNodeKey: ''
});
this.__emit('dragleave', {
event: event,
node: node
});
},
onNodeDragEnd: function onNodeDragEnd(event, node) {
this.setState({
_dragOverNodeKey: ''
});
this.__emit('dragend', {
event: event,
node: node
});
this.dragNode = null;
},
onNodeDrop: function onNodeDrop(event, node) {
var _this$$data2 = this.$data,
_this$$data2$_dragNod = _this$$data2._dragNodesKeys,
_dragNodesKeys = _this$$data2$_dragNod === void 0 ? [] : _this$$data2$_dragNod,
_dropPosition = _this$$data2._dropPosition;
var eventKey = node.eventKey,
pos = node.pos;
this.setState({
_dragOverNodeKey: ''
});
if (_dragNodesKeys.includes(eventKey)) {
(0, _warning.default)(false, "Can not drop to dragNode(include it's children node)");
return;
}
var posArr = (0, _util.posToArr)(pos);
var dropResult = {
event: event,
node: node,
dragNode: this.dragNode,
dragNodesKeys: _dragNodesKeys.slice(),
dropPosition: _dropPosition + Number(posArr[posArr.length - 1]),
dropToGap: false
};
if (_dropPosition !== 0) {
dropResult.dropToGap = true;
}
this.__emit('drop', dropResult);
this.dragNode = null;
},
onNodeClick: function onNodeClick(e, treeNode) {
this.__emit('click', e, treeNode);
},
onNodeDoubleClick: function onNodeDoubleClick(e, treeNode) {
this.__emit('dblclick', e, treeNode);
},
onNodeSelect: function onNodeSelect(e, treeNode) {
var selectedKeys = this.$data._selectedKeys;
var keyEntities = this.$data._keyEntities;
var multiple = this.$props.multiple;
var _getOptionProps = (0, _propsUtil.getOptionProps)(treeNode),
selected = _getOptionProps.selected,
eventKey = _getOptionProps.eventKey;
var targetSelected = !selected; // Update selected keys
if (!targetSelected) {
selectedKeys = (0, _util.arrDel)(selectedKeys, eventKey);
} else if (!multiple) {
selectedKeys = [eventKey];
} else {
selectedKeys = (0, _util.arrAdd)(selectedKeys, eventKey);
} // [Legacy] Not found related usage in doc or upper libs
var selectedNodes = selectedKeys.map(function (key) {
var entity = keyEntities.get(key);
if (!entity) {
return null;
}
return entity.node;
}).filter(function (node) {
return node;
});
this.setUncontrolledState({
_selectedKeys: selectedKeys
});
var eventObj = {
event: 'select',
selected: targetSelected,
node: treeNode,
selectedNodes: selectedNodes,
nativeEvent: e
};
this.__emit('select', selectedKeys, eventObj);
},
onNodeCheck: function onNodeCheck(e, treeNode, checked) {
var _this$$data3 = this.$data,
keyEntities = _this$$data3._keyEntities,
oriCheckedKeys = _this$$data3._checkedKeys,
oriHalfCheckedKeys = _this$$data3._halfCheckedKeys;
var checkStrictly = this.$props.checkStrictly;
var _getOptionProps2 = (0, _propsUtil.getOptionProps)(treeNode),
eventKey = _getOptionProps2.eventKey; // Prepare trigger arguments
var checkedObj;
var eventObj = {
event: 'check',
node: treeNode,
checked: checked,
nativeEvent: e
};
if (checkStrictly) {
var checkedKeys = checked ? (0, _util.arrAdd)(oriCheckedKeys, eventKey) : (0, _util.arrDel)(oriCheckedKeys, eventKey);
var halfCheckedKeys = (0, _util.arrDel)(oriHalfCheckedKeys, eventKey);
checkedObj = {
checked: checkedKeys,
halfChecked: halfCheckedKeys
};
eventObj.checkedNodes = checkedKeys.map(function (key) {
return keyEntities.get(key);
}).filter(function (entity) {
return entity;
}).map(function (entity) {
return entity.node;
});
this.setUncontrolledState({
_checkedKeys: checkedKeys
});
} else {
var _conductCheck = (0, _util.conductCheck)([eventKey], checked, keyEntities, {
checkedKeys: oriCheckedKeys,
halfCheckedKeys: oriHalfCheckedKeys
}),
_checkedKeys = _conductCheck.checkedKeys,
_halfCheckedKeys = _conductCheck.halfCheckedKeys;
checkedObj = _checkedKeys; // [Legacy] This is used for `rc-tree-select`
eventObj.checkedNodes = [];
eventObj.checkedNodesPositions = [];
eventObj.halfCheckedKeys = _halfCheckedKeys;
_checkedKeys.forEach(function (key) {
var entity = keyEntities.get(key);
if (!entity) {
return;
}
var node = entity.node,
pos = entity.pos;
eventObj.checkedNodes.push(node);
eventObj.checkedNodesPositions.push({
node: node,
pos: pos
});
});
this.setUncontrolledState({
_checkedKeys: _checkedKeys,
_halfCheckedKeys: _halfCheckedKeys
});
}
this.__emit('check', checkedObj, eventObj);
},
onNodeLoad: function onNodeLoad(treeNode) {
var _this2 = this;
return new Promise(function (resolve) {
// We need to get the latest state of loading/loaded keys
_this2.setState(function (_ref) {
var _ref$_loadedKeys = _ref._loadedKeys,
loadedKeys = _ref$_loadedKeys === void 0 ? [] : _ref$_loadedKeys,
_ref$_loadingKeys = _ref._loadingKeys,
loadingKeys = _ref$_loadingKeys === void 0 ? [] : _ref$_loadingKeys;
var loadData = _this2.$props.loadData;
var _getOptionProps3 = (0, _propsUtil.getOptionProps)(treeNode),
eventKey = _getOptionProps3.eventKey;
if (!loadData || loadedKeys.includes(eventKey) || loadingKeys.includes(eventKey)) {
return {};
} // Process load data
var promise = loadData(treeNode);
promise.then(function () {
var _this2$$data = _this2.$data,
currentLoadedKeys = _this2$$data._loadedKeys,
currentLoadingKeys = _this2$$data._loadingKeys;
var newLoadedKeys = (0, _util.arrAdd)(currentLoadedKeys, eventKey);
var newLoadingKeys = (0, _util.arrDel)(currentLoadingKeys, eventKey); // onLoad should trigger before internal setState to avoid `loadData` trigger twice.
// https://github.com/ant-design/ant-design/issues/12464
_this2.__emit('load', newLoadedKeys, {
event: 'load',
node: treeNode
});
_this2.setUncontrolledState({
_loadedKeys: newLoadedKeys
});
_this2.setState({
_loadingKeys: newLoadingKeys
});
resolve();
});
return {
_loadingKeys: (0, _util.arrAdd)(loadingKeys, eventKey)
};
});
});
},
onNodeExpand: function onNodeExpand(e, treeNode) {
var _this3 = this;
var expandedKeys = this.$data._expandedKeys;
var loadData = this.$props.loadData;
var _getOptionProps4 = (0, _propsUtil.getOptionProps)(treeNode),
eventKey = _getOptionProps4.eventKey,
expanded = _getOptionProps4.expanded; // Update selected keys
var index = expandedKeys.indexOf(eventKey);
var targetExpanded = !expanded;
(0, _warning.default)(expanded && index !== -1 || !expanded && index === -1, 'Expand state not sync with index check');
if (targetExpanded) {
expandedKeys = (0, _util.arrAdd)(expandedKeys, eventKey);
} else {
expandedKeys = (0, _util.arrDel)(expandedKeys, eventKey);
}
this.setUncontrolledState({
_expandedKeys: expandedKeys
});
this.__emit('expand', expandedKeys, {
node: treeNode,
expanded: targetExpanded,
nativeEvent: e
}); // Async Load data
if (targetExpanded && loadData) {
var loadPromise = this.onNodeLoad(treeNode);
return loadPromise ? loadPromise.then(function () {
// [Legacy] Refresh logic
_this3.setUncontrolledState({
_expandedKeys: expandedKeys
});
}) : null;
}
return null;
},
onNodeMouseEnter: function onNodeMouseEnter(event, node) {
this.__emit('mouseenter', {
event: event,
node: node
});
},
onNodeMouseLeave: function onNodeMouseLeave(event, node) {
this.__emit('mouseleave', {
event: event,
node: node
});
},
onNodeContextMenu: function onNodeContextMenu(event, node) {
event.preventDefault();
this.__emit('rightClick', {
event: event,
node: node
});
},
/**
* Only update the value which is not in props
*/
setUncontrolledState: function setUncontrolledState(state) {
var needSync = false;
var newState = {};
var props = (0, _propsUtil.getOptionProps)(this);
Object.keys(state).forEach(function (name) {
if (name.replace('_', '') in props) {
return;
}
needSync = true;
newState[name] = state[name];
});
if (needSync) {
this.setState(newState);
}
},
registerTreeNode: function registerTreeNode(key, node) {
if (node) {
this.domTreeNodes[key] = node;
} else {
delete this.domTreeNodes[key];
}
},
isKeyChecked: function isKeyChecked(key) {
var _this$$data$_checkedK = this.$data._checkedKeys,
checkedKeys = _this$$data$_checkedK === void 0 ? [] : _this$$data$_checkedK;
return checkedKeys.includes(key);
},
/**
* [Legacy] Original logic use `key` as tracking clue.
* We have to use `cloneElement` to pass `key`.
*/
renderTreeNode: function renderTreeNode(child, index) {
var level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
var _this$$data4 = this.$data,
keyEntities = _this$$data4._keyEntities,
_this$$data4$_expande = _this$$data4._expandedKeys,
expandedKeys = _this$$data4$_expande === void 0 ? [] : _this$$data4$_expande,
_this$$data4$_selecte = _this$$data4._selectedKeys,
selectedKeys = _this$$data4$_selecte === void 0 ? [] : _this$$data4$_selecte,
_this$$data4$_halfChe = _this$$data4._halfCheckedKeys,
halfCheckedKeys = _this$$data4$_halfChe === void 0 ? [] : _this$$data4$_halfChe,
_this$$data4$_loadedK = _this$$data4._loadedKeys,
loadedKeys = _this$$data4$_loadedK === void 0 ? [] : _this$$data4$_loadedK,
_this$$data4$_loading = _this$$data4._loadingKeys,
loadingKeys = _this$$data4$_loading === void 0 ? [] : _this$$data4$_loading,
dragOverNodeKey = _this$$data4._dragOverNodeKey,
dropPosition = _this$$data4._dropPosition;
var pos = (0, _util.getPosition)(level, index);
var key = child.key;
if (!key && (key === undefined || key === null)) {
key = pos;
}
if (!keyEntities.get(key)) {
(0, _util.warnOnlyTreeNode)();
return null;
}
return (0, _vnode.cloneElement)(child, {
eventKey: key,
expanded: expandedKeys.includes(key),
selected: selectedKeys.includes(key),
loaded: loadedKeys.includes(key),
loading: loadingKeys.includes(key),
checked: this.isKeyChecked(key),
halfChecked: halfCheckedKeys.includes(key),
pos: pos,
// [Legacy] Drag props
dragOver: dragOverNodeKey === key && dropPosition === 0,
dragOverGapTop: dragOverNodeKey === key && dropPosition === -1,
dragOverGapBottom: dragOverNodeKey === key && dropPosition === 1,
key: key
});
}
},
render: function render() {
var _this4 = this;
var treeNode = this.$data._treeNode;
var _this$$props = this.$props,
prefixCls = _this$$props.prefixCls,
focusable = _this$$props.focusable,
showLine = _this$$props.showLine,
_this$$props$tabindex = _this$$props.tabindex,
tabindex = _this$$props$tabindex === void 0 ? 0 : _this$$props$tabindex;
var domProps = (0, _util.getDataAndAria)(_extends(_extends({}, this.$props), this.$attrs));
var _this$$attrs = this.$attrs,
className = _this$$attrs.class,
style = _this$$attrs.style;
return (0, _vue.createVNode)("ul", _objectSpread(_objectSpread({}, domProps), {}, {
"class": (0, _classNames2.default)(prefixCls, className, _defineProperty({}, "".concat(prefixCls, "-show-line"), showLine)),
"style": style,
"role": "tree",
"unselectable": "on",
"tabindex": focusable ? tabindex : null
}), [(0, _util.mapChildren)(treeNode, function (node, index) {
return _this4.renderTreeNode(node, index);
})]);
}
});
exports.Tree = Tree;
var _default = Tree;
exports.default = _default;