amis-core 6.9.0 → 6.10.0-beta.0

package/esm/renderers/Options.js

@@ -1,5 +1,5 @@
 /**
- * amis-core v6.9.0
+ * amis-core v6.10.0-beta.0
  * Copyright 2018-2024 fex
  */
 
@@ -8,7 +8,7 @@ import { isEffectiveApi, isApiOutdated } from '../utils/api.js';
 import { isAlive } from 'mobx-state-tree';
 import { anyChanged, getTreeDepth, flattenTree, spliceTree, getTree, findTreeIndex, normalizeNodePath, autobind } from '../utils/helper.js';
 import { reaction } from 'mobx';
-import { registerFormItem, detectProps as detectProps$1 } from './Item.js';
+import { detectProps as detectProps$1, registerFormItem } from './Item.js';
 import React from 'react';
 import 'amis-formula';
 import 'moment';
@@ -69,962 +69,969 @@ var detectProps = detectProps$1.concat([
     'borderMode',
     'hideSelected'
 ]);
-function registerOptionsControl(config) {
-    var Control = config.component;
-    var FormOptionsItem = /** @class */ (function (_super) {
-        __extends(FormOptionsItem, _super);
-        function FormOptionsItem(props) {
-            var _this = this;
-            var _a;
-            _this = _super.call(this, props) || this;
-            _this.toDispose = [];
-            _this.mounted = false;
-            var initFetch = props.initFetch, formItem = props.formItem, source = props.source, data = props.data, setPrinstineValue = props.setPrinstineValue, defaultValue = props.defaultValue, multiple = props.multiple, joinValues = props.joinValues, extractValue = props.extractValue, addHook = props.addHook, formInited = props.formInited, valueField = props.valueField, options = props.options, value = props.value, defaultCheckAll = props.defaultCheckAll;
-            if (!formItem) {
-                return _this;
-            }
-            formItem.setOptions(normalizeOptions(options, undefined, valueField), _this.changeOptionValue, data);
-            _this.toDispose.push(reaction(function () { return JSON.stringify([formItem.loading, formItem.filteredOptions]); }, function () { return _this.mounted && _this.forceUpdate(); }));
-            // 默认全选。这里会和默认值\回填值逻辑冲突，所以如果有配置source则不执行默认全选
-            if (multiple &&
-                defaultCheckAll &&
-                ((_a = formItem.filteredOptions) === null || _a === void 0 ? void 0 : _a.length) &&
-                !source) {
-                _this.defaultCheckAll();
-            }
-            var loadOptions = initFetch !== false;
-            var setInitValue = null;
-            if (joinValues === false && defaultValue) {
-                setInitValue = function () {
-                    var selectedOptions = extractValue
-                        ? formItem
-                            .getSelectedOptions(value)
-                            .map(function (selectedOption) {
-                            return selectedOption[valueField || 'value'];
-                        })
-                        : formItem.getSelectedOptions(value);
-                    setPrinstineValue(multiple ? selectedOptions.concat() : selectedOptions[0]);
-                };
-            }
-            if (loadOptions && config.autoLoadOptionsFromSource !== false) {
-                _this.toDispose.push(formInited || !addHook
-                    ? formItem.addInitHook(function () { return __awaiter(_this, void 0, void 0, function () {
-                        return __generator(this, function (_a) {
-                            switch (_a.label) {
-                                case 0: return [4 /*yield*/, this.reload()];
-                                case 1:
-                                    _a.sent();
-                                    setInitValue === null || setInitValue === void 0 ? void 0 : setInitValue();
-                                    return [2 /*return*/];
-                            }
-                        });
-                    }); })
-                    : addHook(function (data) { return __awaiter(_this, void 0, void 0, function () {
-                        return __generator(this, function (_a) {
-                            switch (_a.label) {
-                                case 0: return [4 /*yield*/, this.initOptions(data)];
-                                case 1:
-                                    _a.sent();
-                                    setInitValue === null || setInitValue === void 0 ? void 0 : setInitValue();
-                                    return [2 /*return*/];
-                            }
-                        });
-                    }); }, 'init'));
-            }
-            else {
-                setInitValue === null || setInitValue === void 0 ? void 0 : setInitValue();
-            }
+var OptionsControlBase = /** @class */ (function (_super) {
+    __extends(OptionsControlBase, _super);
+    function OptionsControlBase(props, config) {
+        var _this = this;
+        var _a;
+        _this = _super.call(this, props) || this;
+        _this.config = config;
+        _this.toDispose = [];
+        _this.mounted = false;
+        var initFetch = props.initFetch, formItem = props.formItem, source = props.source, data = props.data, setPrinstineValue = props.setPrinstineValue, defaultValue = props.defaultValue, multiple = props.multiple, joinValues = props.joinValues, extractValue = props.extractValue, addHook = props.addHook, formInited = props.formInited, valueField = props.valueField, options = props.options, value = props.value, defaultCheckAll = props.defaultCheckAll;
+        if (!formItem) {
             return _this;
         }
-        FormOptionsItem.prototype.componentDidMount = function () {
-            this.mounted = true;
+        formItem.setOptions(normalizeOptions(options, undefined, valueField), _this.changeOptionValue, data);
+        _this.toDispose.push(reaction(function () { return JSON.stringify([formItem.loading, formItem.filteredOptions]); }, function () { return _this.mounted && _this.forceUpdate(); }));
+        // 默认全选。这里会和默认值\回填值逻辑冲突，所以如果有配置source则不执行默认全选
+        if (multiple &&
+            defaultCheckAll &&
+            ((_a = formItem.filteredOptions) === null || _a === void 0 ? void 0 : _a.length) &&
+            !source) {
+            _this.defaultCheckAll();
+        }
+        var loadOptions = initFetch !== false;
+        var setInitValue = null;
+        if (joinValues === false && defaultValue) {
+            setInitValue = function () {
+                var selectedOptions = extractValue
+                    ? formItem
+                        .getSelectedOptions(value)
+                        .map(function (selectedOption) {
+                        return selectedOption[valueField || 'value'];
+                    })
+                    : formItem.getSelectedOptions(value);
+                setPrinstineValue(multiple ? selectedOptions.concat() : selectedOptions[0]);
+            };
+        }
+        if (loadOptions && config.autoLoadOptionsFromSource !== false) {
+            _this.toDispose.push(formInited || !addHook
+                ? formItem.addInitHook(function () { return __awaiter(_this, void 0, void 0, function () {
+                    return __generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0: return [4 /*yield*/, this.reload()];
+                            case 1:
+                                _a.sent();
+                                setInitValue === null || setInitValue === void 0 ? void 0 : setInitValue();
+                                return [2 /*return*/];
+                        }
+                    });
+                }); })
+                : addHook(function (data) { return __awaiter(_this, void 0, void 0, function () {
+                    return __generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0: return [4 /*yield*/, this.initOptions(data)];
+                            case 1:
+                                _a.sent();
+                                setInitValue === null || setInitValue === void 0 ? void 0 : setInitValue();
+                                return [2 /*return*/];
+                        }
+                    });
+                }); }, 'init'));
+        }
+        else {
+            setInitValue === null || setInitValue === void 0 ? void 0 : setInitValue();
+        }
+        return _this;
+    }
+    OptionsControlBase.prototype.componentDidMount = function () {
+        this.mounted = true;
+        this.normalizeValue();
+    };
+    OptionsControlBase.prototype.shouldComponentUpdate = function (nextProps) {
+        var _a;
+        if (this.config.strictMode === false || nextProps.strictMode === false) {
+            return true;
+        }
+        else if (nextProps.source || nextProps.autoComplete) {
+            return true;
+        }
+        else if ((_a = nextProps.formItem) === null || _a === void 0 ? void 0 : _a.expressionsInOptions) {
+            return true;
+        }
+        else if (anyChanged(detectProps, this.props, nextProps)) {
+            return true;
+        }
+        return false;
+    };
+    OptionsControlBase.prototype.componentDidUpdate = function (prevProps) {
+        var _this = this;
+        var props = this.props;
+        var formItem = props.formItem;
+        if (!props.source && prevProps.options !== props.options && formItem) {
+            formItem.setOptions(normalizeOptions(props.options || [], undefined, props.valueField), this.changeOptionValue, props.data);
             this.normalizeValue();
-        };
-        FormOptionsItem.prototype.shouldComponentUpdate = function (nextProps) {
-            var _a;
-            if (config.strictMode === false || nextProps.strictMode === false) {
-                return true;
-            }
-            else if (nextProps.source || nextProps.autoComplete) {
-                return true;
-            }
-            else if ((_a = nextProps.formItem) === null || _a === void 0 ? void 0 : _a.expressionsInOptions) {
-                return true;
-            }
-            else if (anyChanged(detectProps, this.props, nextProps)) {
-                return true;
+        }
+        else if (this.config.autoLoadOptionsFromSource !== false &&
+            (props.formInited || typeof props.formInited === 'undefined') &&
+            props.source &&
+            formItem &&
+            (prevProps.source !== props.source || prevProps.data !== props.data)) {
+            if (isPureVariable(props.source)) {
+                var prevOptions = resolveVariableAndFilter(prevProps.source, prevProps.data, '| raw');
+                var options = resolveVariableAndFilter(props.source, props.data, '| raw');
+                if (prevOptions !== options) {
+                    formItem.loadOptionsFromDataScope(props.source, props.data, this.changeOptionValue);
+                    this.normalizeValue();
+                }
             }
-            return false;
-        };
-        FormOptionsItem.prototype.componentDidUpdate = function (prevProps) {
-            var _this = this;
-            var props = this.props;
-            var formItem = props.formItem;
-            if (!props.source && prevProps.options !== props.options && formItem) {
-                formItem.setOptions(normalizeOptions(props.options || [], undefined, props.valueField), this.changeOptionValue, props.data);
-                this.normalizeValue();
+            else if (isEffectiveApi(props.source, props.data) &&
+                isApiOutdated(prevProps.source, props.source, prevProps.data, props.data)) {
+                formItem
+                    .loadOptions(props.source, props.data, undefined, true, this.changeOptionValue)
+                    .then(function () { return _this.normalizeValue(); });
             }
-            else if (config.autoLoadOptionsFromSource !== false &&
-                (props.formInited || typeof props.formInited === 'undefined') &&
-                props.source &&
-                formItem &&
-                (prevProps.source !== props.source || prevProps.data !== props.data)) {
-                if (isPureVariable(props.source)) {
-                    var prevOptions = resolveVariableAndFilter(prevProps.source, prevProps.data, '| raw');
-                    var options = resolveVariableAndFilter(props.source, props.data, '| raw');
-                    if (prevOptions !== options) {
-                        formItem.loadOptionsFromDataScope(props.source, props.data, this.changeOptionValue);
-                        this.normalizeValue();
-                    }
+        }
+        if (prevProps.value !== props.value || (formItem === null || formItem === void 0 ? void 0 : formItem.expressionsInOptions)) {
+            formItem === null || formItem === void 0 ? void 0 : formItem.syncOptions(undefined, props.data);
+        }
+    };
+    OptionsControlBase.prototype.componentWillUnmount = function () {
+        var _a, _b;
+        (_b = (_a = this.props).removeHook) === null || _b === void 0 ? void 0 : _b.call(_a, this.reload, 'init');
+        this.mounted = false;
+        this.toDispose.forEach(function (fn) { return fn(); });
+        this.toDispose = [];
+    };
+    // 不推荐使用，缺少组件值
+    OptionsControlBase.prototype.oldDispatchOptionEvent = function (eventName, eventData) {
+        if (eventData === void 0) { eventData = ''; }
+        return __awaiter(this, void 0, void 0, function () {
+            var _a, dispatchEvent, options, rendererEvent;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _a = this.props, dispatchEvent = _a.dispatchEvent, options = _a.options;
+                        return [4 /*yield*/, dispatchEvent(eventName, resolveEventData(this.props, { value: eventData, options: options, items: options } // 为了保持名字统一
+                            ))];
+                    case 1:
+                        rendererEvent = _b.sent();
+                        // 返回阻塞标识
+                        return [2 /*return*/, !!(rendererEvent === null || rendererEvent === void 0 ? void 0 : rendererEvent.prevented)];
                 }
-                else if (isEffectiveApi(props.source, props.data) &&
-                    isApiOutdated(prevProps.source, props.source, prevProps.data, props.data)) {
-                    formItem
-                        .loadOptions(props.source, props.data, undefined, true, this.changeOptionValue)
-                        .then(function () { return _this.normalizeValue(); });
+            });
+        });
+    };
+    OptionsControlBase.prototype.dispatchOptionEvent = function (eventName, eventData) {
+        if (eventData === void 0) { eventData = ''; }
+        return __awaiter(this, void 0, void 0, function () {
+            var _a, dispatchEvent, options, value, rendererEvent;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _a = this.props, dispatchEvent = _a.dispatchEvent, options = _a.options, value = _a.value;
+                        return [4 /*yield*/, dispatchEvent(eventName, resolveEventData(this.props, __assign({ value: value, options: options, items: options }, eventData)))];
+                    case 1:
+                        rendererEvent = _b.sent();
+                        // 返回阻塞标识
+                        return [2 /*return*/, !!(rendererEvent === null || rendererEvent === void 0 ? void 0 : rendererEvent.prevented)];
                 }
-            }
-            if (prevProps.value !== props.value || (formItem === null || formItem === void 0 ? void 0 : formItem.expressionsInOptions)) {
-                formItem === null || formItem === void 0 ? void 0 : formItem.syncOptions(undefined, props.data);
-            }
-        };
-        FormOptionsItem.prototype.componentWillUnmount = function () {
-            var _a, _b;
-            (_b = (_a = this.props).removeHook) === null || _b === void 0 ? void 0 : _b.call(_a, this.reload, 'init');
-            this.mounted = false;
-            this.toDispose.forEach(function (fn) { return fn(); });
-            this.toDispose = [];
-        };
-        // 不推荐使用，缺少组件值
-        FormOptionsItem.prototype.oldDispatchOptionEvent = function (eventName, eventData) {
-            if (eventData === void 0) { eventData = ''; }
-            return __awaiter(this, void 0, void 0, function () {
-                var _a, dispatchEvent, options, rendererEvent;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0:
-                            _a = this.props, dispatchEvent = _a.dispatchEvent, options = _a.options;
-                            return [4 /*yield*/, dispatchEvent(eventName, resolveEventData(this.props, { value: eventData, options: options, items: options } // 为了保持名字统一
-                                ))];
-                        case 1:
-                            rendererEvent = _b.sent();
-                            // 返回阻塞标识
-                            return [2 /*return*/, !!(rendererEvent === null || rendererEvent === void 0 ? void 0 : rendererEvent.prevented)];
-                    }
-                });
             });
-        };
-        FormOptionsItem.prototype.dispatchOptionEvent = function (eventName, eventData) {
-            if (eventData === void 0) { eventData = ''; }
-            return __awaiter(this, void 0, void 0, function () {
-                var _a, dispatchEvent, options, value, rendererEvent;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0:
-                            _a = this.props, dispatchEvent = _a.dispatchEvent, options = _a.options, value = _a.value;
-                            return [4 /*yield*/, dispatchEvent(eventName, resolveEventData(this.props, __assign({ value: value, options: options, items: options }, eventData)))];
-                        case 1:
-                            rendererEvent = _b.sent();
-                            // 返回阻塞标识
-                            return [2 /*return*/, !!(rendererEvent === null || rendererEvent === void 0 ? void 0 : rendererEvent.prevented)];
-                    }
-                });
+        });
+    };
+    OptionsControlBase.prototype.doAction = function (action, data, throwErrors) {
+        var _a = this.props, resetValue = _a.resetValue, onChange = _a.onChange;
+        var actionType = action === null || action === void 0 ? void 0 : action.actionType;
+        if (actionType === 'clear') {
+            onChange === null || onChange === void 0 ? void 0 : onChange('');
+        }
+        else if (actionType === 'reset') {
+            onChange === null || onChange === void 0 ? void 0 : onChange(resetValue !== null && resetValue !== void 0 ? resetValue : '');
+        }
+    };
+    // 当前值，跟设置预期的值格式不一致时自动转换。
+    OptionsControlBase.prototype.normalizeValue = function () {
+        var _a = this.props, joinValues = _a.joinValues, extractValue = _a.extractValue, value = _a.value, multiple = _a.multiple, formItem = _a.formItem, valueField = _a.valueField; _a.enableNodePath; _a.pathSeparator; var onChange = _a.onChange;
+        if (!formItem || joinValues !== false || !formItem.options.length) {
+            return;
+        }
+        if (extractValue === false &&
+            (typeof value === 'string' || typeof value === 'number')) {
+            var selectedOptions = formItem.getSelectedOptions(value);
+            onChange === null || onChange === void 0 ? void 0 : onChange(multiple ? selectedOptions.concat() : selectedOptions[0]);
+        }
+        else if (extractValue === true &&
+            value &&
+            !((Array.isArray(value) &&
+                value.every(function (val) { return typeof val === 'string' || typeof val === 'number'; })) ||
+                typeof value === 'string' ||
+                typeof value === 'number')) {
+            var selectedOptions = formItem
+                .getSelectedOptions(value)
+                .map(function (selectedOption) { return selectedOption[valueField || 'value']; });
+            onChange === null || onChange === void 0 ? void 0 : onChange(multiple ? selectedOptions.concat() : selectedOptions[0]);
+        }
+    };
+    OptionsControlBase.prototype.getWrappedInstance = function () {
+        return this.input;
+    };
+    OptionsControlBase.prototype.inputRef = function (ref) {
+        this.input = ref;
+    };
+    OptionsControlBase.prototype.handleToggle = function (option, submitOnChange, changeImmediately) {
+        return __awaiter(this, void 0, void 0, function () {
+            var _a, onChange, formItem, value, newValue, isPrevented;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _a = this.props, onChange = _a.onChange, formItem = _a.formItem, value = _a.value;
+                        if (!formItem) {
+                            return [2 /*return*/];
+                        }
+                        newValue = this.toggleValue(option, value);
+                        return [4 /*yield*/, this.dispatchOptionEvent('change', {
+                                value: newValue
+                            })];
+                    case 1:
+                        isPrevented = _b.sent();
+                        isPrevented ||
+                            (onChange && onChange(newValue, submitOnChange, changeImmediately));
+                        return [2 /*return*/];
+                }
             });
-        };
-        FormOptionsItem.prototype.doAction = function (action, data, throwErrors) {
-            var _a = this.props, resetValue = _a.resetValue, onChange = _a.onChange;
-            var actionType = action === null || action === void 0 ? void 0 : action.actionType;
-            if (actionType === 'clear') {
-                onChange === null || onChange === void 0 ? void 0 : onChange('');
-            }
-            else if (actionType === 'reset') {
-                onChange === null || onChange === void 0 ? void 0 : onChange(resetValue !== null && resetValue !== void 0 ? resetValue : '');
-            }
-        };
-        // 当前值，跟设置预期的值格式不一致时自动转换。
-        FormOptionsItem.prototype.normalizeValue = function () {
-            var _a = this.props, joinValues = _a.joinValues, extractValue = _a.extractValue, value = _a.value, multiple = _a.multiple, formItem = _a.formItem, valueField = _a.valueField; _a.enableNodePath; _a.pathSeparator; var onChange = _a.onChange;
-            if (!formItem || joinValues !== false || !formItem.options.length) {
-                return;
+        });
+    };
+    /**
+     * 初始化时处理默认全选逻辑
+     */
+    OptionsControlBase.prototype.defaultCheckAll = function () {
+        var _a = this.props, value = _a.value, formItem = _a.formItem, setPrinstineValue = _a.setPrinstineValue;
+        // 如果有默认值\回填值直接返回
+        if (!formItem || formItem.getSelectedOptions(value).length) {
+            return;
+        }
+        var valueArray = formItem.filteredOptions.concat();
+        var newValue = this.formatValueArray(valueArray);
+        setPrinstineValue === null || setPrinstineValue === void 0 ? void 0 : setPrinstineValue(newValue);
+    };
+    /**
+     * 选中的值经过joinValues和delimiter等规则处理输出规定格式的值
+     * @param valueArray 选中值的数组
+     * @returns 通过joinValues和delimiter等规则输出规定格式的值
+     */
+    OptionsControlBase.prototype.formatValueArray = function (valueArray) {
+        var _a = this.props, joinValues = _a.joinValues, extractValue = _a.extractValue, valueField = _a.valueField, delimiter = _a.delimiter, resetValue = _a.resetValue, multiple = _a.multiple;
+        var newValue = '';
+        if (multiple) {
+            /** 兼容tree数据结构 */
+            newValue =
+                getTreeDepth(valueArray) > 1 ? flattenTree(valueArray) : valueArray;
+            if (joinValues) {
+                newValue = newValue
+                    .map(function (item) { return item[valueField || 'value']; })
+                    .filter(function (item) { return item != null; }) /** tree的父节点可能没有value值 */
+                    .join(delimiter);
             }
-            if (extractValue === false &&
-                (typeof value === 'string' || typeof value === 'number')) {
-                var selectedOptions = formItem.getSelectedOptions(value);
-                onChange === null || onChange === void 0 ? void 0 : onChange(multiple ? selectedOptions.concat() : selectedOptions[0]);
+            else if (extractValue) {
+                newValue = newValue
+                    .map(function (item) { return item[valueField || 'value']; })
+                    .filter(function (item) { return item != null; });
             }
-            else if (extractValue === true &&
-                value &&
-                !((Array.isArray(value) &&
-                    value.every(function (val) { return typeof val === 'string' || typeof val === 'number'; })) ||
-                    typeof value === 'string' ||
-                    typeof value === 'number')) {
-                var selectedOptions = formItem
-                    .getSelectedOptions(value)
-                    .map(function (selectedOption) { return selectedOption[valueField || 'value']; });
-                onChange === null || onChange === void 0 ? void 0 : onChange(multiple ? selectedOptions.concat() : selectedOptions[0]);
+        }
+        else {
+            newValue = valueArray[0] || resetValue;
+            if (joinValues && newValue) {
+                newValue = newValue[valueField || 'value'];
             }
-        };
-        FormOptionsItem.prototype.getWrappedInstance = function () {
-            return this.input;
-        };
-        FormOptionsItem.prototype.inputRef = function (ref) {
-            this.input = ref;
-        };
-        FormOptionsItem.prototype.handleToggle = function (option, submitOnChange, changeImmediately) {
-            return __awaiter(this, void 0, void 0, function () {
-                var _a, onChange, formItem, value, newValue, isPrevented;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0:
-                            _a = this.props, onChange = _a.onChange, formItem = _a.formItem, value = _a.value;
-                            if (!formItem) {
-                                return [2 /*return*/];
-                            }
-                            newValue = this.toggleValue(option, value);
-                            return [4 /*yield*/, this.dispatchOptionEvent('change', {
-                                    value: newValue
-                                })];
-                        case 1:
-                            isPrevented = _b.sent();
-                            isPrevented ||
-                                (onChange && onChange(newValue, submitOnChange, changeImmediately));
+        }
+        return newValue;
+    };
+    OptionsControlBase.prototype.handleToggleAll = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var _a, value, onChange, formItem, valueField, selectedOptions, filteredOptions, valueArray, newValue, isPrevented;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _a = this.props, value = _a.value, onChange = _a.onChange, formItem = _a.formItem, valueField = _a.valueField;
+                        if (!formItem) {
                             return [2 /*return*/];
-                    }
-                });
-            });
-        };
-        /**
-         * 初始化时处理默认全选逻辑
-         */
-        FormOptionsItem.prototype.defaultCheckAll = function () {
-            var _a = this.props, value = _a.value, formItem = _a.formItem, setPrinstineValue = _a.setPrinstineValue;
-            // 如果有默认值\回填值直接返回
-            if (!formItem || formItem.getSelectedOptions(value).length) {
-                return;
-            }
-            var valueArray = formItem.filteredOptions.concat();
-            var newValue = this.formatValueArray(valueArray);
-            setPrinstineValue === null || setPrinstineValue === void 0 ? void 0 : setPrinstineValue(newValue);
-        };
-        /**
-         * 选中的值经过joinValues和delimiter等规则处理输出规定格式的值
-         * @param valueArray 选中值的数组
-         * @returns 通过joinValues和delimiter等规则输出规定格式的值
-         */
-        FormOptionsItem.prototype.formatValueArray = function (valueArray) {
-            var _a = this.props, joinValues = _a.joinValues, extractValue = _a.extractValue, valueField = _a.valueField, delimiter = _a.delimiter, resetValue = _a.resetValue, multiple = _a.multiple;
-            var newValue = '';
-            if (multiple) {
-                /** 兼容tree数据结构 */
-                newValue =
-                    getTreeDepth(valueArray) > 1 ? flattenTree(valueArray) : valueArray;
-                if (joinValues) {
-                    newValue = newValue
-                        .map(function (item) { return item[valueField || 'value']; })
-                        .filter(function (item) { return item != null; }) /** tree的父节点可能没有value值 */
-                        .join(delimiter);
-                }
-                else if (extractValue) {
-                    newValue = newValue
-                        .map(function (item) { return item[valueField || 'value']; })
-                        .filter(function (item) { return item != null; });
+                        }
+                        selectedOptions = formItem.getSelectedOptions(value);
+                        filteredOptions = flattenTree(formItem.filteredOptions.concat()).filter(function (item) { return item != null && item[valueField || 'value'] != null; });
+                        valueArray = selectedOptions.length === filteredOptions.length
+                            ? []
+                            : formItem.filteredOptions.concat();
+                        newValue = this.formatValueArray(valueArray);
+                        return [4 /*yield*/, this.dispatchOptionEvent('change', {
+                                value: newValue
+                            })];
+                    case 1:
+                        isPrevented = _b.sent();
+                        isPrevented || (onChange && onChange(newValue));
+                        return [2 /*return*/];
                 }
+            });
+        });
+    };
+    OptionsControlBase.prototype.toggleValue = function (option, originValue) {
+        var _a = this.props, joinValues = _a.joinValues, extractValue = _a.extractValue, valueField = _a.valueField, delimiter = _a.delimiter, clearable = _a.clearable, resetValue = _a.resetValue, multiple = _a.multiple, formItem = _a.formItem;
+        var valueArray = originValue !== undefined
+            ? formItem.getSelectedOptions(originValue).concat()
+            : [];
+        var idx = findIndex(valueArray, optionValueCompare(option[valueField || 'value'], valueField || 'value'));
+        var newValue = '';
+        if (multiple) {
+            if (~idx) {
+                valueArray.splice(idx, 1);
             }
             else {
-                newValue = valueArray[0] || resetValue;
-                if (joinValues && newValue) {
-                    newValue = newValue[valueField || 'value'];
-                }
+                valueArray.push(option);
             }
-            return newValue;
-        };
-        FormOptionsItem.prototype.handleToggleAll = function () {
-            return __awaiter(this, void 0, void 0, function () {
-                var _a, value, onChange, formItem, valueField, selectedOptions, filteredOptions, valueArray, newValue, isPrevented;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0:
-                            _a = this.props, value = _a.value, onChange = _a.onChange, formItem = _a.formItem, valueField = _a.valueField;
-                            if (!formItem) {
-                                return [2 /*return*/];
-                            }
-                            selectedOptions = formItem.getSelectedOptions(value);
-                            filteredOptions = flattenTree(formItem.filteredOptions.concat()).filter(function (item) { return item != null && item[valueField || 'value'] != null; });
-                            valueArray = selectedOptions.length === filteredOptions.length
-                                ? []
-                                : formItem.filteredOptions.concat();
-                            newValue = this.formatValueArray(valueArray);
-                            return [4 /*yield*/, this.dispatchOptionEvent('change', {
-                                    value: newValue
-                                })];
-                        case 1:
-                            isPrevented = _b.sent();
-                            isPrevented || (onChange && onChange(newValue));
-                            return [2 /*return*/];
-                    }
-                });
-            });
-        };
-        FormOptionsItem.prototype.toggleValue = function (option, originValue) {
-            var _a = this.props, joinValues = _a.joinValues, extractValue = _a.extractValue, valueField = _a.valueField, delimiter = _a.delimiter, clearable = _a.clearable, resetValue = _a.resetValue, multiple = _a.multiple, formItem = _a.formItem;
-            var valueArray = originValue !== undefined
-                ? formItem.getSelectedOptions(originValue).concat()
-                : [];
-            var idx = findIndex(valueArray, optionValueCompare(option[valueField || 'value'], valueField || 'value'));
-            var newValue = '';
-            if (multiple) {
-                if (~idx) {
-                    valueArray.splice(idx, 1);
-                }
-                else {
-                    valueArray.push(option);
-                }
-                newValue = valueArray;
-                if (joinValues) {
-                    newValue = newValue
-                        .map(function (item) { return item[valueField || 'value']; })
-                        .join(delimiter);
-                }
-                else if (extractValue) {
-                    newValue = newValue.map(function (item) { return item[valueField || 'value']; });
-                }
+            newValue = valueArray;
+            if (joinValues) {
+                newValue = newValue
+                    .map(function (item) { return item[valueField || 'value']; })
+                    .join(delimiter);
             }
-            else {
-                if (~idx && clearable) {
-                    valueArray.splice(idx, 1);
-                }
-                else {
-                    valueArray = [option];
-                }
-                newValue = valueArray[0] || resetValue;
-                if ((joinValues || extractValue) && newValue) {
-                    newValue = newValue[valueField || 'value'];
-                }
+            else if (extractValue) {
+                newValue = newValue.map(function (item) { return item[valueField || 'value']; });
             }
-            return newValue;
-        };
-        // 当有 action 触发，如果指定了 reload 目标组件，有可能会来到这里面来
-        FormOptionsItem.prototype.reload = function () {
-            return this.reloadOptions();
-        };
-        FormOptionsItem.prototype.reloadOptions = function (setError, isInit, data) {
-            if (isInit === void 0) { isInit = false; }
-            if (data === void 0) { data = this.props.data; }
-            var _a = this.props, source = _a.source, formItem = _a.formItem, onChange = _a.onChange, setPrinstineValue = _a.setPrinstineValue; _a.valueField;
-            if (formItem && isPureVariable(source)) {
-                isAlive(formItem) &&
-                    formItem.loadOptionsFromDataScope(source, data, this.changeOptionValue);
-                return;
+        }
+        else {
+            if (~idx && clearable) {
+                valueArray.splice(idx, 1);
             }
-            else if (!formItem || !isEffectiveApi(source, data)) {
-                return;
+            else {
+                valueArray = [option];
             }
-            return isAlive(formItem)
-                ? formItem.loadOptions(source, data, undefined, false, isInit ? setPrinstineValue : onChange, setError)
-                : undefined;
-        };
-        FormOptionsItem.prototype.deferLoad = function (option) {
-            return __awaiter(this, void 0, void 0, function () {
-                var _a, deferApi, source, env, formItem, data, api, json;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0:
-                            _a = this.props, deferApi = _a.deferApi, source = _a.source, env = _a.env, formItem = _a.formItem, data = _a.data;
-                            api = option.deferApi || deferApi || source;
-                            if (!api) {
-                                env.notify('error', '请在选项中设置 `deferApi` 或者表单项中设置 `deferApi`，用来加载子选项。');
-                                return [2 /*return*/];
-                            }
-                            return [4 /*yield*/, (formItem === null || formItem === void 0 ? void 0 : formItem.deferLoadOptions(option, api, createObject(data, option)))];
-                        case 1:
-                            json = _b.sent();
-                            // 触发事件通知,加载完成
-                            // 废弃，不推荐使用
-                            this.oldDispatchOptionEvent('loadFinished', json);
-                            // 避免产生breakchange，增加新事件名，用来更正之前的设计问题
-                            this.dispatchOptionEvent('deferLoadFinished', { result: json });
+            newValue = valueArray[0] || resetValue;
+            if ((joinValues || extractValue) && newValue) {
+                newValue = newValue[valueField || 'value'];
+            }
+        }
+        return newValue;
+    };
+    // 当有 action 触发，如果指定了 reload 目标组件，有可能会来到这里面来
+    OptionsControlBase.prototype.reload = function () {
+        return this.reloadOptions();
+    };
+    OptionsControlBase.prototype.reloadOptions = function (setError, isInit, data) {
+        if (isInit === void 0) { isInit = false; }
+        if (data === void 0) { data = this.props.data; }
+        var _a = this.props, source = _a.source, formItem = _a.formItem, onChange = _a.onChange, setPrinstineValue = _a.setPrinstineValue; _a.valueField;
+        if (formItem && isPureVariable(source)) {
+            isAlive(formItem) &&
+                formItem.loadOptionsFromDataScope(source, data, this.changeOptionValue);
+            return;
+        }
+        else if (!formItem || !isEffectiveApi(source, data)) {
+            return;
+        }
+        return isAlive(formItem)
+            ? formItem.loadOptions(source, data, undefined, false, isInit ? setPrinstineValue : onChange, setError)
+            : undefined;
+    };
+    OptionsControlBase.prototype.deferLoad = function (option) {
+        return __awaiter(this, void 0, void 0, function () {
+            var _a, deferApi, source, env, formItem, data, api, json;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _a = this.props, deferApi = _a.deferApi, source = _a.source, env = _a.env, formItem = _a.formItem, data = _a.data;
+                        api = option.deferApi || deferApi || source;
+                        if (!api) {
+                            env.notify('error', '请在选项中设置 `deferApi` 或者表单项中设置 `deferApi`，用来加载子选项。');
                             return [2 /*return*/];
-                    }
-                });
+                        }
+                        return [4 /*yield*/, (formItem === null || formItem === void 0 ? void 0 : formItem.deferLoadOptions(option, api, createObject(data, option)))];
+                    case 1:
+                        json = _b.sent();
+                        // 触发事件通知,加载完成
+                        // 废弃，不推荐使用
+                        this.oldDispatchOptionEvent('loadFinished', json);
+                        // 避免产生breakchange，增加新事件名，用来更正之前的设计问题
+                        this.dispatchOptionEvent('deferLoadFinished', { result: json });
+                        return [2 /*return*/];
+                }
             });
-        };
-        FormOptionsItem.prototype.leftDeferLoad = function (option, leftOptions) {
-            var _a = this.props, deferApi = _a.deferApi, source = _a.source, env = _a.env, formItem = _a.formItem, data = _a.data;
-            var api = option.deferApi || deferApi || source;
-            if (!api) {
-                env.notify('error', '请在选项中设置 `deferApi` 或者表单项中设置 `deferApi`，用来加载子选项。');
-                return;
-            }
-            formItem === null || formItem === void 0 ? void 0 : formItem.deferLoadLeftOptions(option, leftOptions, api, createObject(data, option));
-        };
-        FormOptionsItem.prototype.expandTreeOptions = function (nodePathArr) {
-            var _a = this.props, deferApi = _a.deferApi, source = _a.source, env = _a.env, formItem = _a.formItem, data = _a.data;
-            var api = deferApi || source;
-            if (!api) {
-                env.notify('error', '请在选项中设置 `deferApi` 或者表单项中设置 `deferApi`，用来加载子选项。');
-                return;
-            }
-            formItem === null || formItem === void 0 ? void 0 : formItem.expandTreeOptions(nodePathArr, api, createObject(data));
-        };
-        FormOptionsItem.prototype.initOptions = function (data) {
-            var _a;
-            return __awaiter(this, void 0, void 0, function () {
-                var _b, formItem, name, multiple, defaultCheckAll;
-                return __generator(this, function (_c) {
-                    switch (_c.label) {
-                        case 0: return [4 /*yield*/, this.reloadOptions(false, true)];
-                        case 1:
-                            _c.sent();
-                            _b = this.props, formItem = _b.formItem, name = _b.name, multiple = _b.multiple, defaultCheckAll = _b.defaultCheckAll;
-                            if (!formItem) {
-                                return [2 /*return*/];
-                            }
-                            if (isAlive(formItem) && formItem.value) {
-                                setVariable(data, name, formItem.value);
-                            }
-                            // 默认全选
-                            if (multiple && defaultCheckAll && ((_a = formItem.filteredOptions) === null || _a === void 0 ? void 0 : _a.length)) {
-                                this.defaultCheckAll();
-                            }
+        });
+    };
+    OptionsControlBase.prototype.leftDeferLoad = function (option, leftOptions) {
+        var _a = this.props, deferApi = _a.deferApi, source = _a.source, env = _a.env, formItem = _a.formItem, data = _a.data;
+        var api = option.deferApi || deferApi || source;
+        if (!api) {
+            env.notify('error', '请在选项中设置 `deferApi` 或者表单项中设置 `deferApi`，用来加载子选项。');
+            return;
+        }
+        formItem === null || formItem === void 0 ? void 0 : formItem.deferLoadLeftOptions(option, leftOptions, api, createObject(data, option));
+    };
+    OptionsControlBase.prototype.expandTreeOptions = function (nodePathArr) {
+        var _a = this.props, deferApi = _a.deferApi, source = _a.source, env = _a.env, formItem = _a.formItem, data = _a.data;
+        var api = deferApi || source;
+        if (!api) {
+            env.notify('error', '请在选项中设置 `deferApi` 或者表单项中设置 `deferApi`，用来加载子选项。');
+            return;
+        }
+        formItem === null || formItem === void 0 ? void 0 : formItem.expandTreeOptions(nodePathArr, api, createObject(data));
+    };
+    OptionsControlBase.prototype.initOptions = function (data) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function () {
+            var _b, formItem, name, multiple, defaultCheckAll;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0: return [4 /*yield*/, this.reloadOptions(false, true)];
+                    case 1:
+                        _c.sent();
+                        _b = this.props, formItem = _b.formItem, name = _b.name, multiple = _b.multiple, defaultCheckAll = _b.defaultCheckAll;
+                        if (!formItem) {
                             return [2 /*return*/];
-                    }
-                });
+                        }
+                        if (isAlive(formItem) && formItem.value) {
+                            setVariable(data, name, formItem.value);
+                        }
+                        // 默认全选
+                        if (multiple && defaultCheckAll && ((_a = formItem.filteredOptions) === null || _a === void 0 ? void 0 : _a.length)) {
+                            this.defaultCheckAll();
+                        }
+                        return [2 /*return*/];
+                }
             });
-        };
-        FormOptionsItem.prototype.focus = function () {
-            this.input && this.input.focus && this.input.focus();
-        };
-        FormOptionsItem.prototype.changeOptionValue = function (value) {
-            var _a = this.props, onChange = _a.onChange, formInited = _a.formInited, setPrinstineValue = _a.setPrinstineValue, originValue = _a.value;
-            if (formInited === false) {
-                originValue === undefined && (setPrinstineValue === null || setPrinstineValue === void 0 ? void 0 : setPrinstineValue(value));
-            }
-            else {
-                onChange === null || onChange === void 0 ? void 0 : onChange(value);
-            }
-        };
-        FormOptionsItem.prototype.setOptions = function (options, skipNormalize) {
-            if (skipNormalize === void 0) { skipNormalize = false; }
-            var formItem = this.props.formItem;
-            formItem &&
-                formItem.setOptions(skipNormalize
-                    ? options
-                    : normalizeOptions(options || [], undefined, this.props.valueField), this.changeOptionValue, this.props.data);
-        };
-        FormOptionsItem.prototype.syncOptions = function () {
-            var formItem = this.props.formItem;
-            formItem && formItem.syncOptions(undefined, this.props.data);
-        };
-        FormOptionsItem.prototype.setLoading = function (value) {
-            var formItem = this.props.formItem;
-            formItem && formItem.setLoading(value);
-        };
-        FormOptionsItem.prototype.handleOptionAdd = function (idx, value, skipForm, callback) {
-            var _a, _b;
-            if (idx === void 0) { idx = -1; }
-            if (skipForm === void 0) { skipForm = false; }
-            return __awaiter(this, void 0, void 0, function () {
-                var _c, addControls, addDialog, disabled, labelField, onOpenDialog, optionLabel, addApi, source, data, valueField, deferField, model, createBtnLabel, env, __, parent, ctx, customAddPrevent, result, _d, prevent, payload, e_1, isPrevented, ret, options;
-                var _e;
-                var _this = this;
-                return __generator(this, function (_f) {
-                    switch (_f.label) {
-                        case 0:
-                            _c = this.props, addControls = _c.addControls, addDialog = _c.addDialog, disabled = _c.disabled, labelField = _c.labelField, onOpenDialog = _c.onOpenDialog, optionLabel = _c.optionLabel, addApi = _c.addApi, source = _c.source, data = _c.data, valueField = _c.valueField, deferField = _c.deferField, model = _c.formItem, createBtnLabel = _c.createBtnLabel, env = _c.env, __ = _c.translate;
-                            // 禁用或者没有配置 name
-                            if (disabled || !model) {
-                                return [2 /*return*/];
-                            }
-                            // 用户没有配置表单项，则自动创建一个 label 输入
-                            if (!skipForm && (!Array.isArray(addControls) || !addControls.length)) {
-                                addControls = [
+        });
+    };
+    OptionsControlBase.prototype.focus = function () {
+        this.input && this.input.focus && this.input.focus();
+    };
+    OptionsControlBase.prototype.changeOptionValue = function (value) {
+        var _a = this.props, onChange = _a.onChange, formInited = _a.formInited, setPrinstineValue = _a.setPrinstineValue, originValue = _a.value;
+        if (formInited === false) {
+            originValue === undefined && (setPrinstineValue === null || setPrinstineValue === void 0 ? void 0 : setPrinstineValue(value));
+        }
+        else {
+            onChange === null || onChange === void 0 ? void 0 : onChange(value);
+        }
+    };
+    OptionsControlBase.prototype.setOptions = function (options, skipNormalize) {
+        if (skipNormalize === void 0) { skipNormalize = false; }
+        var formItem = this.props.formItem;
+        formItem &&
+            formItem.setOptions(skipNormalize
+                ? options
+                : normalizeOptions(options || [], undefined, this.props.valueField), this.changeOptionValue, this.props.data);
+    };
+    OptionsControlBase.prototype.syncOptions = function () {
+        var formItem = this.props.formItem;
+        formItem && formItem.syncOptions(undefined, this.props.data);
+    };
+    OptionsControlBase.prototype.setLoading = function (value) {
+        var formItem = this.props.formItem;
+        formItem && formItem.setLoading(value);
+    };
+    OptionsControlBase.prototype.handleOptionAdd = function (idx, value, skipForm, callback) {
+        var _a, _b;
+        if (idx === void 0) { idx = -1; }
+        if (skipForm === void 0) { skipForm = false; }
+        return __awaiter(this, void 0, void 0, function () {
+            var _c, addControls, addDialog, disabled, labelField, onOpenDialog, optionLabel, addApi, source, data, valueField, deferField, model, createBtnLabel, env, __, parent, ctx, customAddPrevent, result, _d, prevent, payload, e_1, isPrevented, ret, options;
+            var _e;
+            var _this = this;
+            return __generator(this, function (_f) {
+                switch (_f.label) {
+                    case 0:
+                        _c = this.props, addControls = _c.addControls, addDialog = _c.addDialog, disabled = _c.disabled, labelField = _c.labelField, onOpenDialog = _c.onOpenDialog, optionLabel = _c.optionLabel, addApi = _c.addApi, source = _c.source, data = _c.data, valueField = _c.valueField, deferField = _c.deferField, model = _c.formItem, createBtnLabel = _c.createBtnLabel, env = _c.env, __ = _c.translate;
+                        // 禁用或者没有配置 name
+                        if (disabled || !model) {
+                            return [2 /*return*/];
+                        }
+                        // 用户没有配置表单项，则自动创建一个 label 输入
+                        if (!skipForm && (!Array.isArray(addControls) || !addControls.length)) {
+                            addControls = [
+                                {
+                                    type: 'text',
+                                    name: labelField || 'label',
+                                    label: false,
+                                    required: true,
+                                    placeholder: __('Options.addPlaceholder')
+                                }
+                            ];
+                        }
+                        parent = Array.isArray(idx)
+                            ? getTree(model.options, idx.slice(0, -1))
+                            : undefined;
+                        ctx = createObject(data, Array.isArray(idx)
+                            ? __assign({ parent: parent }, value) : value);
+                        customAddPrevent = false;
+                        if (!skipForm) return [3 /*break*/, 1];
+                        _d = ctx;
+                        return [3 /*break*/, 3];
+                    case 1: return [4 /*yield*/, onOpenDialog(__assign(__assign({ type: 'dialog', title: createBtnLabel || "\u65B0\u589E".concat(optionLabel || '选项') }, addDialog), { body: {
+                                type: 'form',
+                                api: addApi,
+                                controls: __spreadArray([
+                                    {
+                                        type: 'hidden',
+                                        name: 'idx',
+                                        value: idx
+                                    },
                                     {
-                                        type: 'text',
-                                        name: labelField || 'label',
-                                        label: false,
-                                        required: true,
-                                        placeholder: __('Options.addPlaceholder')
+                                        type: 'hidden',
+                                        name: 'parent',
+                                        value: parent
                                     }
-                                ];
-                            }
-                            parent = Array.isArray(idx)
-                                ? getTree(model.options, idx.slice(0, -1))
-                                : undefined;
-                            ctx = createObject(data, Array.isArray(idx)
-                                ? __assign({ parent: parent }, value) : value);
-                            customAddPrevent = false;
-                            if (!skipForm) return [3 /*break*/, 1];
-                            _d = ctx;
-                            return [3 /*break*/, 3];
-                        case 1: return [4 /*yield*/, onOpenDialog(__assign(__assign({ type: 'dialog', title: createBtnLabel || "\u65B0\u589E".concat(optionLabel || '选项') }, addDialog), { body: {
-                                    type: 'form',
-                                    api: addApi,
-                                    controls: __spreadArray([
-                                        {
-                                            type: 'hidden',
-                                            name: 'idx',
-                                            value: idx
-                                        },
-                                        {
-                                            type: 'hidden',
-                                            name: 'parent',
-                                            value: parent
+                                ], __read((addControls || [])), false),
+                                onSubmit: function (payload) { return __awaiter(_this, void 0, void 0, function () {
+                                    var labelKey, valueKey;
+                                    var _a;
+                                    var _b;
+                                    return __generator(this, function (_c) {
+                                        switch (_c.label) {
+                                            case 0:
+                                                labelKey = labelField || 'label';
+                                                valueKey = valueField || 'value';
+                                                return [4 /*yield*/, this.dispatchOptionEvent('addConfirm', {
+                                                        item: (_a = {},
+                                                            _a[labelKey] = payload[labelKey],
+                                                            _a[valueKey] = (_b = payload[valueKey]) !== null && _b !== void 0 ? _b : payload[labelKey],
+                                                            _a)
+                                                    })];
+                                            case 1:
+                                                // 派发确认添加事件
+                                                customAddPrevent = _c.sent();
+                                                return [2 /*return*/, !customAddPrevent];
                                         }
-                                    ], __read((addControls || [])), false),
-                                    onSubmit: function (payload) { return __awaiter(_this, void 0, void 0, function () {
-                                        var labelKey, valueKey;
-                                        var _a;
-                                        var _b;
-                                        return __generator(this, function (_c) {
-                                            switch (_c.label) {
-                                                case 0:
-                                                    labelKey = labelField || 'label';
-                                                    valueKey = valueField || 'value';
-                                                    return [4 /*yield*/, this.dispatchOptionEvent('addConfirm', {
-                                                            item: (_a = {},
-                                                                _a[labelKey] = payload[labelKey],
-                                                                _a[valueKey] = (_b = payload[valueKey]) !== null && _b !== void 0 ? _b : payload[labelKey],
-                                                                _a)
-                                                        })];
-                                                case 1:
-                                                    // 派发确认添加事件
-                                                    customAddPrevent = _c.sent();
-                                                    return [2 /*return*/, !customAddPrevent];
-                                            }
-                                        });
-                                    }); }
-                                } }), ctx)];
-                        case 2:
-                            _d = _f.sent();
-                            _f.label = 3;
-                        case 3:
-                            result = _d;
-                            if (!skipForm) return [3 /*break*/, 5];
-                            return [4 /*yield*/, this.dispatchOptionEvent('addConfirm', {
-                                    item: result
-                                })];
-                        case 4:
-                            prevent = _f.sent();
-                            if (prevent) {
-                                return [2 /*return*/];
-                            }
-                            return [3 /*break*/, 6];
-                        case 5:
-                            if (customAddPrevent) {
-                                return [2 /*return*/];
-                            }
-                            _f.label = 6;
-                        case 6:
-                            if (!(skipForm && addApi)) return [3 /*break*/, 10];
-                            _f.label = 7;
-                        case 7:
-                            _f.trys.push([7, 9, , 10]);
-                            return [4 /*yield*/, env.fetcher(addApi, result, {
-                                    method: 'post'
-                                })];
-                        case 8:
-                            payload = _f.sent();
-                            if (!payload.ok) {
-                                !addApi.silent &&
-                                    env.notify('error', (_b = (_a = addApi === null || addApi === void 0 ? void 0 : addApi.messages) === null || _a === void 0 ? void 0 : _a.failed) !== null && _b !== void 0 ? _b : (payload.msg || __('Options.createFailed')));
-                                result = null;
-                            }
-                            else {
-                                result = payload.data || result;
-                            }
-                            return [3 /*break*/, 10];
-                        case 9:
-                            e_1 = _f.sent();
+                                    });
+                                }); }
+                            } }), ctx)];
+                    case 2:
+                        _d = _f.sent();
+                        _f.label = 3;
+                    case 3:
+                        result = _d;
+                        if (!skipForm) return [3 /*break*/, 5];
+                        return [4 /*yield*/, this.dispatchOptionEvent('addConfirm', {
+                                item: result
+                            })];
+                    case 4:
+                        prevent = _f.sent();
+                        if (prevent) {
+                            return [2 /*return*/];
+                        }
+                        return [3 /*break*/, 6];
+                    case 5:
+                        if (customAddPrevent) {
+                            return [2 /*return*/];
+                        }
+                        _f.label = 6;
+                    case 6:
+                        if (!(skipForm && addApi)) return [3 /*break*/, 10];
+                        _f.label = 7;
+                    case 7:
+                        _f.trys.push([7, 9, , 10]);
+                        return [4 /*yield*/, env.fetcher(addApi, result, {
+                                method: 'post'
+                            })];
+                    case 8:
+                        payload = _f.sent();
+                        if (!payload.ok) {
+                            !addApi.silent &&
+                                env.notify('error', (_b = (_a = addApi === null || addApi === void 0 ? void 0 : addApi.messages) === null || _a === void 0 ? void 0 : _a.failed) !== null && _b !== void 0 ? _b : (payload.msg || __('Options.createFailed')));
                             result = null;
-                            console.error(e_1);
-                            !addApi.silent && env.notify('error', e_1.message);
-                            return [3 /*break*/, 10];
-                        case 10:
-                            // 有 result 说明弹框点了确认。否则就是取消了。
-                            if (!result) {
-                                return [2 /*return*/];
-                            }
-                            // 没走服务端的。
-                            if (!result.hasOwnProperty(valueField || 'value')) {
-                                result = __assign(__assign({}, result), (_e = {}, _e[valueField || 'value'] = result[labelField || 'label'], _e));
-                            }
-                            return [4 /*yield*/, this.oldDispatchOptionEvent('add', __assign(__assign({}, result), { idx: idx }))];
-                        case 11:
-                            isPrevented = _f.sent();
-                            if (isPrevented) {
-                                return [2 /*return*/];
-                            }
-                            return [4 /*yield*/, (callback === null || callback === void 0 ? void 0 : callback(result))];
-                        case 12:
-                            ret = _f.sent();
-                            if (!(ret === false)) return [3 /*break*/, 13];
-                            // 如果回调里面返回 false，就不继续了。
+                        }
+                        else {
+                            result = payload.data || result;
+                        }
+                        return [3 /*break*/, 10];
+                    case 9:
+                        e_1 = _f.sent();
+                        result = null;
+                        console.error(e_1);
+                        !addApi.silent && env.notify('error', e_1.message);
+                        return [3 /*break*/, 10];
+                    case 10:
+                        // 有 result 说明弹框点了确认。否则就是取消了。
+                        if (!result) {
                             return [2 /*return*/];
-                        case 13:
-                            if (!
-                            // 如果是懒加载的，只懒加载当前节点。
-                            (((parent === null || parent === void 0 ? void 0 : parent.hasOwnProperty(deferField)) && parent[deferField]) ||
-                                (parent === null || parent === void 0 ? void 0 : parent.defer))) 
-                            // 如果是懒加载的，只懒加载当前节点。
-                            return [3 /*break*/, 15];
-                            return [4 /*yield*/, this.deferLoad(parent)];
-                        case 14:
-                            _f.sent();
-                            return [3 /*break*/, 16];
-                        case 15:
-                            if (source && addApi) {
-                                // 如果配置了 source 且配置了 addApi 直接重新拉取接口就够了
-                                // 不能不判断 addApi 就刷新，因为有些场景就是临时添加的。
-                                this.reload();
+                        }
+                        // 没走服务端的。
+                        if (!result.hasOwnProperty(valueField || 'value')) {
+                            result = __assign(__assign({}, result), (_e = {}, _e[valueField || 'value'] = result[labelField || 'label'], _e));
+                        }
+                        return [4 /*yield*/, this.oldDispatchOptionEvent('add', __assign(__assign({}, result), { idx: idx }))];
+                    case 11:
+                        isPrevented = _f.sent();
+                        if (isPrevented) {
+                            return [2 /*return*/];
+                        }
+                        return [4 /*yield*/, (callback === null || callback === void 0 ? void 0 : callback(result))];
+                    case 12:
+                        ret = _f.sent();
+                        if (!(ret === false)) return [3 /*break*/, 13];
+                        // 如果回调里面返回 false，就不继续了。
+                        return [2 /*return*/];
+                    case 13:
+                        if (!
+                        // 如果是懒加载的，只懒加载当前节点。
+                        (((parent === null || parent === void 0 ? void 0 : parent.hasOwnProperty(deferField)) && parent[deferField]) ||
+                            (parent === null || parent === void 0 ? void 0 : parent.defer))) 
+                        // 如果是懒加载的，只懒加载当前节点。
+                        return [3 /*break*/, 15];
+                        return [4 /*yield*/, this.deferLoad(parent)];
+                    case 14:
+                        _f.sent();
+                        return [3 /*break*/, 16];
+                    case 15:
+                        if (source && addApi) {
+                            // 如果配置了 source 且配置了 addApi 直接重新拉取接口就够了
+                            // 不能不判断 addApi 就刷新，因为有些场景就是临时添加的。
+                            this.reload();
+                        }
+                        else {
+                            options = model.options.concat();
+                            if (Array.isArray(idx)) {
+                                options = spliceTree(options, idx, 0, __assign({}, result));
                             }
                             else {
-                                options = model.options.concat();
-                                if (Array.isArray(idx)) {
-                                    options = spliceTree(options, idx, 0, __assign({}, result));
-                                }
-                                else {
-                                    ~idx
-                                        ? options.splice(idx, 0, __assign({}, result))
-                                        : options.push(__assign({}, result));
-                                }
-                                model.setOptions(options, this.changeOptionValue, data);
+                                ~idx ? options.splice(idx, 0, __assign({}, result)) : options.push(__assign({}, result));
                             }
-                            _f.label = 16;
-                        case 16: return [2 /*return*/];
-                    }
-                });
+                            model.setOptions(options, this.changeOptionValue, data);
+                        }
+                        _f.label = 16;
+                    case 16: return [2 /*return*/];
+                }
             });
-        };
-        FormOptionsItem.prototype.handleOptionEdit = function (value, origin, skipForm, callback) {
-            var _a, _b;
-            if (origin === void 0) { origin = value; }
-            if (skipForm === void 0) { skipForm = false; }
-            return __awaiter(this, void 0, void 0, function () {
-                var _c, editControls, editDialog, disabled, labelField, valueField, onOpenDialog, editApi, editInitApi, env, source, data, model, optionLabel, __, customEditPrevent, result, _d, prevent, payload, e_2, isPrevented, ret, indexes;
-                var _this = this;
-                return __generator(this, function (_e) {
-                    switch (_e.label) {
-                        case 0:
-                            _c = this.props, editControls = _c.editControls, editDialog = _c.editDialog, disabled = _c.disabled, labelField = _c.labelField, valueField = _c.valueField, onOpenDialog = _c.onOpenDialog, editApi = _c.editApi, editInitApi = _c.editInitApi, env = _c.env, source = _c.source, data = _c.data, model = _c.formItem, optionLabel = _c.optionLabel, __ = _c.translate;
-                            if (disabled || !model) {
-                                return [2 /*return*/];
-                            }
-                            if (!skipForm && (!Array.isArray(editControls) || !editControls.length)) {
-                                editControls = [
-                                    {
-                                        type: 'text',
-                                        name: labelField || 'label',
-                                        label: false,
-                                        placeholder: __('Options.addPlaceholder')
-                                    }
-                                ];
-                            }
-                            customEditPrevent = false;
-                            if (!skipForm) return [3 /*break*/, 1];
-                            _d = value;
-                            return [3 /*break*/, 3];
-                        case 1: return [4 /*yield*/, onOpenDialog(__assign(__assign({ type: 'dialog', title: __('Options.editLabel', {
-                                    label: optionLabel || __('Options.label')
-                                }) }, editDialog), { body: {
-                                    type: 'form',
-                                    initApi: editInitApi,
-                                    api: editApi,
-                                    controls: editControls,
-                                    onSubmit: function (payload) { return __awaiter(_this, void 0, void 0, function () {
-                                        var labelKey, valueKey;
-                                        var _a;
-                                        var _b;
-                                        return __generator(this, function (_c) {
-                                            switch (_c.label) {
-                                                case 0:
-                                                    labelKey = labelField || 'label';
-                                                    valueKey = valueField || 'value';
-                                                    return [4 /*yield*/, this.dispatchOptionEvent('editConfirm', {
-                                                            item: (_a = {},
-                                                                _a[labelKey] = payload[labelKey],
-                                                                _a[valueKey] = (_b = payload[valueKey]) !== null && _b !== void 0 ? _b : payload[labelKey],
-                                                                _a)
-                                                        })];
-                                                case 1:
-                                                    // 避免产生breakchange，增加新事件名，用来更正之前的设计问题
-                                                    customEditPrevent = _c.sent();
-                                                    return [2 /*return*/, !customEditPrevent];
-                                            }
-                                        });
-                                    }); }
-                                } }), createObject(data, value))];
-                        case 2:
-                            _d = _e.sent();
-                            _e.label = 3;
-                        case 3:
-                            result = _d;
-                            if (!skipForm) return [3 /*break*/, 5];
-                            return [4 /*yield*/, this.dispatchOptionEvent('editConfirm', {
-                                    item: result
-                                })];
-                        case 4:
-                            prevent = _e.sent();
-                            if (prevent) {
-                                return [2 /*return*/];
-                            }
-                            return [3 /*break*/, 6];
-                        case 5:
-                            if (customEditPrevent) {
-                                return [2 /*return*/];
-                            }
-                            _e.label = 6;
-                        case 6:
-                            if (!(skipForm && editApi)) return [3 /*break*/, 10];
-                            _e.label = 7;
-                        case 7:
-                            _e.trys.push([7, 9, , 10]);
-                            return [4 /*yield*/, env.fetcher(editApi, createObject(data, result), {
-                                    method: 'post'
-                                })];
-                        case 8:
-                            payload = _e.sent();
-                            if (!payload.ok) {
-                                !editApi.silent &&
-                                    env.notify('error', (_b = (_a = editApi === null || editApi === void 0 ? void 0 : editApi.messages) === null || _a === void 0 ? void 0 : _a.failed) !== null && _b !== void 0 ? _b : (payload.msg || __('saveFailed')));
-                                result = null;
-                            }
-                            else {
-                                result = payload.data || result;
-                            }
-                            return [3 /*break*/, 10];
-                        case 9:
-                            e_2 = _e.sent();
-                            result = null;
-                            console.error(e_2);
-                            !editApi.silent && env.notify('error', e_2.message);
-                            return [3 /*break*/, 10];
-                        case 10:
-                            // 没有结果，说明取消了。
-                            if (!result) {
-                                return [2 /*return*/];
-                            }
-                            return [4 /*yield*/, this.oldDispatchOptionEvent('edit', result)];
-                        case 11:
-                            isPrevented = _e.sent();
-                            if (isPrevented) {
-                                return [2 /*return*/];
-                            }
-                            return [4 /*yield*/, (callback === null || callback === void 0 ? void 0 : callback(result))];
-                        case 12:
-                            ret = _e.sent();
-                            if (ret === false) {
-                                // 如果回调里面返回 false，就不继续了。
-                                return [2 /*return*/];
-                            }
-                            else if (source && editApi) {
-                                this.reload();
-                            }
-                            else {
-                                indexes = findTreeIndex(model.options, function (item) { return item === origin; });
-                                if (indexes) {
-                                    model.setOptions(spliceTree(model.options, indexes, 1, __assign(__assign({}, origin), result)), this.changeOptionValue, data);
+        });
+    };
+    OptionsControlBase.prototype.handleOptionEdit = function (value, origin, skipForm, callback) {
+        var _a, _b;
+        if (origin === void 0) { origin = value; }
+        if (skipForm === void 0) { skipForm = false; }
+        return __awaiter(this, void 0, void 0, function () {
+            var _c, editControls, editDialog, disabled, labelField, valueField, onOpenDialog, editApi, editInitApi, env, source, data, model, optionLabel, __, customEditPrevent, result, _d, prevent, payload, e_2, isPrevented, ret, indexes;
+            var _this = this;
+            return __generator(this, function (_e) {
+                switch (_e.label) {
+                    case 0:
+                        _c = this.props, editControls = _c.editControls, editDialog = _c.editDialog, disabled = _c.disabled, labelField = _c.labelField, valueField = _c.valueField, onOpenDialog = _c.onOpenDialog, editApi = _c.editApi, editInitApi = _c.editInitApi, env = _c.env, source = _c.source, data = _c.data, model = _c.formItem, optionLabel = _c.optionLabel, __ = _c.translate;
+                        if (disabled || !model) {
+                            return [2 /*return*/];
+                        }
+                        if (!skipForm && (!Array.isArray(editControls) || !editControls.length)) {
+                            editControls = [
+                                {
+                                    type: 'text',
+                                    name: labelField || 'label',
+                                    label: false,
+                                    placeholder: __('Options.addPlaceholder')
                                 }
-                            }
+                            ];
+                        }
+                        customEditPrevent = false;
+                        if (!skipForm) return [3 /*break*/, 1];
+                        _d = value;
+                        return [3 /*break*/, 3];
+                    case 1: return [4 /*yield*/, onOpenDialog(__assign(__assign({ type: 'dialog', title: __('Options.editLabel', {
+                                label: optionLabel || __('Options.label')
+                            }) }, editDialog), { body: {
+                                type: 'form',
+                                initApi: editInitApi,
+                                api: editApi,
+                                controls: editControls,
+                                onSubmit: function (payload) { return __awaiter(_this, void 0, void 0, function () {
+                                    var labelKey, valueKey;
+                                    var _a;
+                                    var _b;
+                                    return __generator(this, function (_c) {
+                                        switch (_c.label) {
+                                            case 0:
+                                                labelKey = labelField || 'label';
+                                                valueKey = valueField || 'value';
+                                                return [4 /*yield*/, this.dispatchOptionEvent('editConfirm', {
+                                                        item: (_a = {},
+                                                            _a[labelKey] = payload[labelKey],
+                                                            _a[valueKey] = (_b = payload[valueKey]) !== null && _b !== void 0 ? _b : payload[labelKey],
+                                                            _a)
+                                                    })];
+                                            case 1:
+                                                // 避免产生breakchange，增加新事件名，用来更正之前的设计问题
+                                                customEditPrevent = _c.sent();
+                                                return [2 /*return*/, !customEditPrevent];
+                                        }
+                                    });
+                                }); }
+                            } }), createObject(data, value))];
+                    case 2:
+                        _d = _e.sent();
+                        _e.label = 3;
+                    case 3:
+                        result = _d;
+                        if (!skipForm) return [3 /*break*/, 5];
+                        return [4 /*yield*/, this.dispatchOptionEvent('editConfirm', {
+                                item: result
+                            })];
+                    case 4:
+                        prevent = _e.sent();
+                        if (prevent) {
                             return [2 /*return*/];
-                    }
-                });
-            });
-        };
-        FormOptionsItem.prototype.handleOptionDelete = function (value, callback) {
-            var _a, _b;
-            return __awaiter(this, void 0, void 0, function () {
-                var _c, deleteConfirmText, disabled, data, deleteApi, onDelete, env, model, source, valueField, __, ctx, confirmed, _d, isPrevented, delConfirmPrevent, result, ret, options, indexes, e_3;
-                return __generator(this, function (_e) {
-                    switch (_e.label) {
-                        case 0:
-                            _c = this.props, deleteConfirmText = _c.deleteConfirmText, disabled = _c.disabled, data = _c.data, deleteApi = _c.deleteApi, onDelete = _c.onDelete, env = _c.env, model = _c.formItem, source = _c.source, valueField = _c.valueField, __ = _c.translate;
-                            if (disabled || !model) {
-                                return [2 /*return*/];
-                            }
-                            ctx = createObject(data, value);
-                            if (!deleteConfirmText) return [3 /*break*/, 2];
-                            return [4 /*yield*/, env.confirm(filter(__(deleteConfirmText), ctx))];
-                        case 1:
-                            _d = _e.sent();
-                            return [3 /*break*/, 3];
-                        case 2:
-                            _d = true;
-                            _e.label = 3;
-                        case 3:
-                            confirmed = _d;
-                            if (!confirmed) {
-                                return [2 /*return*/];
-                            }
-                            return [4 /*yield*/, this.oldDispatchOptionEvent('delete', ctx)];
-                        case 4:
-                            isPrevented = _e.sent();
-                            if (isPrevented) {
-                                return [2 /*return*/];
-                            }
-                            return [4 /*yield*/, this.dispatchOptionEvent('deleteConfirm', {
-                                    item: value
-                                })];
-                        case 5:
-                            delConfirmPrevent = _e.sent();
-                            if (delConfirmPrevent) {
-                                return [2 /*return*/];
-                            }
-                            _e.label = 6;
-                        case 6:
-                            _e.trys.push([6, 9, , 10]);
-                            if (!deleteApi) return [3 /*break*/, 8];
-                            return [4 /*yield*/, env.fetcher(deleteApi, ctx, {
-                                    method: 'delete'
-                                })];
-                        case 7:
-                            result = _e.sent();
-                            if (!result.ok) {
-                                !deleteApi.silent &&
-                                    env.notify('error', (_b = (_a = deleteApi === null || deleteApi === void 0 ? void 0 : deleteApi.messages) === null || _a === void 0 ? void 0 : _a.failed) !== null && _b !== void 0 ? _b : (result.msg || __('deleteFailed')));
-                                return [2 /*return*/];
-                            }
-                            _e.label = 8;
-                        case 8:
-                            // 由外部代码实现删除逻辑
-                            if (onDelete) {
-                                onDelete(ctx);
-                            }
-                            ret = callback === null || callback === void 0 ? void 0 : callback(ctx);
-                            if (ret === false) {
-                                // 如果回调里面返回 false，就不继续了。
-                                return [2 /*return*/];
-                            }
-                            else if (source) {
-                                this.reload();
+                        }
+                        return [3 /*break*/, 6];
+                    case 5:
+                        if (customEditPrevent) {
+                            return [2 /*return*/];
+                        }
+                        _e.label = 6;
+                    case 6:
+                        if (!(skipForm && editApi)) return [3 /*break*/, 10];
+                        _e.label = 7;
+                    case 7:
+                        _e.trys.push([7, 9, , 10]);
+                        return [4 /*yield*/, env.fetcher(editApi, createObject(data, result), {
+                                method: 'post'
+                            })];
+                    case 8:
+                        payload = _e.sent();
+                        if (!payload.ok) {
+                            !editApi.silent &&
+                                env.notify('error', (_b = (_a = editApi === null || editApi === void 0 ? void 0 : editApi.messages) === null || _a === void 0 ? void 0 : _a.failed) !== null && _b !== void 0 ? _b : (payload.msg || __('saveFailed')));
+                            result = null;
+                        }
+                        else {
+                            result = payload.data || result;
+                        }
+                        return [3 /*break*/, 10];
+                    case 9:
+                        e_2 = _e.sent();
+                        result = null;
+                        console.error(e_2);
+                        !editApi.silent && env.notify('error', e_2.message);
+                        return [3 /*break*/, 10];
+                    case 10:
+                        // 没有结果，说明取消了。
+                        if (!result) {
+                            return [2 /*return*/];
+                        }
+                        return [4 /*yield*/, this.oldDispatchOptionEvent('edit', result)];
+                    case 11:
+                        isPrevented = _e.sent();
+                        if (isPrevented) {
+                            return [2 /*return*/];
+                        }
+                        return [4 /*yield*/, (callback === null || callback === void 0 ? void 0 : callback(result))];
+                    case 12:
+                        ret = _e.sent();
+                        if (ret === false) {
+                            // 如果回调里面返回 false，就不继续了。
+                            return [2 /*return*/];
+                        }
+                        else if (source && editApi) {
+                            this.reload();
+                        }
+                        else {
+                            indexes = findTreeIndex(model.options, function (item) { return item === origin; });
+                            if (indexes) {
+                                model.setOptions(spliceTree(model.options, indexes, 1, __assign(__assign({}, origin), result)), this.changeOptionValue, data);
                             }
-                            else {
-                                options = model.options.concat();
-                                indexes = findTreeIndex(options, function (item) { return item[valueField || 'value'] == value[valueField || 'value']; });
-                                if (indexes) {
-                                    model.setOptions(spliceTree(options, indexes, 1), this.changeOptionValue, data);
-                                }
+                        }
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    OptionsControlBase.prototype.handleOptionDelete = function (value, callback) {
+        var _a, _b;
+        return __awaiter(this, void 0, void 0, function () {
+            var _c, deleteConfirmText, disabled, data, deleteApi, onDelete, env, model, source, valueField, __, ctx, confirmed, _d, isPrevented, delConfirmPrevent, result, ret, options, indexes, e_3;
+            return __generator(this, function (_e) {
+                switch (_e.label) {
+                    case 0:
+                        _c = this.props, deleteConfirmText = _c.deleteConfirmText, disabled = _c.disabled, data = _c.data, deleteApi = _c.deleteApi, onDelete = _c.onDelete, env = _c.env, model = _c.formItem, source = _c.source, valueField = _c.valueField, __ = _c.translate;
+                        if (disabled || !model) {
+                            return [2 /*return*/];
+                        }
+                        ctx = createObject(data, value);
+                        if (!deleteConfirmText) return [3 /*break*/, 2];
+                        return [4 /*yield*/, env.confirm(filter(__(deleteConfirmText), ctx))];
+                    case 1:
+                        _d = _e.sent();
+                        return [3 /*break*/, 3];
+                    case 2:
+                        _d = true;
+                        _e.label = 3;
+                    case 3:
+                        confirmed = _d;
+                        if (!confirmed) {
+                            return [2 /*return*/];
+                        }
+                        return [4 /*yield*/, this.oldDispatchOptionEvent('delete', ctx)];
+                    case 4:
+                        isPrevented = _e.sent();
+                        if (isPrevented) {
+                            return [2 /*return*/];
+                        }
+                        return [4 /*yield*/, this.dispatchOptionEvent('deleteConfirm', {
+                                item: value
+                            })];
+                    case 5:
+                        delConfirmPrevent = _e.sent();
+                        if (delConfirmPrevent) {
+                            return [2 /*return*/];
+                        }
+                        _e.label = 6;
+                    case 6:
+                        _e.trys.push([6, 9, , 10]);
+                        if (!deleteApi) return [3 /*break*/, 8];
+                        return [4 /*yield*/, env.fetcher(deleteApi, ctx, {
+                                method: 'delete'
+                            })];
+                    case 7:
+                        result = _e.sent();
+                        if (!result.ok) {
+                            !deleteApi.silent &&
+                                env.notify('error', (_b = (_a = deleteApi === null || deleteApi === void 0 ? void 0 : deleteApi.messages) === null || _a === void 0 ? void 0 : _a.failed) !== null && _b !== void 0 ? _b : (result.msg || __('deleteFailed')));
+                            return [2 /*return*/];
+                        }
+                        _e.label = 8;
+                    case 8:
+                        // 由外部代码实现删除逻辑
+                        if (onDelete) {
+                            onDelete(ctx);
+                        }
+                        ret = callback === null || callback === void 0 ? void 0 : callback(ctx);
+                        if (ret === false) {
+                            // 如果回调里面返回 false，就不继续了。
+                            return [2 /*return*/];
+                        }
+                        else if (source) {
+                            this.reload();
+                        }
+                        else {
+                            options = model.options.concat();
+                            indexes = findTreeIndex(options, function (item) { return item[valueField || 'value'] == value[valueField || 'value']; });
+                            if (indexes) {
+                                model.setOptions(spliceTree(options, indexes, 1), this.changeOptionValue, data);
                             }
-                            return [3 /*break*/, 10];
-                        case 9:
-                            e_3 = _e.sent();
-                            console.error(e_3);
-                            !deleteApi.silent && env.notify('error', e_3.message);
-                            return [3 /*break*/, 10];
-                        case 10: return [2 /*return*/];
-                    }
-                });
+                        }
+                        return [3 /*break*/, 10];
+                    case 9:
+                        e_3 = _e.sent();
+                        console.error(e_3);
+                        !deleteApi.silent && env.notify('error', e_3.message);
+                        return [3 /*break*/, 10];
+                    case 10: return [2 /*return*/];
+                }
             });
-        };
-        FormOptionsItem.prototype.render = function () {
-            var _a = this.props, value = _a.value, formItem = _a.formItem, addApi = _a.addApi, editApi = _a.editApi, deleteApi = _a.deleteApi, creatable = _a.creatable, editable = _a.editable, removable = _a.removable, enableNodePath = _a.enableNodePath, pathSeparator = _a.pathSeparator, _b = _a.delimiter, delimiter = _b === void 0 ? ',' : _b, _c = _a.labelField, labelField = _c === void 0 ? 'label' : _c, _d = _a.valueField, valueField = _d === void 0 ? 'value' : _d, __ = _a.translate;
-            var _e = normalizeNodePath(value, enableNodePath, labelField, valueField, pathSeparator, delimiter), nodePathArray = _e.nodePathArray, nodeValueArray = _e.nodeValueArray;
-            return (React.createElement(Control, __assign({}, this.props, { placeholder: __(this.props.placeholder), ref: this.inputRef, options: formItem ? formItem.filteredOptions : [], onToggle: this.handleToggle, onToggleAll: this.handleToggleAll, selectedOptions: formItem
-                    ? formItem.getSelectedOptions(value, enableNodePath ? nodeValueArray : undefined)
-                    : [], nodePath: nodePathArray, loading: formItem ? formItem.loading : false, setLoading: this.setLoading, setOptions: this.setOptions, syncOptions: this.syncOptions, reloadOptions: this.reload, deferLoad: this.deferLoad, leftDeferLoad: this.leftDeferLoad, expandTreeOptions: this.expandTreeOptions, creatable: creatable !== false && isEffectiveApi(addApi) ? true : creatable, editable: editable || (editable !== false && isEffectiveApi(editApi)), removable: removable || (removable !== false && isEffectiveApi(deleteApi)), onAdd: this.handleOptionAdd, onEdit: this.handleOptionEdit, onDelete: this.handleOptionDelete })));
-        };
+        });
+    };
+    OptionsControlBase.prototype.render = function () {
+        var _a = this.props, value = _a.value, formItem = _a.formItem, addApi = _a.addApi, editApi = _a.editApi, deleteApi = _a.deleteApi, creatable = _a.creatable, editable = _a.editable, removable = _a.removable, enableNodePath = _a.enableNodePath, pathSeparator = _a.pathSeparator, _b = _a.delimiter, delimiter = _b === void 0 ? ',' : _b, _c = _a.labelField, labelField = _c === void 0 ? 'label' : _c, _d = _a.valueField, valueField = _d === void 0 ? 'value' : _d, __ = _a.translate;
+        var _e = normalizeNodePath(value, enableNodePath, labelField, valueField, pathSeparator, delimiter), nodePathArray = _e.nodePathArray, nodeValueArray = _e.nodeValueArray;
+        var Control = this.config.component;
+        return (React.createElement(Control, __assign({}, this.props, { placeholder: __(this.props.placeholder), ref: this.inputRef, options: formItem ? formItem.filteredOptions : [], onToggle: this.handleToggle, onToggleAll: this.handleToggleAll, selectedOptions: formItem
+                ? formItem.getSelectedOptions(value, enableNodePath ? nodeValueArray : undefined)
+                : [], nodePath: nodePathArray, loading: formItem ? formItem.loading : false, setLoading: this.setLoading, setOptions: this.setOptions, syncOptions: this.syncOptions, reloadOptions: this.reload, deferLoad: this.deferLoad, leftDeferLoad: this.leftDeferLoad, expandTreeOptions: this.expandTreeOptions, creatable: creatable !== false && isEffectiveApi(addApi) ? true : creatable, editable: editable || (editable !== false && isEffectiveApi(editApi)), removable: removable || (removable !== false && isEffectiveApi(deleteApi)), onAdd: this.handleOptionAdd, onEdit: this.handleOptionEdit, onDelete: this.handleOptionDelete })));
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], OptionsControlBase.prototype, "inputRef", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object, Boolean, Boolean]),
+        __metadata("design:returntype", Promise)
+    ], OptionsControlBase.prototype, "handleToggle", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", Promise)
+    ], OptionsControlBase.prototype, "handleToggleAll", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], OptionsControlBase.prototype, "reload", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Boolean, Object, Object]),
+        __metadata("design:returntype", void 0)
+    ], OptionsControlBase.prototype, "reloadOptions", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", Promise)
+    ], OptionsControlBase.prototype, "deferLoad", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object, Object]),
+        __metadata("design:returntype", void 0)
+    ], OptionsControlBase.prototype, "leftDeferLoad", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Array]),
+        __metadata("design:returntype", void 0)
+    ], OptionsControlBase.prototype, "expandTreeOptions", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", Promise)
+    ], OptionsControlBase.prototype, "initOptions", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], OptionsControlBase.prototype, "changeOptionValue", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Array, Object]),
+        __metadata("design:returntype", void 0)
+    ], OptionsControlBase.prototype, "setOptions", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], OptionsControlBase.prototype, "syncOptions", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Boolean]),
+        __metadata("design:returntype", void 0)
+    ], OptionsControlBase.prototype, "setLoading", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object, Object, Boolean, Function]),
+        __metadata("design:returntype", Promise)
+    ], OptionsControlBase.prototype, "handleOptionAdd", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object, Object, Boolean, Function]),
+        __metadata("design:returntype", Promise)
+    ], OptionsControlBase.prototype, "handleOptionEdit", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object, Function]),
+        __metadata("design:returntype", Promise)
+    ], OptionsControlBase.prototype, "handleOptionDelete", null);
+    return OptionsControlBase;
+}(React.Component));
+function registerOptionsControl(config) {
+    var Control = config.component;
+    var FormOptionsItem = /** @class */ (function (_super) {
+        __extends(FormOptionsItem, _super);
+        function FormOptionsItem(props) {
+            return _super.call(this, props, config) || this;
+        }
         FormOptionsItem.displayName = "OptionsControl(".concat(config.type, ")");
         FormOptionsItem.defaultProps = __assign({ delimiter: ',', labelField: 'label', valueField: 'value', joinValues: true, extractValue: false, multiple: false, placeholder: 'Select.placeholder', resetValue: '', deleteConfirmText: 'deleteConfirm' }, Control.defaultProps);
         FormOptionsItem.propsList = Control.propsList
             ? __spreadArray([], __read(Control.propsList), false) : [];
         FormOptionsItem.ComposedComponent = Control;
-        __decorate([
-            autobind,
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [Object]),
-            __metadata("design:returntype", void 0)
-        ], FormOptionsItem.prototype, "inputRef", null);
-        __decorate([
-            autobind,
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [Object, Boolean, Boolean]),
-            __metadata("design:returntype", Promise)
-        ], FormOptionsItem.prototype, "handleToggle", null);
-        __decorate([
-            autobind,
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", []),
-            __metadata("design:returntype", Promise)
-        ], FormOptionsItem.prototype, "handleToggleAll", null);
-        __decorate([
-            autobind,
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", []),
-            __metadata("design:returntype", void 0)
-        ], FormOptionsItem.prototype, "reload", null);
-        __decorate([
-            autobind,
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [Boolean, Object, Object]),
-            __metadata("design:returntype", void 0)
-        ], FormOptionsItem.prototype, "reloadOptions", null);
-        __decorate([
-            autobind,
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [Object]),
-            __metadata("design:returntype", Promise)
-        ], FormOptionsItem.prototype, "deferLoad", null);
-        __decorate([
-            autobind,
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [Object, Object]),
-            __metadata("design:returntype", void 0)
-        ], FormOptionsItem.prototype, "leftDeferLoad", null);
-        __decorate([
-            autobind,
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [Array]),
-            __metadata("design:returntype", void 0)
-        ], FormOptionsItem.prototype, "expandTreeOptions", null);
-        __decorate([
-            autobind,
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [Object]),
-            __metadata("design:returntype", Promise)
-        ], FormOptionsItem.prototype, "initOptions", null);
-        __decorate([
-            autobind,
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [Object]),
-            __metadata("design:returntype", void 0)
-        ], FormOptionsItem.prototype, "changeOptionValue", null);
-        __decorate([
-            autobind,
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [Array, Object]),
-            __metadata("design:returntype", void 0)
-        ], FormOptionsItem.prototype, "setOptions", null);
-        __decorate([
-            autobind,
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", []),
-            __metadata("design:returntype", void 0)
-        ], FormOptionsItem.prototype, "syncOptions", null);
-        __decorate([
-            autobind,
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [Boolean]),
-            __metadata("design:returntype", void 0)
-        ], FormOptionsItem.prototype, "setLoading", null);
-        __decorate([
-            autobind,
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [Object, Object, Boolean, Function]),
-            __metadata("design:returntype", Promise)
-        ], FormOptionsItem.prototype, "handleOptionAdd", null);
-        __decorate([
-            autobind,
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [Object, Object, Boolean, Function]),
-            __metadata("design:returntype", Promise)
-        ], FormOptionsItem.prototype, "handleOptionEdit", null);
-        __decorate([
-            autobind,
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [Object, Function]),
-            __metadata("design:returntype", Promise)
-        ], FormOptionsItem.prototype, "handleOptionDelete", null);
         return FormOptionsItem;
-    }(React.Component));
+    }(OptionsControlBase));
     return registerFormItem(__assign(__assign({}, config), { strictMode: false, component: FormOptionsItem }));
 }
 function OptionsControl(config) {
@@ -1034,4 +1041,4 @@ function OptionsControl(config) {
     };
 }
 
-export { OptionsControl, detectProps, registerOptionsControl };
+export { OptionsControl, OptionsControlBase, detectProps, registerOptionsControl };