amis 1.6.2 → 1.6.3

package/lib/components/formula/Editor.js

@@ -7,13 +7,13 @@ var tslib_1 = require("tslib");
  */
 var react_1 = (0, tslib_1.__importDefault)(require("react"));
 var uncontrollable_1 = require("uncontrollable");
-var plugin_1 = require("./plugin");
+var amis_formula_1 = require("amis-formula");
 var doc_1 = require("amis-formula/dist/doc");
+var plugin_1 = require("./plugin");
 var FuncList_1 = (0, tslib_1.__importDefault)(require("./FuncList"));
 var VariableList_1 = require("./VariableList");
-var amis_formula_1 = require("amis-formula");
-var helper_1 = require("../../utils/helper");
 var CodeMirror_1 = (0, tslib_1.__importDefault)(require("../CodeMirror"));
+var helper_1 = require("../../utils/helper");
 var theme_1 = require("../../theme");
 var locale_1 = require("../../locale");
 var FormulaEditor = /** @class */ (function (_super) {
@@ -46,8 +46,8 @@ var FormulaEditor = /** @class */ (function (_super) {
         return value;
     };
     FormulaEditor.prototype.componentWillUnmount = function () {
-        var _b;
-        (_b = this.editorPlugin) === null || _b === void 0 ? void 0 : _b.dispose();
+        var _a;
+        (_a = this.editorPlugin) === null || _a === void 0 ? void 0 : _a.dispose();
     };
     FormulaEditor.prototype.handleFocus = function () {
         this.setState({
@@ -60,8 +60,8 @@ var FormulaEditor = /** @class */ (function (_super) {
         });
     };
     FormulaEditor.prototype.insertValue = function (value, type) {
-        var _b;
-        (_b = this.editorPlugin) === null || _b === void 0 ? void 0 : _b.insertContent(value, type);
+        var _a;
+        (_a = this.editorPlugin) === null || _a === void 0 ? void 0 : _a.insertContent(value, type);
     };
     FormulaEditor.prototype.handleEditorMounted = function (cm, editor) {
         var _this = this;
@@ -82,12 +82,12 @@ var FormulaEditor = /** @class */ (function (_super) {
         return;
     };
     FormulaEditor.prototype.handleFunctionSelect = function (item) {
-        var _b;
-        (_b = this.editorPlugin) === null || _b === void 0 ? void 0 : _b.insertContent("" + item.name, 'func');
+        var _a;
+        (_a = this.editorPlugin) === null || _a === void 0 ? void 0 : _a.insertContent("" + item.name, 'func');
     };
     FormulaEditor.prototype.handleVariableSelect = function (item) {
-        var _b;
-        (_b = this.editorPlugin) === null || _b === void 0 ? void 0 : _b.insertContent({
+        var _a;
+        (_a = this.editorPlugin) === null || _a === void 0 ? void 0 : _a.insertContent({
             key: item.value,
             name: item.label
         }, 'variable');
@@ -100,27 +100,24 @@ var FormulaEditor = /** @class */ (function (_super) {
         return (0, plugin_1.editorFactory)(dom, cm, this.props);
     };
     FormulaEditor.prototype.render = function () {
-        var _b = this.props, variables = _b.variables, header = _b.header, value = _b.value, functions = _b.functions, variableMode = _b.variableMode, cx = _b.classnames;
+        var _a = this.props, variables = _a.variables, header = _a.header, value = _a.value, functions = _a.functions, variableMode = _a.variableMode, __ = _a.translate, cx = _a.classnames, variableClassName = _a.variableClassName, functionClassName = _a.functionClassName, classPrefix = _a.classPrefix;
         var focused = this.state.focused;
         return (react_1.default.createElement("div", { className: cx("FormulaEditor", {
                 'is-focused': focused
             }) },
-            react_1.default.createElement("div", { className: cx("FormulaEditor-content") },
-                react_1.default.createElement("div", { className: cx("FormulaEditor-header") }, header !== null && header !== void 0 ? header : '表达式'),
+            react_1.default.createElement("section", { className: cx("FormulaEditor-content") },
+                react_1.default.createElement("header", { className: cx("FormulaEditor-header") }, __(header || 'FormulaEditor.title')),
                 react_1.default.createElement(CodeMirror_1.default, { className: cx('FormulaEditor-editor'), value: value, onChange: this.handleOnChange, editorFactory: this.editorFactory, editorDidMount: this.handleEditorMounted, onFocus: this.handleFocus, onBlur: this.handleBlur })),
-            react_1.default.createElement("div", { className: cx('FormulaEditor-settings') },
-                Array.isArray(functions) && functions.length ? (react_1.default.createElement("div", null,
-                    react_1.default.createElement("h3", null, "\u53D8\u91CF"),
-                    react_1.default.createElement(VariableList_1.VariableList, { className: cx('VariableList'), selectMode: variableMode, data: variables, onSelect: this.handleVariableSelect }))) : null,
-                Array.isArray(variables) && variables.length ? (react_1.default.createElement("div", null,
-                    react_1.default.createElement("h3", null, "\u51FD\u6570"),
-                    react_1.default.createElement(FuncList_1.default, { data: functions, onSelect: this.handleFunctionSelect }))) : null)));
+            react_1.default.createElement("section", { className: cx('FormulaEditor-settings') },
+                react_1.default.createElement("div", { className: cx('FormulaEditor-panel') },
+                    react_1.default.createElement("div", { className: cx('FormulaEditor-panel-header') }, __('FormulaEditor.variable')),
+                    react_1.default.createElement("div", { className: cx('FormulaEditor-panel-body') },
+                        react_1.default.createElement(VariableList_1.VariableList, { classPrefix: classPrefix, className: cx('FormulaEditor-VariableList', 'FormulaEditor-VariableList-root', variableClassName), selectMode: variableMode, data: variables, onSelect: this.handleVariableSelect }))),
+                react_1.default.createElement(FuncList_1.default, { className: functionClassName, title: __('FormulaEditor.function'), data: functions, onSelect: this.handleFunctionSelect }))));
     };
     var _a;
-    var _b;
-    _a = FormulaEditor;
     FormulaEditor.defaultProps = {
-        functions: _a.buildDefaultFunctions(doc_1.doc),
+        functions: FormulaEditor.buildDefaultFunctions(doc_1.doc),
         variables: [],
         evalMode: true
     };
@@ -175,7 +172,7 @@ var FormulaEditor = /** @class */ (function (_super) {
     (0, tslib_1.__decorate)([
         helper_1.autobind,
         (0, tslib_1.__metadata)("design:type", Function),
-        (0, tslib_1.__metadata)("design:paramtypes", [typeof (_b = typeof HTMLElement !== "undefined" && HTMLElement) === "function" ? _b : Object, Object]),
+        (0, tslib_1.__metadata)("design:paramtypes", [typeof (_a = typeof HTMLElement !== "undefined" && HTMLElement) === "function" ? _a : Object, Object]),
         (0, tslib_1.__metadata)("design:returntype", void 0)
     ], FormulaEditor.prototype, "editorFactory", null);
     return FormulaEditor;

package/lib/components/formula/Editor.js.map

@@ -6,8 +6,8 @@
         "/src/components/formula/Editor.tsx"
     ],
     "names": [],
-    "mappings": "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",
+    "mappings": "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",
     "sourcesContent": [
-        "/**\n * @file 公式编辑器\n */\nimport React from 'react';\nimport {uncontrollable} from 'uncontrollable';\nimport {FormulaPlugin, editorFactory} from './plugin';\nimport {doc} from 'amis-formula/dist/doc';\nimport FuncList from './FuncList';\nimport {VariableList} from './VariableList';\nimport {parse} from 'amis-formula';\nimport {autobind} from '../../utils/helper';\nimport CodeMirrorEditor from '../CodeMirror';\nimport {themeable, ThemeProps} from '../../theme';\nimport {localeable, LocaleProps} from '../../locale';\n\nexport interface VariableItem {\n  label: string;\n  value?: string;\n  children?: Array<VariableItem>;\n  selectMode?: 'tree' | 'tabs';\n}\n\nexport interface FuncGroup {\n  groupName: string;\n  items: Array<FuncItem>;\n}\n\nexport interface FuncItem {\n  name: string;\n  [propName: string]: any;\n}\n\nexport interface FormulaEditorProps extends ThemeProps, LocaleProps {\n  onChange?: (value: string) => void;\n  value: string;\n  /**\n   * evalMode 即直接就是表达式，否则\n   * 需要 ${这里面才是表达式}\n   * 默认为 true\n   */\n  evalMode?: boolean;\n\n  /**\n   * 用于提示的变量集合，默认为空\n   */\n  variables: Array<VariableItem>;\n\n  /**\n   * 变量展现模式，可选值：'tabs' ｜ 'tree'\n   */\n  variableMode?: 'tabs' | 'tree';\n\n  /**\n   * 函数集合，默认不需要传，即  amis-formula 里面那个函数\n   * 如果有扩充，则需要传。\n   */\n  functions: Array<FuncGroup>;\n\n  /**\n   * 顶部标题，默认为表达式\n   */\n  header: string;\n}\n\nexport interface FunctionsProps {\n  name: string;\n  items: FunctionProps[];\n}\n\nexport interface FunctionProps {\n  name: string;\n  intro: string;\n  usage: string;\n  example: string;\n}\n\nexport interface FormulaState {\n  focused: boolean;\n}\n\nexport class FormulaEditor extends React.Component<\n  FormulaEditorProps,\n  FormulaState\n> {\n  state: FormulaState = {\n    focused: false\n  };\n  editorPlugin?: FormulaPlugin;\n\n  static buildDefaultFunctions(\n    doc: Array<{\n      namespace: string;\n      name: string;\n      [propName: string]: any;\n    }>\n  ) {\n    const funcs: Array<FuncGroup> = [];\n\n    doc.forEach(item => {\n      const namespace = item.namespace || 'Others';\n      let exists = funcs.find(item => item.groupName === namespace);\n      if (!exists) {\n        exists = {\n          groupName: namespace,\n          items: []\n        };\n        funcs.push(exists);\n      }\n      exists.items.push(item);\n    });\n\n    return funcs;\n  }\n\n  static defaultProps: Pick<\n    FormulaEditorProps,\n    'functions' | 'variables' | 'evalMode'\n  > = {\n    functions: this.buildDefaultFunctions(doc),\n    variables: [],\n    evalMode: true\n  };\n\n  static highlightValue(\n    value: string,\n    variables: Array<VariableItem>,\n    functions: Array<FuncGroup>\n  ) {\n    // todo 高亮原始文本\n    return value;\n  }\n\n  componentWillUnmount() {\n    this.editorPlugin?.dispose();\n  }\n\n  @autobind\n  handleFocus() {\n    this.setState({\n      focused: true\n    });\n  }\n\n  @autobind\n  handleBlur() {\n    this.setState({\n      focused: false\n    });\n  }\n\n  @autobind\n  insertValue(value: any, type: 'variable' | 'func') {\n    this.editorPlugin?.insertContent(value, type);\n  }\n\n  @autobind\n  handleEditorMounted(cm: any, editor: any) {\n    this.editorPlugin = new FormulaPlugin(editor, cm, () => this.props);\n  }\n\n  @autobind\n  validate() {\n    const value = this.props.value;\n\n    try {\n      value\n        ? parse(value, {\n            evalMode: this.props.evalMode\n          })\n        : null;\n    } catch (e) {\n      return e.message;\n    }\n\n    return;\n  }\n\n  @autobind\n  handleFunctionSelect(item: FuncItem) {\n    this.editorPlugin?.insertContent(`${item.name}`, 'func');\n  }\n\n  @autobind\n  handleVariableSelect(item: VariableItem) {\n    this.editorPlugin?.insertContent(\n      {\n        key: item.value,\n        name: item.label\n      },\n      'variable'\n    );\n  }\n\n  @autobind\n  handleOnChange(value: any) {\n    const onChange = this.props.onChange;\n    onChange?.(value);\n  }\n\n  @autobind\n  editorFactory(dom: HTMLElement, cm: any) {\n    return editorFactory(dom, cm, this.props);\n  }\n\n  render() {\n    const {\n      variables,\n      header,\n      value,\n      functions,\n      variableMode,\n      classnames: cx\n    } = this.props;\n    const {focused} = this.state;\n\n    return (\n      <div\n        className={cx(`FormulaEditor`, {\n          'is-focused': focused\n        })}\n      >\n        <div className={cx(`FormulaEditor-content`)}>\n          <div className={cx(`FormulaEditor-header`)}>{header ?? '表达式'}</div>\n\n          <CodeMirrorEditor\n            className={cx('FormulaEditor-editor')}\n            value={value}\n            onChange={this.handleOnChange}\n            editorFactory={this.editorFactory}\n            editorDidMount={this.handleEditorMounted}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          ></CodeMirrorEditor>\n        </div>\n\n        <div className={cx('FormulaEditor-settings')}>\n          {Array.isArray(functions) && functions.length ? (\n            <div>\n              <h3>变量</h3>\n              <VariableList\n                className={cx('VariableList')}\n                selectMode={variableMode}\n                data={variables}\n                onSelect={this.handleVariableSelect}\n              />\n            </div>\n          ) : null}\n          {Array.isArray(variables) && variables.length ? (\n            <div>\n              <h3>函数</h3>\n              <FuncList data={functions} onSelect={this.handleFunctionSelect} />\n            </div>\n          ) : null}\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default uncontrollable(\n  themeable(localeable(FormulaEditor)),\n  {\n    value: 'onChange'\n  },\n  ['validate']\n);\n"
+        "/**\n * @file 公式编辑器\n */\nimport React from 'react';\nimport {uncontrollable} from 'uncontrollable';\nimport {parse} from 'amis-formula';\nimport {doc} from 'amis-formula/dist/doc';\n\nimport {FormulaPlugin, editorFactory} from './plugin';\nimport FuncList from './FuncList';\nimport {VariableList} from './VariableList';\nimport CodeMirrorEditor from '../CodeMirror';\nimport {autobind} from '../../utils/helper';\nimport {themeable, ThemeProps} from '../../theme';\nimport {localeable, LocaleProps} from '../../locale';\n\nexport interface VariableItem {\n  label: string;\n  value?: string;\n  children?: Array<VariableItem>;\n  type: '';\n  tag?: string;\n  selectMode?: 'tree' | 'tabs';\n}\n\nexport interface FuncGroup {\n  groupName: string;\n  items: Array<FuncItem>;\n}\n\nexport interface FuncItem {\n  name: string;\n  [propName: string]: any;\n}\n\nexport interface FormulaEditorProps extends ThemeProps, LocaleProps {\n  onChange?: (value: string) => void;\n  value: string;\n  /**\n   * evalMode 即直接就是表达式，否则\n   * 需要 ${这里面才是表达式}\n   * 默认为 true\n   */\n  evalMode?: boolean;\n\n  /**\n   * 用于提示的变量集合，默认为空\n   */\n  variables: Array<VariableItem>;\n\n  /**\n   * 变量展现模式，可选值：'tabs' ｜ 'tree'\n   */\n  variableMode?: 'tabs' | 'tree';\n\n  /**\n   * 函数集合，默认不需要传，即  amis-formula 里面那个函数\n   * 如果有扩充，则需要传。\n   */\n  functions: Array<FuncGroup>;\n\n  /**\n   * 顶部标题，默认为表达式\n   */\n  header: string;\n\n  variableClassName?: string;\n\n  functionClassName?: string;\n}\n\nexport interface FunctionsProps {\n  name: string;\n  items: FunctionProps[];\n}\n\nexport interface FunctionProps {\n  name: string;\n  intro: string;\n  usage: string;\n  example: string;\n}\n\nexport interface FormulaState {\n  focused: boolean;\n}\n\nexport class FormulaEditor extends React.Component<\n  FormulaEditorProps,\n  FormulaState\n> {\n  state: FormulaState = {\n    focused: false\n  };\n  editorPlugin?: FormulaPlugin;\n\n  static buildDefaultFunctions(\n    doc: Array<{\n      namespace: string;\n      name: string;\n      [propName: string]: any;\n    }>\n  ) {\n    const funcs: Array<FuncGroup> = [];\n\n    doc.forEach(item => {\n      const namespace = item.namespace || 'Others';\n      let exists = funcs.find(item => item.groupName === namespace);\n      if (!exists) {\n        exists = {\n          groupName: namespace,\n          items: []\n        };\n        funcs.push(exists);\n      }\n      exists.items.push(item);\n    });\n\n    return funcs;\n  }\n\n  static defaultProps: Pick<\n    FormulaEditorProps,\n    'functions' | 'variables' | 'evalMode'\n  > = {\n    functions: FormulaEditor.buildDefaultFunctions(doc),\n    variables: [],\n    evalMode: true\n  };\n\n  static highlightValue(\n    value: string,\n    variables: Array<VariableItem>,\n    functions: Array<FuncGroup>\n  ) {\n    // todo 高亮原始文本\n    return value;\n  }\n\n  componentWillUnmount() {\n    this.editorPlugin?.dispose();\n  }\n\n  @autobind\n  handleFocus() {\n    this.setState({\n      focused: true\n    });\n  }\n\n  @autobind\n  handleBlur() {\n    this.setState({\n      focused: false\n    });\n  }\n\n  @autobind\n  insertValue(value: any, type: 'variable' | 'func') {\n    this.editorPlugin?.insertContent(value, type);\n  }\n\n  @autobind\n  handleEditorMounted(cm: any, editor: any) {\n    this.editorPlugin = new FormulaPlugin(editor, cm, () => this.props);\n  }\n\n  @autobind\n  validate() {\n    const value = this.props.value;\n\n    try {\n      value\n        ? parse(value, {\n            evalMode: this.props.evalMode\n          })\n        : null;\n    } catch (e) {\n      return e.message;\n    }\n\n    return;\n  }\n\n  @autobind\n  handleFunctionSelect(item: FuncItem) {\n    this.editorPlugin?.insertContent(`${item.name}`, 'func');\n  }\n\n  @autobind\n  handleVariableSelect(item: VariableItem) {\n    this.editorPlugin?.insertContent(\n      {\n        key: item.value,\n        name: item.label\n      },\n      'variable'\n    );\n  }\n\n  @autobind\n  handleOnChange(value: any) {\n    const onChange = this.props.onChange;\n    onChange?.(value);\n  }\n\n  @autobind\n  editorFactory(dom: HTMLElement, cm: any) {\n    return editorFactory(dom, cm, this.props);\n  }\n\n  render() {\n    const {\n      variables,\n      header,\n      value,\n      functions,\n      variableMode,\n      translate: __,\n      classnames: cx,\n      variableClassName,\n      functionClassName,\n      classPrefix\n    } = this.props;\n    const {focused} = this.state;\n    return (\n      <div\n        className={cx(`FormulaEditor`, {\n          'is-focused': focused\n        })}\n      >\n        <section className={cx(`FormulaEditor-content`)}>\n          <header className={cx(`FormulaEditor-header`)}>\n            {__(header || 'FormulaEditor.title')}\n          </header>\n\n          <CodeMirrorEditor\n            className={cx('FormulaEditor-editor')}\n            value={value}\n            onChange={this.handleOnChange}\n            editorFactory={this.editorFactory}\n            editorDidMount={this.handleEditorMounted}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          />\n        </section>\n\n        <section className={cx('FormulaEditor-settings')}>\n          <div className={cx('FormulaEditor-panel')}>\n            <div className={cx('FormulaEditor-panel-header')}>\n              {__('FormulaEditor.variable')}\n            </div>\n            <div className={cx('FormulaEditor-panel-body')}>\n              <VariableList\n                classPrefix={classPrefix}\n                className={cx(\n                  'FormulaEditor-VariableList',\n                  'FormulaEditor-VariableList-root',\n                  variableClassName\n                )}\n                selectMode={variableMode}\n                data={variables}\n                onSelect={this.handleVariableSelect}\n              />\n            </div>\n          </div>\n\n          <FuncList\n            className={functionClassName}\n            title={__('FormulaEditor.function')}\n            data={functions}\n            onSelect={this.handleFunctionSelect}\n          />\n        </section>\n      </div>\n    );\n  }\n}\n\nexport default uncontrollable(\n  themeable(localeable(FormulaEditor)),\n  {\n    value: 'onChange'\n  },\n  ['validate']\n);\n"
     ]
 }

package/lib/components/formula/FuncList.d.ts

@@ -3,6 +3,9 @@ import React from 'react';
 import { ThemeProps } from '../../theme';
 import type { FuncGroup, FuncItem } from './Editor';
 export interface FuncListProps extends ThemeProps {
+    title?: string;
+    descClassName?: string;
+    bodyClassName?: string;
     data: Array<FuncGroup>;
     onSelect?: (item: FuncItem) => void;
 }

package/lib/components/formula/FuncList.js

@@ -7,9 +7,10 @@ var theme_1 = require("../../theme");
 var Collapse_1 = (0, tslib_1.__importDefault)(require("../Collapse"));
 var CollapseGroup_1 = (0, tslib_1.__importDefault)(require("../CollapseGroup"));
 var SearchBox_1 = (0, tslib_1.__importDefault)(require("../SearchBox"));
+var icon_1 = require("../../utils/icon");
 function FuncList(props) {
     var _a;
-    var cx = props.classnames;
+    var title = props.title, className = props.className, cx = props.classnames, bodyClassName = props.bodyClassName, descClassName = props.descClassName;
     var _b = react_1.default.useState(props.data), filteredFuncs = _b[0], setFiteredFuncs = _b[1];
     var _c = react_1.default.useState(null), activeFunc = _c[0], setActiveFunc = _c[1];
     function onSearch(term) {
@@ -22,14 +23,23 @@ function FuncList(props) {
             .filter(function (item) { return item.items.length; });
         setFiteredFuncs(filtered);
     }
-    return (react_1.default.createElement("div", { className: cx('FormulaFuncList') },
-        react_1.default.createElement(SearchBox_1.default, { className: "FormulaFuncList-searchBox", mini: false, onSearch: onSearch }),
-        react_1.default.createElement("div", { className: cx('FormulaFuncList-columns') },
-            react_1.default.createElement(CollapseGroup_1.default, { className: "FormulaFuncList-group", defaultActiveKey: (_a = filteredFuncs[0]) === null || _a === void 0 ? void 0 : _a.groupName, accordion: true }, filteredFuncs.map(function (item) { return (react_1.default.createElement(Collapse_1.default, { headingClassName: "FormulaFuncList-groupTitle", bodyClassName: "FormulaFuncList-groupBody", propKey: item.groupName, header: item.groupName, key: item.groupName }, item.items.map(function (item) { return (react_1.default.createElement("div", { className: cx("FormulaFuncList-funcItem " + (item.name === (activeFunc === null || activeFunc === void 0 ? void 0 : activeFunc.name) ? 'is-active' : '')), onMouseEnter: function () { return setActiveFunc(item); }, onClick: function () { var _a; return (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, item); }, key: item.name }, item.name)); }))); })),
-            react_1.default.createElement("div", { className: cx('FormulaFuncList-column') }, activeFunc ? (react_1.default.createElement("div", { className: cx('FormulaFuncList-funcDetail') },
-                react_1.default.createElement("pre", null,
-                    react_1.default.createElement("code", null, activeFunc.example)),
-                react_1.default.createElement("div", null, activeFunc.description))) : null))));
+    return (react_1.default.createElement("div", { className: cx('FormulaEditor-FuncList', className) },
+        react_1.default.createElement("div", { className: cx('FormulaEditor-panel') },
+            react_1.default.createElement("div", { className: cx('FormulaEditor-panel-header') }, title),
+            react_1.default.createElement("div", { className: cx('FormulaEditor-panel-body') },
+                react_1.default.createElement("div", { className: cx('FormulaEditor-FuncList-searchBox') },
+                    react_1.default.createElement(SearchBox_1.default, { mini: false, onSearch: onSearch })),
+                react_1.default.createElement("div", { className: cx('FormulaEditor-FuncList-body', bodyClassName) },
+                    react_1.default.createElement(CollapseGroup_1.default, { className: cx('FormulaEditor-FuncList-collapseGroup'), defaultActiveKey: (_a = filteredFuncs[0]) === null || _a === void 0 ? void 0 : _a.groupName, expandIcon: (0, icon_1.generateIcon)(cx, 'fa fa-chevron-right FormulaEditor-FuncList-expandIcon', 'Icon'), accordion: true }, filteredFuncs.map(function (item) { return (react_1.default.createElement(Collapse_1.default, { className: cx('FormulaEditor-FuncList-collapse'), headingClassName: cx('FormulaEditor-FuncList-groupTitle'), bodyClassName: cx('FormulaEditor-FuncList-groupBody'), propKey: item.groupName, header: item.groupName, key: item.groupName }, item.items.map(function (item) { return (react_1.default.createElement("div", { className: cx('FormulaEditor-FuncList-item', {
+                            'is-active': item.name === (activeFunc === null || activeFunc === void 0 ? void 0 : activeFunc.name)
+                        }), onMouseEnter: function () { return setActiveFunc(item); }, onClick: function () { var _a; return (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, item); }, key: item.name }, item.name)); }))); }))))),
+        react_1.default.createElement("div", { className: cx('FormulaEditor-panel') },
+            react_1.default.createElement("div", { className: cx('FormulaEditor-panel-header') }, (activeFunc === null || activeFunc === void 0 ? void 0 : activeFunc.name) || ''),
+            react_1.default.createElement("div", { className: cx('FormulaEditor-panel-body') },
+                react_1.default.createElement("div", { className: cx('FormulaEditor-FuncList-doc', descClassName) }, activeFunc ? (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("pre", null,
+                        react_1.default.createElement("code", null, activeFunc.example)),
+                    react_1.default.createElement("div", { className: cx('FormulaEditor-FuncList-doc-desc') }, activeFunc.description))) : null)))));
 }
 exports.FuncList = FuncList;
 exports.default = (0, theme_1.themeable)(FuncList);

package/lib/components/formula/FuncList.js.map

@@ -6,8 +6,8 @@
         "/src/components/formula/FuncList.tsx"
     ],
     "names": [],
-    "mappings": "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",
+    "mappings": "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",
     "sourcesContent": [
-        "import React from 'react';\nimport {themeable, ThemeProps} from '../../theme';\nimport Collapse from '../Collapse';\nimport CollapseGroup from '../CollapseGroup';\nimport SearchBox from '../SearchBox';\nimport type {FuncGroup, FuncItem} from './Editor';\n\nexport interface FuncListProps extends ThemeProps {\n  data: Array<FuncGroup>;\n  onSelect?: (item: FuncItem) => void;\n}\n\nexport function FuncList(props: FuncListProps) {\n  const cx = props.classnames;\n  const [filteredFuncs, setFiteredFuncs] = React.useState(props.data);\n  const [activeFunc, setActiveFunc] = React.useState<any>(null);\n  function onSearch(term: string) {\n    const filtered = props.data\n      .map(item => {\n        return {\n          ...item,\n          items: term\n            ? item.items.filter(item => ~item.name.indexOf(term.toUpperCase()))\n            : item.items\n        };\n      })\n      .filter(item => item.items.length);\n    setFiteredFuncs(filtered);\n  }\n\n  return (\n    <div className={cx('FormulaFuncList')}>\n      <SearchBox\n        className=\"FormulaFuncList-searchBox\"\n        mini={false}\n        onSearch={onSearch}\n      />\n      <div className={cx('FormulaFuncList-columns')}>\n        <CollapseGroup\n          className=\"FormulaFuncList-group\"\n          defaultActiveKey={filteredFuncs[0]?.groupName}\n          accordion\n        >\n          {filteredFuncs.map(item => (\n            <Collapse\n              headingClassName=\"FormulaFuncList-groupTitle\"\n              bodyClassName=\"FormulaFuncList-groupBody\"\n              propKey={item.groupName}\n              header={item.groupName}\n              key={item.groupName}\n            >\n              {item.items.map(item => (\n                <div\n                  className={cx(\n                    `FormulaFuncList-funcItem ${\n                      item.name === activeFunc?.name ? 'is-active' : ''\n                    }`\n                  )}\n                  onMouseEnter={() => setActiveFunc(item)}\n                  onClick={() => props.onSelect?.(item)}\n                  key={item.name}\n                >\n                  {item.name}\n                </div>\n              ))}\n            </Collapse>\n          ))}\n        </CollapseGroup>\n        <div className={cx('FormulaFuncList-column')}>\n          {activeFunc ? (\n            <div className={cx('FormulaFuncList-funcDetail')}>\n              <pre>\n                <code>{activeFunc.example}</code>\n              </pre>\n              <div>{activeFunc.description}</div>\n            </div>\n          ) : null}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default themeable(FuncList);\n"
+        "import React from 'react';\n\nimport {themeable, ThemeProps} from '../../theme';\nimport Collapse from '../Collapse';\nimport CollapseGroup from '../CollapseGroup';\nimport SearchBox from '../SearchBox';\nimport type {FuncGroup, FuncItem} from './Editor';\nimport {generateIcon} from '../../utils/icon';\n\nexport interface FuncListProps extends ThemeProps {\n  title?: string;\n  descClassName?: string;\n  bodyClassName?: string;\n  data: Array<FuncGroup>;\n  onSelect?: (item: FuncItem) => void;\n}\n\nexport function FuncList(props: FuncListProps) {\n  const {\n    title,\n    className,\n    classnames: cx,\n    bodyClassName,\n    descClassName\n  } = props;\n  const [filteredFuncs, setFiteredFuncs] = React.useState(props.data);\n  const [activeFunc, setActiveFunc] = React.useState<any>(null);\n  function onSearch(term: string) {\n    const filtered = props.data\n      .map(item => {\n        return {\n          ...item,\n          items: term\n            ? item.items.filter(item => ~item.name.indexOf(term.toUpperCase()))\n            : item.items\n        };\n      })\n      .filter(item => item.items.length);\n    setFiteredFuncs(filtered);\n  }\n\n  return (\n    <div className={cx('FormulaEditor-FuncList', className)}>\n      <div className={cx('FormulaEditor-panel')}>\n        <div className={cx('FormulaEditor-panel-header')}>{title}</div>\n        <div className={cx('FormulaEditor-panel-body')}>\n          <div className={cx('FormulaEditor-FuncList-searchBox')}>\n            <SearchBox mini={false} onSearch={onSearch} />\n          </div>\n          <div className={cx('FormulaEditor-FuncList-body', bodyClassName)}>\n            <CollapseGroup\n              className={cx('FormulaEditor-FuncList-collapseGroup')}\n              defaultActiveKey={filteredFuncs[0]?.groupName}\n              expandIcon={\n                generateIcon(\n                  cx,\n                  'fa fa-chevron-right FormulaEditor-FuncList-expandIcon',\n                  'Icon'\n                )!\n              }\n              accordion\n            >\n              {filteredFuncs.map(item => (\n                <Collapse\n                  className={cx('FormulaEditor-FuncList-collapse')}\n                  headingClassName={cx('FormulaEditor-FuncList-groupTitle')}\n                  bodyClassName={cx('FormulaEditor-FuncList-groupBody')}\n                  propKey={item.groupName}\n                  header={item.groupName}\n                  key={item.groupName}\n                >\n                  {item.items.map(item => (\n                    <div\n                      className={cx('FormulaEditor-FuncList-item', {\n                        'is-active': item.name === activeFunc?.name\n                      })}\n                      onMouseEnter={() => setActiveFunc(item)}\n                      onClick={() => props.onSelect?.(item)}\n                      key={item.name}\n                    >\n                      {item.name}\n                    </div>\n                  ))}\n                </Collapse>\n              ))}\n            </CollapseGroup>\n          </div>\n        </div>\n      </div>\n\n      <div className={cx('FormulaEditor-panel')}>\n        <div className={cx('FormulaEditor-panel-header')}>\n          {activeFunc?.name || ''}\n        </div>\n        <div className={cx('FormulaEditor-panel-body')}>\n          <div className={cx('FormulaEditor-FuncList-doc', descClassName)}>\n            {activeFunc ? (\n              <>\n                <pre>\n                  <code>{activeFunc.example}</code>\n                </pre>\n                <div className={cx('FormulaEditor-FuncList-doc-desc')}>\n                  {activeFunc.description}\n                </div>\n              </>\n            ) : null}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default themeable(FuncList);\n"
     ]
 }

package/lib/components/formula/Picker.d.ts

@@ -1,13 +1,57 @@
 /// <reference types="hoist-non-react-statics" />
 import React from 'react';
 import { FormulaEditorProps } from './Editor';
+import type { SchemaIcon } from '../../Schema';
 export interface FormulaPickerProps extends FormulaEditorProps {
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    /**
+     * 编辑器标题
+     */
+    title?: string;
+    /**
+     * 按钮图标
+     */
+    icon?: SchemaIcon;
+    /**
+     * 控件模式
+     */
+    mode?: 'button' | 'input-button';
     /**
      * 边框模式，全边框，还是半边框，或者没边框。
      */
     borderMode?: 'full' | 'half' | 'none';
+    /**
+     * 按钮Label，inputMode为button时生效
+     */
+    btnLabel?: string;
+    /**
+     * 按钮样式
+     */
+    level?: 'info' | 'success' | 'warning' | 'danger' | 'link' | 'primary' | 'dark' | 'light';
+    /**
+     * 按钮大小
+     */
+    btnSize?: 'xs' | 'sm' | 'md' | 'lg';
+    /**
+     * 禁用状态
+     */
     disabled?: boolean;
+    /**
+     * 占位文本
+     */
+    placeholder?: string;
+    /**
+     * 可清除
+     */
+    clearable?: boolean;
+    /**
+     * 支持通过上下文变量配置value
+     */
+    source?: string;
+    /**
+     * 外层透传的 data，和source配合使用
+     */
+    data?: any;
 }
 export declare class FormulaPicker extends React.Component<FormulaPickerProps> {
     handleConfirm(value: any): void;

package/lib/components/formula/Picker.js

@@ -4,14 +4,16 @@ exports.FormulaPicker = void 0;
 var tslib_1 = require("tslib");
 var uncontrollable_1 = require("uncontrollable");
 var react_1 = (0, tslib_1.__importDefault)(require("react"));
-var Editor_1 = require("./Editor");
 var helper_1 = require("../../utils/helper");
+var icon_1 = require("../../utils/icon");
 var PickerContainer_1 = (0, tslib_1.__importDefault)(require("../PickerContainer"));
-var Editor_2 = (0, tslib_1.__importDefault)(require("./Editor"));
+var Editor_1 = (0, tslib_1.__importDefault)(require("./Editor"));
 var ResultBox_1 = (0, tslib_1.__importDefault)(require("../ResultBox"));
+var Button_1 = (0, tslib_1.__importDefault)(require("../Button"));
 var icons_1 = require("../icons");
 var theme_1 = require("../../theme");
 var locale_1 = require("../../locale");
+var tpl_builtin_1 = require("../../utils/tpl-builtin");
 var FormulaPicker = /** @class */ (function (_super) {
     (0, tslib_1.__extends)(FormulaPicker, _super);
     function FormulaPicker() {
@@ -22,15 +24,38 @@ var FormulaPicker = /** @class */ (function (_super) {
         (_b = (_a = this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, value);
     };
     FormulaPicker.prototype.render = function () {
-        var _a = this.props, cx = _a.classnames, value = _a.value, __ = _a.translate, disabled = _a.disabled, className = _a.className, onChange = _a.onChange, size = _a.size, borderMode = _a.borderMode, rest = (0, tslib_1.__rest)(_a, ["classnames", "value", "translate", "disabled", "className", "onChange", "size", "borderMode"]);
-        return (react_1.default.createElement(PickerContainer_1.default, { showTitle: false, bodyRender: function (_a) {
+        var _this = this;
+        var _a = this.props, cx = _a.classnames, value = _a.value, __ = _a.translate, disabled = _a.disabled, className = _a.className, onChange = _a.onChange, size = _a.size, borderMode = _a.borderMode, placeholder = _a.placeholder, mode = _a.mode, btnLabel = _a.btnLabel, level = _a.level, btnSize = _a.btnSize, icon = _a.icon, title = _a.title, clearable = _a.clearable, variables = _a.variables, functions = _a.functions, rest = (0, tslib_1.__rest)(_a, ["classnames", "value", "translate", "disabled", "className", "onChange", "size", "borderMode", "placeholder", "mode", "btnLabel", "level", "btnSize", "icon", "title", "clearable", "variables", "functions"]);
+        if ((0, tpl_builtin_1.isPureVariable)(variables)) {
+            // 如果 variables 是 ${xxx} 这种形式，将其处理成实际的值
+            variables = (0, tpl_builtin_1.resolveVariableAndFilter)(variables, this.props.data, '| raw');
+        }
+        if ((0, tpl_builtin_1.isPureVariable)(functions)) {
+            // 如果 functions 是 ${xxx} 这种形式，将其处理成实际的值
+            functions = (0, tpl_builtin_1.resolveVariableAndFilter)(functions, this.props.data, '| raw');
+        }
+        var iconElement = (0, icon_1.generateIcon)(cx, icon, 'Icon');
+        return (react_1.default.createElement(PickerContainer_1.default, { title: __(title || 'FormulaEditor.title'), headerClassName: "font-bold", bodyRender: function (_a) {
                 var onClose = _a.onClose, value = _a.value, onChange = _a.onChange;
-                return react_1.default.createElement(Editor_2.default, (0, tslib_1.__assign)({}, rest, { value: value, onChange: onChange }));
+                return (react_1.default.createElement(Editor_1.default, (0, tslib_1.__assign)({}, rest, { variables: variables, functions: functions, value: value, onChange: onChange })));
             }, value: value, onConfirm: this.handleConfirm, size: 'md' }, function (_a) {
+            var _b, _c, _d;
+            var _e, _f;
             var onClick = _a.onClick, isOpened = _a.isOpened;
-            return (react_1.default.createElement(ResultBox_1.default, { className: cx('FormulaPicker', className, isOpened ? 'is-active' : ''), allowInput: false, result: Editor_1.FormulaEditor.highlightValue(value, rest.variables, rest.functions), onResultChange: helper_1.noop, onResultClick: onClick, disabled: disabled, borderMode: borderMode },
-                react_1.default.createElement("span", { className: cx('FormulaPicker-icon') },
-                    react_1.default.createElement(icons_1.Icon, { icon: "pencil", className: "icon" }))));
+            return (react_1.default.createElement("div", { className: cx('FormulaPicker', className) }, mode === 'button' ? (react_1.default.createElement(Button_1.default, { className: cx('FormulaPicker-action', 'w-full'), level: level, size: btnSize, onClick: onClick },
+                iconElement ? (react_1.default.cloneElement(iconElement, {
+                    className: cx((_f = (_e = iconElement === null || iconElement === void 0 ? void 0 : iconElement.props) === null || _e === void 0 ? void 0 : _e.className) !== null && _f !== void 0 ? _f : '', 'FormulaPicker-icon', (_b = {},
+                        _b['is-filled'] = !!value,
+                        _b))
+                })) : (react_1.default.createElement(icons_1.Icon, { icon: "function", className: cx('FormulaPicker-icon', 'icon', (_c = {},
+                        _c['is-filled'] = !!value,
+                        _c)) })),
+                react_1.default.createElement("span", { className: cx('FormulaPicker-label') }, __(btnLabel || 'FormulaEditor.btnLabel')))) : (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(ResultBox_1.default, { className: cx('FormulaPicker-input', isOpened ? 'is-active' : ''), allowInput: true, clearable: clearable, value: value, onResultChange: helper_1.noop, onChange: _this.handleConfirm, disabled: disabled, borderMode: borderMode, placeholder: placeholder }),
+                react_1.default.createElement(Button_1.default, { className: cx('FormulaPicker-action'), onClick: onClick },
+                    react_1.default.createElement(icons_1.Icon, { icon: "function", className: cx('FormulaPicker-icon', 'icon', (_d = {},
+                            _d['is-filled'] = !!value,
+                            _d)) }))))));
         }));
     };
     (0, tslib_1.__decorate)([

package/lib/components/formula/Picker.js.map

@@ -6,8 +6,8 @@
         "/src/components/formula/Picker.tsx"
     ],
     "names": [],
-    "mappings": ";;;;AAAA,iDAA8C;AAC9C,6DAA0B;AAC1B,mCAA2D;AAC3D,6CAAkD;AAClD,oFAAiD;AACjD,iEAA8B;AAC9B,wEAAqC;AACrC,kCAA8B;AAC9B,qCAAsC;AACtC,uCAAwC;AAcxC;IAAmC,8CAAmC;IAAtE;;IAuDA,CAAC;IArDC,qCAAa,GAAb,UAAc,KAAU;;QACtB,MAAA,MAAA,IAAI,CAAC,KAAK,EAAC,QAAQ,mDAAG,KAAK,CAAC,CAAC;IAC/B,CAAC;IAED,8BAAM,GAAN;QACE,IAAM,KAUF,IAAI,CAAC,KAAK,EATA,EAAE,gBAAA,EACd,KAAK,WAAA,EACM,EAAE,eAAA,EACb,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,IAAI,UAAA,EACJ,UAAU,gBAAA,EACP,IAAI,2BATH,+FAUL,CAAa,CAAC;QAEf,OAAO,CACL,8BAAC,yBAAe,IACd,SAAS,EAAE,KAAK,EAChB,UAAU,EAAE,UAAC,EAA0B;oBAAzB,OAAO,aAAA,EAAE,KAAK,WAAA,EAAE,QAAQ,cAAA;gBACpC,OAAO,8BAAC,gBAAM,4BAAK,IAAI,IAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,IAAI,CAAC;YAChE,CAAC,EACD,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,IAAI,EAAE,IAAI,IAET,UAAC,EAAmB;gBAAlB,OAAO,aAAA,EAAE,QAAQ,cAAA;YAAM,OAAA,CACxB,8BAAC,mBAAS,IACR,SAAS,EAAE,EAAE,CACX,eAAe,EACf,SAAS,EACT,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAC5B,EACD,UAAU,EAAE,KAAK,EACjB,MAAM,EAAE,sBAAa,CAAC,cAAc,CAClC,KAAK,EACL,IAAI,CAAC,SAAS,EACd,IAAI,CAAC,SAAS,CACf,EACD,cAAc,EAAE,aAAI,EACpB,aAAa,EAAE,OAAO,EACtB,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU;gBAEtB,wCAAM,SAAS,EAAE,EAAE,CAAC,oBAAoB,CAAC;oBACvC,8BAAC,YAAI,IAAC,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,MAAM,GAAG,CAClC,CACG,CACb;QAtByB,CAsBzB,CACe,CACnB,CAAC;IACJ,CAAC;IApDD;QADC,iBAAQ;;;;sDAGR;IAmDH,oBAAC;CAAA,AAvDD,CAAmC,eAAK,CAAC,SAAS,GAuDjD;AAvDY,sCAAa;AAyD1B,kBAAe,IAAA,iBAAS,EACtB,IAAA,mBAAU,EACR,IAAA,+BAAc,EAAC,aAAa,EAAE;IAC5B,KAAK,EAAE,UAAU;CAClB,CAAC,CACH,CACF,CAAC",
+    "mappings": "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",
     "sourcesContent": [
-        "import {uncontrollable} from 'uncontrollable';\nimport React from 'react';\nimport {FormulaEditor, FormulaEditorProps} from './Editor';\nimport {autobind, noop} from '../../utils/helper';\nimport PickerContainer from '../PickerContainer';\nimport Editor from './Editor';\nimport ResultBox from '../ResultBox';\nimport {Icon} from '../icons';\nimport {themeable} from '../../theme';\nimport {localeable} from '../../locale';\n\nexport interface FormulaPickerProps extends FormulaEditorProps {\n  // 新的属性？\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';\n\n  /**\n   * 边框模式，全边框，还是半边框，或者没边框。\n   */\n  borderMode?: 'full' | 'half' | 'none';\n\n  disabled?: boolean;\n}\n\nexport class FormulaPicker extends React.Component<FormulaPickerProps> {\n  @autobind\n  handleConfirm(value: any) {\n    this.props.onChange?.(value);\n  }\n\n  render() {\n    const {\n      classnames: cx,\n      value,\n      translate: __,\n      disabled,\n      className,\n      onChange,\n      size,\n      borderMode,\n      ...rest\n    } = this.props;\n\n    return (\n      <PickerContainer\n        showTitle={false}\n        bodyRender={({onClose, value, onChange}) => {\n          return <Editor {...rest} value={value} onChange={onChange} />;\n        }}\n        value={value}\n        onConfirm={this.handleConfirm}\n        size={'md'}\n      >\n        {({onClick, isOpened}) => (\n          <ResultBox\n            className={cx(\n              'FormulaPicker',\n              className,\n              isOpened ? 'is-active' : ''\n            )}\n            allowInput={false}\n            result={FormulaEditor.highlightValue(\n              value,\n              rest.variables,\n              rest.functions\n            )}\n            onResultChange={noop}\n            onResultClick={onClick}\n            disabled={disabled}\n            borderMode={borderMode}\n          >\n            <span className={cx('FormulaPicker-icon')}>\n              <Icon icon=\"pencil\" className=\"icon\" />\n            </span>\n          </ResultBox>\n        )}\n      </PickerContainer>\n    );\n  }\n}\n\nexport default themeable(\n  localeable(\n    uncontrollable(FormulaPicker, {\n      value: 'onChange'\n    })\n  )\n);\n"
+        "import {uncontrollable} from 'uncontrollable';\nimport React from 'react';\nimport {FormulaEditor, FormulaEditorProps} from './Editor';\nimport {autobind, noop} from '../../utils/helper';\nimport {generateIcon} from '../../utils/icon';\nimport PickerContainer from '../PickerContainer';\nimport Editor from './Editor';\nimport ResultBox from '../ResultBox';\nimport Button from '../Button';\nimport {Icon} from '../icons';\nimport {themeable} from '../../theme';\nimport {localeable} from '../../locale';\n\nimport type {SchemaIcon} from '../../Schema';\nimport {\n  resolveVariableAndFilter,\n  isPureVariable\n} from '../../utils/tpl-builtin';\n\nexport interface FormulaPickerProps extends FormulaEditorProps {\n  // 新的属性？\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';\n\n  /**\n   * 编辑器标题\n   */\n  title?: string;\n\n  /**\n   * 按钮图标\n   */\n  icon?: SchemaIcon;\n\n  /**\n   * 控件模式\n   */\n  mode?: 'button' | 'input-button';\n\n  /**\n   * 边框模式，全边框，还是半边框，或者没边框。\n   */\n  borderMode?: 'full' | 'half' | 'none';\n\n  /**\n   * 按钮Label，inputMode为button时生效\n   */\n  btnLabel?: string;\n\n  /**\n   * 按钮样式\n   */\n  level?:\n    | 'info'\n    | 'success'\n    | 'warning'\n    | 'danger'\n    | 'link'\n    | 'primary'\n    | 'dark'\n    | 'light';\n\n  /**\n   * 按钮大小\n   */\n  btnSize?: 'xs' | 'sm' | 'md' | 'lg';\n\n  /**\n   * 禁用状态\n   */\n  disabled?: boolean;\n\n  /**\n   * 占位文本\n   */\n  placeholder?: string;\n\n  /**\n   * 可清除\n   */\n  clearable?: boolean;\n\n  /**\n   * 支持通过上下文变量配置value\n   */\n  source?: string;\n\n  /**\n   * 外层透传的 data，和source配合使用\n   */\n  data?: any;\n}\n\nexport class FormulaPicker extends React.Component<FormulaPickerProps> {\n  @autobind\n  handleConfirm(value: any) {\n    this.props.onChange?.(value);\n  }\n\n  render() {\n    let {\n      classnames: cx,\n      value,\n      translate: __,\n      disabled,\n      className,\n      onChange,\n      size,\n      borderMode,\n      placeholder,\n      mode,\n      btnLabel,\n      level,\n      btnSize,\n      icon,\n      title,\n      clearable,\n      variables,\n      functions,\n      ...rest\n    } = this.props;\n    if (isPureVariable(variables)) {\n      // 如果 variables 是 ${xxx} 这种形式，将其处理成实际的值\n      variables = resolveVariableAndFilter(variables, this.props.data, '| raw');\n    }\n\n    if (isPureVariable(functions)) {\n      // 如果 functions 是 ${xxx} 这种形式，将其处理成实际的值\n      functions = resolveVariableAndFilter(functions, this.props.data, '| raw');\n    }\n    const iconElement = generateIcon(cx, icon, 'Icon');\n\n    return (\n      <PickerContainer\n        title={__(title || 'FormulaEditor.title')}\n        headerClassName=\"font-bold\"\n        bodyRender={({onClose, value, onChange}) => {\n          return (\n            <Editor\n              {...rest}\n              variables={variables}\n              functions={functions}\n              value={value}\n              onChange={onChange}\n            />\n          );\n        }}\n        value={value}\n        onConfirm={this.handleConfirm}\n        size={'md'}\n      >\n        {({onClick, isOpened}) => (\n          <div className={cx('FormulaPicker', className)}>\n            {mode === 'button' ? (\n              <Button\n                className={cx('FormulaPicker-action', 'w-full')}\n                level={level}\n                size={btnSize}\n                onClick={onClick}\n              >\n                {iconElement ? (\n                  React.cloneElement(iconElement, {\n                    className: cx(\n                      iconElement?.props?.className ?? '',\n                      'FormulaPicker-icon',\n                      {\n                        ['is-filled']: !!value\n                      }\n                    )\n                  })\n                ) : (\n                  <Icon\n                    icon=\"function\"\n                    className={cx('FormulaPicker-icon', 'icon', {\n                      ['is-filled']: !!value\n                    })}\n                  />\n                )}\n                <span className={cx('FormulaPicker-label')}>\n                  {__(btnLabel || 'FormulaEditor.btnLabel')}\n                </span>\n              </Button>\n            ) : (\n              <>\n                <ResultBox\n                  className={cx(\n                    'FormulaPicker-input',\n                    isOpened ? 'is-active' : ''\n                  )}\n                  allowInput\n                  clearable={clearable}\n                  value={value}\n                  onResultChange={noop}\n                  onChange={this.handleConfirm}\n                  disabled={disabled}\n                  borderMode={borderMode}\n                  placeholder={placeholder}\n                />\n\n                <Button\n                  className={cx('FormulaPicker-action')}\n                  onClick={onClick}\n                >\n                  <Icon\n                    icon=\"function\"\n                    className={cx('FormulaPicker-icon', 'icon', {\n                      ['is-filled']: !!value\n                    })}\n                  />\n                </Button>\n              </>\n            )}\n          </div>\n        )}\n      </PickerContainer>\n    );\n  }\n}\n\nexport default themeable(\n  localeable(\n    uncontrollable(FormulaPicker, {\n      value: 'onChange'\n    })\n  )\n);\n"
     ]
 }

package/lib/components/formula/VariableList.d.ts

@@ -1,9 +1,16 @@
 /// <reference types="react" />
 import type { VariableItem } from './Editor';
+import type { ItemRenderStates } from '../Selection';
+import type { Option } from '../Select';
+import type { TabsMode } from '../Tabs';
 export interface VariableListProps {
     className?: string;
+    itemClassName?: string;
+    classPrefix?: string;
     data: Array<VariableItem>;
     selectMode?: 'list' | 'tree' | 'tabs';
+    tabsMode?: TabsMode;
+    itemRender?: (option: Option, states: ItemRenderStates) => JSX.Element;
     onSelect?: (item: VariableItem) => void;
 }
-export declare function VariableList({ data: list, className, selectMode, onSelect }: VariableListProps): JSX.Element;
+export declare function VariableList(props: VariableListProps): JSX.Element;

package/lib/components/formula/VariableList.js

@@ -3,13 +3,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.VariableList = void 0;
 var tslib_1 = require("tslib");
 var react_1 = (0, tslib_1.__importDefault)(require("react"));
+var classnames_1 = (0, tslib_1.__importDefault)(require("classnames"));
 var GroupedSelection_1 = (0, tslib_1.__importDefault)(require("../GroupedSelection"));
 var Tabs_1 = tslib_1.__importStar(require("../Tabs"));
 var TreeSelection_1 = (0, tslib_1.__importDefault)(require("../TreeSelection"));
-function VariableList(_a) {
-    var list = _a.data, className = _a.className, selectMode = _a.selectMode, onSelect = _a.onSelect;
-    return (react_1.default.createElement("div", { className: className }, selectMode === 'tabs' ? (react_1.default.createElement(Tabs_1.default, { tabsMode: "radio" }, list.map(function (item, index) { return (react_1.default.createElement(Tabs_1.Tab, { eventKey: index, key: index, title: item.label },
-        react_1.default.createElement(VariableList, { selectMode: item.selectMode, data: item.children, onSelect: onSelect }))); }))) : selectMode === 'tree' ? (react_1.default.createElement(TreeSelection_1.default, { multiple: false, options: list, onChange: function (item) { return onSelect === null || onSelect === void 0 ? void 0 : onSelect(item); } })) : (react_1.default.createElement(GroupedSelection_1.default, { multiple: false, options: list, onChange: function (item) { return onSelect === null || onSelect === void 0 ? void 0 : onSelect(item); } }))));
+function VariableList(props) {
+    var list = props.data, className = props.className, _a = props.tabsMode, tabsMode = _a === void 0 ? 'card' : _a, themePrefix = props.classPrefix, itemClassName = props.itemClassName, selectMode = props.selectMode, onSelect = props.onSelect;
+    var classPrefix = themePrefix + "FormulaEditor-VariableList";
+    var itemRender = props.itemRender && typeof props.itemRender === 'function'
+        ? props.itemRender
+        : function (option, states) {
+            return (react_1.default.createElement("span", { className: (0, classnames_1.default)(classPrefix + "-item", itemClassName) },
+                react_1.default.createElement("label", null, option.label),
+                (option === null || option === void 0 ? void 0 : option.tag) ? (react_1.default.createElement("span", { className: (0, classnames_1.default)(classPrefix + "-item-tag") }, option.tag)) : null));
+        };
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(className, { 'is-scrollable': selectMode !== 'tabs' }) }, selectMode === 'tabs' ? (react_1.default.createElement(Tabs_1.default, { tabsMode: tabsMode, className: (0, classnames_1.default)(classPrefix + "-base " + classPrefix + "-tabs") }, list.map(function (item, index) { return (react_1.default.createElement(Tabs_1.Tab, { className: (0, classnames_1.default)(classPrefix + "-tab"), eventKey: index, key: index, title: item.label },
+        react_1.default.createElement(VariableList, { className: (0, classnames_1.default)(classPrefix + "-sub"), itemRender: itemRender, selectMode: item.selectMode, data: item.children, onSelect: onSelect }))); }))) : selectMode === 'tree' ? (react_1.default.createElement(TreeSelection_1.default, { itemRender: itemRender, className: (0, classnames_1.default)(classPrefix + "-base"), multiple: false, options: list, onChange: function (item) { return onSelect === null || onSelect === void 0 ? void 0 : onSelect(item); } })) : (react_1.default.createElement(GroupedSelection_1.default, { itemRender: itemRender, className: (0, classnames_1.default)(classPrefix + "-base"), multiple: false, options: list, onChange: function (item) { return onSelect === null || onSelect === void 0 ? void 0 : onSelect(item); } }))));
 }
 exports.VariableList = VariableList;
 //# sourceMappingURL=./components/formula/VariableList.js.map

package/lib/components/formula/VariableList.js.map

@@ -6,8 +6,8 @@
         "/src/components/formula/VariableList.tsx"
     ],
     "names": [],
-    "mappings": ";;;;AAAA,6DAA0B;AAC1B,sFAAmD;AACnD,2DAAkC;AAClC,gFAA6C;AAU7C,SAAgB,YAAY,CAAC,EAKT;QAJZ,IAAI,UAAA,EACV,SAAS,eAAA,EACT,UAAU,gBAAA,EACV,QAAQ,cAAA;IAER,OAAO,CACL,uCAAK,SAAS,EAAE,SAAS,IACtB,UAAU,KAAK,MAAM,CAAC,CAAC,CAAC,CACvB,8BAAC,cAAI,IAAC,QAAQ,EAAC,OAAO,IACnB,IAAI,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,KAAK,IAAK,OAAA,CACzB,8BAAC,UAAG,IAAC,QAAQ,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK;QACjD,8BAAC,YAAY,IACX,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,IAAI,EAAE,IAAI,CAAC,QAAS,EACpB,QAAQ,EAAE,QAAQ,GAClB,CACE,CACP,EAR0B,CAQ1B,CAAC,CACG,CACR,CAAC,CAAC,CAAC,UAAU,KAAK,MAAM,CAAC,CAAC,CAAC,CAC1B,8BAAC,uBAAa,IACZ,QAAQ,EAAE,KAAK,EACf,OAAO,EAAE,IAAI,EACb,QAAQ,EAAE,UAAC,IAAS,IAAK,OAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,IAAI,CAAC,EAAhB,CAAgB,GACzC,CACH,CAAC,CAAC,CAAC,CACF,8BAAC,0BAAgB,IACf,QAAQ,EAAE,KAAK,EACf,OAAO,EAAE,IAAI,EACb,QAAQ,EAAE,UAAC,IAAS,IAAK,OAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,IAAI,CAAC,EAAhB,CAAgB,GACzC,CACH,CACG,CACP,CAAC;AACJ,CAAC;AAnCD,oCAmCC",
+    "mappings": ";;;;AAAA,6DAA0B;AAC1B,uEAA4B;AAE5B,sFAAmD;AACnD,2DAAkC;AAClC,gFAA6C;AAkB7C,SAAgB,YAAY,CAAC,KAAwB;IAEjD,IAAM,IAAI,GAOR,KAAK,KAPG,EACV,SAAS,GAMP,KAAK,UANE,EACT,KAKE,KAAK,SALU,EAAjB,QAAQ,mBAAG,MAAM,KAAA,EACJ,WAAW,GAItB,KAAK,YAJiB,EACxB,aAAa,GAGX,KAAK,cAHM,EACb,UAAU,GAER,KAAK,WAFG,EACV,QAAQ,GACN,KAAK,SADC,CACA;IACV,IAAM,WAAW,GAAM,WAAW,+BAA4B,CAAC;IAC/D,IAAM,UAAU,GACd,KAAK,CAAC,UAAU,IAAI,OAAO,KAAK,CAAC,UAAU,KAAK,UAAU;QACxD,CAAC,CAAC,KAAK,CAAC,UAAU;QAClB,CAAC,CAAC,UAAC,MAAc,EAAE,MAAwB;YACvC,OAAO,CACL,wCAAM,SAAS,EAAE,IAAA,oBAAE,EAAI,WAAW,UAAO,EAAE,aAAa,CAAC;gBACvD,6CAAQ,MAAM,CAAC,KAAK,CAAS;gBAC5B,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,GAAG,EAAC,CAAC,CAAC,CACb,wCAAM,SAAS,EAAE,IAAA,oBAAE,EAAI,WAAW,cAAW,CAAC,IAC3C,MAAM,CAAC,GAAG,CACN,CACR,CAAC,CAAC,CAAC,IAAI,CACH,CACR,CAAC;QACJ,CAAC,CAAC;IAER,OAAO,CACL,uCAAK,SAAS,EAAE,IAAA,oBAAE,EAAC,SAAS,EAAE,EAAC,eAAe,EAAE,UAAU,KAAK,MAAM,EAAC,CAAC,IACpE,UAAU,KAAK,MAAM,CAAC,CAAC,CAAC,CACvB,8BAAC,cAAI,IACH,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,IAAA,oBAAE,EAAI,WAAW,cAAS,WAAW,UAAO,CAAC,IAEvD,IAAI,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,KAAK,IAAK,OAAA,CACzB,8BAAC,UAAG,IACF,SAAS,EAAE,IAAA,oBAAE,EAAI,WAAW,SAAM,CAAC,EACnC,QAAQ,EAAE,KAAK,EACf,GAAG,EAAE,KAAK,EACV,KAAK,EAAE,IAAI,CAAC,KAAK;QAEjB,8BAAC,YAAY,IACX,SAAS,EAAE,IAAA,oBAAE,EAAI,WAAW,SAAM,CAAC,EACnC,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,IAAI,EAAE,IAAI,CAAC,QAAS,EACpB,QAAQ,EAAE,QAAQ,GAClB,CACE,CACP,EAf0B,CAe1B,CAAC,CACG,CACR,CAAC,CAAC,CAAC,UAAU,KAAK,MAAM,CAAC,CAAC,CAAC,CAC1B,8BAAC,uBAAa,IACZ,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,IAAA,oBAAE,EAAI,WAAW,UAAO,CAAC,EACpC,QAAQ,EAAE,KAAK,EACf,OAAO,EAAE,IAAI,EACb,QAAQ,EAAE,UAAC,IAAS,IAAK,OAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,IAAI,CAAC,EAAhB,CAAgB,GACzC,CACH,CAAC,CAAC,CAAC,CACF,8BAAC,0BAAgB,IACf,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,IAAA,oBAAE,EAAI,WAAW,UAAO,CAAC,EACpC,QAAQ,EAAE,KAAK,EACf,OAAO,EAAE,IAAI,EACb,QAAQ,EAAE,UAAC,IAAS,IAAK,OAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,IAAI,CAAC,EAAhB,CAAgB,GACzC,CACH,CACG,CACP,CAAC;AACJ,CAAC;AAtED,oCAsEC",
     "sourcesContent": [
-        "import React from 'react';\nimport GroupedSelection from '../GroupedSelection';\nimport Tabs, {Tab} from '../Tabs';\nimport TreeSelection from '../TreeSelection';\nimport type {VariableItem} from './Editor';\n\nexport interface VariableListProps {\n  className?: string;\n  data: Array<VariableItem>;\n  selectMode?: 'list' | 'tree' | 'tabs';\n  onSelect?: (item: VariableItem) => void;\n}\n\nexport function VariableList({\n  data: list,\n  className,\n  selectMode,\n  onSelect\n}: VariableListProps) {\n  return (\n    <div className={className}>\n      {selectMode === 'tabs' ? (\n        <Tabs tabsMode=\"radio\">\n          {list.map((item, index) => (\n            <Tab eventKey={index} key={index} title={item.label}>\n              <VariableList\n                selectMode={item.selectMode}\n                data={item.children!}\n                onSelect={onSelect}\n              />\n            </Tab>\n          ))}\n        </Tabs>\n      ) : selectMode === 'tree' ? (\n        <TreeSelection\n          multiple={false}\n          options={list}\n          onChange={(item: any) => onSelect?.(item)}\n        />\n      ) : (\n        <GroupedSelection\n          multiple={false}\n          options={list}\n          onChange={(item: any) => onSelect?.(item)}\n        />\n      )}\n    </div>\n  );\n}\n"
+        "import React from 'react';\nimport cx from 'classnames';\n\nimport GroupedSelection from '../GroupedSelection';\nimport Tabs, {Tab} from '../Tabs';\nimport TreeSelection from '../TreeSelection';\n\nimport type {VariableItem} from './Editor';\nimport type {ItemRenderStates} from '../Selection';\nimport type {Option} from '../Select';\nimport type {TabsMode} from '../Tabs';\n\nexport interface VariableListProps {\n  className?: string;\n  itemClassName?: string;\n  classPrefix?: string;\n  data: Array<VariableItem>;\n  selectMode?: 'list' | 'tree' | 'tabs';\n  tabsMode?: TabsMode;\n  itemRender?: (option: Option, states: ItemRenderStates) => JSX.Element;\n  onSelect?: (item: VariableItem) => void;\n}\n\nexport function VariableList(props: VariableListProps) {\n  const {\n    data: list,\n    className,\n    tabsMode = 'card',\n    classPrefix: themePrefix,\n    itemClassName,\n    selectMode,\n    onSelect\n  } = props;\n  const classPrefix = `${themePrefix}FormulaEditor-VariableList`;\n  const itemRender =\n    props.itemRender && typeof props.itemRender === 'function'\n      ? props.itemRender\n      : (option: Option, states: ItemRenderStates): JSX.Element => {\n          return (\n            <span className={cx(`${classPrefix}-item`, itemClassName)}>\n              <label>{option.label}</label>\n              {option?.tag ? (\n                <span className={cx(`${classPrefix}-item-tag`)}>\n                  {option.tag}\n                </span>\n              ) : null}\n            </span>\n          );\n        };\n\n  return (\n    <div className={cx(className, {'is-scrollable': selectMode !== 'tabs'})}>\n      {selectMode === 'tabs' ? (\n        <Tabs\n          tabsMode={tabsMode}\n          className={cx(`${classPrefix}-base ${classPrefix}-tabs`)}\n        >\n          {list.map((item, index) => (\n            <Tab\n              className={cx(`${classPrefix}-tab`)}\n              eventKey={index}\n              key={index}\n              title={item.label}\n            >\n              <VariableList\n                className={cx(`${classPrefix}-sub`)}\n                itemRender={itemRender}\n                selectMode={item.selectMode}\n                data={item.children!}\n                onSelect={onSelect}\n              />\n            </Tab>\n          ))}\n        </Tabs>\n      ) : selectMode === 'tree' ? (\n        <TreeSelection\n          itemRender={itemRender}\n          className={cx(`${classPrefix}-base`)}\n          multiple={false}\n          options={list}\n          onChange={(item: any) => onSelect?.(item)}\n        />\n      ) : (\n        <GroupedSelection\n          itemRender={itemRender}\n          className={cx(`${classPrefix}-base`)}\n          multiple={false}\n          options={list}\n          onChange={(item: any) => onSelect?.(item)}\n        />\n      )}\n    </div>\n  );\n}\n"
     ]
 }

package/lib/components/icons.d.ts

@@ -18,6 +18,8 @@ import CheckIcon from '../icons/check.svg';
 import PlusIcon from '../icons/plus.svg';
 import MinusIcon from '../icons/minus.svg';
 import PencilIcon from '../icons/pencil.svg';
+import FunctionIcon from '../icons/function.svg';
+import InputClearIcon from '../icons/input-clear.svg';
 export declare const closeIcon: JSX.Element;
 export declare const unDoIcon: JSX.Element;
 export declare const reDoIcon: JSX.Element;
@@ -34,4 +36,4 @@ export declare function registerIcon(key: string, component: React.ReactType<{}>
 export declare function Icon({ icon, className, ...rest }: {
     icon: string;
 } & React.ComponentProps<any>): JSX.Element;
-export { CloseIcon, UnDoIcon, ReDoIcon, EnterIcon, VolumeIcon, MuteIcon, PlayIcon, PauseIcon, LeftArrowIcon, RightArrowIcon, CheckIcon, PlusIcon, MinusIcon, PencilIcon };
+export { InputClearIcon, CloseIcon, UnDoIcon, ReDoIcon, EnterIcon, VolumeIcon, MuteIcon, PlayIcon, PauseIcon, LeftArrowIcon, RightArrowIcon, CheckIcon, PlusIcon, MinusIcon, PencilIcon, FunctionIcon };

package/lib/components/icons.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PencilIcon = exports.MinusIcon = exports.PlusIcon = exports.CheckIcon = exports.RightArrowIcon = exports.LeftArrowIcon = exports.PauseIcon = exports.PlayIcon = exports.MuteIcon = exports.VolumeIcon = exports.EnterIcon = exports.ReDoIcon = exports.UnDoIcon = exports.CloseIcon = exports.Icon = exports.registerIcon = exports.hasIcon = exports.getIcon = exports.rightArrowIcon = exports.leftArrowIcon = exports.pauseIcon = exports.playIcon = exports.muteIcon = exports.volumeIcon = exports.enterIcon = exports.reDoIcon = exports.unDoIcon = exports.closeIcon = void 0;
+exports.FunctionIcon = exports.PencilIcon = exports.MinusIcon = exports.PlusIcon = exports.CheckIcon = exports.RightArrowIcon = exports.LeftArrowIcon = exports.PauseIcon = exports.PlayIcon = exports.MuteIcon = exports.VolumeIcon = exports.EnterIcon = exports.ReDoIcon = exports.UnDoIcon = exports.CloseIcon = exports.InputClearIcon = exports.Icon = exports.registerIcon = exports.hasIcon = exports.getIcon = exports.rightArrowIcon = exports.leftArrowIcon = exports.pauseIcon = exports.playIcon = exports.muteIcon = exports.volumeIcon = exports.enterIcon = exports.reDoIcon = exports.unDoIcon = exports.closeIcon = void 0;
 var tslib_1 = require("tslib");
 /**
  * @file Icon
@@ -92,6 +92,10 @@ var alert_success_svg_1 = (0, tslib_1.__importDefault)(require("../icons/alert-s
 var alert_info_svg_1 = (0, tslib_1.__importDefault)(require("../icons/alert-info.js"));
 var alert_warning_svg_1 = (0, tslib_1.__importDefault)(require("../icons/alert-warning.js"));
 var alert_danger_svg_1 = (0, tslib_1.__importDefault)(require("../icons/alert-danger.js"));
+var function_svg_1 = (0, tslib_1.__importDefault)(require("../icons/function.js"));
+exports.FunctionIcon = function_svg_1.default;
+var input_clear_svg_1 = (0, tslib_1.__importDefault)(require("../icons/input-clear.js"));
+exports.InputClearIcon = input_clear_svg_1.default;
 // 兼容原来的用法，后续不直接试用。
 exports.closeIcon = react_1.default.createElement(close_svg_1.default, null);
 exports.unDoIcon = react_1.default.createElement(undo_svg_1.default, null);
@@ -189,6 +193,8 @@ registerIcon('alert-info', alert_info_svg_1.default);
 registerIcon('alert-warning', alert_warning_svg_1.default);
 registerIcon('alert-danger', alert_danger_svg_1.default);
 registerIcon('tree-down', tree_down_svg_1.default);
+registerIcon('function', function_svg_1.default);
+registerIcon('input-clear', input_clear_svg_1.default);
 function Icon(_a) {
     var icon = _a.icon, className = _a.className, rest = (0, tslib_1.__rest)(_a, ["icon", "className"]);
     // jest 运行环境下，把指定的 icon 也输出到 snapshot 中。