fastlion-amis
Version:
一种MIS页面生成工具
242 lines (241 loc) • 14.3 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ChainedSelection = void 0;
var tslib_1 = require("tslib");
/**
* 级联多选框，支持无限极。从左侧到右侧一层层点选。
*/
var Selection_1 = require("./Selection");
var theme_1 = require("../theme");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var uncontrollable_1 = require("uncontrollable");
var Checkbox_1 = (0, tslib_1.__importDefault)(require("./Checkbox"));
var helper_1 = require("../utils/helper");
var times_1 = (0, tslib_1.__importDefault)(require("lodash/times"));
var Spinner_1 = (0, tslib_1.__importDefault)(require("./Spinner"));
var locale_1 = require("../locale");
var antd_1 = require("antd");
var icons_1 = require("@ant-design/icons");
var isEqual_1 = (0, tslib_1.__importDefault)(require("lodash/isEqual"));
var ChainedSelection = /** @class */ (function (_super) {
(0, tslib_1.__extends)(ChainedSelection, _super);
function ChainedSelection() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
selected: [],
ActiveKey: "default"
};
_this.renderOptionTabs = function () {
var options = _this.props.options;
var selected = _this.state.selected;
if (!selected.length) {
return [0].map(function () { return react_1.default.createElement(antd_1.Tabs.TabPane, { tab: '请选择', key: 'default' }); });
}
else {
return [selected.map(function (item) {
if (item.includes('-')) {
var tabLabel = _this.getNestedValue(options, item).label;
return react_1.default.createElement(antd_1.Tabs.TabPane, { tab: tabLabel, key: item });
}
else {
return react_1.default.createElement(antd_1.Tabs.TabPane, { tab: options[item].label, key: item });
}
}), react_1.default.createElement(antd_1.Tabs.TabPane, { tab: '请选择', key: 'default' })];
}
};
_this.domRef = function (ref) {
_this.dom = ref;
};
_this.handleTabClick = function (key) {
var selected = _this.state.selected;
_this.setState({ ActiveKey: key }, function () {
if (_this.dom)
_this.handleLeft(_this.dom.offsetWidth, selected.indexOf(key) !== -1 ? selected.indexOf(key) : selected.length);
});
};
_this.handleLeft = function (width, select) {
var _a;
(_a = _this.dom) === null || _a === void 0 ? void 0 : _a.scrollTo({ left: width * select });
};
// 可已挖掘深层
_this.findAncestors = function (targetValue, orgArray) {
var _loop_1 = function (orgItem) {
var result = _this.findAncestorsRecursive(orgItem, orgArray, targetValue, []);
if (result && (result === null || result === void 0 ? void 0 : result.length) > 0) {
return { value: result.map(function (value, index) {
return result.slice(0, index + 1).join('-');
}) };
}
};
for (var orgItem in orgArray) {
var state_1 = _loop_1(orgItem);
if (typeof state_1 === "object")
return state_1.value;
}
return [];
};
_this.findAncestorsRecursive = function (node, orgArray, targetValue, path) {
var _a, _b, _c;
if (!orgArray[node]) {
return [];
}
// 将当前节点的value添加到路径中
path.push(node);
if ((0, isEqual_1.default)(orgArray[node], targetValue)) {
return path;
}
if ((_a = orgArray[node]) === null || _a === void 0 ? void 0 : _a.children) {
for (var child in (_b = orgArray[node]) === null || _b === void 0 ? void 0 : _b.children) {
var result = _this.findAncestorsRecursive(child, (_c = orgArray[node]) === null || _c === void 0 ? void 0 : _c.children, targetValue, (0, tslib_1.__spreadArray)([], path, true));
if (result && (result === null || result === void 0 ? void 0 : result.length) > 0) {
return result;
}
}
}
return [];
};
return _this;
}
ChainedSelection.prototype.componentDidMount = function () {
var defaultSelectedIndex = this.props.defaultSelectedIndex;
if (defaultSelectedIndex !== undefined) {
this.setState({
selected: Array.isArray(defaultSelectedIndex) ? (0, tslib_1.__spreadArray)([], defaultSelectedIndex, true) : [defaultSelectedIndex]
});
}
};
ChainedSelection.prototype.componentDidUpdate = function (prevProps) {
var defaultSelectedIndex = this.props.defaultSelectedIndex;
if (defaultSelectedIndex !== undefined && defaultSelectedIndex !== prevProps.defaultSelectedIndex) {
this.setState({
selected: Array.isArray(defaultSelectedIndex) ? (0, tslib_1.__spreadArray)([], defaultSelectedIndex, true) : [defaultSelectedIndex]
});
}
};
ChainedSelection.prototype.selectOption = function (option, depth, id) {
var _this = this;
var onDeferLoad = this.props.onDeferLoad;
var selected = this.state.selected.concat();
selected.splice(depth, selected.length - depth);
selected.push(id);
this.setState({
selected: selected,
ActiveKey: "default"
}, function () {
option.defer && onDeferLoad ? function () { return onDeferLoad(option); } : undefined;
if (_this.dom)
_this.handleLeft(_this.dom.offsetWidth, selected.length);
});
};
ChainedSelection.prototype.renderItem = function (option, index, depth, id) {
var _this = this;
var _a = this.props, labelClassName = _a.labelClassName, disabled = _a.disabled, cx = _a.classnames, itemClassName = _a.itemClassName, itemRender = _a.itemRender, multiple = _a.multiple;
var valueArray = this.valueArray;
return (react_1.default.createElement("div", { key: index, className: cx('ChainedSelection-item', itemClassName, option.className, disabled || option.disabled ? 'is-disabled' : '', !!~valueArray.indexOf(option) ? 'is-active' : ''), onClick: function () { return _this.toggleOption(option); } },
react_1.default.createElement("div", { className: cx('ChainedSelection-itemLabel') }, itemRender(option, {
index: index,
multiple: multiple,
checked: !!~valueArray.indexOf(option),
onChange: function () { return _this.toggleOption(option); },
disabled: disabled || option.disabled
})),
multiple ? (react_1.default.createElement(Checkbox_1.default, { size: "sm", checked: !!~valueArray.indexOf(option), disabled: disabled || option.disabled, labelClassName: labelClassName, description: option.description })) : null));
};
ChainedSelection.prototype.renderOption = function (option, index, depth, id) {
var _this = this;
var _a = this.props, disabled = _a.disabled, cx = _a.classnames, itemClassName = _a.itemClassName, itemRender = _a.itemRender, multiple = _a.multiple;
if (Array.isArray(option.children) || option.defer) {
return (react_1.default.createElement("div", { key: index, className: cx('ChainedSelection-item', itemClassName, option.className, disabled || option.disabled ? 'is-disabled' : '', ~this.state.selected.indexOf(id) ? 'is-active' : ''), onClick: function () { return _this.selectOption(option, depth, id); } },
react_1.default.createElement("div", { className: cx('ChainedSelection-itemLabel') }, itemRender(option, {
index: index,
multiple: multiple,
checked: !!~this.state.selected.indexOf(id),
onChange: function () { return _this.selectOption(option, depth, id); },
disabled: disabled || option.disabled
})),
option.defer && option.loading ? react_1.default.createElement(Spinner_1.default, { size: "sm", show: true }) : null,
((0, helper_1.isMobile)() && ~this.state.selected.indexOf(id)) ? react_1.default.createElement(icons_1.CheckOutlined, { style: { color: '#3574ee' } }) : ''));
}
return this.renderItem(option, index, depth, id);
};
ChainedSelection.prototype.getNestedValue = function (arr, index) {
var result = arr;
var indexes = index.split('-');
indexes.forEach(function (item, index) {
var _a, _b;
if (result && ((_a = result[item]) === null || _a === void 0 ? void 0 : _a.children) && index + 1 !== indexes.length) {
result = (_b = result[item]) === null || _b === void 0 ? void 0 : _b.children;
}
else {
result = result[item];
}
});
return result;
};
ChainedSelection.prototype.render = function () {
var _this = this;
var _a;
var _b = this.props, value = _b.value, options = _b.options, className = _b.className, placeholder = _b.placeholder, cx = _b.classnames, option2value = _b.option2value, multiple = _b.multiple, __ = _b.translate;
var ActiveKey = this.state.ActiveKey;
this.valueArray = Selection_1.BaseSelection.value2array(value, options, option2value);
var body = [];
if (Array.isArray(options) && options.length) {
var selected_1 = this.state.selected.concat();
var depth = Math.min((0, helper_1.getTreeDepth)(options), 3);
if ((0, helper_1.getTreeDepth)(options) - selected_1.length > 0) {
(0, times_1.default)(Math.max(depth - selected_1.length, 1), function () { return selected_1.push(null); });
}
selected_1.reduce(function (_a, selected, depth) {
var body = _a.body, options = _a.options, subTitle = _a.subTitle, indexes = _a.indexes, placeholder = _a.placeholder;
var nextOptions = [];
var nextSubTitle = '';
var nextPlaceholder = '';
var nextIndexes = indexes;
body.push(react_1.default.createElement("div", { key: depth, className: cx('ChainedSelection-col') },
subTitle ? (react_1.default.createElement("div", { className: cx('ChainedSelection-subTitle') }, subTitle)) : null,
Array.isArray(options) && options.length ? (options.map(function (option, index) {
var id = indexes.concat(index).join('-');
if (id === selected) {
nextSubTitle = option.subTitle;
nextOptions = option.children;
nextIndexes = indexes.concat(index);
nextPlaceholder = option.placeholder;
}
return _this.renderOption(option, index, depth, id);
})) : (react_1.default.createElement("div", { className: cx('ChainedSelection-placeholder') }, __(placeholder)))));
return {
options: nextOptions,
subTitle: nextSubTitle,
placeholder: nextPlaceholder,
indexes: nextIndexes,
body: body
};
}, {
options: options,
body: body,
indexes: [],
placeholder: placeholder
});
}
var content = body && body.length ? (body) : (react_1.default.createElement("div", { className: cx('ChainedSelection-placeholder') }, __(placeholder)));
// this.renderOptionTabs(this.findAncestors(value[0], options)
return (react_1.default.createElement("div", { className: cx('ChainedSelection', className, (0, helper_1.isMobile)() ? 'ChainedSelection-isModle' : '') }, (0, helper_1.isMobile)() ? react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { className: cx('ChainedSelection-Tabs') },
react_1.default.createElement(antd_1.Tabs, { defaultActiveKey: '0', activeKey: ActiveKey, onTabClick: this.handleTabClick }, this.renderOptionTabs())),
react_1.default.createElement("div", { className: cx('ChainedSelection-Checked', multiple ? 'ChainedSelection-Multiple' : ''), ref: this.domRef },
content,
multiple && react_1.default.createElement("div", { className: cx('ChainedSelection-Content') }, (_a = this.props.value) === null || _a === void 0 ? void 0 : _a.map(function (item) {
return react_1.default.createElement("div", { className: cx('ChainedSelection-value') },
react_1.default.createElement("span", { className: cx('ChainedSelection-label') }, item.label),
react_1.default.createElement("span", { className: cx('ChainedSelection-Icon') },
react_1.default.createElement(icons_1.CloseCircleFilled, { onClick: function () { _this.toggleOption(item); } })));
})))) :
content));
};
return ChainedSelection;
}(Selection_1.BaseSelection));
exports.ChainedSelection = ChainedSelection;
exports.default = (0, theme_1.themeable)((0, locale_1.localeable)((0, uncontrollable_1.uncontrollable)(ChainedSelection, {
value: 'onChange'
})));
//# sourceMappingURL=./components/ChainedSelection.js.map