amis-core 1.0.0-beta.0

package/dist/renderers/Item.js

@@ -0,0 +1,636 @@
+/**
+ * amis-core v1.0.0-beta.0
+ * Copyright 2018-2022 fex
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var hoistNonReactStatic = require('hoist-non-react-statics');
+var mobx = require('mobx');
+var factory = require('../factory.js');
+var helper = require('../utils/helper.js');
+var mobxReact = require('mobx-react');
+var tpl = require('../utils/tpl.js');
+var WithStore = require('../WithStore.js');
+var wrapControl = require('./wrapControl.js');
+var debouce = require('lodash/debounce');
+var api = require('../utils/api.js');
+var getVariable = require('../utils/getVariable.js');
+var object = require('../utils/object.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var hoistNonReactStatic__default = /*#__PURE__*/_interopDefaultLegacy(hoistNonReactStatic);
+var debouce__default = /*#__PURE__*/_interopDefaultLegacy(debouce);
+
+var FormItemWrap = /** @class */ (function (_super) {
+    tslib.__extends(FormItemWrap, _super);
+    function FormItemWrap(props) {
+        var _this = _super.call(this, props) || this;
+        _this.reaction = [];
+        _this.syncAutoFill = debouce__default["default"](function (term) {
+            (function (term) { return tslib.__awaiter(_this, void 0, void 0, function () {
+                var _a, autoFillApi, onBulkChange, formItem, data, itemName, ctx, result;
+                var _b;
+                var _c;
+                return tslib.__generator(this, function (_d) {
+                    switch (_d.label) {
+                        case 0:
+                            _a = this.props, autoFillApi = _a.autoFillApi, onBulkChange = _a.onBulkChange, formItem = _a.formItem, data = _a.data;
+                            if (!autoFillApi) {
+                                return [2 /*return*/];
+                            }
+                            itemName = formItem === null || formItem === void 0 ? void 0 : formItem.name;
+                            ctx = object.createObject(data, (_b = {},
+                                _b[itemName || ''] = term,
+                                _b));
+                            if (!(onBulkChange &&
+                                api.isEffectiveApi(autoFillApi, ctx) &&
+                                this.lastSearchTerm !== term)) return [3 /*break*/, 2];
+                            return [4 /*yield*/, (formItem === null || formItem === void 0 ? void 0 : formItem.loadAutoUpdateData(autoFillApi, ctx, !!(autoFillApi === null || autoFillApi === void 0 ? void 0 : autoFillApi.silent)))];
+                        case 1:
+                            result = _d.sent();
+                            if (!result)
+                                return [2 /*return*/];
+                            this.lastSearchTerm = (_c = getVariable.getVariable(result, itemName)) !== null && _c !== void 0 ? _c : term;
+                            onBulkChange(result);
+                            _d.label = 2;
+                        case 2: return [2 /*return*/];
+                    }
+                });
+            }); })(term).catch(function (e) { return console.error(e); });
+        }, 250, {
+            trailing: true,
+            leading: false
+        });
+        var model = props.formItem;
+        if (model) {
+            _this.reaction.push(mobx.reaction(function () { return "".concat(model.errors.join('')).concat(model.isFocused).concat(model.dialogOpen); }, function () { return _this.forceUpdate(); }));
+            _this.reaction.push(mobx.reaction(function () { return JSON.stringify(model.tmpValue); }, function () { return _this.syncAutoFill(model.tmpValue); }));
+        }
+        return _this;
+    }
+    FormItemWrap.prototype.componentWillUnmount = function () {
+        this.reaction.forEach(function (fn) { return fn(); });
+        this.reaction = [];
+        this.syncAutoFill.cancel();
+    };
+    FormItemWrap.prototype.handleFocus = function (e) {
+        var model = this.props.formItem;
+        model && model.focus();
+        this.props.onFocus && this.props.onFocus(e);
+    };
+    FormItemWrap.prototype.handleBlur = function (e) {
+        var model = this.props.formItem;
+        model && model.blur();
+        this.props.onBlur && this.props.onBlur(e);
+    };
+    FormItemWrap.prototype.handleOpenDialog = function (schema, data) {
+        return tslib.__awaiter(this, void 0, void 0, function () {
+            var model;
+            return tslib.__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); });
+                    })];
+            });
+        });
+    };
+    FormItemWrap.prototype.handleDialogConfirm = function (_a) {
+        var values = _a[0];
+        var model = this.props.formItem;
+        if (!model) {
+            return;
+        }
+        model.closeDialog(values);
+    };
+    FormItemWrap.prototype.handleDialogClose = function (confirmed) {
+        if (confirmed === void 0) { confirmed = false; }
+        var model = this.props.formItem;
+        if (!model) {
+            return;
+        }
+        model.closeDialog(confirmed);
+    };
+    FormItemWrap.prototype.renderControl = function () {
+        var _a;
+        var _b = this.props, inputClassName = _b.inputClassName, model = _b.formItem, cx = _b.classnames; _b.children; var type = _b.type, renderControl = _b.renderControl; _b.formItemConfig; var sizeMutable = _b.sizeMutable, size = _b.size, defaultSize = _b.defaultSize, useMobileUI = _b.useMobileUI, rest = tslib.__rest(_b, ["inputClassName", "formItem", "classnames", "children", "type", "renderControl", "formItemConfig", "sizeMutable", "size", "defaultSize", "useMobileUI"]);
+        var mobileUI = useMobileUI && helper.isMobile();
+        if (renderControl) {
+            var controlSize = size || defaultSize;
+            return renderControl(tslib.__assign(tslib.__assign({}, rest), { onOpenDialog: this.handleOpenDialog, type: type, classnames: cx, formItem: model, className: cx("Form-control", (_a = {
+                        'is-inline': !!rest.inline && !mobileUI,
+                        'is-error': model && !model.valid
+                    },
+                    _a["Form-control--withSize Form-control--size".concat(helper.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;
+        var mode = this.props.mode || formMode;
+        if (wrap === false || inputOnly) {
+            return this.renderControl();
+        }
+        var renderLayout = FormItemWrap.layoutRenderers[mode] ||
+            FormItemWrap.layoutRenderers['normal'];
+        return (React__default["default"].createElement(React__default["default"].Fragment, null,
+            renderLayout(this.props, this.renderControl.bind(this)),
+            model
+                ? render('modal', tslib.__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;
+            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;
+            // 强制不渲染 label 的话
+            if (renderLabel === false) {
+                label = label === false ? false : '';
+            }
+            description = description || desc;
+            var horizontal = props.horizontal || props.formHorizontal || {};
+            var left = helper.getWidthRate(horizontal.left);
+            var right = helper.getWidthRate(horizontal.right);
+            var labelAlign = props.labelAlign || props.formLabelAlign;
+            return (React__default["default"].createElement("div", { "data-role": "form-item", className: cx("Form-item Form-item--horizontal", className, (_a = {
+                        'Form-item--horizontal-justify': horizontal.justify
+                    },
+                    _a["is-error"] = model && !model.valid,
+                    _a["is-required"] = required,
+                    _a), model === null || model === void 0 ? void 0 : model.errClassNames) },
+                label !== false ? (React__default["default"].createElement("label", { className: cx("Form-label", (_b = {},
+                        _b["Form-itemColumn--".concat(typeof horizontal.leftFixed === 'string'
+                            ? horizontal.leftFixed
+                            : 'normal')] = horizontal.leftFixed,
+                        _b["Form-itemColumn--".concat(left)] = !horizontal.leftFixed,
+                        _b['Form-label--left'] = labelAlign === 'left',
+                        _b), labelClassName) },
+                    React__default["default"].createElement("span", null,
+                        label
+                            ? render('label', typeof label === 'string' ? tpl.filter(label, data) : label)
+                            : null,
+                        required && (label || labelRemark) ? (React__default["default"].createElement("span", { className: cx("Form-star") }, "*")) : null,
+                        labelRemark
+                            ? render('label-remark', {
+                                type: 'remark',
+                                icon: labelRemark.icon || 'warning-mark',
+                                tooltip: labelRemark,
+                                useMobileUI: useMobileUI,
+                                className: cx("Form-labelRemark"),
+                                container: props.popOverContainer
+                                    ? props.popOverContainer
+                                    : env && env.getModalContainer
+                                        ? env.getModalContainer
+                                        : undefined
+                            })
+                            : null))) : null,
+                React__default["default"].createElement("div", { className: cx("Form-value", (_c = {},
+                        // [`Form-itemColumn--offset${getWidthRate(horizontal.offset)}`]: !label && label !== false,
+                        _c["Form-itemColumn--".concat(right)] = !horizontal.leftFixed && !!right && right !== 12 - left,
+                        _c)) },
+                    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 && env.getModalContainer
+                                    ? env.getModalContainer
+                                    : undefined
+                        })
+                        : null,
+                    hint && model && model.isFocused
+                        ? render('hint', hint, {
+                            className: cx("Form-hint")
+                        })
+                        : null,
+                    model &&
+                        !model.valid &&
+                        showErrorMsg !== false &&
+                        Array.isArray(model.errors) ? (React__default["default"].createElement("ul", { className: cx("Form-feedback") }, model.errors.map(function (msg, key) { return (React__default["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 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;
+            description = description || desc;
+            return (React__default["default"].createElement("div", { "data-role": "form-item", className: cx("Form-item Form-item--normal", className, (_a = {
+                        'is-error': model && !model.valid
+                    },
+                    _a["is-required"] = required,
+                    _a), model === null || model === void 0 ? void 0 : model.errClassNames) },
+                label && renderLabel !== false ? (React__default["default"].createElement("label", { className: cx("Form-label", labelClassName) },
+                    React__default["default"].createElement("span", null,
+                        label
+                            ? render('label', typeof label === 'string' ? tpl.filter(label, data) : label)
+                            : null,
+                        required && (label || labelRemark) ? (React__default["default"].createElement("span", { className: cx("Form-star") }, "*")) : null,
+                        labelRemark
+                            ? render('label-remark', {
+                                type: 'remark',
+                                icon: labelRemark.icon || 'warning-mark',
+                                tooltip: labelRemark,
+                                className: cx("Form-lableRemark"),
+                                useMobileUI: useMobileUI,
+                                container: props.popOverContainer
+                                    ? props.popOverContainer
+                                    : env && env.getModalContainer
+                                        ? env.getModalContainer
+                                        : undefined
+                            })
+                            : null))) : 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 && env.getModalContainer
+                            ? env.getModalContainer
+                            : undefined
+                    })
+                    : null,
+                hint && model && model.isFocused
+                    ? render('hint', hint, {
+                        className: cx("Form-hint")
+                    })
+                    : null,
+                model &&
+                    !model.valid &&
+                    showErrorMsg !== false &&
+                    Array.isArray(model.errors) ? (React__default["default"].createElement("ul", { className: cx("Form-feedback") }, model.errors.map(function (msg, key) { return (React__default["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;
+            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;
+            description = description || desc;
+            return (React__default["default"].createElement("div", { "data-role": "form-item", className: cx("Form-item Form-item--inline", className, (_a = {
+                        'is-error': model && !model.valid
+                    },
+                    _a["is-required"] = required,
+                    _a), model === null || model === void 0 ? void 0 : model.errClassNames) },
+                label && renderLabel !== false ? (React__default["default"].createElement("label", { className: cx("Form-label", labelClassName) },
+                    React__default["default"].createElement("span", null,
+                        label
+                            ? render('label', typeof label === 'string' ? tpl.filter(label, data) : label)
+                            : label,
+                        required && (label || labelRemark) ? (React__default["default"].createElement("span", { className: cx("Form-star") }, "*")) : null,
+                        labelRemark
+                            ? render('label-remark', {
+                                type: 'remark',
+                                icon: labelRemark.icon || 'warning-mark',
+                                tooltip: labelRemark,
+                                className: cx("Form-lableRemark"),
+                                useMobileUI: useMobileUI,
+                                container: props.popOverContainer
+                                    ? props.popOverContainer
+                                    : env && env.getModalContainer
+                                        ? env.getModalContainer
+                                        : undefined
+                            })
+                            : null))) : null,
+                React__default["default"].createElement("div", { className: cx("Form-value") },
+                    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 && env.getModalContainer
+                                    ? env.getModalContainer
+                                    : undefined
+                        })
+                        : null,
+                    hint && model && model.isFocused
+                        ? render('hint', hint, {
+                            className: cx("Form-hint")
+                        })
+                        : null,
+                    model &&
+                        !model.valid &&
+                        showErrorMsg !== false &&
+                        Array.isArray(model.errors) ? (React__default["default"].createElement("ul", { className: cx("Form-feedback") }, model.errors.map(function (msg, key) { return (React__default["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 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;
+            description = description || desc;
+            return (React__default["default"].createElement("div", { "data-role": "form-item", className: cx("Form-item Form-item--row", className, (_a = {
+                        'is-error': model && !model.valid
+                    },
+                    _a["is-required"] = required,
+                    _a), model === null || model === void 0 ? void 0 : model.errClassNames) },
+                React__default["default"].createElement("div", { className: cx('Form-rowInner') },
+                    label && renderLabel !== false ? (React__default["default"].createElement("label", { className: cx("Form-label", labelClassName) },
+                        React__default["default"].createElement("span", null,
+                            render('label', typeof label === 'string' ? tpl.filter(label, data) : label),
+                            required && (label || labelRemark) ? (React__default["default"].createElement("span", { className: cx("Form-star") }, "*")) : null,
+                            labelRemark
+                                ? render('label-remark', {
+                                    type: 'remark',
+                                    icon: labelRemark.icon || 'warning-mark',
+                                    tooltip: labelRemark,
+                                    className: cx("Form-lableRemark"),
+                                    useMobileUI: useMobileUI,
+                                    container: props.popOverContainer
+                                        ? props.popOverContainer
+                                        : env && env.getModalContainer
+                                            ? env.getModalContainer
+                                            : undefined
+                                })
+                                : null))) : 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 && env.getModalContainer
+                                ? env.getModalContainer
+                                : undefined
+                        })
+                        : null),
+                hint && model && model.isFocused
+                    ? render('hint', hint, {
+                        className: cx("Form-hint")
+                    })
+                    : null,
+                model &&
+                    !model.valid &&
+                    showErrorMsg !== false &&
+                    Array.isArray(model.errors) ? (React__default["default"].createElement("ul", { className: cx('Form-feedback') }, model.errors.map(function (msg, key) { return (React__default["default"].createElement("li", { key: key }, msg)); }))) : null,
+                description && renderDescription !== false
+                    ? render('description', description, {
+                        className: cx("Form-description", descriptionClassName)
+                    })
+                    : null));
+        }
+    };
+    tslib.__decorate([
+        helper.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [Object]),
+        tslib.__metadata("design:returntype", void 0)
+    ], FormItemWrap.prototype, "handleFocus", null);
+    tslib.__decorate([
+        helper.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [Object]),
+        tslib.__metadata("design:returntype", void 0)
+    ], FormItemWrap.prototype, "handleBlur", null);
+    tslib.__decorate([
+        helper.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [Object, Object]),
+        tslib.__metadata("design:returntype", Promise)
+    ], FormItemWrap.prototype, "handleOpenDialog", null);
+    tslib.__decorate([
+        helper.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [Array]),
+        tslib.__metadata("design:returntype", void 0)
+    ], FormItemWrap.prototype, "handleDialogConfirm", null);
+    tslib.__decorate([
+        helper.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [Object]),
+        tslib.__metadata("design:returntype", void 0)
+    ], FormItemWrap.prototype, "handleDialogClose", null);
+    return FormItemWrap;
+}(React__default["default"].Component));
+// 白名单形式，只有这些属性发生变化，才会往下更新。
+// 除非配置  strictMode
+var 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',
+    'displayMode'
+];
+function asFormItem(config) {
+    return function (Control) {
+        var _a;
+        var isSFC = !(Control.prototype instanceof React__default["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 将不起作用，因为类的成员函数中已经定义了 validate 方法，将优先使用类里面的实现。');
+        }
+        if (config.storeType) {
+            Control = WithStore.HocStoreFactory({
+                storeType: config.storeType,
+                extendsData: config.extendsData
+            })(mobxReact.observer(Control));
+            delete config.storeType;
+        }
+        return wrapControl.wrapControl(hoistNonReactStatic__default["default"]((_a = /** @class */ (function (_super) {
+                tslib.__extends(class_1, _super);
+                function class_1(props) {
+                    var _this = _super.call(this, props) || this;
+                    _this.refFn = _this.refFn.bind(_this);
+                    var validations = props.validations, model = props.formItem;
+                    // 组件注册的时候可能默认指定验证器类型
+                    if (model && !validations && config.validations) {
+                        model.config({
+                            rules: config.validations
+                        });
+                    }
+                    return _this;
+                }
+                class_1.prototype.shouldComponentUpdate = function (nextProps) {
+                    var _a;
+                    if (((_a = config.shouldComponentUpdate) === null || _a === void 0 ? void 0 : _a.call(config, this.props, nextProps)) ||
+                        nextProps.strictMode === false ||
+                        config.strictMode === false) {
+                        return true;
+                    }
+                    // 把可能会影响视图的白名单弄出来，减少重新渲染次数。
+                    if (helper.anyChanged(detectProps, this.props, nextProps)) {
+                        return true;
+                    }
+                    return false;
+                };
+                class_1.prototype.getWrappedInstance = function () {
+                    return this.ref;
+                };
+                class_1.prototype.refFn = function (ref) {
+                    this.ref = ref;
+                };
+                class_1.prototype.renderControl = function () {
+                    var _a;
+                    var _b = this.props, inputClassName = _b.inputClassName, model = _b.formItem, cx = _b.classnames; _b.children; var type = _b.type, size = _b.size, defaultSize = _b.defaultSize, useMobileUI = _b.useMobileUI, rest = tslib.__rest(_b, ["inputClassName", "formItem", "classnames", "children", "type", "size", "defaultSize", "useMobileUI"]);
+                    var controlSize = size || defaultSize;
+                    var mobileUI = useMobileUI && helper.isMobile();
+                    return (React__default["default"].createElement(Control, tslib.__assign({}, rest, { useMobileUI: useMobileUI, onOpenDialog: this.handleOpenDialog, size: config.sizeMutable !== false ? undefined : size, onFocus: this.handleFocus, onBlur: this.handleBlur, type: type, classnames: cx, ref: isSFC ? undefined : this.refFn, forwardedRef: isSFC ? this.refFn : undefined, formItem: model, className: cx("Form-control", (_a = {
+                                'is-inline': !!rest.inline && !mobileUI,
+                                'is-error': model && !model.valid
+                            },
+                            _a["Form-control--withSize Form-control--size".concat(helper.ucFirst(controlSize))] = config.sizeMutable !== false &&
+                                typeof controlSize === 'string' &&
+                                !!controlSize &&
+                                controlSize !== 'full',
+                            _a), model === null || model === void 0 ? void 0 : model.errClassNames, inputClassName) })));
+                };
+                return class_1;
+            }(FormItemWrap)),
+            _a.defaultProps = tslib.__assign({ className: '', renderLabel: config.renderLabel, renderDescription: config.renderDescription, sizeMutable: config.sizeMutable, wrap: config.wrap, showErrorMsg: config.showErrorMsg }, Control.defaultProps),
+            _a.propsList = tslib.__spreadArray([
+                'value',
+                'defaultValue',
+                'onChange',
+                'setPrinstineValue',
+                'readOnly',
+                'strictMode'
+            ], (Control.propsList || []), true),
+            _a.displayName = "FormItem".concat(config.type ? "(".concat(config.type, ")") : ''),
+            _a.ComposedComponent = Control,
+            _a), Control));
+    };
+}
+function registerFormItem(config) {
+    var Control = asFormItem(config)(config.component);
+    return factory.registerRenderer(tslib.__assign(tslib.__assign({}, config), { weight: typeof config.weight !== 'undefined' ? config.weight : -100, component: Control, isFormItem: true }));
+}
+function FormItem(config) {
+    return function (component) {
+        var renderer = registerFormItem(tslib.__assign(tslib.__assign({}, config), { component: component }));
+        return renderer.component;
+    };
+}
+
+exports.FormItem = FormItem;
+exports.FormItemWrap = FormItemWrap;
+exports.asFormItem = asFormItem;
+exports["default"] = FormItem;
+exports.detectProps = detectProps;
+exports.registerFormItem = registerFormItem;