{body && body.length ? (
body
) : (
diff --git a/src/components/PopOverContainer.tsx b/src/components/PopOverContainer.tsx
index e0540dc5..b7a926c9 100644
--- a/src/components/PopOverContainer.tsx
+++ b/src/components/PopOverContainer.tsx
@@ -50,7 +50,7 @@ export class PopOverContainer extends React.Component<
@autobind
getTarget() {
- return findDOMNode(this.target || this) as HTMLElement;
+ return this.target || (findDOMNode(this) as HTMLElement);
}
@autobind
@@ -82,7 +82,11 @@ export class PopOverContainer extends React.Component<
{dropdownRender({onClose: this.close})}
diff --git a/src/components/condition-builder/ConditionItem.tsx b/src/components/condition-builder/ConditionItem.tsx
deleted file mode 100644
index eef8bf6f..00000000
--- a/src/components/condition-builder/ConditionItem.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import React from 'react';
-import {Fields, ConditionRule, ConditionGroupValue} from './types';
-import {ClassNamesFn} from '../../theme';
-import {Icon} from '../icons';
-import Select from '../Select';
-import {autobind} from '../../utils/helper';
-import PopOverContainer from '../PopOverContainer';
-import InputBox from '../InputBox';
-import ListRadios from '../ListRadios';
-import ResultBox from '../ResultBox';
-
-export interface ConditionItemProps {
- fields: Fields;
- value: ConditionRule;
- classnames: ClassNamesFn;
- onChange: (value: ConditionRule) => void;
-}
-
-export class ConditionItem extends React.Component {
- @autobind
- handleLeftSelect() {}
-
- renderLeft() {
- const {value, fields} = this.props;
-
- return (
- (
-
- )}
- >
- {({onClick, ref}) => (
-
- )}
-
- );
- }
-
- renderItem() {
- return null;
- }
-
- render() {
- const {classnames: cx} = this.props;
-
- return (
-
-
-
-
-
-
- {this.renderLeft()}
- {this.renderItem()}
-
-
+ item.name === value)?.label : ''
+ }
+ onResultChange={noop}
+ onResultClick={onClick}
+ placeholder="请选择字段"
+ >
+
+
+
+
+
+ )}
+
+ );
+}
diff --git a/src/components/condition-builder/ConditionGroup.tsx b/src/components/condition-builder/Group.tsx
similarity index 60%
rename from src/components/condition-builder/ConditionGroup.tsx
rename to src/components/condition-builder/Group.tsx
index 9f0e2fcb..394b3eef 100644
--- a/src/components/condition-builder/ConditionGroup.tsx
+++ b/src/components/condition-builder/Group.tsx
@@ -1,14 +1,16 @@
import React from 'react';
-import {Fields, ConditionGroupValue} from './types';
+import {Fields, ConditionGroupValue, Funcs} from './types';
import {ClassNamesFn} from '../../theme';
import Button from '../Button';
-import {ConditionItem} from './ConditionItem';
+import {ConditionItem} from './Item';
import {autobind, guid} from '../../utils/helper';
export interface ConditionGroupProps {
value?: ConditionGroupValue;
fields: Fields;
- onChange: (value: ConditionGroupValue) => void;
+ funcs?: Funcs;
+ index?: number;
+ onChange: (value: ConditionGroupValue, index?: number) => void;
classnames: ClassNamesFn;
removeable?: boolean;
}
@@ -27,7 +29,7 @@ export class ConditionGroup extends React.Component {
let value = this.getValue();
value.not = !value.not;
- onChange(value);
+ onChange(value, this.props.index);
}
@autobind
@@ -35,7 +37,7 @@ export class ConditionGroup extends React.Component {
const onChange = this.props.onChange;
let value = this.getValue();
value.conjunction = value.conjunction === 'and' ? 'or' : 'and';
- onChange(value);
+ onChange(value, this.props.index);
}
@autobind
@@ -50,7 +52,7 @@ export class ConditionGroup extends React.Component {
value.children.push({
id: guid()
});
- onChange(value);
+ onChange(value, this.props.index);
}
@autobind
@@ -66,53 +68,70 @@ export class ConditionGroup extends React.Component {
id: guid(),
conjunction: 'and'
});
- onChange(value);
+ onChange(value, this.props.index);
+ }
+
+ @autobind
+ handleItemChange(item: any, index?: number) {
+ const onChange = this.props.onChange;
+ let value = this.getValue();
+
+ value.children = Array.isArray(value.children)
+ ? value.children.concat()
+ : [];
+
+ value.children.splice(index!, 1, item);
+ onChange(value, this.props.index);
}
render() {
- const {classnames: cx, value, fields, onChange} = this.props;
+ const {classnames: cx, value, fields, funcs} = this.props;
return (
-
-
+
+
+
+
-
{Array.isArray(value?.children)
- ? value!.children.map(item =>
+ ? value!.children.map((item, index) =>
(item as ConditionGroupValue).conjunction ? (
) : (
{
fields={fields}
value={item}
classnames={cx}
- onChange={onChange}
+ index={index}
+ onChange={this.handleItemChange}
+ funcs={funcs}
/>
)
)
diff --git a/src/components/condition-builder/InputSwitch.tsx b/src/components/condition-builder/InputSwitch.tsx
new file mode 100644
index 00000000..81e30050
--- /dev/null
+++ b/src/components/condition-builder/InputSwitch.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import PopOverContainer from '../PopOverContainer';
+import {Icon} from '../icons';
+import ListRadios from '../ListRadios';
+import {ClassNamesFn} from '../../theme';
+
+export interface InputSwitchProps {
+ options: Array;
+ value: any;
+ onChange: (value: any) => void;
+ classnames: ClassNamesFn;
+}
+
+const option2value = (item: any) => item.value;
+
+export default function InputSwitch({
+ options,
+ value,
+ onChange,
+ classnames: cx
+}: InputSwitchProps) {
+ return (
+ (
+
+ )}
+ >
+ {({onClick, isOpened, ref}) => (
+
+ )}
+
+ );
+}
diff --git a/src/components/condition-builder/Item.tsx b/src/components/condition-builder/Item.tsx
new file mode 100644
index 00000000..9238a2a6
--- /dev/null
+++ b/src/components/condition-builder/Item.tsx
@@ -0,0 +1,105 @@
+import React from 'react';
+import {Fields, ConditionRule, ConditionGroupValue, Funcs} from './types';
+import {ClassNamesFn} from '../../theme';
+import {Icon} from '../icons';
+import Select from '../Select';
+import {autobind} from '../../utils/helper';
+import PopOverContainer from '../PopOverContainer';
+import InputBox from '../InputBox';
+import ListRadios from '../ListRadios';
+import ResultBox from '../ResultBox';
+import ConditionField from './Field';
+import InputSwitch from './InputSwitch';
+
+export interface ConditionItemProps {
+ fields: Fields;
+ funcs?: Funcs;
+ index?: number;
+ value: ConditionRule;
+ classnames: ClassNamesFn;
+ onChange: (value: ConditionRule, index?: number) => void;
+}
+
+const leftInputOptions = [
+ {
+ label: '字段',
+ value: 'field'
+ },
+ {
+ label: '函数',
+ value: 'func'
+ }
+];
+
+export class ConditionItem extends React.Component {
+ @autobind
+ handleLeftFieldSelect(field: any) {
+ const value = {...this.props.value};
+ const onChange = this.props.onChange;
+ value.left = field;
+ onChange(value, this.props.index);
+ }
+
+ @autobind
+ handleLeftInputTypeChange(type: 'func' | 'field') {
+ const value = {...this.props.value};
+ const onChange = this.props.onChange;
+
+ if (type === 'func') {
+ value.left = {type: 'func'};
+ } else {
+ value.left = '';
+ }
+
+ onChange(value, this.props.index);
+ }
+
+ renderLeft() {
+ const {value, fields, classnames: cx, funcs} = this.props;
+ const inputType =
+ value.left && (value.left as any).type === 'func' ? 'func' : 'field';
+
+ return (
+ <>
+ {Array.isArray(funcs) ? (
+
+ ) : null}
+
+ {inputType === 'field' ? (
+
+ ) : null}
+
+ );
+ }
+
+ renderItem() {
+ return null;
+ }
+
+ render() {
+ const {classnames: cx} = this.props;
+
+ return (
+
+
+
+
+
+
+ {this.renderLeft()}
+ {this.renderItem()}
+
+