fastlion-amis
Version:
一种MIS页面生成工具
428 lines (427 loc) • 23.5 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PickerControlRenderer = void 0;
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var Options_1 = require("./Options");
var classnames_1 = (0, tslib_1.__importDefault)(require("classnames"));
var types_1 = require("../../types");
var find_1 = (0, tslib_1.__importDefault)(require("lodash/find"));
var helper_1 = require("../../utils/helper");
var findIndex_1 = (0, tslib_1.__importDefault)(require("lodash/findIndex"));
var Html_1 = (0, tslib_1.__importDefault)(require("../../components/Html"));
var tpl_1 = require("../../utils/tpl");
var icons_1 = require("../../components/icons");
var api_1 = require("../../utils/api");
var antd_1 = require("antd");
var utils_1 = require("../../utils/utils");
var tools_1 = require("../../utils/shell/tools");
var utils_2 = require("../Lion/utils/utils");
var PickerControl = /** @class */ (function (_super) {
(0, tslib_1.__extends)(PickerControl, _super);
function PickerControl() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
isOpened: false,
schema: _this.buildSchema(_this.props),
isFocused: false,
maxTagCount: undefined
};
_this.adaptation = react_1.default.createRef();
_this.input = react_1.default.createRef();
_this.removeItem = function (index) {
var _a = _this.props, selectedOptions = _a.selectedOptions, joinValues = _a.joinValues, extractValue = _a.extractValue, delimiter = _a.delimiter, valueField = _a.valueField, onChange = _a.onChange, multiple = _a.multiple;
var items = selectedOptions.concat();
items.splice(index, 1);
var value = items;
if (joinValues) {
value = items
.map(function (item) { return item[valueField || 'value']; })
.join(delimiter || ',');
}
else if (extractValue) {
value = multiple
? items.map(function (item) { return item[valueField || 'value']; })
: (items[0] && items[0][valueField || 'value']) || '';
}
else {
value = multiple ? items : items[0];
}
onChange(value);
};
return _this;
}
PickerControl.prototype.componentDidMount = function () {
if (!this.props.formItem || this.props.formItemValue) {
this.fetchOptions();
}
};
PickerControl.prototype.componentDidUpdate = function (prevProps) {
var props = this.props;
if ((0, helper_1.anyChanged)(['pickerSchema', 'multiple', 'source'], prevProps, props)) {
this.setState({
schema: this.buildSchema(props)
});
}
else if (JSON.stringify(props.value) !== JSON.stringify(prevProps.value)) {
if (!this.props.embed) {
this.fetchOptions();
}
}
else if ((0, api_1.isApiOutdated)(prevProps.source, props.source, prevProps.data, props.data)) {
this.fetchOptions();
}
// Jay form的数据域更新了
if (prevProps.formInited === false && this.props.formInited) {
if (!this.props.embed) {
this.fetchOptions();
}
}
};
PickerControl.prototype.fetchOptions = function () {
var _a;
var _b = this.props, value = _b.value, formItem = _b.formItem, valueField = _b.valueField, labelField = _b.labelField, source = _b.source, data = _b.data;
var selectedOptions;
if (!source ||
!formItem ||
(valueField || 'value') === (labelField || 'label') ||
this.props.options.length && //Aug
((selectedOptions = formItem.getSelectedOptions(value)) &&
(!selectedOptions.length ||
selectedOptions[0][valueField || 'value'] !==
selectedOptions[0][labelField || 'label']))) {
return;
}
if ((0, helper_1.isNil)(value))
return;
var ctx = (0, helper_1.createObject)(data, {
value: value,
op: 'loadOptions'
});
if (typeof source != 'string') {
var newSource = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, source), { data: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, source.data), (_a = {}, _a[valueField] = value, _a)) });
(0, api_1.isEffectiveApi)(newSource, ctx) && formItem.loadOptions(newSource, ctx, { autoAppend: true });
}
else {
(0, api_1.isEffectiveApi)(source, ctx) && formItem.loadOptions(source, ctx, { autoAppend: true });
}
};
PickerControl.prototype.buildSchema = function (props) {
var _a, _b, _c;
return (0, tslib_1.__assign)((0, tslib_1.__assign)({ checkOnItemClick: true }, props.pickerSchema), { labelTpl: (_b = (_a = props.pickerSchema) === null || _a === void 0 ? void 0 : _a.labelTpl) !== null && _b !== void 0 ? _b : props.labelTpl, type: 'crud', pickerMode: true, syncLocation: false, api: props.source, keepItemSelectionOnPageChange: (_c = props.pickerSchema) === null || _c === void 0 ? void 0 : _c.keepItemSelectionOnPageChange, valueField: props.valueField, labelField: props.labelField,
// 不支持批量操作，会乱套
bulkActions: props.multiple
? props.pickerSchema.bulkActions
: [] });
};
PickerControl.prototype.crudRef = function (ref) {
while (ref && ref.getWrappedInstance) {
ref = ref.getWrappedInstance();
}
this.crud = ref;
};
PickerControl.prototype.reload = function () {
if (this.crud) {
this.crud.search();
}
else {
var reload = this.props.reloadOptions;
reload && reload();
}
};
PickerControl.prototype.open = function () {
this.setState({
isOpened: true
});
};
PickerControl.prototype.close = function () {
this.setState({
isOpened: false
});
};
PickerControl.prototype.handleModalConfirm = function (values, action, ctx, components) {
var _a = this.props, maxSelected = _a.maxSelected, minSelected = _a.minSelected;
var idx = (0, findIndex_1.default)(components, function (item) { return item.props.type === 'crud'; });
if (values[idx].items) {
values[idx].items;
}
if (maxSelected !== undefined || minSelected !== undefined) {
var dat = (0, utils_1.handlelimitSize)(maxSelected, minSelected, values[idx].items, this.showModal.bind(this));
if (!dat)
return;
}
this.handleChange(values[idx].items);
this.close();
};
PickerControl.prototype.showModal = function (val) {
var _a = this.props, env = _a.env, __ = _a.translate;
antd_1.Modal.warning({
title: (react_1.default.createElement("div", null,
react_1.default.createElement("div", { style: { position: 'absolute', right: '10px', top: '10px', fontSize: '12px', cursor: "pointer" }, onClick: function () { antd_1.Modal.destroyAll(); } },
react_1.default.createElement(icons_1.Icon, { icon: "close", className: "icon" })))),
content: val !== null && val !== void 0 ? val : '当前',
getContainer: env.getModalContainer,
zIndex: 1020,
okText: __('confirm')
});
};
PickerControl.prototype.handleChange = function (items) {
var _a = this.props, joinValues = _a.joinValues, valueField = _a.valueField, delimiter = _a.delimiter, extractValue = _a.extractValue, multiple = _a.multiple, options = _a.options, setOptions = _a.setOptions, onChange = _a.onChange;
var value = items;
if (joinValues) {
value = items
.map(function (item) { return item[valueField || 'value']; })
.join(delimiter || ',');
}
else if (extractValue) {
value = multiple
? items.map(function (item) { return item[valueField || 'value']; })
: (items[0] && items[0][valueField || 'value']) || '';
}
else {
value = multiple ? items : items[0];
}
var additionalOptions = [];
items.forEach(function (item) {
if (!(0, find_1.default)(options, function (option) { return item[valueField || 'value'] == option[valueField || 'value']; })) {
additionalOptions.push(item);
}
});
additionalOptions.length && setOptions(options.concat(additionalOptions));
onChange(value);
};
PickerControl.prototype.handleKeyDown = function (e) {
var selectedOptions = this.props.selectedOptions;
if (e.key === ' ') {
this.open();
e.preventDefault();
}
else if (selectedOptions.length && e.key == 'Backspace') {
this.removeItem(selectedOptions.length - 1);
}
};
PickerControl.prototype.handleFocus = function () {
this.setState({
isFocused: true
});
};
PickerControl.prototype.handleBlur = function () {
this.setState({
isFocused: false
});
};
PickerControl.prototype.handleClick = function () {
this.input.current && this.input.current.focus();
};
PickerControl.prototype.clearValue = function () {
var _a = this.props, onChange = _a.onChange, resetValue = _a.resetValue;
onChange(resetValue !== void 0 ? resetValue : '');
};
PickerControl.prototype.renderValues = function () {
var _this = this;
var _a = this.props, ns = _a.classPrefix, selectedOptions = _a.selectedOptions, delimiter = _a.delimiter, __ = _a.translate;
var value = selectedOptions.map(function (item) {
return "" + ((0, helper_1.getVariable)(item, _this.props.labelField || 'label') || (0, helper_1.getVariable)(item, 'id'));
}).join(delimiter || ',');
return react_1.default.createElement(antd_1.Popover, { trigger: 'hover', placement: 'top', className: (0, classnames_1.default)(ns + "Picker-valueWraps"), getPopupContainer: function () { return document.getElementById('amis-modal-container') || document.body; }, overlayClassName: (0, classnames_1.default)(ns + "Picker-ResultBox-overflow"), content: tools_1.tools.isPc && (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) ?
react_1.default.createElement("div", { className: (0, classnames_1.default)(ns + "Picker-values"), onClick: function (e) { e.stopPropagation(); e.preventDefault(); } },
(selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) && (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) > 2 && react_1.default.createElement("div", { key: 'selectedOptions', className: (0, classnames_1.default)(ns + "Picker-value") }, selectedOptions.length),
selectedOptions.map(function (item, index) { return _this.handleIten(item, index, true); }),
react_1.default.createElement("span", { onClick: function (e) { e.stopPropagation(); e.preventDefault(); (0, utils_2.copy)(value); antd_1.message.success(__('System.copy')); } },
react_1.default.createElement(icons_1.Icon, { icon: "copy", className: "icon" }))) : null },
react_1.default.createElement("div", { className: ns + "Picker-values", onClick: function (e) { e.stopPropagation(); } }, value));
// return (
// <div className={`${ns}Picker-values`} onClick={(e) => { e.stopPropagation() }} >
// {selectedOptions.map((item, index) => this.handleIten(item, index))}
// </div>
// );
};
PickerControl.prototype.handleIten = function (item, index, bled) {
var _this = this;
var _a = this.props, ns = _a.classPrefix, labelField = _a.labelField, labelTpl = _a.labelTpl, disabled = _a.disabled;
return (react_1.default.createElement("div", { key: index, className: (0, classnames_1.default)(ns + "Picker-value", "" + (bled ? ns + 'Picker-valueLabel-background' : ''), { 'is-disabled': disabled, }) },
react_1.default.createElement("span", { className: ns + "Picker-valueLabel}", onClick: function () { bled && !disabled && _this.removeItem(index); } }, labelTpl ? (react_1.default.createElement(Html_1.default, { html: (0, tpl_1.filter)(labelTpl, item) })) : ("" + ((0, helper_1.getVariable)(item, labelField || 'label') ||
(0, helper_1.getVariable)(item, 'id')))),
bled || (0, helper_1.isMobile)() || disabled ? null : react_1.default.createElement("span", { "data-tooltip": "\u5220\u9664", "data-position": "bottom", className: ns + "Picker-valueIcon", onClick: function (e) {
e.stopPropagation();
_this.removeItem(index);
} },
react_1.default.createElement(icons_1.Icon, { icon: "close", className: "icon" }))));
};
PickerControl.prototype.renderBody = function (_a) {
var _b = _a === void 0 ? {} : _a, popOverContainer = _b.popOverContainer;
var _c = this.props, render = _c.render, selectedOptions = _c.selectedOptions, options = _c.options, multiple = _c.multiple, valueField = _c.valueField, embed = _c.embed, source = _c.source;
// Jay
var props = {
valueField: valueField,
primaryField: valueField,
options: source ? [] : options,
multiple: multiple,
onSelect: embed ? this.handleChange : undefined,
ref: this.crudRef,
popOverContainer: popOverContainer
};
// embed为true时去掉value: selectedOptions，否则在某种情况下死循环
// 死循环的原因可能是其他组件直接修改了value（该value是作为props，picker传递到其他组件）
// 注释掉的话会导致其他组件拿不到选中值
if (!embed)
props.value = selectedOptions;
props.isPick = true;
var schema = this.state.schema;
return render('modal-body', (0, tslib_1.__assign)({}, schema), (0, tslib_1.__assign)((0, tslib_1.__assign)({}, schema), props));
};
PickerControl.prototype.render = function () {
var _this = this;
var _a = this.props, className = _a.className, cx = _a.classnames, disabled = _a.disabled, render = _a.render, modalMode = _a.modalMode, source = _a.source, size = _a.size, env = _a.env, clearable = _a.clearable, multiple = _a.multiple, placeholder = _a.placeholder, embed = _a.embed, value = _a.value, selectedOptions = _a.selectedOptions, __ = _a.translate, popOverContainer = _a.popOverContainer, formMode = _a.formMode, dialogContainer = _a.dialogContainer;
return (react_1.default.createElement("div", { className: cx("PickerControl", className, formMode === 'inline' ? 'is-inline' : '') }, embed ? (react_1.default.createElement("div", { className: cx('Picker') }, this.renderBody({ popOverContainer: popOverContainer }))) : (react_1.default.createElement("div", { className: cx("Picker", {
'Picker--single': !multiple,
'Picker--multi': multiple,
'is-focused': this.state.isFocused,
'is-disabled': disabled
}) },
react_1.default.createElement("div", { onClick: this.handleClick, className: cx('Picker-input', (0, helper_1.isMobile)() && 'isMobile-picker') },
!selectedOptions.length && placeholder ? (react_1.default.createElement("div", { className: cx('Picker-placeholder') }, __(placeholder))) : null,
react_1.default.createElement("div", { className: cx('Picker-valueWrap'), ref: this.adaptation },
this.renderValues(),
react_1.default.createElement("input", { onChange: helper_1.noop, value: '', ref: this.input, onKeyDown: this.handleKeyDown,
// onFocus={this.handleFocus}
readOnly: true, onFocus: function (e) {
_this.handleFocus();
_this.open();
}, onBlur: this.handleBlur })),
clearable && !disabled && selectedOptions.length ? (react_1.default.createElement("a", { onClick: this.clearValue, className: cx('Picker-clear') },
react_1.default.createElement(icons_1.Icon, { icon: "close", className: "icon" }))) : null,
!disabled && react_1.default.createElement("span", { onClick: this.open, className: cx('Picker-btn') }, (0, helper_1.isMobile)() ?
react_1.default.createElement(icons_1.Icon, { icon: "right-arrow-bold", className: "icon", style: { fontSize: '10px' } }) :
react_1.default.createElement(icons_1.Icon, { symbol: true, icon: "#icon-tooltool_down", className: "icon" }))),
this.state.isOpened ? render('modal', {
title: __('Select.placeholder'),
size: size,
type: modalMode,
body: {
children: this.renderBody
}
}, {
key: 'modal',
lazyRender: !!source,
onConfirm: this.handleModalConfirm,
onClose: this.close,
show: this.state.isOpened,
className: 'picker-modal',
outContainer: dialogContainer
}) : null))));
};
var _a, _b, _c, _d, _e;
PickerControl.propsList = [
'modalMode',
'pickerSchema',
'labelField',
'onChange',
'options',
'value',
'inline',
'multiple',
'embed',
'resetValue',
'placeholder',
'onQuery' // 防止 Form 的 onQuery 事件透传下去，不然会导致 table 先后触发 Form 和 Crud 的 onQuery
];
PickerControl.defaultProps = {
modalMode: (0, helper_1.isMobile)() ? 'drawer' : 'dialog',
multiple: false,
placeholder: '请点击右侧的图标',
labelField: 'label',
valueField: 'value',
pickerSchema: {
mode: 'list',
listItem: {
title: '${label|raw}'
}
},
embed: false
};
(0, tslib_1.__decorate)([
helper_1.autobind,
(0, tslib_1.__metadata)("design:type", Function),
(0, tslib_1.__metadata)("design:paramtypes", [Object]),
(0, tslib_1.__metadata)("design:returntype", void 0)
], PickerControl.prototype, "crudRef", null);
(0, tslib_1.__decorate)([
helper_1.autobind,
(0, tslib_1.__metadata)("design:type", Function),
(0, tslib_1.__metadata)("design:paramtypes", []),
(0, tslib_1.__metadata)("design:returntype", void 0)
], PickerControl.prototype, "open", null);
(0, tslib_1.__decorate)([
helper_1.autobind,
(0, tslib_1.__metadata)("design:type", Function),
(0, tslib_1.__metadata)("design:paramtypes", []),
(0, tslib_1.__metadata)("design:returntype", void 0)
], PickerControl.prototype, "close", null);
(0, tslib_1.__decorate)([
helper_1.autobind,
(0, tslib_1.__metadata)("design:type", Function),
(0, tslib_1.__metadata)("design:paramtypes", [typeof (_a = typeof Array !== "undefined" && Array) === "function" ? _a : Object, typeof (_b = typeof types_1.Action !== "undefined" && types_1.Action) === "function" ? _b : Object, Object, typeof (_c = typeof Array !== "undefined" && Array) === "function" ? _c : Object]),
(0, tslib_1.__metadata)("design:returntype", void 0)
], PickerControl.prototype, "handleModalConfirm", null);
(0, tslib_1.__decorate)([
helper_1.autobind,
(0, tslib_1.__metadata)("design:type", Function),
(0, tslib_1.__metadata)("design:paramtypes", [typeof (_d = typeof Array !== "undefined" && Array) === "function" ? _d : Object]),
(0, tslib_1.__metadata)("design:returntype", void 0)
], PickerControl.prototype, "handleChange", null);
(0, tslib_1.__decorate)([
helper_1.autobind,
(0, tslib_1.__metadata)("design:type", Function),
(0, tslib_1.__metadata)("design:paramtypes", [typeof (_e = typeof react_1.default !== "undefined" && react_1.default.KeyboardEvent) === "function" ? _e : Object]),
(0, tslib_1.__metadata)("design:returntype", void 0)
], PickerControl.prototype, "handleKeyDown", null);
(0, tslib_1.__decorate)([
helper_1.autobind,
(0, tslib_1.__metadata)("design:type", Function),
(0, tslib_1.__metadata)("design:paramtypes", []),
(0, tslib_1.__metadata)("design:returntype", void 0)
], PickerControl.prototype, "handleFocus", null);
(0, tslib_1.__decorate)([
helper_1.autobind,
(0, tslib_1.__metadata)("design:type", Function),
(0, tslib_1.__metadata)("design:paramtypes", []),
(0, tslib_1.__metadata)("design:returntype", void 0)
], PickerControl.prototype, "handleBlur", null);
(0, tslib_1.__decorate)([
helper_1.autobind,
(0, tslib_1.__metadata)("design:type", Function),
(0, tslib_1.__metadata)("design:paramtypes", []),
(0, tslib_1.__metadata)("design:returntype", void 0)
], PickerControl.prototype, "handleClick", null);
(0, tslib_1.__decorate)([
helper_1.autobind,
(0, tslib_1.__metadata)("design:type", Function),
(0, tslib_1.__metadata)("design:paramtypes", []),
(0, tslib_1.__metadata)("design:returntype", void 0)
], PickerControl.prototype, "clearValue", null);
(0, tslib_1.__decorate)([
helper_1.autobind,
(0, tslib_1.__metadata)("design:type", Function),
(0, tslib_1.__metadata)("design:paramtypes", [Object]),
(0, tslib_1.__metadata)("design:returntype", void 0)
], PickerControl.prototype, "renderBody", null);
return PickerControl;
}(react_1.default.PureComponent));
exports.default = PickerControl;
var PickerControlRenderer = /** @class */ (function (_super) {
(0, tslib_1.__extends)(PickerControlRenderer, _super);
function PickerControlRenderer() {
return _super !== null && _super.apply(this, arguments) || this;
}
PickerControlRenderer = (0, tslib_1.__decorate)([
(0, Options_1.OptionsControl)({
type: 'picker',
autoLoadOptionsFromSource: false,
sizeMutable: false
})
], PickerControlRenderer);
return PickerControlRenderer;
}(PickerControl));
exports.PickerControlRenderer = PickerControlRenderer;
//# sourceMappingURL=./renderers/Form/Picker.js.map