linkmore-design
Version:
🌈 🚀lm组件库。🚀
240 lines (230 loc) • 8.92 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["field", "type", "form", "options", "fieldNames"],
_excluded2 = ["key"];
import React, { useMemo } from 'react';
import Button from "../../../button";
import Form from "../../../form";
import IconFont from "../../../icon-font";
import Select from "../../../select";
import { getOpetatorGroup } from "../../constant";
import GhostRender from "../../controls/GhostRender";
import PopDropDown from "../../controls/PopDropDown";
import DynamicComponent from "./DynamicComponent";
// Operator匹配项不存在时重置该字段value
var useResetOperatorValueForVoid = function useResetOperatorValueForVoid(_ref) {
var form = _ref.form,
field = _ref.field,
type = _ref.type,
options = _ref.options;
var operator = Form.useWatch(['data', field.name, 'operator'], form);
React.useEffect(function () {
if (type && operator) {
var hasValue = options.some(function (_ref2) {
var value = _ref2.value;
return value === operator;
});
!hasValue && form.setFieldValue(['data', field.name, 'operator'], undefined);
}
}, [type, operator, options]);
};
/** 动态表单值项 */
var DynamicFormValue = function DynamicFormValue(_ref3) {
var field = _ref3.field,
type = _ref3.type,
form = _ref3.form,
options = _ref3.options,
fieldNames = _ref3.fieldNames,
restProps = _objectWithoutProperties(_ref3, _excluded);
var operator = Form.useWatch(['data', field.name, 'operator'], form);
var disabled = ['empty', 'not_empty'].includes(operator);
// if (['empty', 'not_empty'].includes(operator)) return <div />
return /*#__PURE__*/React.createElement(Form.Item, {
name: [field.name, 'value'],
noStyle: true
}, /*#__PURE__*/React.createElement(DynamicComponent, _extends({
disabled: disabled,
type: type,
operator: operator,
options: options,
fieldNames: fieldNames
}, restProps)));
};
// 高级筛选列表项
var ComplexItem = function ComplexItem(_ref4) {
var form = _ref4.form,
field = _ref4.field,
remove = _ref4.remove,
instance = _ref4.instance;
var dataSource = instance.dataSource,
locale = instance.locale,
enableAutoString = instance.enableAutoString;
var itemField = Form.useWatch(['data', field.name, 'field'], form);
// const deleteDisabled = !(form.getFieldValue('data')?.length > 1)
var activeItem = useMemo(function () {
var _currentObj$data;
var currentObj = (dataSource === null || dataSource === void 0 ? void 0 : dataSource.find(function (v) {
return v.field === itemField;
})) || {};
if (!enableAutoString) return currentObj;
var fieldNames = _objectSpread({
label: 'label',
value: 'value'
}, (currentObj === null || currentObj === void 0 ? void 0 : currentObj.fieldNames) || {});
return _objectSpread(_objectSpread({}, currentObj), {}, {
data: currentObj === null || currentObj === void 0 ? void 0 : (_currentObj$data = currentObj.data) === null || _currentObj$data === void 0 ? void 0 : _currentObj$data.map(function (v) {
return _objectSpread(_objectSpread({}, v), {}, {
label: v === null || v === void 0 ? void 0 : v[fieldNames.label],
value: String(v === null || v === void 0 ? void 0 : v[fieldNames.value])
});
})
});
}, [dataSource, itemField, enableAutoString]);
var type = React.useMemo(function () {
return (activeItem === null || activeItem === void 0 ? void 0 : activeItem.type) || null;
}, [activeItem]);
// operator下拉数据
var operatorOptions = React.useMemo(function () {
var _getOpetatorGroup;
return ((_getOpetatorGroup = getOpetatorGroup(locale, activeItem === null || activeItem === void 0 ? void 0 : activeItem.fieldValueSource, activeItem === null || activeItem === void 0 ? void 0 : activeItem.fieldType)) === null || _getOpetatorGroup === void 0 ? void 0 : _getOpetatorGroup[type]) || [];
}, [type, activeItem]);
useResetOperatorValueForVoid({
form: form,
field: field,
type: type,
options: operatorOptions
});
// 数据保存时的格式化: 字段类型切换时清空value(input不变时不需要清空)
var fieldNormalize = function fieldNormalize(value) {
var _dataSource$find;
var currentType = (dataSource === null || dataSource === void 0 ? void 0 : (_dataSource$find = dataSource.find(function (v) {
return v.field === value;
})) === null || _dataSource$find === void 0 ? void 0 : _dataSource$find.type) || null;
var isResetValue = type !== 'input' || type !== currentType;
// 对比type值的改变重置value
if (value && isResetValue) {
form.setFieldValue(['data', field.name, 'value'], undefined);
}
return value;
};
// 数据保存时的格式化
var normalize = function normalize(value, prev) {
// 从 between 操作符切换时清空value(因为value组件不一样,值也不一样)
if (prev === 'between') {
form.setFieldValue(['data', field.name, 'value'], undefined);
}
// 切换为'空'/'不为空'时, 清空value
if (['empty', 'not_empty'].includes(value)) {
form.setFieldValue(['data', field.name, 'value'], undefined);
}
return value;
};
return /*#__PURE__*/React.createElement("div", {
className: "complex_list_item"
}, /*#__PURE__*/React.createElement(Form.Item, {
name: [field.name, 'field'],
noStyle: true,
normalize: fieldNormalize
}, /*#__PURE__*/React.createElement(Select, {
options: dataSource,
fieldNames: {
label: 'title',
value: 'field'
}
})), /*#__PURE__*/React.createElement(Form.Item, {
name: [field.name, 'operator'],
noStyle: true,
normalize: normalize
}, /*#__PURE__*/React.createElement(Select, {
options: operatorOptions
})), /*#__PURE__*/React.createElement(DynamicFormValue, _extends({
field: field,
type: type,
operator: form.getFieldValue(['data', field.name, 'operator']),
options: activeItem === null || activeItem === void 0 ? void 0 : activeItem.data,
fieldNames: activeItem === null || activeItem === void 0 ? void 0 : activeItem.fieldNames
}, activeItem === null || activeItem === void 0 ? void 0 : activeItem.componentProps)), /*#__PURE__*/React.createElement(Button, {
type: "text",
onClick: function onClick() {
return remove(field.name);
}
// disabled={deleteDisabled}
,
danger: true,
icon: /*#__PURE__*/React.createElement(IconFont, {
type: "icon-a-shidia1qingchu"
})
}));
};
/** 添加按钮 */
var PopButton = function PopButton(_ref5) {
var instance = _ref5.instance,
add = _ref5.add;
var locale = instance.locale,
dataSource = instance.dataSource;
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
visible = _React$useState2[0],
setVisible = _React$useState2[1];
var handleChange = function handleChange(val) {
add({
field: val
});
setVisible(false);
};
var onOpenChange = function onOpenChange(v) {
setVisible(v);
};
return /*#__PURE__*/React.createElement(PopDropDown, {
overlayClassName: "filter_dropdown_container_select",
dropdownRender: function dropdownRender() {
return /*#__PURE__*/React.createElement(GhostRender, {
onChange: handleChange,
showSearch: false,
options: dataSource,
fieldNames: {
label: 'title',
value: 'field'
},
type: "select"
});
},
open: visible,
onOpenChange: onOpenChange
}, /*#__PURE__*/React.createElement(Button, {
type: "dashed",
icon: /*#__PURE__*/React.createElement(IconFont, {
type: "icon-a-tongyonga0xinzeng"
})
}, locale.incrementQuery));
};
// 高级筛选列表
var ComplexBody = function ComplexBody(_ref6) {
var instance = _ref6.instance,
form = _ref6.form;
return /*#__PURE__*/React.createElement(Form.List, {
name: "data"
}, function (fields, _ref7) {
var add = _ref7.add,
remove = _ref7.remove;
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
className: "complex_list"
}, fields.map(function (_ref8) {
var key = _ref8.key,
field = _objectWithoutProperties(_ref8, _excluded2);
return /*#__PURE__*/React.createElement(ComplexItem, {
key: key,
remove: remove,
form: form,
field: field,
instance: instance
});
})), /*#__PURE__*/React.createElement(PopButton, {
instance: instance,
add: add
}));
});
};
export default ComplexBody;