Merge branch 'fix-fx-formula' of ssh://icode.baidu.com:8235/baidu/amis/editor into fix-fx-formula

Change-Id: Id83f5ccdc1efa081d79b5724c32d46b52d3befed

packages/amis-editor/src/renderer/ExpressionFormulaControl.tsx

@@ -6,8 +6,7 @@ import React from 'react';
 import {autobind, FormControlProps} from 'amis-core';
 import cx from 'classnames';
 import isEqual from 'lodash/isEqual';
-import {FormItem, Button, Icon} from 'amis';
+import {FormItem, Button, Icon, PickerContainer} from 'amis';
-import FormulaPicker from './textarea-formula/FormulaPicker';
 import {FormulaEditor} from 'amis-ui/lib/components/formula/Editor';
 import type {VariableItem} from 'amis-ui/lib/components/formula/Editor';
 import {resolveVariablesFromScope} from './textarea-formula/utils';
@@ -21,8 +20,6 @@ interface ExpressionFormulaControlProps extends FormControlProps {
 interface ExpressionFormulaControlState {
   variables: Array<VariableItem>;
 
-  formulaPickerOpen: boolean;
-
   formulaPickerValue: string;
 }
 
@@ -40,7 +37,6 @@ export default class ExpressionFormulaControl extends React.Component<
     super(props);
     this.state = {
       variables: [],
-      formulaPickerOpen: false,
       formulaPickerValue: ''
     };
   }
@@ -103,21 +99,11 @@ export default class ExpressionFormulaControl extends React.Component<
     return [];
   }
 
-  @autobind
-  openFormulaPickerModal() {
-    this.setState({
-      formulaPickerOpen: true
-    });
-  }
-
   @autobind
   handleConfirm(value = '') {
     value = value.replace(/^\$\{(.*)\}$/, (match: string, p1: string) => p1);
     value = value ? `\${${value}}` : '';
     this.props?.onChange?.(value);
-    this.setState({
-      formulaPickerOpen: false
-    });
   }
 
   @autobind
@@ -128,8 +114,8 @@ export default class ExpressionFormulaControl extends React.Component<
   }
 
   render() {
-    const {value, className, variableMode} = this.props;
+    const {value, className, variableMode, header, ...rest} = this.props;
-    const {formulaPickerOpen, formulaPickerValue} = this.state;
+    const {formulaPickerValue} = this.state;
 
     const variables = this.props.variables || this.state.variables;
     const highlightValue = FormulaEditor.highlightValue(
@@ -139,46 +125,66 @@ export default class ExpressionFormulaControl extends React.Component<
       html: formulaPickerValue
     };
 
+    // 自身字段
+    const selfName = this.props?.data?.name;
+
     return (
       <div className={cx('ae-ExpressionFormulaControl', className)}>
-        {formulaPickerValue ? (
+        <PickerContainer
-          <Button
+          showTitle={false}
-            className="btn-configured"
+          bodyRender={({
-            level="primary"
+            value,
-            tooltip={{
+            onChange
-              placement: 'bottom',
+          }: {
-              tooltipClassName: 'btn-configured-tooltip',
+            onChange: (value: any) => void;
-              children: () => this.renderFormulaValue(highlightValue)
+            value: any;
-            }}
+          }) => {
-            onClick={this.openFormulaPickerModal}
+            return (
-          >
+              <FormulaEditor
-            已配置表达式
+                {...rest}
-            <Icon
+                evalMode={true}
-              icon="close"
+                variableMode={variableMode}
-              className="icon"
+                variables={variables}
-              onClick={this.handleClearExpression}
+                header={header || '表达式'}
-            />
+                value={formulaPickerValue}
-          </Button>
+                onChange={onChange}
-        ) : (
+                selfVariableName={selfName}
-          <Button
+              />
-            className="btn-set-expression"
+            );
-            onClick={this.openFormulaPickerModal}
+          }}
-          >
+          value={formulaPickerValue}
-            点击编写表达式
+          onConfirm={this.handleConfirm}
-          </Button>
+          size="md"
-        )}
+        >
-
+          {({onClick}: {onClick: (e: React.MouseEvent) => void}) =>
-        {formulaPickerOpen ? (
+            formulaPickerValue ? (
-          <FormulaPicker
+              <Button
-            value={formulaPickerValue}
+                className="btn-configured"
-            initable={true}
+                level="primary"
-            variables={variables}
+                tooltip={{
-            variableMode={variableMode}
+                  placement: 'top',
-            evalMode={true}
+                  tooltipTheme: 'dark',
-            onClose={() => this.setState({formulaPickerOpen: false})}
+                  mouseLeaveDelay: 20,
-            onConfirm={this.handleConfirm}
+                  content: value,
-          />
+                  tooltipClassName: 'btn-configured-tooltip',
-        ) : null}
+                  children: () => this.renderFormulaValue(highlightValue)
+                }}
+                onClick={onClick}
+              >
+                已配置表达式
+                <Icon
+                  icon="input-clear"
+                  className="icon"
+                  onClick={this.handleClearExpression}
+                />
+              </Button>
+            ) : (
+              <Button className="btn-set-expression" onClick={onClick}>
+                点击编写表达式
+              </Button>
+            )
+          }
+        </PickerContainer>
       </div>
     );
   }

packages/amis-editor/src/renderer/textarea-formula/plugin.tsx

@@ -206,6 +206,9 @@ export class FormulaPlugin {
     // bca-disable-next-line
     popoverEl.innerHTML = highlightValue.html;
     popoverEl.classList.add('expression-popover');
+    const arrow = document.createElement('div');
+    arrow.classList.add('expression-popover-arrow');
+    popoverEl.appendChild(arrow);
     text.appendChild(popoverEl);
 
     this.editor.markText(from, to, {