amis
Version:
一种MIS页面生成工具
169 lines (168 loc) • 7.89 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var Item_1 = require("./Item");
var classnames_1 = tslib_1.__importDefault(require("classnames"));
var omit = require("lodash/omit");
var pick = require("lodash/pick");
var helper_1 = require("../../utils/helper");
var dom;
var stripTag = function (value) {
if (!value) {
return value;
}
dom = dom || document.createElement('div');
dom.innerHTML = value;
return dom.innerText;
};
var SubFormControl = /** @class */ (function (_super) {
tslib_1.__extends(SubFormControl, _super);
function SubFormControl(props) {
var _this = _super.call(this, props) || this;
_this.state = {
openedIndex: -1,
optionIndex: -1
};
_this.addItem = _this.addItem.bind(_this);
_this.removeItem = _this.removeItem.bind(_this);
_this.open = _this.open.bind(_this);
_this.close = _this.close.bind(_this);
_this.handleDialogConfirm = _this.handleDialogConfirm.bind(_this);
return _this;
}
SubFormControl.prototype.addItem = function () {
var value = this.props.value;
if (!Array.isArray(value)) {
value = [];
}
else {
value = value.concat();
}
value.push({});
this.props.onChange(value);
};
SubFormControl.prototype.removeItem = function (key, e) {
e.stopPropagation();
e.preventDefault();
var value = this.props.value;
if (!Array.isArray(value)) {
return;
}
value = value.concat();
value.splice(key, 1);
this.props.onChange(value);
};
SubFormControl.prototype.open = function (index) {
if (index === void 0) { index = 0; }
this.setState({
openedIndex: index
});
};
SubFormControl.prototype.close = function () {
this.setState({
openedIndex: -1
});
};
SubFormControl.prototype.handleDialogConfirm = function (values) {
var _a = this.props, multiple = _a.multiple, onChange = _a.onChange, value = _a.value;
if (multiple) {
var newValue = Array.isArray(value) ? value.concat() : [];
newValue[this.state.openedIndex] = tslib_1.__assign(tslib_1.__assign({}, newValue[this.state.openedIndex]), values[0]);
onChange(newValue);
}
else {
onChange(tslib_1.__assign(tslib_1.__assign({}, value), values[0]));
}
this.close();
};
SubFormControl.prototype.buildDialogSchema = function () {
var form = this.props.form;
var dialogProps = [
'title',
'actions',
'name',
'size',
'closeOnEsc',
'showCloseButton',
'bodyClassName',
'type'
];
return tslib_1.__assign(tslib_1.__assign({}, pick(form, dialogProps)), { type: 'dialog', body: tslib_1.__assign({ type: 'form' }, omit(form, dialogProps)) });
};
SubFormControl.prototype.renderMultipe = function () {
var _this = this;
var _a = this.props, ns = _a.classPrefix, addButtonClassName = _a.addButtonClassName, editButtonClassName = _a.editButtonClassName, disabled = _a.disabled, labelField = _a.labelField, value = _a.value, btnLabel = _a.btnLabel, render = _a.render, data = _a.data;
return [
react_1.default.createElement("div", { className: ns + "SubForm-values", key: "values" }, Array.isArray(value)
? value.map(function (value, key) { return (react_1.default.createElement("div", { className: classnames_1.default(ns + "SubForm-value", {
'is-disabled': disabled
}, editButtonClassName), key: key },
react_1.default.createElement("span", { "data-tooltip": "\u5220\u9664", "data-position": "bottom", className: ns + "Select-valueIcon", onClick: _this.removeItem.bind(_this, key) }, "\u00D7"),
react_1.default.createElement("span", { onClick: _this.open.bind(_this, key), className: ns + "SubForm-valueLabel", "data-tooltip": "\u7F16\u8F91\u8BE6\u60C5", "data-position": "bottom" }, (value && labelField && value[labelField] && stripTag(value[labelField])) ||
render('label', {
type: 'tpl',
tpl: btnLabel
}, {
data: data
})))); })
: null),
react_1.default.createElement("button", { key: "add", type: "button", onClick: this.addItem, className: classnames_1.default(ns + "Button " + ns + "SubForm-addBtn", addButtonClassName), disabled: disabled, "data-tooltip": "\u65B0\u589E\u4E00\u6761\u6570\u636E" },
react_1.default.createElement("i", { className: "fa fa-plus m-r-xs" }),
react_1.default.createElement("span", null, "\u65B0\u589E"))
];
};
SubFormControl.prototype.renderSingle = function () {
var _a = this.props, ns = _a.classPrefix, btnClassName = _a.btnClassName, disabled = _a.disabled, value = _a.value, labelField = _a.labelField, btnLabel = _a.btnLabel, render = _a.render, data = _a.data;
return (react_1.default.createElement("div", { className: ns + "SubForm-values", key: "values" },
react_1.default.createElement("div", { className: classnames_1.default(ns + "SubForm-value", {
'is-disabled': disabled
}, btnClassName), onClick: this.open.bind(this, 0), "data-tooltip": "\u7F16\u8F91\u8BE6\u60C5", "data-position": "bottom" },
react_1.default.createElement("span", { className: ns + "SubForm-valueLabel" }, (value && labelField && value[labelField] && stripTag(value[labelField])) ||
render('label', {
type: 'tpl',
tpl: btnLabel
}, {
data: data
})))));
};
SubFormControl.prototype.render = function () {
var _a = this.props, multiple = _a.multiple, ns = _a.classPrefix, className = _a.className, render = _a.render, value = _a.value, data = _a.data;
var openedIndex = this.state.openedIndex;
return (react_1.default.createElement("div", { className: classnames_1.default(ns + "SubFormControl", className) },
multiple ? this.renderMultipe() : this.renderSingle(),
render("dalog/" + openedIndex, this.buildDialogSchema(), {
show: openedIndex !== -1,
onClose: this.close,
onConfirm: this.handleDialogConfirm,
data: helper_1.createObject(data, (multiple ? Array.isArray(value) && value[openedIndex] : value) || {})
})));
};
SubFormControl.defaultProps = {
minLength: 0,
maxLength: 0,
multiple: false,
btnClassName: '',
addButtonClassName: '',
editButtonClassName: '',
labelField: 'label',
btnLabel: '设置'
};
return SubFormControl;
}(react_1.default.PureComponent));
exports.default = SubFormControl;
var SubFormControlRenderer = /** @class */ (function (_super) {
tslib_1.__extends(SubFormControlRenderer, _super);
function SubFormControlRenderer() {
return _super !== null && _super.apply(this, arguments) || this;
}
SubFormControlRenderer = tslib_1.__decorate([
Item_1.FormItem({
type: 'form',
sizeMutable: false
})
], SubFormControlRenderer);
return SubFormControlRenderer;
}(SubFormControl));
exports.SubFormControlRenderer = SubFormControlRenderer;
//# sourceMappingURL=./renderers/Form/SubForm.js.map