fix: conditionBuilder 弹层问题 (#3778)

src/components/condition-builder/Expression.tsx

@@ -45,6 +45,7 @@ export interface ExpressionProps extends ThemeProps {
   searchable?: boolean;
   fieldClassName?: string;
   formula?: FormulaPickerProps;
+  popOverContainer?: any;
 }
 
 const fieldMap = {
@@ -135,7 +136,8 @@ export class Expression extends React.Component<ExpressionProps> {
       data,
       disabled,
       searchable,
-      formula
+      formula,
+      popOverContainer
     } = this.props;
     const inputType =
       ((value as any)?.type === 'field'
@@ -166,6 +168,7 @@ export class Expression extends React.Component<ExpressionProps> {
             data={data}
             disabled={disabled}
             formula={formula}
+            popOverContainer={popOverContainer}
           />
         ) : null}
 
@@ -176,6 +179,7 @@ export class Expression extends React.Component<ExpressionProps> {
             fieldClassName={fieldClassName}
             disabled={disabled}
             searchable={searchable}
+            popOverContainer={popOverContainer}
             options={
               valueField
                 ? filterTree(
@@ -214,6 +218,7 @@ export class Expression extends React.Component<ExpressionProps> {
           <InputSwitch
             disabled={disabled}
             value={inputType}
+            popOverContainer={popOverContainer}
             onChange={this.handleInputTypeChange}
             options={types.map(item => ({
               label: fieldMap[item],

src/components/condition-builder/Field.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import {findDOMNode} from 'react-dom';
 import PopOverContainer from '../PopOverContainer';
 import ListSelection from '../GroupedSelection';
 import ResultBox from '../ResultBox';
@@ -15,6 +16,7 @@ export interface ConditionFieldProps extends ThemeProps, LocaleProps {
   disabled?: boolean;
   fieldClassName?: string;
   searchable?: boolean;
+  popOverContainer?: any;
 }
 
 export interface ConditionFieldState {
@@ -86,11 +88,13 @@ export class ConditionField extends React.Component<
       fieldClassName,
       disabled,
       translate: __,
-      searchable
+      searchable,
+      popOverContainer
     } = this.props;
 
     return (
       <PopOverContainer
+        popOverContainer={popOverContainer || (() => findDOMNode(this))}
         popOverRender={({onClose}) => (
           <>
             {searchable ? (

src/components/condition-builder/Group.tsx

@@ -26,6 +26,7 @@ export interface ConditionGroupProps extends ThemeProps, LocaleProps {
   onDragStart?: (e: React.MouseEvent) => void;
   fieldClassName?: string;
   formula?: FormulaPickerProps;
+  popOverContainer?: any;
 }
 
 export class ConditionGroup extends React.Component<ConditionGroupProps> {
@@ -134,7 +135,8 @@ export class ConditionGroup extends React.Component<ConditionGroupProps> {
       disabled,
       searchable,
       translate: __,
-      formula
+      formula,
+      popOverContainer
     } = this.props;
     return (
       <div className={cx('CBGroup')} data-group-id={value?.id}>
@@ -222,6 +224,7 @@ export class ConditionGroup extends React.Component<ConditionGroupProps> {
                 searchable={searchable}
                 builderMode={builderMode}
                 formula={formula}
+                popOverContainer={popOverContainer}
               />
             ))
           ) : (

src/components/condition-builder/GroupOrItem.tsx

@@ -25,6 +25,7 @@ export interface CBGroupOrItemProps extends ThemeProps {
   onRemove?: (index: number) => void;
   fieldClassName?: string;
   formula?: FormulaPickerProps;
+  popOverContainer?: any;
 }
 
 export class CBGroupOrItem extends React.Component<CBGroupOrItemProps> {
@@ -52,7 +53,8 @@ export class CBGroupOrItem extends React.Component<CBGroupOrItemProps> {
       disabled,
       searchable,
       onDragStart,
-      formula
+      formula,
+      popOverContainer
     } = this.props;
 
     return (
@@ -101,6 +103,7 @@ export class CBGroupOrItem extends React.Component<CBGroupOrItemProps> {
                 funcs={funcs}
                 data={data}
                 formula={formula}
+                popOverContainer={popOverContainer}
               />
               <a className={cx('CBDelete')} onClick={this.handleItemRemove}>
                 <Icon icon="close" className="icon" />

src/components/condition-builder/InputSwitch.tsx

@@ -7,6 +7,7 @@ import {ClassNamesFn, themeable, ThemeProps} from '../../theme';
 export interface InputSwitchProps extends ThemeProps {
   options: Array<any>;
   disabled?: boolean;
+  popOverContainer?: any;
   value: any;
   onChange: (value: any) => void;
 }
@@ -18,10 +19,12 @@ export function InputSwitch({
   value,
   onChange,
   classnames: cx,
-  disabled
+  disabled,
+  popOverContainer
 }: InputSwitchProps) {
   return (
     <PopOverContainer
+      popOverContainer={popOverContainer}
       popOverRender={({onClose}) => (
         <GroupedSelection
           onClick={onClose}

src/components/condition-builder/Item.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import {findDOMNode} from 'react-dom';
 import {
   Fields,
   ConditionRule,
@@ -37,6 +38,7 @@ export interface ConditionItemProps extends ThemeProps, LocaleProps {
   onChange: (value: ConditionRule, index?: number) => void;
   fieldClassName?: string;
   formula?: FormulaPickerProps;
+  popOverContainer?: any;
 }
 
 export class ConditionItem extends React.Component<ConditionItemProps> {
@@ -102,8 +104,16 @@ export class ConditionItem extends React.Component<ConditionItemProps> {
   }
 
   renderLeft() {
-    const {value, fields, funcs, config, disabled, fieldClassName, searchable} =
+    const {
-      this.props;
+      value,
+      fields,
+      funcs,
+      config,
+      disabled,
+      fieldClassName,
+      searchable,
+      popOverContainer
+    } = this.props;
     return (
       <Expression
         config={config}
@@ -114,6 +124,7 @@ export class ConditionItem extends React.Component<ConditionItemProps> {
         fields={fields}
         disabled={disabled}
         searchable={searchable}
+        popOverContainer={popOverContainer}
         allowedTypes={
           ['field', 'func'].filter(
             type => type === 'field' || type === 'func'
@@ -124,7 +135,15 @@ export class ConditionItem extends React.Component<ConditionItemProps> {
   }
 
   renderOperator() {
-    const {funcs, config, fields, value, classnames: cx, disabled} = this.props;
+    const {
+      funcs,
+      config,
+      fields,
+      value,
+      classnames: cx,
+      disabled,
+      popOverContainer
+    } = this.props;
     const left = value?.left;
     let operators: Array<string> = [];
 
@@ -152,6 +171,7 @@ export class ConditionItem extends React.Component<ConditionItemProps> {
       const __ = this.props.translate;
       return (
         <PopOverContainer
+          popOverContainer={popOverContainer || (() => findDOMNode(this))}
           popOverRender={({onClose}) => (
             <GroupedSelection
               onClick={onClose}
@@ -242,7 +262,8 @@ export class ConditionItem extends React.Component<ConditionItemProps> {
       config,
       classnames: cx,
       disabled,
-      formula
+      formula,
+      popOverContainer
     } = this.props;
     let field = {
       ...config.types[type],
@@ -282,6 +303,7 @@ export class ConditionItem extends React.Component<ConditionItemProps> {
             }
             disabled={disabled}
             formula={formula}
+            popOverContainer={popOverContainer}
           />
 
           <span className={cx('CBSeprator')}>~</span>
@@ -300,6 +322,7 @@ export class ConditionItem extends React.Component<ConditionItemProps> {
             }
             disabled={disabled}
             formula={formula}
+            popOverContainer={popOverContainer}
           />
         </>
       );
@@ -321,6 +344,7 @@ export class ConditionItem extends React.Component<ConditionItemProps> {
         }
         disabled={disabled}
         formula={formula}
+        popOverContainer={popOverContainer}
       />
     );
   }

src/components/condition-builder/Value.tsx

@@ -17,6 +17,7 @@ export interface ValueProps extends ThemeProps, LocaleProps {
   op?: OperatorType;
   disabled?: boolean;
   formula?: FormulaPickerProps;
+  popOverContainer?: any;
 }
 
 export class Value extends React.Component<ValueProps> {
@@ -30,7 +31,8 @@ export class Value extends React.Component<ValueProps> {
       translate: __,
       data,
       disabled,
-      formula
+      formula,
+      popOverContainer
     } = this.props;
     let input: JSX.Element | undefined = undefined;
     if (formula) {
@@ -76,6 +78,7 @@ export class Value extends React.Component<ValueProps> {
           onChange={onChange}
           timeFormat=""
           disabled={disabled}
+          popOverContainer={popOverContainer}
         />
       );
     } else if (field.type === 'time') {
@@ -90,6 +93,7 @@ export class Value extends React.Component<ValueProps> {
           dateFormat=""
           timeFormat={field.format || 'HH:mm'}
           disabled={disabled}
+          popOverContainer={popOverContainer}
         />
       );
     } else if (field.type === 'datetime') {
@@ -102,6 +106,7 @@ export class Value extends React.Component<ValueProps> {
           onChange={onChange}
           timeFormat={field.timeFormat || 'HH:mm'}
           disabled={disabled}
+          popOverContainer={popOverContainer}
         />
       );
     } else if (field.type === 'select') {
@@ -119,6 +124,7 @@ export class Value extends React.Component<ValueProps> {
           onChange={onChange}
           multiple={op === 'select_any_in' || op === 'select_not_any_in'}
           disabled={disabled}
+          popOverContainer={popOverContainer}
         />
       );
     } else if (field.type === 'boolean') {

src/components/condition-builder/index.tsx

@@ -13,7 +13,6 @@ import {
   mapTree,
   guid
 } from '../../utils/helper';
-import {findDOMNode} from 'react-dom';
 import animtion from '../../utils/Animation';
 import {FormulaPickerProps} from '../formula/Picker';
 
@@ -31,6 +30,7 @@ export interface ConditionBuilderProps extends ThemeProps, LocaleProps {
   searchable?: boolean;
   fieldClassName?: string;
   formula?: FormulaPickerProps;
+  popOverContainer?: any;
 }
 
 export class QueryBuilder extends React.Component<ConditionBuilderProps> {
@@ -210,7 +210,8 @@ export class QueryBuilder extends React.Component<ConditionBuilderProps> {
       disabled,
       searchable,
       builderMode,
-      formula
+      formula,
+      popOverContainer
     } = this.props;
 
     const normalizedValue = Array.isArray(value?.children)
@@ -247,6 +248,7 @@ export class QueryBuilder extends React.Component<ConditionBuilderProps> {
         disabled={disabled}
         searchable={searchable}
         formula={formula}
+        popOverContainer={popOverContainer}
       />
     );
   }