oadp-material
Version:
oadp-material
119 lines • 3.76 kB
JavaScript
import _Button from "@alifd/next/es/button";
import _Icon from "@alifd/next/es/icon";
import _Box from "@alifd/next/es/box";
import _Select from "@alifd/next/es/select";
import _Divider from "@alifd/next/es/divider";
import React from 'react';
import ConditionItem from "./condition-item";
import OadpButton from "../oadp-button";
var ConditionGroup = function ConditionGroup(_ref) {
var condition = _ref.condition,
attributeDataSource = _ref.attributeDataSource,
onAdd = _ref.onAdd,
onRemove = _ref.onRemove,
_onChange = _ref.onChange,
handleButtonClick = _ref.handleButtonClick;
console.log('ConditionGroup render condition', condition);
var _condition$value = condition.value,
value = _condition$value === void 0 ? [] : _condition$value,
_condition$operator = condition.operator,
operator = _condition$operator === void 0 ? 'and' : _condition$operator,
id = condition.id;
return /*#__PURE__*/React.createElement(_Box, {
direction: "row",
align: "left",
justify: "left",
spacing: 10,
margin: 10,
padding: 10
}, /*#__PURE__*/React.createElement(_Box, {
direction: "column",
align: "center",
justify: "center"
}, /*#__PURE__*/React.createElement(_Divider, {
direction: "ver",
orientation: "center",
style: {
height: '100%'
}
}), /*#__PURE__*/React.createElement(_Select, {
value: operator,
onChange: function onChange(v) {
return _onChange(id, {
operator: v
});
},
style: {
width: '60px'
}
}, /*#__PURE__*/React.createElement(_Select.Option, {
value: "and"
}, "\u5E76\u4E14"), /*#__PURE__*/React.createElement(_Select.Option, {
value: "or"
}, "\u6216\u8005")), /*#__PURE__*/React.createElement(_Divider, {
direction: "ver",
orientation: "center",
style: {
height: '100%'
}
})), /*#__PURE__*/React.createElement(_Box, {
direction: "column"
}, Array.isArray(value) && value.map(function (item) {
return /*#__PURE__*/React.createElement("div", {
key: item.id,
className: "condition-wrapper"
}, item.operator && (item.operator === 'and' || item.operator === 'or') ? /*#__PURE__*/React.createElement(ConditionGroup, {
condition: item,
attributeDataSource: attributeDataSource,
onAdd: onAdd,
onRemove: onRemove,
onChange: _onChange
}) : /*#__PURE__*/React.createElement(ConditionItem, {
condition: item,
parentId: id,
attributeDataSource: attributeDataSource,
onAdd: onAdd,
onRemove: onRemove,
onChange: _onChange
}));
}), /*#__PURE__*/React.createElement(_Box, {
direction: "row",
align: "left",
justify: "left",
spacing: 10,
margin: 2,
padding: 2
}, /*#__PURE__*/React.createElement(_Button, {
className: "add-button",
onClick: function onClick() {
return onAdd(id, false);
}
}, /*#__PURE__*/React.createElement(_Icon, {
type: "add",
size: "xs"
}), " \u6761\u4EF6"), /*#__PURE__*/React.createElement(_Button, {
className: "add-button",
onClick: function onClick() {
return onAdd(id, true);
}
}, /*#__PURE__*/React.createElement(_Icon, {
type: "add",
size: "xs"
}), " \u7EC4"), id !== '0' && /*#__PURE__*/React.createElement(_Button, {
className: "remove-button",
onClick: function onClick() {
return onRemove(id);
}
}, /*#__PURE__*/React.createElement(_Icon, {
type: "minus",
size: "xs"
}), " \u7EC4"), id === '0' && /*#__PURE__*/React.createElement(OadpButton, {
type: 'primary',
size: 'medium'
// style={ style || { width: '60%' }}
,
onClick: handleButtonClick,
label: '高级查询'
}))));
};
export default ConditionGroup;