feat: 公式编辑器input-group支持高亮模式 (#4513)

__tests__/renderers/Form/__snapshots__/inputFormula.test.tsx.snap

@@ -381,12 +381,17 @@ exports[`Renderer:input-formula input-group 1`] = `
                   <div
                     class="cxd-FormulaPicker cxd-Form-control is-input-group"
                   >
-                    <input
-                      autocomplete="off"
-                      class="cxd-FormulaPicker-input"
-                      type="text"
-                      value="SUM(1 + 2)"
-                    />
+                    <div
+                      class="cxd-ResultBox cxd-FormulaPicker-input cxd-ResultBox--borderFull"
+                      tabindex="-1"
+                    >
+                      <input
+                        placeholder="暂无数据"
+                        theme="cxd"
+                        type="text"
+                        value="SUM(1 + 2)"
+                      />
+                    </div>
                     <a
                       class="cxd-FormulaPicker-toggler"
                     >

docs/zh-CN/components/form/input-formula.md

@@ -162,8 +162,8 @@ order: 21
       "name": "formula",
       "label": "公式",
       "variableMode": "tree",
-      "evalMode": false,
-      "value": "${SUM(1 + 2)}",
+      "evalMode": true,
+      "value": "SUM(1 + 2)",
       "inputMode": "input-group",
       "variables": [
         {

scss/components/_formula.scss

@@ -424,9 +424,8 @@
   background-color: #fff;
   height: var(--Form-input-height);
   .#{$ns}FormulaPicker-input {
-    display: inline-block;
-    width: 100%;
-    height: 100%;
+    display: flex;
+    align-items: center;
     background: none;
     padding: 0;
     border: 0;

src/components/formula/Picker.tsx

@@ -174,12 +174,6 @@ export class FormulaPicker extends React.Component<
     this.setState({value}, () => this.handleConfirm());
   }
 
-  @autobind
-  handleInputGroupChange(e: React.ChangeEvent<HTMLInputElement>) {
-    const onChange = this.props.onChange;
-    onChange && onChange(e.currentTarget.value);
-  }
-
   @autobind
   handleEditorChange(value: string) {
     this.setState({
@@ -248,10 +242,11 @@ export class FormulaPicker extends React.Component<
     const {translate: __} = this.props;
 
     try {
-      parse(value, {
-        evalMode: this.props.evalMode,
-        allowFilter: false
-      });
+      value &&
+        parse(value, {
+          evalMode: this.props.evalMode,
+          allowFilter: false
+        });
 
       return true;
     } catch (e) {
@@ -380,14 +375,30 @@ export class FormulaPicker extends React.Component<
             )}
             {mode === 'input-group' && (
               <>
-                <Input
-                  className={cx('FormulaPicker-input')}
-                  onChange={this.handleInputGroupChange}
-                  placeholder={allowInput ? placeholder : ''}
-                  autoComplete="off"
+                <ResultBox
+                  className={cx(
+                    'FormulaPicker-input',
+                    isOpened ? 'is-active' : '',
+                    !!isError ? 'is-error' : ''
+                  )}
+                  allowInput={allowInput}
+                  clearable={clearable}
                   value={value}
+                  result={
+                    allowInput
+                      ? void 0
+                      : FormulaEditor.highlightValue(
+                          value,
+                          variables!,
+                          this.props.evalMode
+                        )
+                  }
+                  itemRender={this.renderFormulaValue}
+                  onResultChange={noop}
+                  onChange={this.handleInputChange}
                   disabled={disabled}
-                  readOnly={!allowInput}
+                  borderMode={borderMode}
+                  placeholder={placeholder}
                 />
 
                 <a

src/renderers/Form/InputFormula.tsx

@@ -152,7 +152,7 @@ export class InputFormulaRenderer extends React.Component<InputFormulaProps> {
   validate() {
     const {translate: __, value} = this.props;
 
-    if (this.ref?.validate) {
+    if (this.ref?.validate && value) {
       const res = this.ref.validate(value);
       if (res !== true) {
         return __('FormulaEditor.invalidData', {err: res});