fastlion-amis
Version:
一种MIS页面生成工具
740 lines • 56.1 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FormItem = exports.registerFormItem = exports.asFormItem = exports.detectProps = exports.FormItemWrap = void 0;
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var hoist_non_react_statics_1 = (0, tslib_1.__importDefault)(require("hoist-non-react-statics"));
var mobx_1 = require("mobx");
var factory_1 = require("../../factory");
var helper_1 = require("../../utils/helper");
var mobx_react_1 = require("mobx-react");
var tpl_1 = require("../../utils/tpl");
var WithStore_1 = require("../../WithStore");
var wrapControl_1 = require("./wrapControl");
var api_1 = require("../../utils/api");
var tpl_builtin_1 = require("../../utils/tpl-builtin");
var debounce_1 = (0, tslib_1.__importDefault)(require("lodash/debounce"));
var utils_1 = require("../../utils/utils");
var commonTableFunction_1 = require("../../store/utils/commonTableFunction");
/**
* Aug 自动排版下 一直独占一行的组件
* 目前设置 富文本、多行输入、表格、文件上传、图片、单选框、列表选择器
* 根据需要可另行添加其他类型
*/
var autoLayoutWhiteList = ['input-rich-text', 'textarea', 'input-table', 'input-table-field', 'input-file', 'input-image', 'radios', 'picker', 'static-html'];
var FormItemWrap = /** @class */ (function (_super) {
(0, tslib_1.__extends)(FormItemWrap, _super);
function FormItemWrap(props) {
var _this = _super.call(this, props) || this;
_this.reaction = [];
_this.handleFocus = function (e) {
var model = _this.props.formItem;
model && model.focus();
_this.props.onFocus && _this.props.onFocus(e);
};
_this.handleBlur = function (e) {
var _a;
var _b = _this.props, model = _b.formItem, value = _b.value;
model && model.blur();
_this.props.onBlur && _this.props.onBlur(e);
var focusValue = _this.state.focusValue;
if (model) {
if (focusValue != value) {
_this.setState({ focusValue: (_a = e.target) === null || _a === void 0 ? void 0 : _a.valueAsNumber });
_this.syncAutoFill(model.tmpValue);
}
}
};
_this.handleChange = function (value, submitOnChange, changeImmediately) {
var onChange = _this.props.onChange;
//先调用onChange的话会导致select类型时，this.props.value的值马上变成value，也就不会触发autoFill了
if (value !== _this.props.value) {
_this.syncAutoFill(value);
}
onChange(value, submitOnChange, changeImmediately);
};
_this.syncAutoFill = (0, debounce_1.default)(function (term, reload) {
(function (term, reload) { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
var _a, autoFill, onBulkChange, formItem, data, crossValueFields, itemName, ctx, _b, groupName_1, fieldName, index, keys, crossData, EmptyData, _i, keys_1, key, result, obj_1;
var _c;
var _d, _e;
return (0, tslib_1.__generator)(this, function (_f) {
switch (_f.label) {
case 0:
_a = this.props, autoFill = _a.autoFill, onBulkChange = _a.onBulkChange, formItem = _a.formItem, data = _a.data, crossValueFields = _a.crossValueFields;
// 参照录入
if (!autoFill || (autoFill && !(autoFill === null || autoFill === void 0 ? void 0 : autoFill.hasOwnProperty('api')))) {
return [2 /*return*/];
}
itemName = formItem === null || formItem === void 0 ? void 0 : formItem.name;
ctx = (0, helper_1.createObject)(data, (_c = {},
_c[itemName || ''] = term,
_c));
if (!((onBulkChange !== undefined &&
(0, api_1.isEffectiveApi)(autoFill.api, ctx)) ||
reload)) return [3 /*break*/, 2];
_b = this.dealCrossField(itemName !== null && itemName !== void 0 ? itemName : ''), groupName_1 = _b[0], fieldName = _b[1], index = _b[2];
keys = Object.keys(data).filter(function (key) { return key.startsWith(groupName_1); });
crossData = {};
EmptyData = {};
if (autoFill === null || autoFill === void 0 ? void 0 : autoFill.fillMapping) {
EmptyData = (0, tpl_builtin_1.dataMapping)(autoFill.fillMapping, {});
}
onBulkChange === null || onBulkChange === void 0 ? void 0 : onBulkChange(EmptyData);
for (_i = 0, keys_1 = keys; _i < keys_1.length; _i++) {
key = keys_1[_i];
crossData[key.substring(index + 1)] = data[key];
}
crossData[fieldName] = term;
return [4 /*yield*/, (formItem === null || formItem === void 0 ? void 0 : formItem.loadAutoUpdateData(autoFill.api, crossValueFields ? (0, helper_1.createObject)(ctx, crossData) : ctx, !!((_d = (autoFill.api)) === null || _d === void 0 ? void 0 : _d.silent)))];
case 1:
result = _f.sent();
this.lastSearchTerm =
(_e = (result && (0, helper_1.getVariable)(result, itemName))) !== null && _e !== void 0 ? _e : term;
if (autoFill === null || autoFill === void 0 ? void 0 : autoFill.fillMapping) {
result = (0, tpl_builtin_1.dataMapping)(autoFill.fillMapping, result);
}
if (crossValueFields) {
obj_1 = (0, tslib_1.__assign)({}, result);
Object.keys(obj_1).forEach(function (key) {
if (crossValueFields.includes(key)) {
obj_1["" + groupName_1 + commonTableFunction_1.CROSS_SPLIT_CHAR + key] = obj_1[key];
}
});
result = obj_1;
}
result && (onBulkChange === null || onBulkChange === void 0 ? void 0 : onBulkChange(result));
_f.label = 2;
case 2: return [2 /*return*/];
}
});
}); })(term, reload).catch(function (e) { return console.error(e); });
}, 1000, {
trailing: true,
leading: false
});
_this.handleOpenDialog = function (schema, data) { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
var model;
return (0, tslib_1.__generator)(this, function (_a) {
model = this.props.formItem;
if (!model) {
return [2 /*return*/];
}
return [2 /*return*/, new Promise(function (resolve) {
return model.openDialog(schema, data, function (result) { return resolve(result); });
})];
});
}); };
_this.handleDialogConfirm = function (_a) {
var values = _a[0];
var model = _this.props.formItem;
if (!model) {
return;
}
model.closeDialog(values);
};
_this.handleDialogClose = function (confirmed) {
if (confirmed === void 0) { confirmed = false; }
var model = _this.props.formItem;
if (!model) {
return;
}
model.closeDialog(confirmed);
};
var model = props.formItem;
if (model) {
_this.state = { focusValue: props.value };
_this.reaction.push((0, mobx_1.reaction)(function () { return "" + model.errors.join('') + model.isFocused + model.dialogOpen; }, function () { return _this.forceUpdate(); }));
}
return _this;
}
;
FormItemWrap.prototype.componentDidUpdate = function (prevProps) {
var _a, _b, _c;
var props = this.props;
var model = props.formItem;
if ((0, api_1.isEffectiveApi)((_a = props.autoFill) === null || _a === void 0 ? void 0 : _a.api, props.data) &&
(0, api_1.isApiOutdated)((_b = prevProps.autoFill) === null || _b === void 0 ? void 0 : _b.api, (_c = props.autoFill) === null || _c === void 0 ? void 0 : _c.api, prevProps.data, props.data)
// || (props.userChange && props.value !== prevProps.value)
) {
this.syncAutoFill(model === null || model === void 0 ? void 0 : model.tmpValue, true);
}
};
FormItemWrap.prototype.componentWillUnmount = function () {
// this.reaction && this.reaction();
this.reaction.forEach(function (fn) { return fn(); });
this.reaction = [];
this.syncAutoFill.cancel();
};
FormItemWrap.prototype.dealCrossField = function (itemName) {
var index = itemName.lastIndexOf(commonTableFunction_1.CROSS_SPLIT_CHAR);
var groupName = itemName.substring(0, index);
var fieldName = itemName.substring(index + 1);
return [groupName, fieldName, index];
};
FormItemWrap.prototype.renderControl = function () {
var _a;
var _b = this.props, inputClassName = _b.inputClassName, model = _b.formItem, cx = _b.classnames, children = _b.children, type = _b.type, renderControl = _b.renderControl, formItemConfig = _b.formItemConfig, sizeMutable = _b.sizeMutable, size = _b.size, defaultSize = _b.defaultSize, useMobileUI = _b.useMobileUI, charWidth = _b.charWidth, formatSize = _b.formatSize, rest = (0, tslib_1.__rest)(_b, ["inputClassName", "formItem", "classnames", "children", "type", "renderControl", "formItemConfig", "sizeMutable", "size", "defaultSize", "useMobileUI", "charWidth", "formatSize"]);
var mobileUI = useMobileUI && (0, helper_1.isMobile)();
if (renderControl) {
var controlSize = size || defaultSize;
return renderControl((0, tslib_1.__assign)((0, tslib_1.__assign)({}, rest), { onOpenDialog: this.handleOpenDialog, type: type, classnames: cx, formItem: model, className: cx("Form-control", charWidth ? 'Form-control--width' : '', formatSize ? "format-" + formatSize : null, (_a = {
'is-inline': !!rest.inline && !mobileUI,
'is-error': model && !model.valid
},
_a["Form-control--withSize Form-control--size" + (0, helper_1.ucFirst)(controlSize)] = sizeMutable !== false &&
typeof controlSize === 'string' &&
!!controlSize &&
controlSize !== 'full',
_a), model === null || model === void 0 ? void 0 : model.errClassNames, inputClassName) }));
}
return null;
};
FormItemWrap.prototype.render = function () {
var _a = this.props, formMode = _a.formMode, inputOnly = _a.inputOnly, wrap = _a.wrap, render = _a.render, model = _a.formItem, readOnlyItem = _a.readOnlyItem, readonly = _a.readonly, type = _a.type, label = _a.label;
//移动端字段表格垂直模式样式处理
var verticalField = type === 'input-table-field' && this.props.tableLayout === 'vertical';
//移动端字段表格水平样式处理
var horizonField = type === 'input-table-field' && (0, helper_1.isMobile)() && this.props.tableLayout === 'horizontal';
var newLabel = label;
if (verticalField) {
newLabel = false;
}
var mode = this.props.mode || formMode;
if (wrap === false || inputOnly) {
return this.renderControl();
}
var renderLayout = FormItemWrap.layoutRenderers[mode] ||
FormItemWrap.layoutRenderers['normal'];
if ((0, helper_1.isMobile)() && ['input-rich-text', 'textarea', 'lion-upload', 'input-datetime-range', 'static-html', 'input-table', 'input-table-field'].includes((model === null || model === void 0 ? void 0 : model.type) || '')) {
renderLayout = FormItemWrap.layoutRenderers['row'];
// if (model?.type === 'lion-upload' && readonly) {
// renderLayout = FormItemWrap.layoutRenderers[mode]
// }
}
return (react_1.default.createElement(react_1.default.Fragment, null,
renderLayout((0, tslib_1.__assign)((0, tslib_1.__assign)({}, this.props), { label: newLabel, verticalField: verticalField, horizonField: horizonField }), this.renderControl.bind(this)),
(model && model.dialogOpen)
? render('modal', (0, tslib_1.__assign)({ type: 'dialog' }, model.dialogSchema), {
show: model.dialogOpen,
onClose: this.handleDialogClose,
onConfirm: this.handleDialogConfirm,
data: model.dialogData,
formStore: undefined
})
: null));
};
/**
* 布局扩充点，可以自己扩充表单项的布局方式
*/
FormItemWrap.layoutRenderers = {
horizontal: function (props, renderControl) {
var _a, _b, _c, _d;
var _e, _f, _g, _h;
var className = props.className, cx = props.classnames, description = props.description, descriptionClassName = props.descriptionClassName, captionClassName = props.captionClassName, desc = props.desc, label = props.label, labelClassName = props.labelClassName, render = props.render, required = props.required, caption = props.caption, remark = props.remark, labelRemark = props.labelRemark, env = props.env, model = props.formItem, renderLabel = props.renderLabel, renderDescription = props.renderDescription, hint = props.hint, data = props.data, showErrorMsg = props.showErrorMsg, useMobileUI = props.useMobileUI, charWidth = props.charWidth,
//Aug
autoLayout = props.autoLayout, type = props.type, readOnlyItem = props.readOnlyItem, linkUrl = props.linkUrl, verticalField = props.verticalField, horizonField = props.horizonField, staticShow = props.staticShow;
var fontSize = +((_f = (_e = getComputedStyle(window.document.documentElement)) === null || _e === void 0 ? void 0 : _e.fontSize) === null || _f === void 0 ? void 0 : _f.replace('px', ''));
// 强制不渲染 label 的话
if (renderLabel === false) {
label = label === false ? false : '';
}
description = description || desc;
var horizontal = props.horizontal || props.formHorizontal || {};
var left = (0, helper_1.getWidthRate)(horizontal.left);
var right = (0, helper_1.getWidthRate)(horizontal.right);
var viewDetails = props.type.includes('static') || props.readOnly || props.readonly || props.disabled || ((_g = props.type) === null || _g === void 0 ? void 0 : _g.includes('input-table')) || ((_h = props.type) === null || _h === void 0 ? void 0 : _h.includes('input-table-field')) || staticShow;
var linkjump = viewDetails && linkUrl && (0, utils_1.linkJump)(props === null || props === void 0 ? void 0 : props.linkId, data, props.jumpDisabledOn);
return (react_1.default.createElement("div", { "data-role": "form-item", style: { height: props.fillCell ? '100%' : undefined }, className: cx("Form-item Form-item--horizontal", className, (_a = {},
_a["is-error"] = model && !model.valid,
_a["is-required"] = required,
//Aug
_a['autoLayout-other'] = autoLayout && autoLayoutWhiteList.includes(type),
_a['ReadOnly-item'] = !readOnlyItem,
_a['view-details'] = viewDetails,
_a['is-linkUrl'] = linkjump,
_a.verticalField = verticalField,
_a.horizonField = horizonField,
_a.dateRangeFormItem = type === null || type === void 0 ? void 0 : type.includes('range'),
_a.datetimeFormItem = (type === null || type === void 0 ? void 0 : type.includes('datetime')) && !(type === null || type === void 0 ? void 0 : type.includes('range')),
_a.pickerFormItem = type.includes('picker'),
_a), model === null || model === void 0 ? void 0 : model.errClassNames), onClick: function (e) { e.stopPropagation(); linkjump && (0, utils_1.ModleHandleClick)(props, e.target); } },
label ? (react_1.default.createElement("label", { className: cx("Form-label", (_b = {},
_b["Form-itemColumn--" + (typeof horizontal.leftFixed === 'string'
? horizontal.leftFixed
: 'normal')] = horizontal.leftFixed,
_b["Form-itemColumn--" + left] = !horizontal.leftFixed,
_b), labelClassName) },
react_1.default.createElement("span", null,
required && (label || labelRemark) ? (react_1.default.createElement("span", { className: cx("Form-star") }, "*")) : null,
label
? render('label', typeof label === 'string' ? (0, tpl_1.filter)(label, data) : label)
: null,
labelRemark
? !(0, helper_1.isMobile)() ? render('label-remark', {
type: 'remark',
icon: labelRemark.icon || 'warning-mark',
tooltip: labelRemark,
useMobileUI: useMobileUI,
className: cx("Form-lableRemark"),
container: props.popOverContainer
? props.popOverContainer
: env === null || env === void 0 ? void 0 : env.getTopModalContainer
}) : null
: null))) : null,
react_1.default.createElement("div", { className: cx("Form-value", charWidth ? 'Form-item--width' : '', (_c = {},
// [`Form-itemColumn--offset${getWidthRate(horizontal.offset)}`]: !label && label !== false,
_c["Form-itemColumn--" + right] = !horizontal.leftFixed && !!right && right !== 12 - left,
_c)), style: (_d = {},
_d[charWidth ? 'width' : ''] = charWidth * fontSize,
_d) },
(0, helper_1.isMobile)() ?
react_1.default.createElement("div", { style: { flex: 1, overflow: 'hidden' } },
renderControl(),
labelRemark ? react_1.default.createElement("div", { className: cx("Form-feedback-icon") },
react_1.default.createElement("div", null, labelRemark)) : null)
: renderControl(),
caption
? render('caption', caption, {
className: cx("Form-caption", captionClassName)
})
: null,
remark
? render('remark', {
type: 'remark',
icon: remark.icon || 'warning-mark',
tooltip: remark,
className: cx("Form-remark"),
useMobileUI: useMobileUI,
container: props.popOverContainer
? props.popOverContainer
: env === null || env === void 0 ? void 0 : env.getTopModalContainer
})
: null,
hint && model && model.isFocused
? render('hint', hint, {
className: cx("Form-hint")
})
: null,
model &&
!model.valid &&
showErrorMsg !== false &&
Array.isArray(model.errors) ? (react_1.default.createElement("ul", { className: cx("Form-feedback") }, model.errors.map(function (msg, key) { return (react_1.default.createElement("li", { key: key }, msg)); }))) : null,
renderDescription !== false && description
? render('description', description, {
className: cx("Form-description", descriptionClassName)
})
: null)));
},
normal: function (props, renderControl) {
var _a;
var _b, _c;
var className = props.className, cx = props.classnames, desc = props.desc, description = props.description, label = props.label, labelClassName = props.labelClassName, render = props.render, required = props.required, caption = props.caption, remark = props.remark, labelRemark = props.labelRemark, env = props.env, descriptionClassName = props.descriptionClassName, captionClassName = props.captionClassName, model = props.formItem, renderLabel = props.renderLabel, renderDescription = props.renderDescription, hint = props.hint, data = props.data, showErrorMsg = props.showErrorMsg, autoLayout = props.autoLayout, type = props.type, useMobileUI = props.useMobileUI, readOnlyItem = props.readOnlyItem, linkUrl = props.linkUrl, verticalField = props.verticalField, horizonField = props.horizonField, staticShow = props.staticShow;
description = description || desc;
var viewDetails = props.type.includes('static') || props.readOnly || props.readonly || props.disabled || ((_b = props.type) === null || _b === void 0 ? void 0 : _b.includes('input-table')) || ((_c = props.type) === null || _c === void 0 ? void 0 : _c.includes('input-table-field')) || staticShow;
var linkjump = viewDetails && linkUrl && (0, utils_1.linkJump)(props === null || props === void 0 ? void 0 : props.linkId, data, props.jumpDisabledOn);
return (react_1.default.createElement("div", { "data-role": "form-item", style: { height: props.fillCell ? '100%' : undefined }, className: cx("Form-item Form-item--normal", className, (_a = {
'is-error': model && !model.valid
},
_a["is-required"] = required,
//Aug
_a['autoLayout-other'] = autoLayout && autoLayoutWhiteList.includes(type),
_a['ReadOnly-item'] = !readOnlyItem,
_a['view-details'] = viewDetails,
_a['is-linkUrl'] = linkjump,
_a.verticalField = verticalField,
_a.horizonField = horizonField,
_a.dateRangeFormItem = type === null || type === void 0 ? void 0 : type.includes('range'),
_a.datetimeFormItem = (type === null || type === void 0 ? void 0 : type.includes('datetime')) && !(type === null || type === void 0 ? void 0 : type.includes('range')),
_a.pickerFormItem = type.includes('picker'),
_a), model === null || model === void 0 ? void 0 : model.errClassNames), onClick: function (e) { e.stopPropagation(); linkjump && (0, utils_1.ModleHandleClick)(props, e.target); } },
label && renderLabel !== false ? (react_1.default.createElement("label", { className: cx("Form-label", labelClassName) },
react_1.default.createElement("span", null,
required && (label || labelRemark) ? (react_1.default.createElement("span", { className: cx("Form-star") }, "*")) : null,
label
? render('label', typeof label === 'string' ? (0, tpl_1.filter)(label, data) : label)
: null,
labelRemark
? !(0, helper_1.isMobile)() ? render('label-remark', {
type: 'remark',
icon: labelRemark.icon || '#icon-tooltool_help',
tooltip: labelRemark,
className: cx("Form-lableRemark"),
useMobileUI: useMobileUI,
container: props.popOverContainer
? props.popOverContainer
: env === null || env === void 0 ? void 0 : env.getTopModalContainer
}) : null
: null))) : null,
(0, helper_1.isMobile)() ?
react_1.default.createElement("div", { style: { flex: 1, overflow: 'hidden' } },
renderControl(),
labelRemark ? react_1.default.createElement("div", { className: cx("Form-feedback-icon") },
react_1.default.createElement("div", null, labelRemark)) : null)
: renderControl(),
caption
? render('caption', caption, {
className: cx("Form-caption", captionClassName)
})
: null,
remark
? render('remark', {
type: 'remark',
icon: remark.icon || 'warning-mark',
className: cx("Form-remark"),
tooltip: remark,
useMobileUI: useMobileUI,
container: env === null || env === void 0 ? void 0 : env.getTopModalContainer
})
: null,
hint && model && model.isFocused
? render('hint', hint, {
className: cx("Form-hint")
})
: null,
model &&
!model.valid &&
showErrorMsg !== false &&
Array.isArray(model.errors) ? (react_1.default.createElement("ul", { className: cx("Form-feedback") }, model.errors.map(function (msg, key) { return (react_1.default.createElement("li", { key: key }, msg)); }))) : null,
renderDescription !== false && description
? render('description', description, {
className: cx("Form-description", descriptionClassName)
})
: null));
},
inline: function (props, renderControl) {
var _a, _b;
var _c, _d, _e, _f;
var className = props.className, cx = props.classnames, desc = props.desc, description = props.description, label = props.label, labelClassName = props.labelClassName, render = props.render, required = props.required, caption = props.caption, descriptionClassName = props.descriptionClassName, captionClassName = props.captionClassName, model = props.formItem, remark = props.remark, labelRemark = props.labelRemark, env = props.env, hint = props.hint, renderLabel = props.renderLabel, renderDescription = props.renderDescription, data = props.data, showErrorMsg = props.showErrorMsg, useMobileUI = props.useMobileUI, charWidth = props.charWidth,
//Aug
autoLayout = props.autoLayout, type = props.type, readOnlyItem = props.readOnlyItem, linkUrl = props.linkUrl, verticalField = props.verticalField, horizonField = props.horizonField, staticShow = props.staticShow;
description = description || desc;
var fontSize = Number((_d = (_c = getComputedStyle(window.document.documentElement)) === null || _c === void 0 ? void 0 : _c.fontSize) === null || _d === void 0 ? void 0 : _d.replace('px', ''));
var viewDetails = props.type.includes('static') || props.readOnly || props.readonly || props.disabled || ((_e = props.type) === null || _e === void 0 ? void 0 : _e.includes('input-table')) || ((_f = props.type) === null || _f === void 0 ? void 0 : _f.includes('input-table-field')) || staticShow;
var linkjump = viewDetails && linkUrl && (0, utils_1.linkJump)(props === null || props === void 0 ? void 0 : props.linkId, data, props.jumpDisabledOn);
return (react_1.default.createElement("div", { "data-role": "form-item", "data-name": props.name, style: { height: props.fillCell ? '100%' : undefined }, className: cx("Form-item Form-item--inline", className, (_a = {
'is-error': model && !model.valid
},
_a["is-required"] = required,
//Aug
_a['autoLayout-other'] = autoLayout && autoLayoutWhiteList.includes(type),
_a['ReadOnly-item'] = !readOnlyItem,
_a['view-details'] = viewDetails,
_a['is-linkUrl'] = linkjump,
_a['nolabel-required'] = !label && required,
_a.verticalField = verticalField,
_a.horizonField = horizonField,
_a.dateRangeFormItem = type === null || type === void 0 ? void 0 : type.includes('range'),
_a.datetimeFormItem = (type === null || type === void 0 ? void 0 : type.includes('datetime')) && !(type === null || type === void 0 ? void 0 : type.includes('range')),
_a.pickerFormItem = type.includes('picker'),
_a), model === null || model === void 0 ? void 0 : model.errClassNames), onClick: function (e) { e.stopPropagation(); linkjump && (0, utils_1.ModleHandleClick)(props, e.target); } },
label && renderLabel !== false ? (react_1.default.createElement("label", { className: cx("Form-label", labelClassName) },
react_1.default.createElement("span", null,
required && (label || labelRemark) ? (react_1.default.createElement("span", { className: cx("Form-star") }, "*")) : null,
label
? render('label', typeof label === 'string' ? (0, tpl_1.filter)(label, data) : label)
: label,
labelRemark
? !(0, helper_1.isMobile)() ? render('label-remark', {
type: 'remark',
icon: labelRemark.icon || 'warning-mark',
tooltip: labelRemark,
className: cx("Form-lableRemark"),
useMobileUI: useMobileUI,
container: props.popOverContainer
? props.popOverContainer
: env === null || env === void 0 ? void 0 : env.getTopModalContainer
}) : null
: null))) : null,
!label && required && renderLabel !== false ? (react_1.default.createElement("label", { className: cx("Form-label") },
react_1.default.createElement("span", { className: cx("Form-star") }, " *"))) : null,
react_1.default.createElement("div", { className: cx("Form-value", charWidth ? 'Form-item--width' : ''), style: (_b = {}, _b[charWidth ? 'width' : ''] = charWidth * fontSize, _b) },
(0, helper_1.isMobile)() ?
react_1.default.createElement("div", { style: { flex: 1, overflow: 'hidden' } },
renderControl(),
labelRemark ? react_1.default.createElement("div", { className: cx("Form-feedback-icon") },
react_1.default.createElement("div", null, labelRemark)) : null)
: renderControl(),
caption
? render('caption', caption, {
className: cx("Form-caption", captionClassName)
})
: null,
remark
? render('remark', {
type: 'remark',
icon: remark.icon || 'warning-mark',
className: cx("Form-remark"),
tooltip: remark,
useMobileUI: useMobileUI,
container: props.popOverContainer
? props.popOverContainer
: env === null || env === void 0 ? void 0 : env.getTopModalContainer
})
: null,
hint && model && model.isFocused
? render('hint', hint, {
className: cx("Form-hint")
})
: null,
model &&
!model.valid &&
showErrorMsg !== false &&
Array.isArray(model.errors) ? (react_1.default.createElement("ul", { className: cx("Form-feedback") }, model.errors.map(function (msg, key) { return (react_1.default.createElement("li", { key: key }, msg)); }))) : null,
renderDescription !== false && description
? render('description', description, {
className: cx("Form-description", descriptionClassName)
})
: null)));
},
grid: function (props, renderControl) {
var _a, _b;
var _c, _d, _e, _f;
var className = props.className, cx = props.classnames, desc = props.desc, description = props.description, label = props.label, labelClassName = props.labelClassName, render = props.render, required = props.required, caption = props.caption, descriptionClassName = props.descriptionClassName, captionClassName = props.captionClassName, model = props.formItem, remark = props.remark, labelRemark = props.labelRemark, env = props.env, hint = props.hint, renderLabel = props.renderLabel, renderDescription = props.renderDescription, data = props.data, showErrorMsg = props.showErrorMsg, useMobileUI = props.useMobileUI, charWidth = props.charWidth, type = props.type, readOnlyItem = props.readOnlyItem, verticalField = props.verticalField, horizonField = props.horizonField, staticShow = props.staticShow;
description = description || desc;
var fontSize = Number((_d = (_c = getComputedStyle(window.document.documentElement)) === null || _c === void 0 ? void 0 : _c.fontSize) === null || _d === void 0 ? void 0 : _d.replace('px', ''));
var viewDetails = props.type.includes('static') || props.readOnly || props.readonly || props.disabled || ((_e = props.type) === null || _e === void 0 ? void 0 : _e.includes('input-table')) || ((_f = props.type) === null || _f === void 0 ? void 0 : _f.includes('input-table-field')) || staticShow;
var isCheck = type == 'checkboxes' || type == 'radios' || type == 'group';
var isDate = type == 'input-datetime-range' || type == 'input-date-range';
return (react_1.default.createElement("div", { "data-role": "form-item", "data-name": props.name, style: { gridColumn: isCheck ? '1 / -1' : isDate ? 'span 2' : undefined }, className: cx("Form-item Form-item--grid", className, (_a = {
'is-error': model && !model.valid
},
_a["is-required"] = required,
_a['ReadOnly-item'] = !readOnlyItem,
_a['view-details'] = viewDetails,
_a['nolabel-required'] = !label && required,
_a['show-divider'] = isCheck,
_a.verticalField = verticalField,
_a.horizonField = horizonField,
_a), model === null || model === void 0 ? void 0 : model.errClassNames) },
label && renderLabel !== false ? (react_1.default.createElement("label", { className: cx("Form-label", labelClassName) },
react_1.default.createElement("span", null,
required && (label || labelRemark) ? (react_1.default.createElement("span", { className: cx("Form-star") }, "*")) : null,
label
? render('label', typeof label === 'string' ? (0, tpl_1.filter)(label, data) : label)
: label,
labelRemark
? !(0, helper_1.isMobile)() ? render('label-remark', {
type: 'remark',
icon: labelRemark.icon || 'warning-mark',
tooltip: labelRemark,
className: cx("Form-lableRemark"),
useMobileUI: useMobileUI,
container: props.popOverContainer
? props.popOverContainer
: env === null || env === void 0 ? void 0 : env.getTopModalContainer
}) : null
: null))) : null,
!label && required && renderLabel !== false ? (react_1.default.createElement("label", { className: cx("Form-label") },
react_1.default.createElement("span", { className: cx("Form-star") }, " *"))) : null,
react_1.default.createElement("div", { className: cx("Form-value", charWidth ? 'Form-item--width' : ''), style: (_b = {}, _b[charWidth ? 'width' : ''] = charWidth * fontSize, _b) },
(0, helper_1.isMobile)() ?
react_1.default.createElement("div", { style: { flex: 1, overflow: 'hidden' } },
renderControl(),
labelRemark ? react_1.default.createElement("div", { className: cx("Form-feedback-icon") },
react_1.default.createElement("div", null, labelRemark)) : null)
: renderControl(),
caption
? render('caption', caption, {
className: cx("Form-caption", captionClassName)
})
: null,
remark
? render('remark', {
type: 'remark',
icon: remark.icon || 'warning-mark',
className: cx("Form-remark"),
tooltip: remark,
useMobileUI: useMobileUI,
container: props.popOverContainer
? props.popOverContainer
: env === null || env === void 0 ? void 0 : env.getTopModalContainer
})
: null,
hint && model && model.isFocused
? render('hint', hint, {
className: cx("Form-hint")
})
: null,
model &&
!model.valid &&
showErrorMsg !== false &&
Array.isArray(model.errors) ? (react_1.default.createElement("ul", { className: cx("Form-feedback") }, model.errors.map(function (msg, key) { return (react_1.default.createElement("li", { key: key }, msg)); }))) : null,
renderDescription !== false && description
? render('description', description, {
className: cx("Form-description", descriptionClassName)
})
: null)));
},
row: function (props, renderControl) {
var _a;
var _b, _c;
var className = props.className, cx = props.classnames, desc = props.desc, description = props.description, label = props.label, labelClassName = props.labelClassName, render = props.render, required = props.required, caption = props.caption, remark = props.remark, labelRemark = props.labelRemark, env = props.env, descriptionClassName = props.descriptionClassName, captionClassName = props.captionClassName, model = props.formItem, renderLabel = props.renderLabel, renderDescription = props.renderDescription, hint = props.hint, data = props.data, showErrorMsg = props.showErrorMsg, useMobileUI = props.useMobileUI,
//Aug
autoLayout = props.autoLayout, type = props.type, readOnlyItem = props.readOnlyItem, linkUrl = props.linkUrl, verticalField = props.verticalField, horizonField = props.horizonField, staticShow = props.staticShow;
description = description || desc;
var remarkTopup = type == 'lion-upload' || type == 'input-table' || type == 'input-table-field';
var viewDetails = props.type.includes('static') || props.readOnly || props.readonly || props.disabled || ((_b = props.type) === null || _b === void 0 ? void 0 : _b.includes('input-table')) || ((_c = props.type) === null || _c === void 0 ? void 0 : _c.includes('input-table-field')) || staticShow;
var linkjump = viewDetails && linkUrl && (0, utils_1.linkJump)(props === null || props === void 0 ? void 0 : props.linkId, data, props.jumpDisabledOn);
var labelRemarkStyle = ['input-table-field'].some(function (item) { return props.type.includes(item); }) ? { width: "100%" } : { flex: 1, overflow: 'hidden' };
/** 多行文本框 在移动端文字超出限制提示优化 */
var textareaErrors = (0, helper_1.isMobile)() && ['textarea'].some(function (item) { return props.type.includes(item); });
return (react_1.default.createElement("div", { "data-role": "form-item", style: { height: props.fillCell ? '100%' : undefined }, className: cx("Form-item Form-item--row", className, (_a = {
'is-error': model && !model.valid
},
_a["is-required"] = required,
//Aug
_a['autoLayout-other'] = autoLayout && autoLayoutWhiteList.includes(type),
_a['ReadOnly-item'] = !readOnlyItem,
_a['view-details'] = viewDetails,
_a['is-linkUrl'] = linkjump,
_a.verticalField = verticalField,
_a.horizonField = horizonField,
_a.dateRangeFormItem = type === null || type === void 0 ? void 0 : type.includes('range'),
_a.datetimeFormItem = (type === null || type === void 0 ? void 0 : type.includes('datetime')) && !(type === null || type === void 0 ? void 0 : type.includes('range')),
_a.pickerFormItem = type.includes('picker'),
_a), model === null || model === void 0 ? void 0 : model.errClassNames), onClick: function (e) { e.stopPropagation(); linkjump && (0, utils_1.ModleHandleClick)(props, e.target); } },
react_1.default.createElement("div", { className: cx('Form-rowInner') },
label && renderLabel !== false ? (react_1.default.createElement("label", { className: cx("Form-label", labelClassName) },
react_1.default.createElement("span", null,
required && (label || labelRemark) ? (react_1.default.createElement("span", { className: cx("Form-star") }, "*")) : null,
render('label', typeof label === 'string' ? (0, tpl_1.filter)(label, data) : label),
labelRemark
? !(0, helper_1.isMobile)() ? render('label-remark', {
type: 'remark',
icon: labelRemark.icon || 'warning-mark',
tooltip: labelRemark,
className: cx("Form-lableRemark"),
useMobileUI: useMobileUI,
container: props.popOverContainer
? props.popOverContainer
: env === null || env === void 0 ? void 0 : env.getTopModalContainer
}) : null
: null))) : null,
(0, helper_1.isMobile)() ?
react_1.default.createElement("div", { style: labelRemarkStyle },
labelRemark && remarkTopup ? react_1.default.createElement("div", { className: cx("Form-feedback-icon", 'Form-feedback-icon-topup') },
react_1.default.createElement("div", null, labelRemark)) : null,
renderControl(),
labelRemark && !remarkTopup ? react_1.default.createElement("div", { className: cx("Form-feedback-icon") },
react_1.default.createElement("div", null, labelRemark)) : null,
model && textareaErrors &&
!model.valid &&
showErrorMsg !== false &&
Array.isArray(model.errors) ? (react_1.default.createElement("ul", { className: cx('Form-feedback') }, model.errors.map(function (msg, key) { return (react_1.default.createElement("li", { key: key }, msg)); }))) : null)
: renderControl(),
caption
? render('caption', caption, {
className: cx("Form-caption", captionClassName)
})
: null,
remark
? render('remark', {
type: 'remark',
icon: remark.icon || 'warning-mark',
className: cx("Form-remark"),
tooltip: remark,
container: env === null || env === void 0 ? void 0 : env.getTopModalContainer
})
: null),
hint && model && model.isFocused
? render('hint', hint, {
className: cx("Form-hint")
})
: null,
model && !textareaErrors &&
!model.valid &&
showErrorMsg !== false &&
Array.isArray(model.errors) ? (react_1.default.createElement("ul", { className: cx('Form-feedback') }, model.errors.map(function (msg, key) { return (react_1.default.createElement("li", { key: key }, msg)); }))) : null,
description && renderDescription !== false
? render('description', description, {
className: cx("Form-description", descriptionClassName)
})
: null));
}
};
return FormItemWrap;
}(react_1.default.Component));
exports.FormItemWrap = FormItemWrap;
// 白名单形式，只有这些属性发生变化，才会往下更新。
// 除非配置 strictMode
exports.detectProps = [
'formPristine',
'formInited',
'addable',
'addButtonClassName',
'addButtonText',
'addOn',
'btnClassName',
'btnLabel',
'btnDisabled',
'className',
'clearable',
'columns',
'columnsCount',
'controls',
'desc',
'description',
'disabled',
'draggable',
'editable',
'editButtonClassName',
'formHorizontal',
'formMode',
'hideRoot',
'horizontal',
'icon',
'inline',
'inputClassName',
'label',
'labelClassName',
'labelField',
'language',
'level',
'max',
'maxRows',
'min',
'minRows',
'multiLine',
'multiple',
'option',
'placeholder',
'removable',
'required',
'remark',
'hint',
'rows',
'searchable',
'showCompressOptions',
'size',
'step',
'showInput',
'unit',
'value',
'diffValue',
'borderMode',
'items',
'showCounter',
'minLength',
'maxLength',
'embed',
// Jay
'autoFillObj',
'inputfocus'
];
function asFormItem(config) {
return function (Control) {
var _a;
var isSFC = !(Control.prototype instanceof react_1.default.Component);
// 兼容老的 FormItem 用法。
if (config.validate && !Control.prototype.validate) {
var fn_1 = config.validate;
Control.prototype.validate = function () {
var host = {
input: this
};
return fn_1.apply(host, arguments);
};
}
else if (config.validate) {
console.error('FormItem配置中的 validate 将不起作用，因为类的成员函