feat: 条件组合与公式结合时支持自定义输入框类型 (#9871)

packages/amis-ui/scss/components/_formula.scss

@@ -582,6 +582,19 @@
       padding-left: 0;
     }
 
+    &-custom {
+      border: 0;
+      flex: 1;
+      min-width: 0;
+
+      > div {
+        border: 0;
+        padding: 0 0 0 var(--Form-input-paddingX);
+        align-items: center;
+        height: var(--InputFormula-input-schema-height);
+      }
+    }
+
     &-variable {
       border: none;
       min-height: unset;
@@ -653,6 +666,7 @@
 
       .CodeMirror-sizer {
         min-height: 21px !important;
+        border-right-width: 0 !important;
       }
       .CodeMirror-scroll {
         height: 21px;

packages/amis-ui/src/components/condition-builder/Value.tsx

@@ -1,6 +1,12 @@
 import React from 'react';
 import {FieldSimple} from './types';
-import {ThemeProps, themeable, localeable, LocaleProps} from 'amis-core';
+import {
+  ThemeProps,
+  themeable,
+  localeable,
+  LocaleProps,
+  autobind
+} from 'amis-core';
 import InputBox from '../InputBox';
 import NumberInput from '../NumberInput';
 import DatePicker from '../DatePicker';
@@ -22,6 +28,25 @@ export interface ValueProps extends ThemeProps, LocaleProps {
 }
 
 export class Value extends React.Component<ValueProps> {
+  @autobind
+  renderCustomValue(props: any) {
+    const {renderEtrValue, data, classnames: cx} = this.props;
+    const field = props.inputSettings;
+
+    return renderEtrValue
+      ? renderEtrValue(
+          {...field.value, name: 'TMP_WHATEVER_NAME'}, // name 随便输入，应该是 value 传入的为主，目前表单项内部逻辑还有问题先传一个 name
+
+          {
+            data,
+            onChange: props.onChange,
+            value: props.value,
+            inputClassName: cx(field.className, props.className)
+          }
+        )
+      : null;
+  }
+
   render() {
     let {
       classnames: cx,
@@ -34,7 +59,6 @@ export class Value extends React.Component<ValueProps> {
       disabled,
       formula,
       popOverContainer,
-      renderEtrValue,
       mobileUI
     } = this.props;
     let input: JSX.Element | undefined = undefined;
@@ -50,19 +74,24 @@ export class Value extends React.Component<ValueProps> {
         disabled
       };
 
-      const inputSettings =
-        field.type !== 'custom' && formula?.inputSettings
-          ? {
-              ...formula?.inputSettings,
-              ...field,
-              multiple:
-                field.type === 'select' &&
-                op &&
-                typeof op === 'string' &&
-                ['select_any_in', 'select_not_any_in'].includes(op)
-            }
-          : undefined;
-      input = <FormulaPicker {...formula} inputSettings={inputSettings} />;
+      const inputSettings = formula?.inputSettings
+        ? {
+            ...formula?.inputSettings,
+            ...field,
+            multiple:
+              field.type === 'select' &&
+              op &&
+              typeof op === 'string' &&
+              ['select_any_in', 'select_not_any_in'].includes(op)
+          }
+        : undefined;
+      input = (
+        <FormulaPicker
+          {...formula}
+          inputSettings={inputSettings}
+          customInputRender={this.renderCustomValue}
+        />
+      );
     } else if (field.type === 'text') {
       input = (
         <InputBox
@@ -162,17 +191,11 @@ export class Value extends React.Component<ValueProps> {
         />
       );
     } else if (field.type === 'custom') {
-      input = renderEtrValue
-        ? renderEtrValue(
-            {...field.value, name: 'TMP_WHATEVER_NAME'}, // name 随便输入，应该是 value 传入的为主，目前表单项内部逻辑还有问题先传一个 name
-
-            {
-              data,
-              onChange,
-              value: value ?? field.defaultValue
-            }
-          )
-        : null;
+      input = this.renderCustomValue({
+        value: value ?? field.defaultValue,
+        onChange,
+        inputSettings: field
+      });
     }
 
     return <div className={cx('CBValue')}>{input}</div>;

packages/amis-ui/src/components/formula/Input.tsx

@@ -20,7 +20,7 @@ import NumberInput from '../NumberInput';
 import DatePicker from '../DatePicker';
 import Tag from '../Tag';
 
-import type {FormulaPickerProps} from './Picker';
+import type {FormulaPickerInputSettings, FormulaPickerProps} from './Picker';
 import CodeEditor, {FuncGroup, VariableItem} from './CodeEditor';
 import InputBox from '../InputBox';
 
@@ -30,7 +30,6 @@ export interface FormulaInputProps
       | 'className'
       | 'disabled'
       | 'evalMode'
-      | 'allowInput'
       | 'placeholder'
       | 'clearable'
       | 'borderMode'
@@ -66,9 +65,14 @@ export interface FormulaInputProps
   onChange?: (value: string | any[]) => void;
 
   /**
-   * 子元素渲染
+   * 其他类型渲染器
    */
-  itemRender?: (value: any) => JSX.Element | string;
+  customInputRender?: (props: {
+    value: any;
+    onChange: (value: any) => void;
+    className?: string;
+    inputSettings: FormulaPickerInputSettings;
+  }) => JSX.Element;
 }
 
 const FormulaInput = (props: FormulaInputProps, ref: any) => {
@@ -76,7 +80,6 @@ const FormulaInput = (props: FormulaInputProps, ref: any) => {
     translate: __,
     className,
     classnames: cx,
-    allowInput,
     placeholder,
     borderMode,
     evalMode,
@@ -87,7 +90,7 @@ const FormulaInput = (props: FormulaInputProps, ref: any) => {
     inputSettings = {type: 'text'},
     popOverContainer,
     onChange,
-    itemRender
+    customInputRender
   } = props;
   const schemaType = inputSettings.type;
   /** 自上层共享的属性 */
@@ -149,7 +152,7 @@ const FormulaInput = (props: FormulaInputProps, ref: any) => {
       }
       onChange?.(result);
     },
-    ['onChange']
+    [schemaType, onChange, inputSettings]
   );
 
   let cmptValue = pipInValue(value ?? inputSettings.defaultValue);
@@ -255,6 +258,13 @@ const FormulaInput = (props: FormulaInputProps, ref: any) => {
         onChange={pipOutValue}
       />
     );
+  } else if (!isExpr && schemaType === 'custom' && customInputRender) {
+    return customInputRender({
+      value: cmptValue,
+      onChange: pipOutValue,
+      inputSettings,
+      className: `FormulaPicker-input-custom`
+    });
   } else {
     return (
       <InputBox

packages/amis-ui/src/components/formula/Picker.tsx

@@ -33,7 +33,8 @@ export const InputSchemaType = [
   'date',
   'time',
   'datetime',
-  'select'
+  'select',
+  'custom'
 ] as const;
 
 export type FormulaPickerInputSettingType = (typeof InputSchemaType)[number];
@@ -104,11 +105,6 @@ export interface FormulaPickerProps
    */
   disabled?: boolean;
 
-  /**
-   * 是否允许输入，否需要点击fx在弹窗中输入
-   */
-  allowInput?: boolean;
-
   /**
    * 占位文本
    */
@@ -134,6 +130,16 @@ export interface FormulaPickerProps
    */
   inputSettings?: FormulaPickerInputSettings;
 
+  /**
+   * 其他类型渲染器
+   */
+  customInputRender?: (props: {
+    value: any;
+    onChange: (value: any) => void;
+    className?: string;
+    inputSettings: FormulaPickerInputSettings;
+  }) => JSX.Element;
+
   /**
    * 公式弹出的时候，可以外部设置 variables 和 functions
    */
@@ -475,7 +481,6 @@ export class FormulaPicker extends React.Component<
       classnames: cx,
       translate: __,
       disabled,
-      allowInput = true,
       className,
       style,
       onChange,
@@ -497,6 +502,7 @@ export class FormulaPicker extends React.Component<
       popOverContainer,
       mobileUI,
       inputSettings,
+      customInputRender,
       ...rest
     } = this.props;
     const {isOpened, value, editorValue, isError} = this.state;
@@ -562,7 +568,7 @@ export class FormulaPicker extends React.Component<
                     !!isError ? 'is-error' : ''
                   )}
                   inputSettings={inputSettings}
-                  allowInput={allowInput}
+                  customInputRender={customInputRender}
                   clearable={clearable}
                   evalMode={mixedMode ? false : evalMode}
                   variables={this.state.variables!}
@@ -596,7 +602,7 @@ export class FormulaPicker extends React.Component<
                     !!isError ? 'is-error' : ''
                   )}
                   inputSettings={inputSettings}
-                  allowInput={allowInput}
+                  customInputRender={customInputRender}
                   clearable={clearable}
                   evalMode={mixedMode ? false : evalMode}
                   variables={this.state.variables!}

packages/amis/src/renderers/Form/InputFormula.tsx

@@ -227,7 +227,6 @@ export class InputFormulaRenderer extends React.Component<InputFormulaProps> {
         className={className}
         value={value}
         disabled={disabled}
-        allowInput={allowInput}
         onChange={onChange}
         evalMode={evalMode}
         variables={variables}