test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-02 12:08:13 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

fix: conditionBuilder 弹层问题 (#3778)

Browse Source
This commit is contained in:
Allen 2022-03-16 19:18:44 +08:00 committed by GitHub
parent 03e18f0d44
commit ea1f47d91d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 62 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/condition-builder/Expression.tsx
View File

@ -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],

6
src/components/condition-builder/Field.tsx
View File

@ -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 ? (

5
src/components/condition-builder/Group.tsx
View File

@ -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}
/>
))
) : (

5
src/components/condition-builder/GroupOrItem.tsx
View File

@ -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" />

5
src/components/condition-builder/InputSwitch.tsx
View File

@ -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}

32
src/components/condition-builder/Item.tsx
View File

@ -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} =
this.props;
const {
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}
/>
);
}

8
src/components/condition-builder/Value.tsx
View File

@ -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') {

6
src/components/condition-builder/index.tsx
View File

@ -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}
/>
);
}