amis 1.5.6-beta.4 → 1.5.6-beta.5

package/lib/components/formula/Editor.js

@@ -0,0 +1,186 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormulaEditor = void 0;
+var tslib_1 = require("tslib");
+/**
+ * @file 公式编辑器
+ */
+var react_1 = (0, tslib_1.__importDefault)(require("react"));
+var uncontrollable_1 = require("uncontrollable");
+var plugin_1 = require("./plugin");
+var doc_1 = require("amis-formula/dist/doc");
+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 theme_1 = require("../../theme");
+var locale_1 = require("../../locale");
+var FormulaEditor = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(FormulaEditor, _super);
+    function FormulaEditor() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            focused: false
+        };
+        return _this;
+    }
+    FormulaEditor.buildDefaultFunctions = function (doc) {
+        var funcs = [];
+        doc.forEach(function (item) {
+            var namespace = item.namespace || 'Others';
+            var exists = funcs.find(function (item) { return item.groupName === namespace; });
+            if (!exists) {
+                exists = {
+                    groupName: namespace,
+                    items: []
+                };
+                funcs.push(exists);
+            }
+            exists.items.push(item);
+        });
+        return funcs;
+    };
+    FormulaEditor.highlightValue = function (value, variables, functions) {
+        // todo 高亮原始文本
+        return value;
+    };
+    FormulaEditor.prototype.componentWillUnmount = function () {
+        var _b;
+        (_b = this.editorPlugin) === null || _b === void 0 ? void 0 : _b.dispose();
+    };
+    FormulaEditor.prototype.handleFocus = function () {
+        this.setState({
+            focused: true
+        });
+    };
+    FormulaEditor.prototype.handleBlur = function () {
+        this.setState({
+            focused: false
+        });
+    };
+    FormulaEditor.prototype.insertValue = function (value, type) {
+        var _b;
+        (_b = this.editorPlugin) === null || _b === void 0 ? void 0 : _b.insertContent(value, type);
+    };
+    FormulaEditor.prototype.handleEditorMounted = function (cm, editor) {
+        var _this = this;
+        this.editorPlugin = new plugin_1.FormulaPlugin(editor, cm, function () { return _this.props; });
+    };
+    FormulaEditor.prototype.validate = function () {
+        var value = this.props.value;
+        try {
+            value
+                ? (0, amis_formula_1.parse)(value, {
+                    evalMode: this.props.evalMode
+                })
+                : null;
+        }
+        catch (e) {
+            return e.message;
+        }
+        return;
+    };
+    FormulaEditor.prototype.handleFunctionSelect = function (item) {
+        var _b;
+        (_b = this.editorPlugin) === null || _b === void 0 ? void 0 : _b.insertContent("" + item.name, 'func');
+    };
+    FormulaEditor.prototype.handleVariableSelect = function (item) {
+        var _b;
+        (_b = this.editorPlugin) === null || _b === void 0 ? void 0 : _b.insertContent({
+            key: item.value,
+            name: item.label
+        }, 'variable');
+    };
+    FormulaEditor.prototype.handleOnChange = function (value) {
+        var onChange = this.props.onChange;
+        onChange === null || onChange === void 0 ? void 0 : onChange(value);
+    };
+    FormulaEditor.prototype.editorFactory = function (dom, cm) {
+        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 focused = this.state.focused;
+        return (react_1.default.createElement("div", { className: cx("FormulaEditor", {
+                'is-focused': focused
+            }) },
+            react_1.default.createElement("div", { className: cx("FormulaEditor-header") }, header !== null && header !== void 0 ? header : '表达式'),
+            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)));
+    };
+    var _a;
+    var _b;
+    _a = FormulaEditor;
+    FormulaEditor.defaultProps = {
+        functions: _a.buildDefaultFunctions(doc_1.doc),
+        variables: [],
+        evalMode: true
+    };
+    (0, tslib_1.__decorate)([
+        helper_1.autobind,
+        (0, tslib_1.__metadata)("design:type", Function),
+        (0, tslib_1.__metadata)("design:paramtypes", []),
+        (0, tslib_1.__metadata)("design:returntype", void 0)
+    ], FormulaEditor.prototype, "handleFocus", null);
+    (0, tslib_1.__decorate)([
+        helper_1.autobind,
+        (0, tslib_1.__metadata)("design:type", Function),
+        (0, tslib_1.__metadata)("design:paramtypes", []),
+        (0, tslib_1.__metadata)("design:returntype", void 0)
+    ], FormulaEditor.prototype, "handleBlur", null);
+    (0, tslib_1.__decorate)([
+        helper_1.autobind,
+        (0, tslib_1.__metadata)("design:type", Function),
+        (0, tslib_1.__metadata)("design:paramtypes", [Object, String]),
+        (0, tslib_1.__metadata)("design:returntype", void 0)
+    ], FormulaEditor.prototype, "insertValue", null);
+    (0, tslib_1.__decorate)([
+        helper_1.autobind,
+        (0, tslib_1.__metadata)("design:type", Function),
+        (0, tslib_1.__metadata)("design:paramtypes", [Object, Object]),
+        (0, tslib_1.__metadata)("design:returntype", void 0)
+    ], FormulaEditor.prototype, "handleEditorMounted", null);
+    (0, tslib_1.__decorate)([
+        helper_1.autobind,
+        (0, tslib_1.__metadata)("design:type", Function),
+        (0, tslib_1.__metadata)("design:paramtypes", []),
+        (0, tslib_1.__metadata)("design:returntype", void 0)
+    ], FormulaEditor.prototype, "validate", null);
+    (0, tslib_1.__decorate)([
+        helper_1.autobind,
+        (0, tslib_1.__metadata)("design:type", Function),
+        (0, tslib_1.__metadata)("design:paramtypes", [Object]),
+        (0, tslib_1.__metadata)("design:returntype", void 0)
+    ], FormulaEditor.prototype, "handleFunctionSelect", null);
+    (0, tslib_1.__decorate)([
+        helper_1.autobind,
+        (0, tslib_1.__metadata)("design:type", Function),
+        (0, tslib_1.__metadata)("design:paramtypes", [Object]),
+        (0, tslib_1.__metadata)("design:returntype", void 0)
+    ], FormulaEditor.prototype, "handleVariableSelect", null);
+    (0, tslib_1.__decorate)([
+        helper_1.autobind,
+        (0, tslib_1.__metadata)("design:type", Function),
+        (0, tslib_1.__metadata)("design:paramtypes", [Object]),
+        (0, tslib_1.__metadata)("design:returntype", void 0)
+    ], FormulaEditor.prototype, "handleOnChange", null);
+    (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:returntype", void 0)
+    ], FormulaEditor.prototype, "editorFactory", null);
+    return FormulaEditor;
+}(react_1.default.Component));
+exports.FormulaEditor = FormulaEditor;
+exports.default = (0, uncontrollable_1.uncontrollable)((0, theme_1.themeable)((0, locale_1.localeable)(FormulaEditor)), {
+    value: 'onChange'
+}, ['validate']);
+//# sourceMappingURL=./components/formula/Editor.js.map

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

@@ -0,0 +1,13 @@
+{
+    "version": 3,
+    "file": "Editor.js",
+    "sourceRoot": "",
+    "sources": [
+        "/src/components/formula/Editor.tsx"
+    ],
+    "names": [],
+    "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  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-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\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"
+    ]
+}

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

@@ -0,0 +1,67 @@
+/// <reference types="hoist-non-react-statics" />
+import React from 'react';
+import { ThemeProps } from '../../theme';
+import type { FuncGroup, FuncItem } from './Editor';
+export interface FuncListProps extends ThemeProps {
+    data: Array<FuncGroup>;
+    onSelect?: (item: FuncItem) => void;
+}
+export declare function FuncList(props: FuncListProps): JSX.Element;
+declare const _default: {
+    new (props: (Omit<FuncListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps) | Readonly<Omit<FuncListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>): {
+        render(): JSX.Element;
+        context: any;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Omit<FuncListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<Omit<FuncListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<Omit<FuncListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<Omit<FuncListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<Omit<FuncListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<Omit<FuncListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Omit<FuncListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<Omit<FuncListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<Omit<FuncListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    new (props: Omit<FuncListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps, context: any): {
+        render(): JSX.Element;
+        context: any;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Omit<FuncListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<Omit<FuncListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<Omit<FuncListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<Omit<FuncListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<Omit<FuncListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<Omit<FuncListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Omit<FuncListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<Omit<FuncListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<Omit<FuncListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    displayName: string;
+    contextType: React.Context<string>;
+    ComposedComponent: React.ComponentType<typeof FuncList>;
+} & import("hoist-non-react-statics").NonReactStatics<typeof FuncList, {}> & {
+    ComposedComponent: typeof FuncList;
+};
+export default _default;

package/lib/components/formula/FuncList.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FuncList = void 0;
+var tslib_1 = require("tslib");
+var react_1 = (0, tslib_1.__importDefault)(require("react"));
+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"));
+function FuncList(props) {
+    var _a;
+    var cx = props.classnames;
+    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) {
+        var filtered = props.data
+            .map(function (item) {
+            return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, item), { items: term
+                    ? item.items.filter(function (item) { return ~item.name.indexOf(term.toUpperCase()); })
+                    : item.items });
+        })
+            .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("p", null, activeFunc.example),
+                react_1.default.createElement("div", null, activeFunc.description))) : null))));
+}
+exports.FuncList = FuncList;
+exports.default = (0, theme_1.themeable)(FuncList);
+//# sourceMappingURL=./components/formula/FuncList.js.map

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

@@ -0,0 +1,13 @@
+{
+    "version": 3,
+    "file": "FuncList.js",
+    "sourceRoot": "",
+    "sources": [
+        "/src/components/formula/FuncList.tsx"
+    ],
+    "names": [],
+    "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              <p>{activeFunc.example}</p>\n              <div>{activeFunc.description}</div>\n            </div>\n          ) : null}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default themeable(FuncList);\n"
+    ]
+}