@ohu-mobile/core
Version:
415 lines (414 loc) • 16.1 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _babelHelperVueJsxMergeProps = _interopRequireDefault(require("@vue/babel-helper-vue-jsx-merge-props"));
var _defineComponent = require("../_utils/defineComponent");
var _List = _interopRequireDefault(require("../List"));
var _Collapse = _interopRequireDefault(require("../Collapse"));
var _Radio = _interopRequireDefault(require("../Radio"));
var _RadioGroup = _interopRequireDefault(require("../RadioGroup"));
var _CheckboxGroup = _interopRequireDefault(require("../CheckboxGroup"));
var _Checkbox = _interopRequireDefault(require("../Checkbox"));
var _Loading = _interopRequireDefault(require("../Loading"));
var _generateUniqueID = _interopRequireDefault(require("../_utils/generateUniqueID"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function isValueActive(value, currentValue) {
if (value instanceof Array) {
return value.indexOf(currentValue) >= 0;
}
return value !== undefined && currentValue !== undefined && value === currentValue;
}
function getInternalTreeData(currentKey, currentNode, data, value, expandKeys) {
if (!currentNode.children) return [];
var keys = [];
currentNode.children.reduce(function (acc, cur, index) {
var ck = "".concat(currentKey, "-").concat(index);
keys.push(ck);
var childrenKeys = getInternalTreeData(ck, cur, data, value, expandKeys);
acc[ck] = {
key: cur.key || ck,
title: cur.title,
value: cur.value,
disabled: cur.disabled,
isLeaf: cur.isLeaf,
hasChildren: cur.hasChildren
};
if (childrenKeys.length > 0) {
acc[ck].children = childrenKeys;
}
if (expandKeys && value) {
if (isValueActive(value, cur.value)) {
expandKeys.push(currentKey);
}
}
return acc;
}, data);
return keys;
}
var _default = exports.default = (0, _defineComponent.defineComponent)('tree-select').create({
props: {
treeData: (0, _defineComponent.props)(Array).default(function () {
return [];
}),
value: _defineComponent.props.ofAny().optional,
keyPath: (0, _defineComponent.props)(Array).optional,
multiple: (0, _defineComponent.props)(Boolean).default(false),
loadData: (0, _defineComponent.props)(Function).optional,
leftWidth: (0, _defineComponent.props)(String).default('38.4%'),
checkedIcon: _defineComponent.props.ofType().optional,
unCheckedIcon: _defineComponent.props.ofType().optional,
max: (0, _defineComponent.props)(Number).optional,
scrollIntoView: (0, _defineComponent.props)(Boolean).default(false)
},
watch: {
value: function value(cur) {
this.internalValue = cur;
}
},
data: function data() {
return _objectSpread(_objectSpread({}, this.formatData(this.treeData)), {}, {
internalValue: this.value,
internalKey: (0, _generateUniqueID.default)()
});
},
methods: {
formatData: function formatData(treeData, currentKey) {
var _this = this;
var internalTreeData = {};
var internalActiveNodes = {};
var leftData = [];
var leftKey = '';
var cachedExpandKey = {};
treeData.forEach(function (node, index) {
var expandKeys = [];
var key = index.toString();
if (currentKey) {
key = "".concat(currentKey, "-").concat(key);
}
var keys = getInternalTreeData(key, node, internalTreeData, _this.value, expandKeys);
var inode = {
key: node.key || key,
title: node.title,
value: node.value,
disabled: node.disabled,
isLeaf: node.isLeaf,
children: keys,
hasChildren: node.hasChildren,
loading: false,
loaded: false,
attach: node.attach
};
internalTreeData[key] = inode;
if (isValueActive(_this.value, node.value) && inode.value && inode.key) {
internalActiveNodes[inode.value] = inode.key;
}
if (expandKeys.length > 0) {
if (!leftKey) {
leftKey = key;
}
expandKeys.reduce(function (acc, currentKey) {
cachedExpandKey[currentKey] = true;
return acc;
}, cachedExpandKey);
}
leftData.push(key);
});
if (!leftKey && leftData[0]) {
leftKey = leftData[0];
}
return {
internalTreeData: internalTreeData,
leftData: leftData,
leftKey: leftKey,
cachedExpandKey: cachedExpandKey
};
},
handleChange: function handleChange(value, _ref) {
var _this2 = this;
var path = _ref.path,
option = _ref.option;
this.internalValue = value;
var leafKey = path[path.length - 1];
var params = {};
if (leafKey) {
params.node = option;
params.path = path.map(function (key) {
return _this2.internalTreeData[key];
});
}
this.$emit('change', value, params);
},
handleLeftPanelClick: function handleLeftPanelClick(key) {
this.leftKey = key;
var leftOption = this.internalTreeData[key];
if (leftOption.hasChildren && !leftOption.loaded) {
this.loadDataWhenExpand(key, leftOption);
}
},
isNodeActive: function isNodeActive(node) {
if (this.multiple && this.internalValue instanceof Array && node.value) {
return this.internalValue.indexOf(node.value) >= 0;
} else if (!this.multiple && node.value) {
return this.internalValue === node.value;
}
return false;
},
scrollToActiveNode: function scrollToActiveNode() {
if (!this.internalValue) return;
var activeNode = document.getElementById(this.internalKey);
if (activeNode) {
activeNode.scrollIntoView();
}
},
cascadeNodeLoad: function cascadeNodeLoad(node, key, depth, keyPath) {
var _this3 = this;
if (node.isLeaf) {
this.scrollIntoView && this.scrollToActiveNode();
return;
}
if (node.children && node.children.length > 0) {
this.cachedExpandKey[key] = true;
this.cascadeLoad(keyPath, depth + 1, node.children);
} else if (node.hasChildren && !node.isLeaf) {
this.loadDataWhenExpand(key, node, function () {
_this3.cascadeLoad(keyPath, depth + 1, node.children);
}, function () {
_this3.scrollIntoView && _this3.scrollToActiveNode();
});
}
},
cascadeLoad: function cascadeLoad(keyPath) {
var _this4 = this;
var depth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
var keys = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
var keyOrValue = keyPath[depth];
if (depth === 0) {
keys = this.leftData;
}
var hasTarget = keys.some(function (item, index) {
var node = _this4.internalTreeData[item];
if (node.key === keyOrValue || node.value === keyOrValue) {
if (depth === 0) {
_this4.leftKey = index.toString();
}
_this4.cascadeNodeLoad(node, item, depth, keyPath);
return true;
}
return false;
});
// bad keyPath
if (!hasTarget && depth === 0) {
this.leftKey = '0';
var node = this.internalTreeData[this.leftKey];
if (node) {
this.cascadeNodeLoad(node, this.leftKey, depth, keyPath);
}
}
},
formatNodes: function formatNodes(key, nodes, option) {
var _this$formatData = this.formatData(nodes, key),
cachedExpandKey = _this$formatData.cachedExpandKey,
internalTreeData = _this$formatData.internalTreeData,
leftData = _this$formatData.leftData;
this.internalTreeData = Object.assign({}, this.internalTreeData, internalTreeData);
this.$set(this.cachedExpandKey, key, true);
this.cachedExpandKey[key] = true;
this.cachedExpandKey = Object.assign(this.cachedExpandKey, cachedExpandKey);
if (leftData.length > 0) {
this.$set(option, 'children', leftData);
}
},
loadDataWhenExpand: function loadDataWhenExpand(key, option, successCallback, errorCallback) {
var _this5 = this;
if (this.loadData) {
if (option.loading || option.loaded) return;
var loadDataInstance = this.loadData(option);
if (loadDataInstance instanceof Promise) {
this.$set(option, 'loading', true);
loadDataInstance.then(function (nodes) {
_this5.formatNodes(key, nodes, option);
_this5.$set(option, 'loaded', true);
_this5.$set(option, 'loading', false);
_this5.$nextTick(function () {
successCallback && successCallback();
});
}).catch(function (error) {
errorCallback && errorCallback();
_this5.$set(option, 'loading', false);
_this5.$emit('loadError', error);
});
} else {
this.formatNodes(key, loadDataInstance, option);
this.$set(option, 'loaded', true);
this.$nextTick(function () {
successCallback && successCallback();
});
}
}
},
handleCollapseExpand: function handleCollapseExpand(key) {
this.cachedExpandKey[key] = true;
},
handleCollapseShrink: function handleCollapseShrink(key) {
if (this.cachedExpandKey[key]) {
delete this.cachedExpandKey[key];
}
},
renderRightPanel: function renderRightPanel(keys, keyPath) {
var _this6 = this;
var depth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
var h = this.$createElement;
return h(_List.default, [keys.map(function (key) {
var option = _this6.internalTreeData[key];
var newKeyPath = keyPath.concat(key);
if (!option.isLeaf && option.hasChildren && !option.loaded) {
return h(_Collapse.default.Item, {
"attrs": {
"loading": option.loading,
"title": option.title
},
"key": key,
"on": {
"expand": function expand() {
return _this6.loadDataWhenExpand(key, option);
},
"shrink": _this6.handleCollapseShrink
}
});
}
if (!option.isLeaf && option.children && option.children.length > 0) {
return h(_Collapse.default.Item, {
"on": {
"expand": _this6.handleCollapseExpand,
"shrink": _this6.handleCollapseShrink
},
"attrs": {
"title": option.title
},
"key": key
}, [_this6.renderRightPanel(option.children, newKeyPath, depth + 1)]);
}
var itemProps = {
key: key,
props: {
button: true
},
attrs: {}
};
if (option.isLeaf && _this6.isNodeActive(option)) {
itemProps.attrs = {
id: _this6.internalKey
};
}
return h(_List.default.Item, (0, _babelHelperVueJsxMergeProps.default)([{}, itemProps]), [option.title, option.isLeaf && (_this6.multiple ? h(_Checkbox.default, {
"slot": "action",
"attrs": {
"attach": {
path: newKeyPath,
option: option
},
"value": option.value,
"checkedIcon": _this6.checkedIcon,
"unCheckedIcon": _this6.unCheckedIcon
}
}) : h(_Radio.default, {
"slot": "action",
"attrs": {
"attach": {
path: newKeyPath,
option: option
},
"value": option.value,
"checkedIcon": _this6.checkedIcon,
"unCheckedIcon": _this6.unCheckedIcon
}
}))]);
})]);
}
},
mounted: function mounted() {
if (this.keyPath) {
this.cascadeLoad(this.keyPath);
} else if (this.leftKey) {
this.loadDataWhenExpand(this.leftKey, this.internalTreeData[this.leftKey]);
}
},
render: function render() {
var _this$internalTreeDat,
_this7 = this;
var h = arguments[0];
var root = this.$rootCls();
var leftClass = root.element('left');
var rightClass = root.element('right');
var leftKey = this.leftKey;
var leftOption = this.internalTreeData[leftKey];
var rightChildren = (_this$internalTreeDat = this.internalTreeData[leftKey]) === null || _this$internalTreeDat === void 0 ? void 0 : _this$internalTreeDat.children;
var rightPanel;
if (rightChildren) {
var panelContent = this.renderRightPanel(rightChildren, [leftKey]);
if (this.multiple) {
rightPanel = h(_CheckboxGroup.default, {
"attrs": {
"value": this.internalValue,
"max": this.max
},
"on": {
"change": this.handleChange
}
}, [h(_Collapse.default, {
"attrs": {
"accordion": false,
"value": Object.keys(this.cachedExpandKey)
}
}, [panelContent])]);
} else {
rightPanel = h(_RadioGroup.default, {
"attrs": {
"value": this.internalValue
},
"on": {
"change": this.handleChange
}
}, [h(_Collapse.default, {
"attrs": {
"accordion": false,
"value": Object.keys(this.cachedExpandKey)
}
}, [panelContent])]);
}
}
return h("div", {
"class": root
}, [h("div", {
"class": leftClass,
"style": {
width: this.leftWidth
}
}, [this.leftData.map(function (key) {
return h("div", {
"class": leftClass.element('item').is([leftKey === key && 'active']),
"on": {
"click": function click() {
return _this7.handleLeftPanelClick(key);
}
}
}, [_this7.internalTreeData[key].title]);
})]), h("div", {
"class": rightClass
}, [leftOption && leftOption.loading ? this.$slots.loading || h("div", {
"class": rightClass.element('loading')
}, [h(_Loading.default, {
"attrs": {
"vertical": true
}
})]) : rightPanel])]);
}
});