fastlion-amis
Version:
一种MIS页面生成工具
93 lines (92 loc) • 6.28 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var antd_1 = require("antd");
var rc_virtual_list_1 = (0, tslib_1.__importDefault)(require("rc-virtual-list"));
var lodash_1 = require("lodash");
require("./index.scss");
var PcContacts = function (props) {
var mode = props.mode, height = props.height, contacts = props.contacts, checkedKeys = props.checkedKeys, onCheckedKeysChange = props.onCheckedKeysChange, onListChecked = props.onListChecked, onTreeChecked = props.onTreeChecked, onSelected = props.onSelected, _a = props.defaultCheckedKeys, defaultCheckedKeys = _a === void 0 ? [] : _a, _b = props.className, className = _b === void 0 ? '' : _b;
var _c = (0, react_1.useState)(), selectedId = _c[0], setSelectedId = _c[1];
var _d = (0, react_1.useState)([]), expandedKeys = _d[0], setExpandedKeys = _d[1];
var _e = (0, react_1.useState)(), searchDatas = _e[0], setSearchDatas = _e[1];
var _f = (0, react_1.useState)([]), dataSource = _f[0], setDataSource = _f[1];
(0, react_1.useEffect)(function () {
var topNodes = getTopNodes(contacts);
setDataSource(topNodes);
}, [contacts]);
var getTopNodes = function (contacts) {
return contacts.flatMap(function (data) {
if (data.nodeType === 0 && (data.parId == undefined || data.parId === 'top')) {
return [{ key: data.id, title: data.name, isLeaf: false, checkable: false, selectable: mode == 'view' }];
}
return [];
});
};
var handleSearch = (0, lodash_1.debounce)(function (value) {
if (value.length === 0) {
setSearchDatas(undefined);
}
else {
setSearchDatas(contacts.filter(function (data) { return data.name.includes(value) || data.id.includes(value); }));
}
}, 600);
var getTreeData = function (id) { return (0, tslib_1.__awaiter)(void 0, void 0, void 0, function () {
var children, tempData;
return (0, tslib_1.__generator)(this, function (_a) {
children = getNodeChildren(id);
tempData = children.filter(function (data) { return defaultCheckedKeys.includes(data.key); }).map(function (data) { return data.key; });
onCheckedKeysChange((0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], checkedKeys, true), tempData, true));
setDataSource(function (datas) { return buildTreeData(id, datas, (0, tslib_1.__spreadArray)([], children, true)); });
return [2 /*return*/];
});
}); };
var getNodeChildren = function (id) {
return contacts.flatMap(function (data) {
if (data.parId == id) {
return [{ key: data.id, selectable: mode == 'view', checkable: true, title: data.nodeType == 1 ? data.name + " (" + data.id + ")" : data.name, isLeaf: data.nodeType == 1, disabled: defaultCheckedKeys.includes(data.id) }];
}
return [];
});
};
var buildTreeData = function (key, datas, children) {
return datas.map(function (node) {
if (node.key === key) {
return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, node), { children: children });
}
if (node.children) {
return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, node), { children: buildTreeData(key, node.children, children) });
}
return node;
});
};
return (react_1.default.createElement("div", { className: "pc-contacts " + className },
react_1.default.createElement(antd_1.Input, { className: 'pc-contacts-search', placeholder: '\u7528\u6237\u540D\u3001\u5DE5\u53F7', allowClear: true, onChange: function (e) { return handleSearch(e.target.value); } }),
react_1.default.createElement("div", { className: 'pc-contacts-tree-wrapper' }, searchDatas ?
react_1.default.createElement(antd_1.List, { size: 'small' },
react_1.default.createElement(rc_virtual_list_1.default, { data: searchDatas, itemKey: 'id', itemHeight: 38, height: height }, function (data) { return (react_1.default.createElement(antd_1.List.Item, { key: data.id, className: data.id == selectedId ? 'list-item-selected' : '', onClick: mode == 'view' ? function () { return setSelectedId(data.id); } : undefined },
mode == 'select' &&
react_1.default.createElement(antd_1.Checkbox, { disabled: defaultCheckedKeys.includes(data.id), checked: checkedKeys.includes(data.id) || defaultCheckedKeys.includes(data.id), onChange: function (e) { return onListChecked(e.target.checked, data); } },
data.name,
"(",
data.id,
")"),
mode == 'view' &&
react_1.default.createElement("span", null,
data.name,
"(",
data.id,
")"))); })) :
react_1.default.createElement(antd_1.Tree, { style: { fontSize: 13 }, checkable: mode == 'select', checkStrictly: true, height: height, expandedKeys: expandedKeys, checkedKeys: checkedKeys, treeData: dataSource, defaultCheckedKeys: defaultCheckedKeys, onExpand: function (keys) { return setExpandedKeys(keys); }, loadData: function (data) { return getTreeData(data.key); }, onCheck: function (_keys, info) {
var node = info.node;
var data = contacts.find(function (contact) { return contact.id === node.key; });
data && onTreeChecked(info.checked, data);
}, onSelect: function (_keys, info) {
var node = info.node;
var data = contacts.find(function (contact) { return contact.id === node.key; });
data && (onSelected === null || onSelected === void 0 ? void 0 : onSelected(data));
} }))));
};
exports.default = PcContacts;
//# sourceMappingURL=./components/Communication/PcContacts/index.js.map