amis-ui 1.0.0-beta.0

package/dist/components/formula/Editor.d.ts

@@ -0,0 +1,362 @@
+/// <reference types="codemirror" />
+/// <reference types="hoist-non-react-statics" />
+/**
+ * @file 公式编辑器
+ */
+import React from 'react';
+import { ThemeProps, LocaleProps } from 'amis-core';
+import { FormulaPlugin } from './plugin';
+export interface VariableItem {
+    label: string;
+    value?: string;
+    children?: Array<VariableItem>;
+    type: '';
+    tag?: string;
+    selectMode?: 'tree' | 'tabs';
+}
+export interface FuncGroup {
+    groupName: string;
+    items: Array<FuncItem>;
+}
+export interface FuncItem {
+    name: string;
+    example?: string;
+    description?: string;
+    [propName: string]: any;
+}
+export interface FormulaEditorProps extends ThemeProps, LocaleProps {
+    onChange?: (value: string) => void;
+    value?: string;
+    /**
+     * evalMode 即直接就是表达式，否则
+     * 需要 ${这里面才是表达式}
+     * 默认为 true
+     */
+    evalMode?: boolean;
+    /**
+     * 用于提示的变量集合，默认为空
+     */
+    variables?: Array<VariableItem>;
+    /**
+     * 变量展现模式，可选值：'tabs' ｜ 'tree'
+     */
+    variableMode?: 'tabs' | 'tree';
+    /**
+     * 函数集合，默认不需要传，即  amis-formula 里面那个函数
+     * 如果有扩充，则需要传。
+     */
+    functions?: Array<FuncGroup>;
+    /**
+     * 顶部标题，默认为表达式
+     */
+    header: string;
+    variableClassName?: string;
+    functionClassName?: string;
+}
+export interface FunctionsProps {
+    name: string;
+    items: FunctionProps[];
+}
+export interface FunctionProps {
+    name: string;
+    intro: string;
+    usage: string;
+    example: string;
+}
+export interface FormulaState {
+    focused: boolean;
+}
+export declare class FormulaEditor extends React.Component<FormulaEditorProps, FormulaState> {
+    state: FormulaState;
+    editorPlugin?: FormulaPlugin;
+    static buildDefaultFunctions(doc: Array<{
+        namespace: string;
+        name: string;
+        [propName: string]: any;
+    }>): FuncGroup[];
+    static defaultProps: Pick<FormulaEditorProps, 'variables' | 'evalMode'>;
+    static highlightValue(value: string, variables: Array<VariableItem>, evalMode?: boolean): {
+        html: string;
+    } | undefined;
+    componentWillUnmount(): void;
+    handleFocus(): void;
+    handleBlur(): void;
+    insertValue(value: any, type: 'variable' | 'func'): void;
+    handleEditorMounted(cm: any, editor: any): void;
+    validate(): any;
+    handleFunctionSelect(item: FuncItem): void;
+    handleVariableSelect(item: VariableItem): void;
+    handleOnChange(value: any): void;
+    editorFactory(dom: HTMLElement, cm: any): import("codemirror").Editor;
+    render(): JSX.Element;
+}
+declare const _default: {
+    new (props: Omit<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "classnames" | "onChange" | "header" | "className" | "classPrefix" | "theme" | "value" | "variableMode" | "functions" | "variableClassName" | "functionClassName"> & Partial<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "variables" | "evalMode">> & Partial<Pick<Pick<FormulaEditorProps, "variables" | "evalMode">, never>> & {
+        locale?: string | undefined;
+        translate?: ((str: string, ...args: any[]) => string) | undefined;
+    }, keyof ThemeProps> & import("amis-core/dist/theme").ThemeOutterProps): {
+        ref: any;
+        childRef(ref: any): void;
+        getWrappedInstance(): any;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Omit<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "classnames" | "onChange" | "header" | "className" | "classPrefix" | "theme" | "value" | "variableMode" | "functions" | "variableClassName" | "functionClassName"> & Partial<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "variables" | "evalMode">> & Partial<Pick<Pick<FormulaEditorProps, "variables" | "evalMode">, never>> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }, keyof ThemeProps> & import("amis-core/dist/theme").ThemeOutterProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<Omit<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "classnames" | "onChange" | "header" | "className" | "classPrefix" | "theme" | "value" | "variableMode" | "functions" | "variableClassName" | "functionClassName"> & Partial<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "variables" | "evalMode">> & Partial<Pick<Pick<FormulaEditorProps, "variables" | "evalMode">, never>> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }, keyof ThemeProps> & import("amis-core/dist/theme").ThemeOutterProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<Omit<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "classnames" | "onChange" | "header" | "className" | "classPrefix" | "theme" | "value" | "variableMode" | "functions" | "variableClassName" | "functionClassName"> & Partial<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "variables" | "evalMode">> & Partial<Pick<Pick<FormulaEditorProps, "variables" | "evalMode">, never>> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }, keyof ThemeProps> & import("amis-core/dist/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<Omit<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "classnames" | "onChange" | "header" | "className" | "classPrefix" | "theme" | "value" | "variableMode" | "functions" | "variableClassName" | "functionClassName"> & Partial<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "variables" | "evalMode">> & Partial<Pick<Pick<FormulaEditorProps, "variables" | "evalMode">, never>> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }, keyof ThemeProps> & import("amis-core/dist/theme").ThemeOutterProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<Omit<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "classnames" | "onChange" | "header" | "className" | "classPrefix" | "theme" | "value" | "variableMode" | "functions" | "variableClassName" | "functionClassName"> & Partial<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "variables" | "evalMode">> & Partial<Pick<Pick<FormulaEditorProps, "variables" | "evalMode">, never>> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }, keyof ThemeProps> & import("amis-core/dist/theme").ThemeOutterProps>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<Omit<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "classnames" | "onChange" | "header" | "className" | "classPrefix" | "theme" | "value" | "variableMode" | "functions" | "variableClassName" | "functionClassName"> & Partial<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "variables" | "evalMode">> & Partial<Pick<Pick<FormulaEditorProps, "variables" | "evalMode">, never>> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }, keyof ThemeProps> & import("amis-core/dist/theme").ThemeOutterProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Omit<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "classnames" | "onChange" | "header" | "className" | "classPrefix" | "theme" | "value" | "variableMode" | "functions" | "variableClassName" | "functionClassName"> & Partial<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "variables" | "evalMode">> & Partial<Pick<Pick<FormulaEditorProps, "variables" | "evalMode">, never>> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }, keyof ThemeProps> & import("amis-core/dist/theme").ThemeOutterProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<Omit<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "classnames" | "onChange" | "header" | "className" | "classPrefix" | "theme" | "value" | "variableMode" | "functions" | "variableClassName" | "functionClassName"> & Partial<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "variables" | "evalMode">> & Partial<Pick<Pick<FormulaEditorProps, "variables" | "evalMode">, never>> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }, keyof ThemeProps> & import("amis-core/dist/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<Omit<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "classnames" | "onChange" | "header" | "className" | "classPrefix" | "theme" | "value" | "variableMode" | "functions" | "variableClassName" | "functionClassName"> & Partial<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "variables" | "evalMode">> & Partial<Pick<Pick<FormulaEditorProps, "variables" | "evalMode">, never>> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }, keyof ThemeProps> & import("amis-core/dist/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    displayName: string;
+    contextType: React.Context<string>;
+    ComposedComponent: React.ComponentType<{
+        new (props: Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "classnames" | "onChange" | "header" | "className" | "classPrefix" | "theme" | "value" | "variableMode" | "functions" | "variableClassName" | "functionClassName"> & Partial<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "variables" | "evalMode">> & Partial<Pick<Pick<FormulaEditorProps, "variables" | "evalMode">, never>> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }): {
+            ref: any;
+            childRef(ref: any): void;
+            getWrappedInstance(): any;
+            render(): JSX.Element;
+            context: any;
+            /**
+             * 函数集合，默认不需要传，即  amis-formula 里面那个函数
+             * 如果有扩充，则需要传。
+             */
+            setState<K_1 extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "classnames" | "onChange" | "header" | "className" | "classPrefix" | "theme" | "value" | "variableMode" | "functions" | "variableClassName" | "functionClassName"> & Partial<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "variables" | "evalMode">> & Partial<Pick<Pick<FormulaEditorProps, "variables" | "evalMode">, never>> & {
+                locale?: string | undefined;
+                translate?: ((str: string, ...args: any[]) => string) | undefined;
+            }>) => {} | Pick<{}, K_1> | null) | Pick<{}, K_1> | null, callback?: (() => void) | undefined): void;
+            forceUpdate(callback?: (() => void) | undefined): void;
+            readonly props: Readonly<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "classnames" | "onChange" | "header" | "className" | "classPrefix" | "theme" | "value" | "variableMode" | "functions" | "variableClassName" | "functionClassName"> & Partial<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "variables" | "evalMode">> & Partial<Pick<Pick<FormulaEditorProps, "variables" | "evalMode">, never>> & {
+                locale?: string | undefined;
+                translate?: ((str: string, ...args: any[]) => string) | undefined;
+            }> & Readonly<{
+                children?: React.ReactNode;
+            }>;
+            state: Readonly<{}>;
+            refs: {
+                [key: string]: React.ReactInstance;
+            };
+            componentDidMount?(): void;
+            shouldComponentUpdate?(nextProps: Readonly<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "classnames" | "onChange" | "header" | "className" | "classPrefix" | "theme" | "value" | "variableMode" | "functions" | "variableClassName" | "functionClassName"> & Partial<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "variables" | "evalMode">> & Partial<Pick<Pick<FormulaEditorProps, "variables" | "evalMode">, never>> & {
+                locale?: string | undefined;
+                translate?: ((str: string, ...args: any[]) => string) | undefined;
+            }>, nextState: Readonly<{}>, nextContext: any): boolean;
+            componentWillUnmount?(): void;
+            componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+            getSnapshotBeforeUpdate?(prevProps: Readonly<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "classnames" | "onChange" | "header" | "className" | "classPrefix" | "theme" | "value" | "variableMode" | "functions" | "variableClassName" | "functionClassName"> & Partial<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "variables" | "evalMode">> & Partial<Pick<Pick<FormulaEditorProps, "variables" | "evalMode">, never>> & {
+                locale?: string | undefined;
+                translate?: ((str: string, ...args: any[]) => string) | undefined;
+            }>, prevState: Readonly<{}>): any;
+            componentDidUpdate?(prevProps: Readonly<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "classnames" | "onChange" | "header" | "className" | "classPrefix" | "theme" | "value" | "variableMode" | "functions" | "variableClassName" | "functionClassName"> & Partial<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "variables" | "evalMode">> & Partial<Pick<Pick<FormulaEditorProps, "variables" | "evalMode">, never>> & {
+                locale?: string | undefined;
+                translate?: ((str: string, ...args: any[]) => string) | undefined;
+            }>, prevState: Readonly<{}>, snapshot?: any): void;
+            componentWillMount?(): void;
+            UNSAFE_componentWillMount?(): void;
+            componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "classnames" | "onChange" | "header" | "className" | "classPrefix" | "theme" | "value" | "variableMode" | "functions" | "variableClassName" | "functionClassName"> & Partial<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "variables" | "evalMode">> & Partial<Pick<Pick<FormulaEditorProps, "variables" | "evalMode">, never>> & {
+                locale?: string | undefined;
+                translate?: ((str: string, ...args: any[]) => string) | undefined;
+            }>, nextContext: any): void;
+            UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "classnames" | "onChange" | "header" | "className" | "classPrefix" | "theme" | "value" | "variableMode" | "functions" | "variableClassName" | "functionClassName"> & Partial<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "variables" | "evalMode">> & Partial<Pick<Pick<FormulaEditorProps, "variables" | "evalMode">, never>> & {
+                locale?: string | undefined;
+                translate?: ((str: string, ...args: any[]) => string) | undefined;
+            }>, nextContext: any): void;
+            componentWillUpdate?(nextProps: Readonly<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "classnames" | "onChange" | "header" | "className" | "classPrefix" | "theme" | "value" | "variableMode" | "functions" | "variableClassName" | "functionClassName"> & Partial<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "variables" | "evalMode">> & Partial<Pick<Pick<FormulaEditorProps, "variables" | "evalMode">, never>> & {
+                locale?: string | undefined;
+                translate?: ((str: string, ...args: any[]) => string) | undefined;
+            }>, nextState: Readonly<{}>, nextContext: any): void;
+            UNSAFE_componentWillUpdate?(nextProps: Readonly<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "classnames" | "onChange" | "header" | "className" | "classPrefix" | "theme" | "value" | "variableMode" | "functions" | "variableClassName" | "functionClassName"> & Partial<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "variables" | "evalMode">> & Partial<Pick<Pick<FormulaEditorProps, "variables" | "evalMode">, never>> & {
+                locale?: string | undefined;
+                translate?: ((str: string, ...args: any[]) => string) | undefined;
+            }>, nextState: Readonly<{}>, nextContext: any): void;
+        };
+        displayName: string;
+        contextType: React.Context<string>;
+        ComposedComponent: React.ComponentType<typeof FormulaEditor>;
+    } & import("hoist-non-react-statics").NonReactStatics<typeof FormulaEditor, {}> & {
+        ComposedComponent: typeof FormulaEditor;
+    }>;
+} & import("hoist-non-react-statics").NonReactStatics<{
+    new (props: Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "classnames" | "onChange" | "header" | "className" | "classPrefix" | "theme" | "value" | "variableMode" | "functions" | "variableClassName" | "functionClassName"> & Partial<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "variables" | "evalMode">> & Partial<Pick<Pick<FormulaEditorProps, "variables" | "evalMode">, never>> & {
+        locale?: string | undefined;
+        translate?: ((str: string, ...args: any[]) => string) | undefined;
+    }): {
+        ref: any;
+        childRef(ref: any): void;
+        getWrappedInstance(): any;
+        render(): JSX.Element;
+        context: any;
+        /**
+         * 函数集合，默认不需要传，即  amis-formula 里面那个函数
+         * 如果有扩充，则需要传。
+         */
+        setState<K_1 extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "classnames" | "onChange" | "header" | "className" | "classPrefix" | "theme" | "value" | "variableMode" | "functions" | "variableClassName" | "functionClassName"> & Partial<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "variables" | "evalMode">> & Partial<Pick<Pick<FormulaEditorProps, "variables" | "evalMode">, never>> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }>) => {} | Pick<{}, K_1> | null) | Pick<{}, K_1> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "classnames" | "onChange" | "header" | "className" | "classPrefix" | "theme" | "value" | "variableMode" | "functions" | "variableClassName" | "functionClassName"> & Partial<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "variables" | "evalMode">> & Partial<Pick<Pick<FormulaEditorProps, "variables" | "evalMode">, never>> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "classnames" | "onChange" | "header" | "className" | "classPrefix" | "theme" | "value" | "variableMode" | "functions" | "variableClassName" | "functionClassName"> & Partial<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "variables" | "evalMode">> & Partial<Pick<Pick<FormulaEditorProps, "variables" | "evalMode">, never>> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "classnames" | "onChange" | "header" | "className" | "classPrefix" | "theme" | "value" | "variableMode" | "functions" | "variableClassName" | "functionClassName"> & Partial<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "variables" | "evalMode">> & Partial<Pick<Pick<FormulaEditorProps, "variables" | "evalMode">, never>> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "classnames" | "onChange" | "header" | "className" | "classPrefix" | "theme" | "value" | "variableMode" | "functions" | "variableClassName" | "functionClassName"> & Partial<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "variables" | "evalMode">> & Partial<Pick<Pick<FormulaEditorProps, "variables" | "evalMode">, never>> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "classnames" | "onChange" | "header" | "className" | "classPrefix" | "theme" | "value" | "variableMode" | "functions" | "variableClassName" | "functionClassName"> & Partial<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "variables" | "evalMode">> & Partial<Pick<Pick<FormulaEditorProps, "variables" | "evalMode">, never>> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "classnames" | "onChange" | "header" | "className" | "classPrefix" | "theme" | "value" | "variableMode" | "functions" | "variableClassName" | "functionClassName"> & Partial<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "variables" | "evalMode">> & Partial<Pick<Pick<FormulaEditorProps, "variables" | "evalMode">, never>> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "classnames" | "onChange" | "header" | "className" | "classPrefix" | "theme" | "value" | "variableMode" | "functions" | "variableClassName" | "functionClassName"> & Partial<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "variables" | "evalMode">> & Partial<Pick<Pick<FormulaEditorProps, "variables" | "evalMode">, never>> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "classnames" | "onChange" | "header" | "className" | "classPrefix" | "theme" | "value" | "variableMode" | "functions" | "variableClassName" | "functionClassName"> & Partial<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "variables" | "evalMode">> & Partial<Pick<Pick<FormulaEditorProps, "variables" | "evalMode">, never>> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    displayName: string;
+    contextType: React.Context<string>;
+    ComposedComponent: React.ComponentType<typeof FormulaEditor>;
+} & import("hoist-non-react-statics").NonReactStatics<typeof FormulaEditor, {}> & {
+    ComposedComponent: typeof FormulaEditor;
+}, {}> & {
+    ComposedComponent: {
+        new (props: Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "classnames" | "onChange" | "header" | "className" | "classPrefix" | "theme" | "value" | "variableMode" | "functions" | "variableClassName" | "functionClassName"> & Partial<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "variables" | "evalMode">> & Partial<Pick<Pick<FormulaEditorProps, "variables" | "evalMode">, never>> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }): {
+            ref: any;
+            childRef(ref: any): void;
+            getWrappedInstance(): any;
+            render(): JSX.Element;
+            context: any;
+            /**
+             * 函数集合，默认不需要传，即  amis-formula 里面那个函数
+             * 如果有扩充，则需要传。
+             */
+            setState<K_1 extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "classnames" | "onChange" | "header" | "className" | "classPrefix" | "theme" | "value" | "variableMode" | "functions" | "variableClassName" | "functionClassName"> & Partial<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "variables" | "evalMode">> & Partial<Pick<Pick<FormulaEditorProps, "variables" | "evalMode">, never>> & {
+                locale?: string | undefined;
+                translate?: ((str: string, ...args: any[]) => string) | undefined;
+            }>) => {} | Pick<{}, K_1> | null) | Pick<{}, K_1> | null, callback?: (() => void) | undefined): void;
+            forceUpdate(callback?: (() => void) | undefined): void;
+            readonly props: Readonly<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "classnames" | "onChange" | "header" | "className" | "classPrefix" | "theme" | "value" | "variableMode" | "functions" | "variableClassName" | "functionClassName"> & Partial<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "variables" | "evalMode">> & Partial<Pick<Pick<FormulaEditorProps, "variables" | "evalMode">, never>> & {
+                locale?: string | undefined;
+                translate?: ((str: string, ...args: any[]) => string) | undefined;
+            }> & Readonly<{
+                children?: React.ReactNode;
+            }>;
+            state: Readonly<{}>;
+            refs: {
+                [key: string]: React.ReactInstance;
+            };
+            componentDidMount?(): void;
+            shouldComponentUpdate?(nextProps: Readonly<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "classnames" | "onChange" | "header" | "className" | "classPrefix" | "theme" | "value" | "variableMode" | "functions" | "variableClassName" | "functionClassName"> & Partial<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "variables" | "evalMode">> & Partial<Pick<Pick<FormulaEditorProps, "variables" | "evalMode">, never>> & {
+                locale?: string | undefined;
+                translate?: ((str: string, ...args: any[]) => string) | undefined;
+            }>, nextState: Readonly<{}>, nextContext: any): boolean;
+            componentWillUnmount?(): void;
+            componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+            getSnapshotBeforeUpdate?(prevProps: Readonly<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "classnames" | "onChange" | "header" | "className" | "classPrefix" | "theme" | "value" | "variableMode" | "functions" | "variableClassName" | "functionClassName"> & Partial<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "variables" | "evalMode">> & Partial<Pick<Pick<FormulaEditorProps, "variables" | "evalMode">, never>> & {
+                locale?: string | undefined;
+                translate?: ((str: string, ...args: any[]) => string) | undefined;
+            }>, prevState: Readonly<{}>): any;
+            componentDidUpdate?(prevProps: Readonly<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "classnames" | "onChange" | "header" | "className" | "classPrefix" | "theme" | "value" | "variableMode" | "functions" | "variableClassName" | "functionClassName"> & Partial<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "variables" | "evalMode">> & Partial<Pick<Pick<FormulaEditorProps, "variables" | "evalMode">, never>> & {
+                locale?: string | undefined;
+                translate?: ((str: string, ...args: any[]) => string) | undefined;
+            }>, prevState: Readonly<{}>, snapshot?: any): void;
+            componentWillMount?(): void;
+            UNSAFE_componentWillMount?(): void;
+            componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "classnames" | "onChange" | "header" | "className" | "classPrefix" | "theme" | "value" | "variableMode" | "functions" | "variableClassName" | "functionClassName"> & Partial<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "variables" | "evalMode">> & Partial<Pick<Pick<FormulaEditorProps, "variables" | "evalMode">, never>> & {
+                locale?: string | undefined;
+                translate?: ((str: string, ...args: any[]) => string) | undefined;
+            }>, nextContext: any): void;
+            UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "classnames" | "onChange" | "header" | "className" | "classPrefix" | "theme" | "value" | "variableMode" | "functions" | "variableClassName" | "functionClassName"> & Partial<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "variables" | "evalMode">> & Partial<Pick<Pick<FormulaEditorProps, "variables" | "evalMode">, never>> & {
+                locale?: string | undefined;
+                translate?: ((str: string, ...args: any[]) => string) | undefined;
+            }>, nextContext: any): void;
+            componentWillUpdate?(nextProps: Readonly<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "classnames" | "onChange" | "header" | "className" | "classPrefix" | "theme" | "value" | "variableMode" | "functions" | "variableClassName" | "functionClassName"> & Partial<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "variables" | "evalMode">> & Partial<Pick<Pick<FormulaEditorProps, "variables" | "evalMode">, never>> & {
+                locale?: string | undefined;
+                translate?: ((str: string, ...args: any[]) => string) | undefined;
+            }>, nextState: Readonly<{}>, nextContext: any): void;
+            UNSAFE_componentWillUpdate?(nextProps: Readonly<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "classnames" | "onChange" | "header" | "className" | "classPrefix" | "theme" | "value" | "variableMode" | "functions" | "variableClassName" | "functionClassName"> & Partial<Pick<Omit<FormulaEditorProps, keyof LocaleProps>, "variables" | "evalMode">> & Partial<Pick<Pick<FormulaEditorProps, "variables" | "evalMode">, never>> & {
+                locale?: string | undefined;
+                translate?: ((str: string, ...args: any[]) => string) | undefined;
+            }>, nextState: Readonly<{}>, nextContext: any): void;
+        };
+        displayName: string;
+        contextType: React.Context<string>;
+        ComposedComponent: React.ComponentType<typeof FormulaEditor>;
+    } & import("hoist-non-react-statics").NonReactStatics<typeof FormulaEditor, {}> & {
+        ComposedComponent: typeof FormulaEditor;
+    };
+};
+export default _default;

package/dist/components/formula/Editor.js

@@ -0,0 +1,217 @@
+/**
+ * amis-ui v1.0.0-beta.0
+ * Copyright 2018-2022 fex
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var uncontrollable = require('uncontrollable');
+var amisCore = require('amis-core');
+var doc = require('amis-formula/dist/doc');
+var plugin = require('./plugin.js');
+var FuncList = require('./FuncList.js');
+var VariableList = require('./VariableList.js');
+var CodeMirror = require('../CodeMirror.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var FormulaEditor = /** @class */ (function (_super) {
+    tslib.__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, evalMode) {
+        if (evalMode === void 0) { evalMode = true; }
+        if (!Array.isArray(variables) || !variables.length || !value) {
+            return;
+        }
+        var varMap = {};
+        amisCore.eachTree(variables, function (item) {
+            if (item.value) {
+                var key = item.value;
+                varMap[key] = item.label;
+            }
+        });
+        var vars = Object.keys(varMap)
+            .filter(function (item) { return item; })
+            .sort(function (a, b) { return b.length - a.length; });
+        var content = value || '';
+        var html = '';
+        // 标记方法调用
+        html = content.replace(/([A-Z]+)\s*\(/g, function (_, func, pos) {
+            return _ === null || _ === void 0 ? void 0 : _.replace(func, "<span class=\"c-func\">".concat(func, "</span>"));
+        });
+        vars.forEach(function (v) {
+            var from = 0;
+            var idx = -1;
+            while (~(idx = content.indexOf(v, from))) {
+                html = html.replace(v, "<span class=\"c-field\">".concat(varMap[v], "</span>"));
+                from = idx + v.length;
+            }
+        });
+        return { html: html };
+    };
+    FormulaEditor.prototype.componentWillUnmount = function () {
+        var _a;
+        (_a = this.editorPlugin) === null || _a === void 0 ? void 0 : _a.dispose();
+    };
+    FormulaEditor.prototype.handleFocus = function () {
+        this.setState({
+            focused: true
+        });
+    };
+    FormulaEditor.prototype.handleBlur = function () {
+        this.setState({
+            focused: false
+        });
+    };
+    FormulaEditor.prototype.insertValue = function (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;
+        this.editorPlugin = new plugin.FormulaPlugin(editor, cm, function () { return _this.props; });
+    };
+    FormulaEditor.prototype.validate = function () {
+        var value = this.props.value;
+        try {
+            value
+                ? amisCore.parse(value, {
+                    evalMode: this.props.evalMode
+                })
+                : null;
+        }
+        catch (e) {
+            return e.message;
+        }
+        return;
+    };
+    FormulaEditor.prototype.handleFunctionSelect = function (item) {
+        var _a;
+        (_a = this.editorPlugin) === null || _a === void 0 ? void 0 : _a.insertContent("".concat(item.name), 'func');
+    };
+    FormulaEditor.prototype.handleVariableSelect = function (item) {
+        var _a;
+        (_a = this.editorPlugin) === null || _a === void 0 ? void 0 : _a.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 plugin.editorFactory(dom, cm, this.props);
+    };
+    FormulaEditor.prototype.render = function () {
+        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;
+        var customFunctions = Array.isArray(functions) ? functions : [];
+        var functionList = tslib.__spreadArray(tslib.__spreadArray([], FormulaEditor.buildDefaultFunctions(doc.doc), true), customFunctions, true);
+        return (React__default["default"].createElement("div", { className: cx("FormulaEditor", {
+                'is-focused': focused
+            }) },
+            React__default["default"].createElement("section", { className: cx("FormulaEditor-content") },
+                React__default["default"].createElement("header", { className: cx("FormulaEditor-header") }, __(header || 'FormulaEditor.title')),
+                React__default["default"].createElement(CodeMirror.CodeMirrorEditor, { className: cx('FormulaEditor-editor'), value: value, onChange: this.handleOnChange, editorFactory: this.editorFactory, editorDidMount: this.handleEditorMounted, onFocus: this.handleFocus, onBlur: this.handleBlur })),
+            React__default["default"].createElement("section", { className: cx('FormulaEditor-settings') },
+                React__default["default"].createElement("div", { className: cx('FormulaEditor-panel') },
+                    variableMode !== 'tabs' ? (React__default["default"].createElement("div", { className: cx('FormulaEditor-panel-header') }, __('FormulaEditor.variable'))) : null,
+                    React__default["default"].createElement("div", { className: cx('FormulaEditor-panel-body', variableMode && "FormulaEditor-panel-body--".concat(variableMode)) },
+                        React__default["default"].createElement(VariableList["default"], { classPrefix: classPrefix, className: cx('FormulaEditor-VariableList', 'FormulaEditor-VariableList-root', variableClassName), selectMode: variableMode, data: variables, onSelect: this.handleVariableSelect }))),
+                React__default["default"].createElement(FuncList["default"], { className: functionClassName, title: __('FormulaEditor.function'), data: functionList, onSelect: this.handleFunctionSelect }))));
+    };
+    FormulaEditor.defaultProps = {
+        variables: [],
+        evalMode: true
+    };
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", []),
+        tslib.__metadata("design:returntype", void 0)
+    ], FormulaEditor.prototype, "handleFocus", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", []),
+        tslib.__metadata("design:returntype", void 0)
+    ], FormulaEditor.prototype, "handleBlur", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [Object, String]),
+        tslib.__metadata("design:returntype", void 0)
+    ], FormulaEditor.prototype, "insertValue", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [Object, Object]),
+        tslib.__metadata("design:returntype", void 0)
+    ], FormulaEditor.prototype, "handleEditorMounted", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", []),
+        tslib.__metadata("design:returntype", void 0)
+    ], FormulaEditor.prototype, "validate", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [Object]),
+        tslib.__metadata("design:returntype", void 0)
+    ], FormulaEditor.prototype, "handleFunctionSelect", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [Object]),
+        tslib.__metadata("design:returntype", void 0)
+    ], FormulaEditor.prototype, "handleVariableSelect", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [Object]),
+        tslib.__metadata("design:returntype", void 0)
+    ], FormulaEditor.prototype, "handleOnChange", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [HTMLElement, Object]),
+        tslib.__metadata("design:returntype", void 0)
+    ], FormulaEditor.prototype, "editorFactory", null);
+    return FormulaEditor;
+}(React__default["default"].Component));
+var Editor = uncontrollable.uncontrollable(amisCore.themeable(amisCore.localeable(FormulaEditor)), {
+    value: 'onChange'
+}, ['validate']);
+
+exports.FormulaEditor = FormulaEditor;
+exports["default"] = Editor;