From ea1f47d91dd00ac8089efd79cb5a9ba13101f510 Mon Sep 17 00:00:00 2001 From: Allen Date: Wed, 16 Mar 2022 19:18:44 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20conditionBuilder=20=E5=BC=B9=E5=B1=82?= =?UTF-8?q?=E9=97=AE=E9=A2=98=20(#3778)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../condition-builder/Expression.tsx | 7 +++- src/components/condition-builder/Field.tsx | 6 +++- src/components/condition-builder/Group.tsx | 5 ++- .../condition-builder/GroupOrItem.tsx | 5 ++- .../condition-builder/InputSwitch.tsx | 5 ++- src/components/condition-builder/Item.tsx | 32 ++++++++++++++++--- src/components/condition-builder/Value.tsx | 8 ++++- src/components/condition-builder/index.tsx | 6 ++-- 8 files changed, 62 insertions(+), 12 deletions(-) diff --git a/src/components/condition-builder/Expression.tsx b/src/components/condition-builder/Expression.tsx index 392715626..011fc47d0 100644 --- a/src/components/condition-builder/Expression.tsx +++ b/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 { 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 { data={data} disabled={disabled} formula={formula} + popOverContainer={popOverContainer} /> ) : null} @@ -176,6 +179,7 @@ export class Expression extends React.Component { fieldClassName={fieldClassName} disabled={disabled} searchable={searchable} + popOverContainer={popOverContainer} options={ valueField ? filterTree( @@ -214,6 +218,7 @@ export class Expression extends React.Component { ({ label: fieldMap[item], diff --git a/src/components/condition-builder/Field.tsx b/src/components/condition-builder/Field.tsx index 15512a017..324e78f09 100644 --- a/src/components/condition-builder/Field.tsx +++ b/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 ( findDOMNode(this))} popOverRender={({onClose}) => ( <> {searchable ? ( diff --git a/src/components/condition-builder/Group.tsx b/src/components/condition-builder/Group.tsx index 16a45f8d8..9d0280182 100644 --- a/src/components/condition-builder/Group.tsx +++ b/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 { @@ -134,7 +135,8 @@ export class ConditionGroup extends React.Component { disabled, searchable, translate: __, - formula + formula, + popOverContainer } = this.props; return (
@@ -222,6 +224,7 @@ export class ConditionGroup extends React.Component { searchable={searchable} builderMode={builderMode} formula={formula} + popOverContainer={popOverContainer} /> )) ) : ( diff --git a/src/components/condition-builder/GroupOrItem.tsx b/src/components/condition-builder/GroupOrItem.tsx index 4832fd13b..4b8f774bd 100644 --- a/src/components/condition-builder/GroupOrItem.tsx +++ b/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 { @@ -52,7 +53,8 @@ export class CBGroupOrItem extends React.Component { disabled, searchable, onDragStart, - formula + formula, + popOverContainer } = this.props; return ( @@ -101,6 +103,7 @@ export class CBGroupOrItem extends React.Component { funcs={funcs} data={data} formula={formula} + popOverContainer={popOverContainer} /> diff --git a/src/components/condition-builder/InputSwitch.tsx b/src/components/condition-builder/InputSwitch.tsx index ece0b867f..8a3c0195e 100644 --- a/src/components/condition-builder/InputSwitch.tsx +++ b/src/components/condition-builder/InputSwitch.tsx @@ -7,6 +7,7 @@ import {ClassNamesFn, themeable, ThemeProps} from '../../theme'; export interface InputSwitchProps extends ThemeProps { options: Array; 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 ( ( void; fieldClassName?: string; formula?: FormulaPickerProps; + popOverContainer?: any; } export class ConditionItem extends React.Component { @@ -102,8 +104,16 @@ export class ConditionItem extends React.Component { } renderLeft() { - const {value, fields, funcs, config, disabled, fieldClassName, searchable} = - this.props; + const { + value, + fields, + funcs, + config, + disabled, + fieldClassName, + searchable, + popOverContainer + } = this.props; return ( { 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 { } 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 = []; @@ -152,6 +171,7 @@ export class ConditionItem extends React.Component { const __ = this.props.translate; return ( findDOMNode(this))} popOverRender={({onClose}) => ( { config, classnames: cx, disabled, - formula + formula, + popOverContainer } = this.props; let field = { ...config.types[type], @@ -282,6 +303,7 @@ export class ConditionItem extends React.Component { } disabled={disabled} formula={formula} + popOverContainer={popOverContainer} /> ~ @@ -300,6 +322,7 @@ export class ConditionItem extends React.Component { } disabled={disabled} formula={formula} + popOverContainer={popOverContainer} /> ); @@ -321,6 +344,7 @@ export class ConditionItem extends React.Component { } disabled={disabled} formula={formula} + popOverContainer={popOverContainer} /> ); } diff --git a/src/components/condition-builder/Value.tsx b/src/components/condition-builder/Value.tsx index 1da298571..40775f662 100644 --- a/src/components/condition-builder/Value.tsx +++ b/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 { @@ -30,7 +31,8 @@ export class Value extends React.Component { 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 { onChange={onChange} timeFormat="" disabled={disabled} + popOverContainer={popOverContainer} /> ); } else if (field.type === 'time') { @@ -90,6 +93,7 @@ export class Value extends React.Component { 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 { 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 { onChange={onChange} multiple={op === 'select_any_in' || op === 'select_not_any_in'} disabled={disabled} + popOverContainer={popOverContainer} /> ); } else if (field.type === 'boolean') { diff --git a/src/components/condition-builder/index.tsx b/src/components/condition-builder/index.tsx index 3e8b27a22..14f627fd9 100644 --- a/src/components/condition-builder/index.tsx +++ b/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 { @@ -210,7 +210,8 @@ export class QueryBuilder extends React.Component { disabled, searchable, builderMode, - formula + formula, + popOverContainer } = this.props; const normalizedValue = Array.isArray(value?.children) @@ -247,6 +248,7 @@ export class QueryBuilder extends React.Component { disabled={disabled} searchable={searchable} formula={formula} + popOverContainer={popOverContainer} /> ); }