k-form-design
Version:
基于vue、ant-design-vue的表单设计器,可视化开发表单
1,616 lines (1,336 loc) • 179 kB
JavaScript
((typeof self !== 'undefined' ? self : this)["webpackJsonpk_form_design"] = (typeof self !== 'undefined' ? self : this)["webpackJsonpk_form_design"] || []).push([[9],{
/***/ "06a3":
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Tree = undefined;
var _defineProperty2 = __webpack_require__("6042");
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
var _toConsumableArray2 = __webpack_require__("9b57");
var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
var _extends2 = __webpack_require__("41b2");
var _extends3 = _interopRequireDefault(_extends2);
var _vueTypes = __webpack_require__("7b44");
var _vueTypes2 = _interopRequireDefault(_vueTypes);
var _classnames = __webpack_require__("4d26");
var _classnames2 = _interopRequireDefault(_classnames);
var _warning = __webpack_require__("d96e");
var _warning2 = _interopRequireDefault(_warning);
var _propsUtil = __webpack_require__("73c8");
var _vnode = __webpack_require__("d2f9");
var _BaseMixin = __webpack_require__("48bb");
var _BaseMixin2 = _interopRequireDefault(_BaseMixin);
var _proxyComponent = __webpack_require__("5c06");
var _proxyComponent2 = _interopRequireDefault(_proxyComponent);
var _util = __webpack_require__("423e9");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
/**
* 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] = function () {
this.needSyncKeys[k] = true;
};
});
return watch;
}
var Tree = {
name: 'Tree',
mixins: [_BaseMixin2['default']],
props: (0, _propsUtil.initDefaultProps)({
prefixCls: _vueTypes2['default'].string,
tabIndex: _vueTypes2['default'].oneOfType([_vueTypes2['default'].string, _vueTypes2['default'].number]),
children: _vueTypes2['default'].any,
treeData: _vueTypes2['default'].array, // Generate treeNode by children
showLine: _vueTypes2['default'].bool,
showIcon: _vueTypes2['default'].bool,
icon: _vueTypes2['default'].oneOfType([_vueTypes2['default'].object, _vueTypes2['default'].func]),
focusable: _vueTypes2['default'].bool,
selectable: _vueTypes2['default'].bool,
disabled: _vueTypes2['default'].bool,
multiple: _vueTypes2['default'].bool,
checkable: _vueTypes2['default'].oneOfType([_vueTypes2['default'].object, _vueTypes2['default'].bool]),
checkStrictly: _vueTypes2['default'].bool,
draggable: _vueTypes2['default'].bool,
defaultExpandParent: _vueTypes2['default'].bool,
autoExpandParent: _vueTypes2['default'].bool,
defaultExpandAll: _vueTypes2['default'].bool,
defaultExpandedKeys: _vueTypes2['default'].array,
expandedKeys: _vueTypes2['default'].array,
defaultCheckedKeys: _vueTypes2['default'].array,
checkedKeys: _vueTypes2['default'].oneOfType([_vueTypes2['default'].array, _vueTypes2['default'].object]),
defaultSelectedKeys: _vueTypes2['default'].array,
selectedKeys: _vueTypes2['default'].array,
// onClick: PropTypes.func,
// onDoubleClick: PropTypes.func,
// onExpand: PropTypes.func,
// onCheck: PropTypes.func,
// onSelect: PropTypes.func,
loadData: _vueTypes2['default'].func,
loadedKeys: _vueTypes2['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: _vueTypes2['default'].func,
openTransitionName: _vueTypes2['default'].string,
openAnimation: _vueTypes2['default'].oneOfType([_vueTypes2['default'].string, _vueTypes2['default'].object]),
switcherIcon: _vueTypes2['default'].any,
_propsSymbol: _vueTypes2['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, _warning2['default'])(this.$props.__propsSymbol__, 'must pass __propsSymbol__');
(0, _warning2['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 (0, _extends3['default'])({}, state, this.getDerivedState((0, _propsUtil.getOptionProps)(this), state));
},
provide: function provide() {
return {
vcTree: this
};
},
watch: (0, _extends3['default'])({}, 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: (0, _extends3['default'])({}, 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)(this.$createElement, 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 = [].concat((0, _toConsumableArray3['default'])(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 = void 0;
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 === undefined ? [] : _checkedKeyEntity$che,
_checkedKeyEntity$hal = _checkedKeyEntity.halfCheckedKeys,
halfCheckedKeys = _checkedKeyEntity$hal === undefined ? [] : _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.getSlots)(node)['default'];
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.$refs.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 _$data = this.$data,
_dragOverNodeKey = _$data._dragOverNodeKey,
_dropPosition = _$data._dropPosition;
// Update drag position
if (this.dragNode && eventKey === _dragOverNodeKey && node.$refs.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 _$data2 = this.$data,
_$data2$_dragNodesKey = _$data2._dragNodesKeys,
_dragNodesKeys = _$data2$_dragNodesKey === undefined ? [] : _$data2$_dragNodesKey,
_dropPosition = _$data2._dropPosition;
var eventKey = node.eventKey,
pos = node.pos;
this.setState({
_dragOverNodeKey: ''
});
if (_dragNodesKeys.indexOf(eventKey) !== -1) {
(0, _warning2['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('update:selectedKeys', selectedKeys);
this.__emit('select', selectedKeys, eventObj);
},
onNodeCheck: function onNodeCheck(e, treeNode, checked) {
var _$data3 = this.$data,
keyEntities = _$data3._keyEntities,
oriCheckedKeys = _$data3._checkedKeys,
oriHalfCheckedKeys = _$data3._halfCheckedKeys;
var checkStrictly = this.$props.checkStrictly;
var _getOptionProps2 = (0, _propsUtil.getOptionProps)(treeNode),
eventKey = _getOptionProps2.eventKey;
// Prepare trigger arguments
var checkedObj = void 0;
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 === undefined ? [] : _ref$_loadedKeys,
_ref$_loadingKeys = _ref._loadingKeys,
loadingKeys = _ref$_loadingKeys === undefined ? [] : _ref$_loadingKeys;
var loadData = _this2.$props.loadData;
var _getOptionProps3 = (0, _propsUtil.getOptionProps)(treeNode),
eventKey = _getOptionProps3.eventKey;
if (!loadData || loadedKeys.indexOf(eventKey) !== -1 || loadingKeys.indexOf(eventKey) !== -1) {
return {};
}
// Process load data
var promise = loadData(treeNode);
promise.then(function () {
var _$data4 = _this2.$data,
currentLoadedKeys = _$data4._loadedKeys,
currentLoadingKeys = _$data4._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, _warning2['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
});
this.__emit('update:expandedKeys', expandedKeys);
// 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 _$data$_checkedKeys = this.$data._checkedKeys,
checkedKeys = _$data$_checkedKeys === undefined ? [] : _$data$_checkedKeys;
return checkedKeys.indexOf(key) !== -1;
},
/**
* [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 _$data5 = this.$data,
keyEntities = _$data5._keyEntities,
_$data5$_expandedKeys = _$data5._expandedKeys,
expandedKeys = _$data5$_expandedKeys === undefined ? [] : _$data5$_expandedKeys,
_$data5$_selectedKeys = _$data5._selectedKeys,
selectedKeys = _$data5$_selectedKeys === undefined ? [] : _$data5$_selectedKeys,
_$data5$_halfCheckedK = _$data5._halfCheckedKeys,
halfCheckedKeys = _$data5$_halfCheckedK === undefined ? [] : _$data5$_halfCheckedK,
_$data5$_loadedKeys = _$data5._loadedKeys,
loadedKeys = _$data5$_loadedKeys === undefined ? [] : _$data5$_loadedKeys,
_$data5$_loadingKeys = _$data5._loadingKeys,
loadingKeys = _$data5$_loadingKeys === undefined ? [] : _$data5$_loadingKeys,
dragOverNodeKey = _$data5._dragOverNodeKey,
dropPosition = _$data5._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, {
props: {
eventKey: key,
expanded: expandedKeys.indexOf(key) !== -1,
selected: selectedKeys.indexOf(key) !== -1,
loaded: loadedKeys.indexOf(key) !== -1,
loading: loadingKeys.indexOf(key) !== -1,
checked: this.isKeyChecked(key),
halfChecked: halfCheckedKeys.indexOf(key) !== -1,
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 h = arguments[0];
var treeNode = this.$data._treeNode;
var _$props = this.$props,
prefixCls = _$props.prefixCls,
focusable = _$props.focusable,
showLine = _$props.showLine,
_$props$tabIndex = _$props.tabIndex,
tabIndex = _$props$tabIndex === undefined ? 0 : _$props$tabIndex;
return h(
'ul',
{
'class': (0, _classnames2['default'])(prefixCls, (0, _defineProperty3['default'])({}, prefixCls + '-show-line', showLine)),
attrs: { role: 'tree',
unselectable: 'on',
tabIndex: focusable ? tabIndex : null
}
},
[(0, _util.mapChildren)(treeNode, function (node, index) {
return _this4.renderTreeNode(node, index);
})]
);
}
};
exports.Tree = Tree;
exports['default'] = (0, _proxyComponent2['default'])(Tree);
/***/ }),
/***/ "2050":
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends2 = __webpack_require__("41b2");
var _extends3 = _interopRequireDefault(_extends2);
var _vcTree = __webpack_require__("8a23");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
/**
* SelectNode wrapped the tree node.
* Let's use SelectNode instead of TreeNode
* since TreeNode is so confuse here.
*/
exports['default'] = {
name: 'SelectNode',
functional: true,
isTreeNode: true,
props: _vcTree.TreeNode.props,
render: function render(h, context) {
var props = context.props,
slots = context.slots,
listeners = context.listeners,
data = context.data,
scopedSlots = context.scopedSlots;
var $slots = slots() || {};
var children = $slots['default'];
var slotsKey = Object.keys($slots);
var scopedSlotsTemp = {}; // for vue 2.5.x
slotsKey.forEach(function (name) {
scopedSlotsTemp[name] = function () {
return $slots[name];
};
});
var treeNodeProps = (0, _extends3['default'])({}, data, {
on: (0, _extends3['default'])({}, listeners, data.nativeOn),
props: props,
scopedSlots: (0, _extends3['default'])({}, scopedSlotsTemp, scopedSlots)
});
return h(
_vcTree.TreeNode,
treeNodeProps,
[children]
);
}
};
/***/ }),
/***/ "269c":
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _toConsumableArray2 = __webpack_require__("9b57");
var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
var _extends2 = __webpack_require__("41b2");
var _extends3 = _interopRequireDefault(_extends2);
var _warning = __webpack_require__("d96e");
var _warning2 = _interopRequireDefault(_warning);
var _vueTypes = __webpack_require__("7b44");
var _vueTypes2 = _interopRequireDefault(_vueTypes);
var _vcTree = __webpack_require__("8a23");
var _BaseMixin = __webpack_require__("48bb");
var _BaseMixin2 = _interopRequireDefault(_BaseMixin);
var _util = __webpack_require__("2fd9");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
// export const popupContextTypes = {
// onPopupKeyDown: PropTypes.func.isRequired,
// onTreeNodeSelect: PropTypes.func.isRequired,
// onTreeNodeCheck: PropTypes.func.isRequired,
// }
function getDerivedState(nextProps, prevState) {
var _ref = prevState || {},
_ref$_prevProps = _ref._prevProps,
prevProps = _ref$_prevProps === undefined ? {} : _ref$_prevProps,
loadedKeys = _ref._loadedKeys,
expandedKeyList = _ref._expandedKeyList,
cachedExpandedKeyList = _ref._cachedExpandedKeyList;
var valueList = nextProps.valueList,
valueEntities = nextProps.valueEntities,
keyEntities = nextProps.keyEntities,
treeExpandedKeys = nextProps.treeExpandedKeys,
filteredTreeNodes = nextProps.filteredTreeNodes,
upperSearchValue = nextProps.upperSearchValue;
var newState = {
_prevProps: (0, _extends3['default'])({}, nextProps)
};
// Check value update
if (valueList !== prevProps.valueList) {
newState._keyList = valueList.map(function (_ref2) {
var value = _ref2.value;
return valueEntities[value];
}).filter(function (entity) {
return entity;
}).map(function (_ref3) {
var key = _ref3.key;
return key;
});
}
// Show all when tree is in filter mode
if (!treeExpandedKeys && filteredTreeNodes && filteredTreeNodes.length && filteredTreeNodes !== prevProps.filteredTreeNodes) {
newState._expandedKeyList = [].concat((0, _toConsumableArray3['default'])(keyEntities.keys()));
}
// Cache `expandedKeyList` when filter set
if (upperSearchValue && !prevProps.upperSearchValue) {
newState._cachedExpandedKeyList = expandedKeyList;
} else if (!upperSearchValue && prevProps.upperSearchValue && !treeExpandedKeys) {
newState._expandedKeyList = cachedExpandedKeyList || [];
newState._cachedExpandedKeyList = [];
}
// Use expandedKeys if provided
if (prevProps.treeExpandedKeys !== treeExpandedKeys) {
newState._expandedKeyList = treeExpandedKeys;
}
// Clean loadedKeys if key not exist in keyEntities anymore
if (nextProps.loadData) {
newState._loadedKeys = loadedKeys.filter(function (key) {
return keyEntities.has(key);
});
}
return newState;
}
var BasePopup = {
mixins: [_BaseMixin2['default']],
name: 'BasePopup',
props: {
prefixCls: _vueTypes2['default'].string,
upperSearchValue: _vueTypes2['default'].string,
valueList: _vueTypes2['default'].array,
searchHalfCheckedKeys: _vueTypes2['default'].array,
valueEntities: _vueTypes2['default'].object,
keyEntities: Map,
treeIcon: _vueTypes2['default'].bool,
treeLine: _vueTypes2['default'].bool,
treeNodeFilterProp: _vueTypes2['default'].string,
treeCheckable: _vueTypes2['default'].any,
treeCheckStrictly: _vueTypes2['default'].bool,
treeDefaultExpandAll: _vueTypes2['default'].bool,
treeDefaultExpandedKeys: _vueTypes2['default'].array,
treeExpandedKeys: _vueTypes2['default'].array,
loadData: _vueTypes2['default'].func,
multiple: _vueTypes2['default'].bool,
// onTreeExpand: PropTypes.func,
searchValue: _vueTypes2['default'].string,
treeNodes: _vueTypes2['default'].any,
filteredTreeNodes: _vueTypes2['default'].any,
notFoundContent: _vueTypes2['default'].any,
ariaId: _vueTypes2['default'].string,
switcherIcon: _vueTypes2['default'].any,
// HOC
renderSearch: _vueTypes2['default'].func,
// onTreeExpanded: PropTypes.func,
__propsSymbol__: _vueTypes2['default'].any
},
inject: {
vcTreeSelect: { 'default': function _default() {
return {};
} }
},
watch: {
__propsSymbol__: function __propsSymbol__() {
var state = getDerivedState(this.$props, this.$data);
this.setState(state);
}
},
data: function data() {
this.treeRef = (0, _util.createRef)();
(0, _warning2['default'])(this.$props.__propsSymbol__, 'must pass __propsSymbol__');
var _$props = this.$props,
treeDefaultExpandAll = _$props.treeDefaultExpandAll,
treeDefaultExpandedKeys = _$props.treeDefaultExpandedKeys,
keyEntities = _$props.keyEntities;
// TODO: make `expandedKeyList` control
var expandedKeyList = treeDefaultExpandedKeys;
if (treeDefaultExpandAll) {
expandedKeyList = [].concat((0, _toConsumableArray3['default'])(keyEntities.keys()));
}
var state = {
_keyList: [],
_expandedKeyList: expandedKeyList,
// Cache `expandedKeyList` when tree is in filter. This is used in `getDerivedState`
_cachedExpandedKeyList: [],
_loadedKeys: [],
_prevProps: {}
};
return (0, _extends3['default'])({}, state, getDerivedState(this.$props, state));
},
methods: {
onTreeExpand: function onTreeExpand(expandedKeyList) {
var _this = this;
var treeExpandedKeys = this.$props.treeExpandedKeys;
// Set uncontrolled state
if (!treeExpandedKeys) {
this.setState({ _expandedKeyList: expandedKeyList }, function () {
_this.__emit('treeExpanded');
});
}
this.__emit('update:treeExpandedKeys', expandedKeyList);
this.__emit('treeExpand', expandedKeyList);
},
onLoad: function onLoad(loadedKeys) {
this.setState({ _loadedKeys: loadedKeys });
},
getTree: function getTree() {
return this.treeRef.current;
},
/**
* Not pass `loadData` when searching. To avoid loop ajax call makes browser crash.
*/
getLoadData: function getLoadData() {
var _$props2 = this.$props,
loadData = _$props2.loadData,
upperSearchValue = _$props2.upperSearchValue;
if (upperSearchValue) return null;
return loadData;
},
/**
* This method pass to Tree component which is used for add filtered class
* in TreeNode > li
*/
filterTreeNode: function filterTreeNode(treeNode) {
var _$props3 = this.$props,
upperSearchValue = _$props3.upperSearchValue,
treeNodeFilterProp = _$props3.treeNodeFilterProp;
var filterVal = treeNode[treeNodeFilterProp];
if (typeof filterVal === 'string') {
return upperSearchValue && filterVal.toUpperCase().indexOf(upperSearchValue) !== -1;
}
return false;
},
renderNotFound: function renderNotFound() {
var h = this.$createElement;
var _$props4 = this.$props,
prefixCls = _$props4.prefixCls,
notFoundContent = _$props4.notFoundContent;
return h(
'span',
{ 'class': prefixCls + '-not-found' },
[notFoundContent]
);
}
},
render: function render() {
var h = arguments[0];
var _$data = this.$data,
keyList = _$data._keyList,
expandedKeyList = _$data._expandedKeyList,
loadedKeys = _$data._loadedKeys;
var _$props5 = this.$props,
prefixCls = _$props5.prefixCls,
treeNodes = _$props5.treeNodes,
filteredTreeNodes = _$props5.filteredTreeNodes,
treeIcon = _$props5.treeIcon,
treeLine = _$props5.treeLine,
treeCheckable = _$props5.treeCheckable,
treeCheckStrictly = _$props5.treeCheckStrictly,
multiple = _$props5.multiple,
ariaId = _$props5.ariaId,
renderSearch = _$props5.renderSearch,
switcherIcon = _$props5.switcherIcon,
searchHalfCheckedKeys = _$props5.searchHalfCheckedKeys;
var _vcTreeSelect = this.vcTreeSelect,
onPopupKeyDown = _vcTreeSelect.onPopupKeyDown,
onTreeNodeSelect = _vcTreeSelect.onTreeNodeSelect,
onTreeNodeCheck = _vcTreeSelect.onTreeNodeCheck;
var loadData = this.getLoadData();
var treeProps = {};
if (treeCheckable) {
treeProps.checkedKeys = keyList;
} else {
treeProps.selectedKeys = keyList;
}
var $notFound = void 0;
var $treeNodes = void 0;
if (filteredTreeNodes) {
if (filteredTreeNodes.length) {
treeProps.checkStrictly = true;
$treeNodes = filteredTreeNodes;
// Fill halfCheckedKeys
if (treeCheckable && !treeCheckStrictly) {
treeProps.checkedKeys = {
checked: keyList,
halfChecked: searchHalfCheckedKeys
};
}
} else {
$notFound = this.renderNotFound();
}
} else if (!treeNodes || !treeNodes.length) {
$notFound = this.renderNotFound();
} else {
$treeNodes = treeNodes;
}
var $tree = void 0;
if ($notFound) {
$tree = $notFound;
} else {
var treeAllProps = {
props: (0, _extends3['default'])({
prefixCls: prefixCls + '-tree',
showIcon: treeIcon,
showLine: treeLine,
selectable: !treeCheckable,
checkable: treeCheckable,
checkStrictly: treeCheckStrictly,
multiple: multiple,
loadData: loadData,
loadedKeys: loadedKeys,
expandedKeys: expandedKeyList,
filterTreeNode: this.filterTreeNode,
switcherIcon: switcherIcon
}, treeProps, {
__propsSymbol__: Symbol(),
children: $treeNodes
}),
on: {
select: onTreeNodeSelect,
check: onTreeNodeCheck,
expand: this.onTreeExpand,
load: this.onLoad
},
directives: [{
name: 'ant-ref',
value: this.treeRef
}]
};
$tree = h(_vcTree.Tree, treeAllProps);
}
return h(
'div',
{
attrs: { role: 'listbox', id: ariaId, tabIndex: -1 },
on: {
'keydown': onPopupKeyDown
}
},
[renderSearch ? renderSearch() : null, $tree]
);
}
};
exports['default'] = BasePopup;
/***/ }),
/***/ "2fbf":
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _babelHelperVueJsxMergeProps = __webpack_require__("92fa");
var _babelHelperVueJsxMergeProps2 = _interopRequireDefault(_babelHelperVueJsxMergeProps);
var _vueTypes = __webpack_require__("7b44");
var _vueTypes2 = _interopRequireDefault(_vueTypes);
var _util = __webpack_require__("2fd9");
var _propsUtil = __webpack_require__("73c8");
var _BaseMixin = __webpack_require__("48bb");
var _BaseMixin2 = _interopRequireDefault(_BaseMixin);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var Selection = {
mixins: [_BaseMixin2['default']],
props: {
prefixCls: _vueTypes2['default'].string,
maxTagTextLength: _vueTypes2['default'].number,
// onRemove: PropTypes.func,
label: _vueTypes2['default'].any,
value: _vueTypes2['default'].oneOfType([_vueTypes2['default'].string, _vueTypes2['default'].number]),
removeIcon: _vueTypes2['default'].any
},
methods: {
onRemove: function onRemove(event) {
var value = this.$props.value;
this.__emit('remove', event, value);
event.stopPropagation();
}
},
render: function render() {
var h = arguments[0];
var _$props = this.$props,
prefixCls = _$props.prefixCls,
maxTagTextLength = _$props.maxTagTextLength,
label = _$props.label,
value = _$props.value;
var content = label || value;
if (maxTagTextLength && typeof content === 'string' && content.length > maxTagTextLength) {
content = content.slice(0, maxTagTextLength) + '...';
}
return h(
'li',
(0, _babelHelperVueJsxMergeProps2['default'])([{
style: _util.UNSELECTABLE_STYLE
}, { attrs: _util.UNSELECTABLE_ATTRIBUTE }, {
attrs: {
role: 'menuitem',
title: (0, _util.toTitle)(label)
},
'class': prefixCls + '-selection__choice' }]),
[(0, _propsUtil.getListeners)(this).remove && h(
'span',
{ 'class': prefixCls + '-selection__choice__remove', on: {
'click': this.onRemove
}
},
[(0, _propsUtil.getComponentFromProp)(this, 'removeIcon')]
), h(
'span',
{ 'class': prefixCls + '-selection__choice__content' },
[content]
)]
);
}
};
exports['default'] = Selection;
/***/ }),
/***/ "2fd9":
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.conductCheck = exports.UNSELECTABLE_ATTRIBUTE = exports.UNSELECTABLE_STYLE = undefined;
var _typeof2 = __webpack_require__("1098");
var _typeof3 = _interopRequireDefault(_typeof2);
var _babelHelperVueJsxMergeProps = __webpack_require__("92fa");
var _babelHelperVueJsxMergeProps2 = _interopRequireDefault(_babelHelperVueJsxMergeProps);
var _extends2 = __webpack_require__("41b2");
var _extends3 = _interopRequireDefault(_extends2);
exports.findPopupContainer = findPopupContainer;
exports.toTitle = toTitle;
exports.toArray = toArray;
exports.createRef = createRef;
exports.flatToHierarchy = flatToHierarchy;
exports.resetAriaId = resetAriaId;
exports.generateAriaId = generateAriaId;
exports.isLabelInValue = isLabelInValue;
exports.parseSimpleTreeData = parseSimpleTreeData;
exports.isPosRelated = isPosRelated;
exports.cleanEntity = cleanEntity;
exports.getFilterTree = getFilterTree;
exports.formatInternalValue = formatInternalValue;
exports.getLabel = getLabel;
exports.formatSelectorValue = formatSelectorValue;
exports.convertDataToTree = convertDataToTree;
exports.convertTreeToEntities = convertTreeToEntities;
exports.getHalfCheckedKeys = getHalfCheckedKeys;
var _warning = __webpack_require__("d96e");
var _warning2 = _interopRequireDefault(_warning);
var _omit = __webpack_require__("0464");
var _omit2 = _interopRequireDefault(_omit);
var _util = __webpack_require__("423e9");
var _class = __webpack_require__("c6a1");
var _strategies = __webpack_require__("cbda");
var _propsUtil = __webpack_require__("73c8");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var warnDeprecatedLabel = false;
// =================== DOM =====================
function findPopupContainer(node, prefixClass) {
var current = node;
while (current) {
if ((0, _class.hasClass)(current, prefixClass)) {
return current;
}
current = current.parentNode;
}
return null;
}
// =================== MISC ====================
function toTitle(title) {
if (typeof title === 'string') {
return title;
}
return null;
}
function toArray(data) {
if (data === undefined || data === null) return [];
return Array.isArray(data) ? data : [data];
}
function createRef() {
var func = function setRef(node) {
func.current = node;
};
return func;
}
// =============== Legacy ===============
var UNSELECTABLE_STYLE = exports.UNSELECTABLE_STYLE = {
userSelect: 'none',
WebkitUserSelect: 'none'
};
var UNSELECTABLE_ATTRIBUTE = exports.UNSELECTABLE_ATTRIBUTE = {
unselectable: 'unselectable'
};
/**
* Convert position list to hierarchy structure.
* This is little hack since use '-' to split the position.
*/
function flatToHierarchy(positionList) {
if (!positionList.length) {
return [];
}
var entrances = {};
// Prepare the position map
var posMap = {};
var parsedList = positionList.slice().map(function (entity) {
var clone = (0, _extends3['default'])({}, entity, {
fields: entity.pos.split('-')
});
delete clone.children;
return clone;
});
parsedList.forEach(function (entity) {
posMap[entity.pos] = entity;
});
parsedList.sort(function (a, b) {
return a.fields.length - b.fields.length;
});
// Create the hierarchy
parsedList.forEach(function (entity) {
var parentPos = entity.fields.slice(0, -1).join('-');
var parentEntity = posMap[parentPos];
if (!parentEntity) {
entrances[entity.pos] = entity;
} else {
parentEntity.children = parentEntity.children || [];
parentEntity.children.push(entity);
}
// Some time position list provide `key`, we don't need it
delete entity.key;
delete entity.fields;
});
return Object.keys(entrances).map(function (key) {
return entrances[key];
});
}
// =============== Accessibility ===============
var ariaId = 0;
function resetAriaId() {
ariaId = 0;
}
function generateAriaId(prefix) {
ariaId += 1;
return prefix + '_' + ariaId;
}
function isLabelInValue(props) {
var treeCheckable = props.treeCheckable,
treeCheckStrictly = props.treeCheckStrictly,
labelInValue = props.labelInValue;
if (treeCheckable && treeCheckStrictly) {
return true;
}
return labelInValue || false;
}
// =================== Tree ====================
function parseSimpleTreeData(treeData, _ref) {
var id = _ref.id,
pId = _ref.pId,
rootPId = _ref.rootPId;
var keyNodes = {};
var rootNodeList = [];
// Fill in the map
var nodeList = treeData.map(function (node) {
var clone = (0, _extends3['default'])({}, node);
var key = clone[id];
keyNodes[key] = clone;
clone.key = clone.key || key;
return clone;
});
// Connect tree
nodeList.forEach(function (node) {
var parentKey = node[pId];
var parent = keyNodes[parentKey];
// Fill parent
if (parent) {
parent.children = parent.children || [];
parent.children.push(node);
}
// Fill root tree node
if (parentKey === rootPId || !parent && rootPId === null) {
rootNodeList.push(node);
}
});
return rootNodeList;
}
/**
* Detect if position has relation.
* e.g. 1-2 related with 1-2-3
* e.g. 1-3-2 related with 1
* e.g. 1-2 not related with 1-21
*/
function isPosRelated(pos1, pos2) {
var fields1 = pos1.split('-');
var fields2 = pos2.split('-');
var minLen = Math.min(fields1.length, fields2.length);
for (var i = 0; i < minLen; i += 1) {
if (fields1[i] !== fields2[i]) {
return false;
}
}
return true;
}
/**
* This function is only used on treeNode check (none treeCheckStrictly but has searchInput).
* We convert entity to { node, pos, children } format.
* This is legacy bug but we still need to do with it.
* @param entity
*/
function cleanEntity(_ref2) {
var node = _ref2.node,
pos = _ref2.pos,
children = _ref2.children;
var instance = {
node: node,
pos: pos
};
if (children) {
instance.children = children.map(cleanEntity);
}
return instance;
}
/**
* Get a filtered TreeNode list by provided treeNodes.
* [Legacy] Since `Tree` use `key` as map but `key` will changed by React,
* we have to convert `treeNodes > data > treeNodes` to keep the key.
* Such performance hungry!
*/
function getFilterTree(h, treeNodes, searchValue, filterFunc, valueEntities, Component) {
if (!searchValue) {
return null;
}
function mapFilteredNodeToData(node) {
if (!node || (0, _propsUtil.isEmptyElement)(node)) return null;
var match = false;
if (filterFunc(searchValue, node)) {
match = true;
}
var children = (0, _propsUtil.getSlots)(node)['default'];
children = ((typeof children === 'function' ? children() : children) || []).map(mapFilteredNodeToData).filter(function (n) {
return n;
});
if (children.length || match) {
return h(
Component,
(0, _babelHelperVueJsxMergeProps2['default'])([node.data, { key: valueEntities[(0, _propsUtil.getPropsData)(node).value].key }]),
[children]
);
}
return null;
}
return treeNodes.map(mapFilteredNodeToData).filter(function (node) {
return node;
});
}
// =================== Value ===================
/**
* Convert value to array format to make logic simplify.
*/
function formatInternalValue(value, props) {
var valueList = toArray(value);
// Parse label in value
if (isLabelInValue(props)) {
return valueList.map(function (val) {
if ((typeof val === 'undefined' ? 'undefined' : (0, _typeof3['default'])(val)) !== 'object' || !val) {
return {
value: '',
label: ''
};
}
return val;
});
}
return valueList.map(function (val) {
return {
value: val
};
});
}
function getLabel(wrappedValue, entity, treeNodeLabelProp) {
if (wrappedValue.label) {
return wrappedValue.label;
}
if (entity) {
var props = (0, _propsUtil.getPropsData)(entity.node);
if (Object.keys(props).length) {
return props[treeNodeLabelProp];
}
}
// Since value without entity will be in missValueList.
// This code will never reached, but we still need this in case.
return wrappedValue.value;
}
/**
* Convert internal state `valueList` to user needed value list.
* This will return an array list. You need check if is not multiple when return.
*
* `allCheckedNodes` is used for `treeCheckStrictly`
*/
function formatSelectorValue(valueList, props, valueEntities) {
var treeNodeLabelProp = props.treeNodeLabelProp,
treeCheckable = props.treeCheckable,
treeCheckStrictly = props.treeCheckStrictly,
showCheckedStrategy = props.showCheckedStrategy;
// Will hide some value if `showCheckedStrategy` is set
if (treeCheckable && !treeCheckStrictly) {
var values = {};
valueList.forEach(function (wrappedValue) {
values[wrappedValue.value] = wrappedValue;
});
var hierarchyList = flatToHierarchy(valueList.map(function (_ref3) {
var value = _ref3.value;
return valueEntities[value];
}));
if (showCheckedStrategy === _strategies.SHOW_PARENT) {
// Only get the parent checked value
return hierarchyList.map(function (_ref4) {
var n