amis-rev-ui 6.13.0

package/esm/components/formula/Picker.js

@@ -0,0 +1,454 @@
+/**
+ * amis-rev-ui v6.13.0
+ * Copyright 2018-2026 fex
+ */
+
+import { __extends, __awaiter, __generator, __assign, __rest, __read, __decorate, __metadata } from 'tslib';
+import { anyChanged, isExpression, parse, autobind, themeable, localeable, uncontrollable, resolveVariableAndFilterForAsync } from 'amis-rev-core';
+import React__default from 'react';
+import Editor, { FormulaEditor } from './Editor.js';
+import Button from '../Button.js';
+import { Icon } from '../icons.js';
+import FinalModal from '../Modal.js';
+import PopUp from '../PopUp.js';
+import FormulaInput from './Input.js';
+
+var InputSchemaType = [
+    'text',
+    'number',
+    'boolean',
+    'date',
+    'time',
+    'datetime',
+    'select',
+    'custom'
+];
+var FormulaPicker = /** @class */ (function (_super) {
+    __extends(FormulaPicker, _super);
+    function FormulaPicker(props) {
+        var _this = _super.call(this, props) || this;
+        _this.unmounted = false;
+        _this.props.onRef && _this.props.onRef(_this);
+        _this.state = {
+            isOpened: false,
+            value: _this.props.value,
+            editorValue: _this.value2EditorValue(_this.props),
+            isError: false,
+            variables: Array.isArray(props.variables) ? props.variables : []
+        };
+        return _this;
+    }
+    FormulaPicker.prototype.componentDidMount = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var _a, variables, data, list, result;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _a = this.props, variables = _a.variables, data = _a.data;
+                        if (!(typeof variables === 'function')) return [3 /*break*/, 2];
+                        return [4 /*yield*/, variables(this.props)];
+                    case 1:
+                        list = _b.sent();
+                        this.setState({ variables: list });
+                        return [3 /*break*/, 4];
+                    case 2:
+                        if (!(typeof variables === 'string' && isExpression(variables))) return [3 /*break*/, 4];
+                        return [4 /*yield*/, resolveVariableAndFilterForAsync(variables, data, '|raw')];
+                    case 3:
+                        result = _b.sent();
+                        this.setState({ variables: result });
+                        _b.label = 4;
+                    case 4:
+                        this.buildFunctions();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    FormulaPicker.prototype.componentDidUpdate = function (prevProps) {
+        return __awaiter(this, void 0, void 0, function () {
+            var value, _a, variables, data, list, result;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        value = this.props.value;
+                        if (value !== prevProps.value && !this.state.isOpened) {
+                            this.setState({
+                                value: typeof value === 'string' || !this.isTextInput() ? value : '',
+                                editorValue: this.value2EditorValue(this.props)
+                            });
+                        }
+                        if (!anyChanged(['variables', 'data'], this.props, prevProps)) return [3 /*break*/, 5];
+                        _a = this.props, variables = _a.variables, data = _a.data;
+                        if (!(Array.isArray(variables) && variables !== prevProps.variables)) return [3 /*break*/, 1];
+                        this.setState({ variables: variables });
+                        return [3 /*break*/, 5];
+                    case 1:
+                        if (!(typeof variables === 'function')) return [3 /*break*/, 3];
+                        return [4 /*yield*/, variables(this.props)];
+                    case 2:
+                        list = _b.sent();
+                        this.setState({ variables: list });
+                        return [3 /*break*/, 5];
+                    case 3:
+                        if (!(typeof variables === 'string' && isExpression(variables))) return [3 /*break*/, 5];
+                        return [4 /*yield*/, resolveVariableAndFilterForAsync(variables, data, '|raw')];
+                    case 4:
+                        result = _b.sent();
+                        this.setState({ variables: result });
+                        _b.label = 5;
+                    case 5:
+                        if (prevProps.functions !== this.props.functions) {
+                            this.buildFunctions();
+                        }
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    FormulaPicker.prototype.componentWillUnmount = function () {
+        this.unmounted = true;
+    };
+    FormulaPicker.prototype.buildFunctions = function () {
+        return __awaiter(this, arguments, void 0, function (functions, setState) {
+            var functionList;
+            if (functions === void 0) { functions = this.props.functions; }
+            if (setState === void 0) { setState = true; }
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, FormulaEditor.buildFunctions(functions, this.props.functionsFilter)];
+                    case 1:
+                        functionList = _a.sent();
+                        if (this.unmounted) {
+                            return [2 /*return*/];
+                        }
+                        if (!setState) {
+                            return [2 /*return*/, functionList];
+                        }
+                        this.setState({
+                            functions: functionList
+                        });
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    FormulaPicker.prototype.value2EditorValue = function (props) {
+        var value = props.value, mixedMode = props.mixedMode; props.inputSettings;
+        if (mixedMode &&
+            typeof value === 'string' &&
+            /^\s*\$\{([\s\S]+)\}\s*$/.test(value)) {
+            return RegExp.$1;
+        }
+        else if (typeof value !== 'string') {
+            var editorValue = '';
+            try {
+                editorValue = JSON.stringify(value);
+            }
+            catch (error) { }
+            return editorValue;
+        }
+        else {
+            return value
+                ? mixedMode
+                    ? isExpression(value)
+                        ? "`".concat(value.replace(/`/g, '\\`'), "`")
+                        : JSON.stringify(value)
+                    : value
+                : '';
+        }
+    };
+    FormulaPicker.prototype.isTextInput = function () {
+        var inputSettings = this.props.inputSettings;
+        return (!inputSettings ||
+            (inputSettings === null || inputSettings === void 0 ? void 0 : inputSettings.type) === 'text' ||
+            !InputSchemaType.includes(inputSettings === null || inputSettings === void 0 ? void 0 : inputSettings.type));
+    };
+    FormulaPicker.prototype.handleConfirm = function () {
+        var _a, _b;
+        var value = this.state.value;
+        if (this.props.onConfirm) {
+            this.props.onConfirm(value);
+        }
+        else {
+            (_b = (_a = this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, value);
+        }
+    };
+    FormulaPicker.prototype.handleInputChange = function (value) {
+        var _this = this;
+        this.setState({ value: value }, function () { return _this.handleConfirm(); });
+    };
+    FormulaPicker.prototype.handleInputGroupChange = function (e) {
+        var onChange = this.props.onChange;
+        onChange && onChange(e.currentTarget.value);
+    };
+    FormulaPicker.prototype.handleEditorChange = function (value) {
+        this.setState({
+            editorValue: value,
+            isError: false
+        });
+    };
+    FormulaPicker.prototype.handleEditorConfirm = function () {
+        var _a, _b;
+        var _c = this.props; _c.translate; var inputSettings = _c.inputSettings;
+        var editorValue = this.state.editorValue;
+        var ast;
+        try {
+            ast = parse(editorValue, {
+                // mixedMode 弹窗中的一定是表达式
+                evalMode: this.props.mixedMode ? true : this.props.evalMode,
+                allowFilter: false
+            });
+        }
+        catch (error) {
+            this.setState({ isError: (_a = error === null || error === void 0 ? void 0 : error.message) !== null && _a !== void 0 ? _a : true });
+            return;
+        }
+        if ((inputSettings === null || inputSettings === void 0 ? void 0 : inputSettings.type) &&
+            ['boolean', 'number'].includes(inputSettings === null || inputSettings === void 0 ? void 0 : inputSettings.type)) {
+            var result = editorValue;
+            // const schemaType = inputSettings?.type;
+            if (ast.type === 'literal' || ast.type === 'string') {
+                result = (_b = ast.value) !== null && _b !== void 0 ? _b : '';
+            }
+            this.setState({ isError: false });
+            return this.confirm(result);
+        }
+        return this.confirm(editorValue, ast);
+    };
+    FormulaPicker.prototype.confirm = function (value, ast) {
+        var _this = this;
+        var mixedMode = this.props.mixedMode;
+        var stateOnConfirm = this.state.onConfirm;
+        var validate = this.validate(value);
+        if (validate === true) {
+            var result = value;
+            if (mixedMode && typeof value === 'string') {
+                result =
+                    (ast === null || ast === void 0 ? void 0 : ast.type) === 'string'
+                        ? ast.value
+                        : (ast === null || ast === void 0 ? void 0 : ast.type) === 'template' &&
+                            ast.body.length === 1 &&
+                            ast.body[0].type === 'template_raw'
+                            ? ast.body[0].value
+                            : "${".concat(value, "}");
+            }
+            this.setState({ value: result, onConfirm: undefined }, function () {
+                _this.close(undefined, function () {
+                    stateOnConfirm
+                        ? stateOnConfirm(_this.state.value)
+                        : _this.handleConfirm();
+                });
+            });
+        }
+        else {
+            this.setState({ isError: validate });
+        }
+    };
+    FormulaPicker.prototype.handleClick = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                return [2 /*return*/, this.openEditor(this.value2EditorValue(this.props))];
+            });
+        });
+    };
+    FormulaPicker.prototype.openEditor = function (editorValue, onConfirm) {
+        return __awaiter(this, void 0, void 0, function () {
+            var state, _a, _b;
+            var _c, _d;
+            return __generator(this, function (_e) {
+                switch (_e.label) {
+                    case 0:
+                        _a = [{}];
+                        return [4 /*yield*/, ((_d = (_c = this.props).onPickerOpen) === null || _d === void 0 ? void 0 : _d.call(_c, this.props))];
+                    case 1:
+                        state = __assign.apply(void 0, [__assign.apply(void 0, _a.concat([(_e.sent())])), { editorValue: editorValue, isOpened: true, onConfirm: onConfirm }]);
+                        if (!state.functions) return [3 /*break*/, 3];
+                        _b = state;
+                        return [4 /*yield*/, this.buildFunctions(state.functions, false)];
+                    case 2:
+                        _b.functions = _e.sent();
+                        _e.label = 3;
+                    case 3:
+                        this.setState(state);
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    FormulaPicker.prototype.close = function (e, callback) {
+        this.setState({
+            isOpened: false,
+            isError: false
+        }, function () {
+            if (callback) {
+                callback();
+                return;
+            }
+        });
+    };
+    FormulaPicker.prototype.updateState = function (state) {
+        if (state === void 0) { state = {}; }
+        state.isOpened; var rest = __rest(state, ["isOpened"]);
+        this.setState(__assign(__assign({}, this.state), rest));
+    };
+    FormulaPicker.prototype.validate = function (value) {
+        var _a = this.props, __ = _a.translate, inputSettings = _a.inputSettings;
+        /** 处理非文本输入场景 */
+        if (inputSettings && !this.isTextInput()) {
+            var schemaType = inputSettings === null || inputSettings === void 0 ? void 0 : inputSettings.type;
+            var errorMsg = __('FormulaEditor.invalidValue');
+            /** 变量类型 */
+            if (typeof value === 'string') {
+                return true;
+            }
+            if (['number', 'boolean'].includes(schemaType)) {
+                return typeof value === schemaType ? true : errorMsg;
+            }
+            else if (['text', 'date', 'time', 'datetime'].includes(schemaType)) {
+                return typeof value === 'string' ? true : errorMsg;
+            }
+            else if (schemaType === 'select' && inputSettings.multiple) {
+                return Array.isArray(value) ? true : errorMsg;
+            }
+            else {
+                return true;
+            }
+        }
+        try {
+            value &&
+                parse(value, {
+                    // mixedMode 值是模版， 要 ${} 包裹表达式
+                    evalMode: this.props.mixedMode ? false : this.props.evalMode,
+                    allowFilter: false
+                });
+            return true;
+        }
+        catch (e) {
+            if (/\s(\d+:\d+)$/.test(e.message)) {
+                var _b = __read(/\s(\d+:\d+)$/.exec(e.message) || [], 2), position = _b[1];
+                return position;
+            }
+            return e.message;
+        }
+    };
+    FormulaPicker.prototype.render = function () {
+        var _a, _b, _c;
+        var _d, _e, _f, _g, _h, _j, _k, _l;
+        var _m = this.props, cx = _m.classnames, __ = _m.translate, disabled = _m.disabled, className = _m.className, style = _m.style; _m.onChange; _m.size; var borderMode = _m.borderMode, placeholder = _m.placeholder, _o = _m.mode, mode = _o === void 0 ? 'input-button' : _o, btnLabel = _m.btnLabel, level = _m.level, btnSize = _m.btnSize, icon = _m.icon, title = _m.title, clearable = _m.clearable, functions = _m.functions, children = _m.children, variableMode = _m.variableMode, mixedMode = _m.mixedMode, evalMode = _m.evalMode, popOverContainer = _m.popOverContainer, mobileUI = _m.mobileUI, inputSettings = _m.inputSettings, customInputRender = _m.customInputRender, rest = __rest(_m, ["classnames", "translate", "disabled", "className", "style", "onChange", "size", "borderMode", "placeholder", "mode", "btnLabel", "level", "btnSize", "icon", "title", "clearable", "functions", "children", "variableMode", "mixedMode", "evalMode", "popOverContainer", "mobileUI", "inputSettings", "customInputRender"]);
+        var _p = this.state, isOpened = _p.isOpened, value = _p.value, editorValue = _p.editorValue, isError = _p.isError;
+        var iconElement = React__default.createElement(Icon, { cx: cx, icon: icon, className: "Icon" });
+        return (React__default.createElement(React__default.Fragment, null,
+            children ? (children({
+                isOpened: this.state.isOpened,
+                onClick: this.handleClick,
+                setState: this.updateState,
+                value: value,
+                onChange: this.handleInputChange,
+                disabled: disabled
+            })) : (React__default.createElement("div", { className: cx('FormulaPicker', mode === 'input-group' ? 'is-input-group' : '', {
+                    'FormulaPicker--text': this.isTextInput()
+                }, className), style: style },
+                mode === 'button' && (React__default.createElement(Button, { className: cx('FormulaPicker-action', 'w-full'), level: level, size: btnSize, active: !!value, onClick: this.handleClick },
+                    iconElement ? (React__default.cloneElement(iconElement, {
+                        className: cx((_e = (_d = iconElement === null || iconElement === void 0 ? void 0 : iconElement.props) === null || _d === void 0 ? void 0 : _d.className) !== null && _e !== void 0 ? _e : '', 'FormulaPicker-icon', (_a = {},
+                            _a['is-filled'] = !!value,
+                            _a))
+                    })) : (React__default.createElement(Icon, { icon: "function", className: cx('FormulaPicker-icon', 'icon', (_b = {},
+                            _b['is-filled'] = !!value,
+                            _b)) })),
+                    React__default.createElement("span", { className: cx('FormulaPicker-label') }, __(btnLabel || 'FormulaEditor.btnLabel')))),
+                mode === 'input-button' && (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement(FormulaInput, { className: cx('FormulaPicker-input', isOpened ? 'is-active' : '', !!isError ? 'is-error' : ''), inputSettings: inputSettings, customInputRender: customInputRender, clearable: clearable, evalMode: mixedMode ? false : evalMode, variables: this.state.variables, functions: (_f = this.state.functions) !== null && _f !== void 0 ? _f : functions, value: value, onChange: this.handleInputChange, disabled: disabled, borderMode: borderMode, placeholder: placeholder }),
+                    React__default.createElement(Button, { className: cx('FormulaPicker-action'), onClick: this.handleClick },
+                        React__default.createElement(Icon, { icon: "function", className: cx('FormulaPicker-icon', 'icon', (_c = {},
+                                _c['is-filled'] = !!value,
+                                _c)) })))),
+                mode === 'input-group' && (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement(FormulaInput, { className: cx('FormulaPicker-input', isOpened ? 'is-active' : '', !!isError ? 'is-error' : ''), inputSettings: inputSettings, customInputRender: customInputRender, clearable: clearable, evalMode: mixedMode ? false : evalMode, variables: this.state.variables, functions: (_g = this.state.functions) !== null && _g !== void 0 ? _g : functions, value: value, onChange: this.handleInputChange, disabled: disabled, borderMode: borderMode, placeholder: placeholder }),
+                    React__default.createElement("a", { className: cx("FormulaPicker-toggler"), onClick: this.handleClick },
+                        React__default.createElement(Icon, { icon: "function", className: "icon" })))))),
+            mobileUI ? (React__default.createElement(PopUp, { className: cx("FormulaPicker-popup"), isShow: this.state.isOpened, showConfirm: true, onHide: this.close, onConfirm: this.handleEditorConfirm, container: popOverContainer },
+                React__default.createElement("div", { className: cx('FormulaPicker-popup-inner') },
+                    React__default.createElement(Editor, __assign({}, rest, { evalMode: mixedMode ? true : evalMode, variables: this.state.variables, functions: (_h = this.state.functions) !== null && _h !== void 0 ? _h : functions, variableMode: (_j = this.state.variableMode) !== null && _j !== void 0 ? _j : variableMode, value: editorValue, onChange: this.handleEditorChange, selfVariableName: this.props.selfVariableName })),
+                    !!isError ? (React__default.createElement("div", { className: cx('Dialog-info'), key: "info" },
+                        React__default.createElement("span", { className: cx('Dialog-error') }, __('FormulaEditor.invalidData', { err: isError })))) : null))) : (React__default.createElement(FinalModal, { size: "lg", closeOnEsc: true, show: this.state.isOpened, onHide: this.close, container: popOverContainer },
+                React__default.createElement(FinalModal.Header, { onClose: this.close, className: "font-bold" }, __(title || 'FormulaEditor.title')),
+                React__default.createElement(FinalModal.Body, null,
+                    React__default.createElement(Editor, __assign({}, rest, { evalMode: mixedMode ? true : evalMode, variables: this.state.variables, functions: (_k = this.state.functions) !== null && _k !== void 0 ? _k : functions, variableMode: (_l = this.state.variableMode) !== null && _l !== void 0 ? _l : variableMode, value: editorValue, onChange: this.handleEditorChange, selfVariableName: this.props.selfVariableName }))),
+                React__default.createElement(FinalModal.Footer, null,
+                    !!isError ? (React__default.createElement("div", { className: cx('Dialog-info'), key: "info" },
+                        React__default.createElement("span", { className: cx('Dialog-error') }, __('FormulaEditor.invalidData', { err: isError })))) : null,
+                    React__default.createElement(Button, { onClick: this.close }, __('cancel')),
+                    React__default.createElement(Button, { onClick: this.handleEditorConfirm, level: "primary" }, __('confirm')))))));
+    };
+    FormulaPicker.defaultProps = {
+        evalMode: true
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], FormulaPicker.prototype, "handleConfirm", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [String]),
+        __metadata("design:returntype", void 0)
+    ], FormulaPicker.prototype, "handleInputChange", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], FormulaPicker.prototype, "handleInputGroupChange", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [String]),
+        __metadata("design:returntype", void 0)
+    ], FormulaPicker.prototype, "handleEditorChange", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], FormulaPicker.prototype, "handleEditorConfirm", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", Promise)
+    ], FormulaPicker.prototype, "handleClick", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [String, Function]),
+        __metadata("design:returntype", Promise)
+    ], FormulaPicker.prototype, "openEditor", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object, Function]),
+        __metadata("design:returntype", void 0)
+    ], FormulaPicker.prototype, "close", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], FormulaPicker.prototype, "updateState", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [String]),
+        __metadata("design:returntype", void 0)
+    ], FormulaPicker.prototype, "validate", null);
+    return FormulaPicker;
+}(React__default.Component));
+var FormulaPicker$1 = themeable(localeable(uncontrollable(FormulaPicker, {
+    value: 'onChange'
+})));
+
+export { FormulaPicker, InputSchemaType, FormulaPicker$1 as default };

package/esm/components/formula/VariableList.js

@@ -0,0 +1,185 @@
+/**
+ * amis-rev-ui v6.13.0
+ * Copyright 2018-2026 fex
+ */
+
+import { __read, __assign } from 'tslib';
+import React__default from 'react';
+import { themeable, mapTree, filterTree } from 'amis-rev-core';
+import GroupedSelection from '../GroupedSelection.js';
+import ThemedTabs, { Tab } from '../Tabs.js';
+import TreeSelection from '../TreeSelection.js';
+import SearchBox from '../SearchBox.js';
+import { Icon } from '../icons.js';
+import { Badge } from '../Badge.js';
+import { PopOverContainer } from '../PopOverContainer.js';
+import { matchSorter } from 'match-sorter';
+import TooltipWrapper from '../TooltipWrapper.js';
+
+// 数组成员读取
+var memberOpers = [
+    {
+        label: '取列值',
+        value: 'ARRAYMAP(${arr}, item => item.${member})',
+        description: '取当前列的所有值（数组）'
+    },
+    {
+        label: '取条件值',
+        value: 'ARRAYFILTER(ARRAYMAP(${arr}, item => item.${member}), item => item === 条件)',
+        description: '取当前列中符合配置条件的值（数组）'
+    },
+    {
+        label: '取表值',
+        value: 'ARRAYFILTER(${arr}, item => item.${member} === 条件)',
+        description: '取列表中符合配置条件的值（数组）'
+    },
+    {
+        label: '计数',
+        value: 'COUNT(ARRAYFILTER(${arr}, item => item.${member} === 条件))',
+        description: '统计表中符合配置条件的值的总数'
+    },
+    {
+        label: '去重计数',
+        value: 'COUNT(UNIQ(${arr}, item.${member}))',
+        description: '对表中当前值进行去重，并统计去重后的值的数量',
+        simple: true
+    },
+    {
+        label: '求和',
+        value: 'SUM(ARRAYMAP(${arr}, item => item.${member}))',
+        description: '求当前列的所有值之和',
+        simple: true
+    },
+    {
+        label: '平均值',
+        value: 'AVG(ARRAYMAP(${arr}, item => item.${member}))',
+        description: '求当前列的平均值',
+        simple: true
+    },
+    {
+        label: '最大值',
+        value: 'MAX(ARRAYMAP(${arr}, item => item.${member}))',
+        description: '取当前列的最大值',
+        simple: true
+    },
+    {
+        label: '最小值',
+        value: 'MIN(ARRAYMAP(${arr}, item => item.${member}))',
+        description: '取当前列的最小值',
+        simple: true
+    }
+];
+function VariableList(props) {
+    var variableListRef = React__default.useRef(null);
+    var className = props.className, cx = props.classnames, _a = props.tabsMode, tabsMode = _a === void 0 ? 'line' : _a, themePrefix = props.classPrefix, itemClassName = props.itemClassName, selectMode = props.selectMode, onSelect = props.onSelect, placeholderRender = props.placeholderRender, selfVariableName = props.selfVariableName, expandTree = props.expandTree, simplifyMemberOprs = props.simplifyMemberOprs, popOverContainer = props.popOverContainer;
+    var _b = __read(React__default.useState([]), 2), variables = _b[0], setVariables = _b[1];
+    var _c = __read(React__default.useState([]), 2), filterVars = _c[0], setFilterVars = _c[1];
+    var classPrefix = "".concat(themePrefix, "FormulaEditor-VariableList");
+    React__default.useEffect(function () {
+        // 追加path，用于分级高亮
+        var list = mapTree(props.data, function (item, key, level, paths) {
+            var _a;
+            var path = paths === null || paths === void 0 ? void 0 : paths.reduce(function (prev, item) {
+                var _a;
+                return !item.value
+                    ? prev
+                    : "".concat(prev).concat(prev ? '.' : '').concat((_a = item.label) !== null && _a !== void 0 ? _a : item.value);
+            }, '');
+            return __assign(__assign(__assign({}, item), { path: "".concat(path).concat(path ? '.' : '').concat(item.label) }), (item.isMember || paths.some(function (item) { return item.isMember; })
+                ? {
+                    memberDepth: (_a = paths === null || paths === void 0 ? void 0 : paths.filter(function (item) { return item.type === 'array'; })) === null || _a === void 0 ? void 0 : _a.length
+                }
+                : {}));
+        });
+        setVariables(list);
+        setFilterVars(list);
+    }, [props.data]);
+    var itemRender = props.itemRender && typeof props.itemRender === 'function'
+        ? props.itemRender
+        : function (option, states) {
+            var _a;
+            return (React__default.createElement("div", { key: states.index },
+                React__default.createElement("div", { className: cx("".concat(classPrefix, "-item"), itemClassName) },
+                    option.label &&
+                        selfVariableName &&
+                        option.value === selfVariableName && (React__default.createElement(Badge, { classnames: cx, badge: {
+                            mode: 'text',
+                            text: 'self',
+                            offset: [15, 2]
+                        } },
+                        React__default.createElement("label", null, option.label))),
+                    option.memberDepth === undefined &&
+                        option.label &&
+                        (!selfVariableName || option.value !== selfVariableName) && (React__default.createElement(TooltipWrapper, { tooltip: (_a = option.description) !== null && _a !== void 0 ? _a : option.label, tooltipTheme: "dark" },
+                        React__default.createElement("label", null, option.label))),
+                    option.memberDepth !== undefined &&
+                        option.label &&
+                        (!selfVariableName || option.value !== selfVariableName) ? (option.memberDepth < 2 ? (React__default.createElement(PopOverContainer, { popOverContainer: popOverContainer ||
+                            (function () {
+                                return document.querySelector(".".concat(cx('FormulaPicker-Modal')));
+                            }), popOverRender: function (_a) {
+                            var onClose = _a.onClose;
+                            return (React__default.createElement("ul", { className: cx("".concat(classPrefix, "-item-oper")) }, memberOpers
+                                .filter(function (item) { return !simplifyMemberOprs || item.simple; })
+                                .map(function (item, i) {
+                                return (React__default.createElement(TooltipWrapper, { key: i, tooltip: item.description, tooltipTheme: "dark" },
+                                    React__default.createElement("li", { key: i, onClick: function () {
+                                            return handleMemberClick(__assign(__assign({}, item), { isMember: true }), option, onClose);
+                                        } },
+                                        React__default.createElement("span", null, item.label))));
+                            })));
+                        } }, function (_a) {
+                        var _b;
+                        var onClick = _a.onClick; _a.ref; _a.isOpened;
+                        return (React__default.createElement(TooltipWrapper, { tooltip: (_b = option.description) !== null && _b !== void 0 ? _b : option.label, tooltipTheme: "dark" },
+                            React__default.createElement(React__default.Fragment, null,
+                                React__default.createElement("label", { onClick: onClick }, option.label),
+                                React__default.createElement(Icon, { onClick: onClick, icon: "ellipsis-v", className: "icon" }))));
+                    })) : (React__default.createElement("label", null, option.label))) : null,
+                    (option === null || option === void 0 ? void 0 : option.tag) ? (React__default.createElement("span", { className: cx("".concat(classPrefix, "-item-tag")) }, option.tag)) : null)));
+        };
+    function handleMemberClick(item, option, onClose) {
+        // todo：暂时只提供一层的快捷操作
+        var lastPointIdx = option.value.lastIndexOf('.');
+        // const firstPointIdx = option.value.indexOf('.');
+        var arr = option.value.substring(0, lastPointIdx);
+        var member = option.value.substring(lastPointIdx + 1);
+        var value = item.value
+            .replace('${arr}', arr)
+            .replace('${member}', member);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(__assign(__assign({}, item), { label: value, value: value }));
+    }
+    function onSearch(term) {
+        term = term.trim();
+        var tree = filterTree(variables, function (i, key, level, paths) {
+            return !!((Array.isArray(i.children) && i.children.length) ||
+                !!matchSorter([i].concat(paths), term, {
+                    keys: ['label', 'value'],
+                    threshold: matchSorter.rankings.CONTAINS
+                }).length);
+        }, 1, true);
+        setFilterVars(!term ? variables : tree);
+    }
+    function renderSearchBox() {
+        return (React__default.createElement("div", { className: cx('FormulaEditor-VariableList-searchBox') },
+            React__default.createElement(SearchBox, { mini: false, onSearch: onSearch, mobileUI: props.mobileUI })));
+    }
+    function handleChange(item) {
+        // 允许所有有 value 的元素被点击插入
+        // 注释掉原来的阻止逻辑，允许 isMember 元素直接点击
+        // if (item.isMember || item.memberDepth !== undefined) {
+        //   return;
+        // }
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(item);
+    }
+    return (React__default.createElement("div", { className: cx(className, 'FormulaEditor-VariableList', selectMode && "FormulaEditor-VariableList-".concat(selectMode)), ref: variableListRef }, selectMode === 'tabs' ? (React__default.createElement(ThemedTabs, { tabsMode: tabsMode, className: cx("".concat(classPrefix, "-base ").concat(classPrefix, "-tabs")) }, filterVars.map(function (item, index) { return (React__default.createElement(Tab, { className: cx("".concat(classPrefix, "-tab")), eventKey: index, key: index, title: item.label },
+        React__default.createElement(VariableList, { classnames: cx, classPrefix: "".concat(classPrefix, "-sub-"), className: cx("".concat(classPrefix, "-sub")), itemRender: itemRender, placeholderRender: placeholderRender, selectMode: item.selectMode, data: item.children, onSelect: handleChange, selfVariableName: selfVariableName }))); }))) : selectMode === 'tree' ? (React__default.createElement("div", { className: cx('FormulaEditor-VariableList-body') },
+        renderSearchBox(),
+        React__default.createElement(TreeSelection, { itemRender: itemRender, placeholderRender: placeholderRender, className: cx("".concat(classPrefix, "-base"), 'is-scrollable'), multiple: false, expand: expandTree ? 'all' : 'none', options: filterVars, onChange: function (item) { return handleChange(item); } }))) : (React__default.createElement("div", { className: cx('FormulaEditor-VariableList-body') },
+        renderSearchBox(),
+        React__default.createElement(GroupedSelection, { itemRender: itemRender, placeholderRender: placeholderRender, className: cx("".concat(classPrefix, "-base"), 'is-scrollable'), multiple: false, options: filterVars, onChange: function (item) { return handleChange(item); } })))));
+}
+var VariableList$1 = themeable(VariableList);
+
+export { VariableList$1 as default };