ze-react-component-library
Version:
ZeroETP React Component Library
596 lines (552 loc) • 18.6 kB
JavaScript
import "antd/es/input-number/style";
import _InputNumber from "antd/es/input-number";
import "antd/es/space/style";
import _Space from "antd/es/space";
import "antd/es/select/style";
import _Select from "antd/es/select";
import "antd/es/input/style";
import _Input from "antd/es/input";
import "antd/es/auto-complete/style";
import _AutoComplete from "antd/es/auto-complete";
import "antd/es/checkbox/style";
import _Checkbox from "antd/es/checkbox";
import "antd/es/button/style";
import _Button from "antd/es/button";
var __assign = this && this.__assign || function () {
__assign = Object.assign || function (t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) {
if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = this && this.__rest || function (s, e) {
var t = {};
for (var p in s) {
if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
}
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
}
return t;
};
var __spreadArray = this && this.__spreadArray || function (to, from) {
for (var i = 0, il = from.length, j = to.length; i < il; i++, j++) {
to[j] = from[i];
}
return to;
};
import React, { useState, useEffect } from "react";
import { SearchOutlined, FilterFilled } from "@ant-design/icons";
import { useRequest } from "@umijs/hooks";
import { requestLogicform } from "../../request";
import { getNameProperty } from "zeroetp-api-sdk";
import momentGenerateConfig from "rc-picker/es/generate/moment";
import generatePicker from "antd/es/date-picker/generatePicker";
import { isSearchFilter, isNullQuery } from "../../util";
import useLocale from "../../hooks/useLocale";
import ZEOperator from "../../ZEOperator"; // 解决moment版本不一致导致的ts报错
var DatePicker = generatePicker(momentGenerateConfig);
var RangePicker = DatePicker.RangePicker;
var nullValue = JSON.stringify({
$exists: false
});
var notNullValue = JSON.stringify({
$exists: true
});
var isNullValue = function isNullValue(selectedKeys) {
return selectedKeys[0] === nullValue;
};
var FilterFooter = function FilterFooter(_a) {
var disableReset = _a.disableReset,
reset = _a.reset,
confirm = _a.confirm;
var t = useLocale().t;
return /*#__PURE__*/React.createElement("div", {
style: {
display: "flex",
gap: 8
}
}, !disableReset && /*#__PURE__*/React.createElement(_Button, {
size: "small",
style: {
flex: 0.5
},
onClick: reset
}, t("重置")), /*#__PURE__*/React.createElement(_Button, {
type: "primary",
onClick: confirm,
icon: /*#__PURE__*/React.createElement(SearchOutlined, null),
size: "small",
style: {
flex: disableReset ? 1 : 0.5
}
}, t("搜索")));
};
var NullValueHandler = function NullValueHandler(_a) {
var setSelectedKeys = _a.setSelectedKeys,
selectedKeys = _a.selectedKeys;
var t = useLocale().t;
return /*#__PURE__*/React.createElement("div", {
style: {
marginBottom: 8
}
}, /*#__PURE__*/React.createElement(_Checkbox, {
checked: selectedKeys[0] === nullValue,
onChange: function onChange(e) {
if (e.target.checked) {
setSelectedKeys([nullValue]);
} else {
setSelectedKeys([]);
}
}
}, t("空值")));
};
var ExactHandler = function ExactHandler(_a) {
var setSelectedKeys = _a.setSelectedKeys,
selectedKeys = _a.selectedKeys,
disabled = _a.disabled;
var t = useLocale().t;
return /*#__PURE__*/React.createElement("div", {
style: {
marginBottom: 8
}
}, /*#__PURE__*/React.createElement(_Checkbox, {
disabled: disabled,
checked: !!selectedKeys[1],
onChange: function onChange(e) {
setSelectedKeys([selectedKeys[0], e.target.checked]);
}
}, t("完全匹配")));
};
var AutoCompleteFilter = function AutoCompleteFilter(_a) {
var property = _a.property,
onChange = _a.onChange,
value = _a.value,
getPopupContainer = _a.getPopupContainer,
inputProps = __rest(_a, ["property", "onChange", "value", "getPopupContainer"]);
var t = useLocale().t;
var _b = useState(value),
search = _b[0],
setSearch = _b[1];
var keyProp = property;
if (property.schema && property.type === "object") {
keyProp = getNameProperty(property.schema);
}
var options = useRequest(function () {
var _a;
if (search) {
return requestLogicform({
// @ts-ignore
schema: property.schema ? property.schema._id : property.schemaID,
groupby: [keyProp.name],
query: (_a = {}, _a[keyProp.name] = {
$contains: search
}, _a)
});
}
return Promise.resolve({
result: []
});
}, {
formatResult: function formatResult(res) {
var _a;
return ((_a = res.result) === null || _a === void 0 ? void 0 : _a.map(function (d) {
return {
label: d[keyProp.name],
value: d[keyProp.name]
};
})) || [];
},
refreshDeps: [search],
throttleInterval: 200
}).data;
var handleSearch = function handleSearch(v) {
setSearch(v);
onChange === null || onChange === void 0 ? void 0 : onChange(v);
};
var handleSelect = function handleSelect(v) {
setSearch(v);
onChange === null || onChange === void 0 ? void 0 : onChange(v);
};
useEffect(function () {
setSearch(value);
}, [value]);
return /*#__PURE__*/React.createElement(_AutoComplete, {
onSearch: handleSearch,
onSelect: handleSelect,
options: options,
value: search,
getPopupContainer: getPopupContainer
}, /*#__PURE__*/React.createElement(_Input, __assign({
placeholder: t("搜索") + " " + property.name
}, inputProps)));
}; // Search控件
export var getColumnSearchProps = function getColumnSearchProps(property) {
return {
filterDropdown: function filterDropdown(_a) {
var _b;
var setSelectedKeys = _a.setSelectedKeys,
selectedKeys = _a.selectedKeys,
confirm = _a.confirm,
clearFilters = _a.clearFilters,
_reset = _a.reset,
disableReset = _a.disableReset,
getPopupContainer = _a.getPopupContainer,
t = _a.t;
var nullValueSelected = isNullValue(selectedKeys);
var value = isNullQuery(selectedKeys[0]) ? undefined : selectedKeys[0];
var isMulti = String(value).includes(",");
var multiOptions = String(value).split(",").filter(function (f) {
return f;
});
return /*#__PURE__*/React.createElement("div", {
style: {
padding: 8
}
}, isMulti ? /*#__PURE__*/React.createElement(_Select, {
value: multiOptions,
placeholder: t("搜索") + " " + property.name,
mode: "tags",
options: multiOptions.map(function (d) {
return {
label: d,
value: d
};
}),
onChange: function onChange(v) {
setSelectedKeys([v.join(",")]);
},
style: {
width: 188,
marginBottom: 8,
display: "block"
}
}) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AutoCompleteFilter, {
property: property,
value: value,
disabled: nullValueSelected,
onChange: function onChange(v) {
setSelectedKeys([v, selectedKeys[1]]);
},
getPopupContainer: getPopupContainer,
onPressEnter: function onPressEnter() {
return confirm();
},
style: {
width: 188,
marginBottom: 8,
display: "block"
}
}), /*#__PURE__*/React.createElement("div", {
style: {
display: "flex",
gap: 12
}
}, /*#__PURE__*/React.createElement(ExactHandler, {
disabled: nullValueSelected,
selectedKeys: selectedKeys,
setSelectedKeys: setSelectedKeys
}), !((_b = property.constraints) === null || _b === void 0 ? void 0 : _b.required) && /*#__PURE__*/React.createElement(NullValueHandler, {
selectedKeys: selectedKeys,
setSelectedKeys: setSelectedKeys
}))), /*#__PURE__*/React.createElement(FilterFooter, {
disableReset: disableReset,
reset: function reset() {
if (_reset) {
_reset();
} else {
clearFilters && clearFilters();
confirm();
}
},
confirm: confirm
}));
},
filterIcon: function filterIcon(filtered) {
return /*#__PURE__*/React.createElement(SearchOutlined, {
style: {
color: filtered ? "#1890ff" : undefined
}
});
}
};
};
export var getColumnSimpleSearchProps = function getColumnSimpleSearchProps(dataIndex) {
return {
filterDropdown: function filterDropdown(_a) {
var setSelectedKeys = _a.setSelectedKeys,
selectedKeys = _a.selectedKeys,
confirm = _a.confirm,
clearFilters = _a.clearFilters,
t = _a.t;
var value = selectedKeys[0];
return /*#__PURE__*/React.createElement("div", {
style: {
padding: 8
}
}, /*#__PURE__*/React.createElement(_Input, {
value: value,
placeholder: "" + t("搜索"),
onPressEnter: function onPressEnter() {
confirm();
},
style: {
marginBottom: 8
},
onChange: function onChange(e) {
setSelectedKeys([e.target.value]);
}
}), /*#__PURE__*/React.createElement(FilterFooter, {
reset: function reset() {
clearFilters && clearFilters();
confirm();
},
confirm: confirm
}));
},
filterIcon: function filterIcon(filtered) {
return /*#__PURE__*/React.createElement(SearchOutlined, {
style: {
color: filtered ? "#1890ff" : undefined
}
});
},
onFilter: function onFilter(value, record) {
return record[dataIndex].toString().toLowerCase().includes(value.toLowerCase());
}
};
}; // 日期筛选控件
export var getColumnDateProps = function getColumnDateProps(property) {
return {
filterDropdown: function filterDropdown(_a) {
var _b;
var setSelectedKeys = _a.setSelectedKeys,
selectedKeys = _a.selectedKeys,
confirm = _a.confirm,
clearFilters = _a.clearFilters,
getPopupContainer = _a.getPopupContainer,
_reset2 = _a.reset,
disableReset = _a.disableReset;
var nullValueSelected = isNullValue(selectedKeys);
return /*#__PURE__*/React.createElement("div", {
style: {
padding: 8
}
}, /*#__PURE__*/React.createElement(ZEOperator, {
type: "Date",
operatorProps: {
getPopupContainer: getPopupContainer
},
disabled: nullValueSelected,
style: {
marginBottom: 8,
minWidth: 248,
width: "100%"
},
valueProps: {
getPopupContainer: getPopupContainer,
popStyle: {
zIndex: 1060
}
},
value: selectedKeys[0],
onChange: function onChange(v) {
setSelectedKeys([v]);
}
}), !((_b = property.constraints) === null || _b === void 0 ? void 0 : _b.required) && /*#__PURE__*/React.createElement(NullValueHandler, {
selectedKeys: selectedKeys,
setSelectedKeys: setSelectedKeys
}), /*#__PURE__*/React.createElement(FilterFooter, {
disableReset: disableReset,
reset: function reset() {
if (_reset2) {
_reset2();
} else {
clearFilters && clearFilters();
confirm();
}
},
confirm: confirm
}));
},
filterIcon: function filterIcon(filtered) {
return /*#__PURE__*/React.createElement(SearchOutlined, {
style: {
color: filtered ? "#1890ff" : undefined
}
});
}
};
}; // 数字筛选控件
export var getColumnNumberProps = function getColumnNumberProps(property) {
return {
filterDropdown: function filterDropdown(_a) {
var _b;
var setSelectedKeys = _a.setSelectedKeys,
selectedKeys = _a.selectedKeys,
confirm = _a.confirm,
clearFilters = _a.clearFilters,
_reset3 = _a.reset,
disableReset = _a.disableReset,
t = _a.t;
var nullValueSelected = isNullValue(selectedKeys);
return /*#__PURE__*/React.createElement("div", {
style: {
padding: 8
}
}, /*#__PURE__*/React.createElement(_Space, {
style: {
marginBottom: 8
}
}, /*#__PURE__*/React.createElement(_InputNumber, {
placeholder: t("最小值"),
style: {
width: 112
},
value: nullValueSelected ? undefined : selectedKeys === null || selectedKeys === void 0 ? void 0 : selectedKeys["0"],
disabled: nullValueSelected,
onChange: function onChange(v) {
setSelectedKeys([v === null ? undefined : v, selectedKeys === null || selectedKeys === void 0 ? void 0 : selectedKeys["1"]]);
}
}), /*#__PURE__*/React.createElement("div", {
style: {
width: 8,
textAlign: "center"
}
}, "~"), /*#__PURE__*/React.createElement(_InputNumber, {
placeholder: t("最大值"),
style: {
width: 112
},
value: nullValueSelected ? undefined : selectedKeys === null || selectedKeys === void 0 ? void 0 : selectedKeys["1"],
disabled: nullValueSelected,
onChange: function onChange(v) {
setSelectedKeys([selectedKeys === null || selectedKeys === void 0 ? void 0 : selectedKeys["0"], v === null ? undefined : v]);
}
})), !((_b = property.constraints) === null || _b === void 0 ? void 0 : _b.required) && /*#__PURE__*/React.createElement(NullValueHandler, {
selectedKeys: selectedKeys,
setSelectedKeys: setSelectedKeys
}), /*#__PURE__*/React.createElement(FilterFooter, {
disableReset: disableReset,
reset: function reset() {
if (_reset3) {
_reset3();
} else {
clearFilters && clearFilters();
confirm();
}
},
confirm: confirm
}));
},
filterIcon: function filterIcon(filtered) {
return /*#__PURE__*/React.createElement(SearchOutlined, {
style: {
color: filtered ? "#1890ff" : undefined
}
});
}
};
}; // 枚举筛选控件
export var getColumnEnumFilterProps = function getColumnEnumFilterProps(property) {
return {
filterDropdown: function filterDropdown(_a) {
var _b, _c, _d, _e;
var _setSelectedKeys = _a.setSelectedKeys,
_selectedKeys = _a.selectedKeys,
confirm = _a.confirm,
clearFilters = _a.clearFilters,
filters = _a.filters,
_reset4 = _a.reset,
disableReset = _a.disableReset,
t = _a.t;
var enums = filters instanceof Array ? filters : [];
var nullValueSelected = isNullValue(_selectedKeys); //@ts-ignore
var isNotIn = ((_b = _selectedKeys === null || _selectedKeys === void 0 ? void 0 : _selectedKeys[0]) === null || _b === void 0 ? void 0 : _b.operator) === "$nin";
var selectedKeys = isNotIn ? //@ts-ignore
(_d = (_c = _selectedKeys === null || _selectedKeys === void 0 ? void 0 : _selectedKeys[0]) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : [] : _selectedKeys;
var setSelectedKeys = function setSelectedKeys(v) {
if (isNotIn) {
_setSelectedKeys([{
value: v,
operator: "$nin"
}]);
} else {
_setSelectedKeys(v);
}
};
return /*#__PURE__*/React.createElement("div", {
style: {
padding: 8
}
}, /*#__PURE__*/React.createElement("p", {
style: {
fontWeight: "bolder"
}
}, isNotIn ? t("不等于") : t("等于")), enums.map(function (d) {
return /*#__PURE__*/React.createElement("div", {
style: {
marginBottom: 8
},
key: d.value
}, /*#__PURE__*/React.createElement(_Checkbox, {
checked: selectedKeys.includes(d.value),
disabled: nullValueSelected,
onChange: function onChange(e) {
if (e.target.checked) {
setSelectedKeys(__spreadArray(__spreadArray([], selectedKeys), [d.value]));
} else {
setSelectedKeys(selectedKeys.filter(function (s) {
return s !== d.value;
}));
}
}
}, d.label));
}), !((_e = property.constraints) === null || _e === void 0 ? void 0 : _e.required) && /*#__PURE__*/React.createElement(NullValueHandler, {
selectedKeys: selectedKeys,
setSelectedKeys: _setSelectedKeys
}), /*#__PURE__*/React.createElement(FilterFooter, {
disableReset: disableReset,
reset: function reset() {
if (_reset4) {
_reset4();
} else {
clearFilters && clearFilters();
confirm();
}
},
confirm: confirm
}));
},
filterIcon: function filterIcon(filtered) {
return /*#__PURE__*/React.createElement(FilterFilled, {
style: {
color: filtered ? "#1890ff" : undefined
}
});
}
};
};
export var getColumnFilterProps = function getColumnFilterProps(property, customColumn, valueEnum) {
if (property.primal_type === "date") {
return getColumnDateProps(property);
}
if (property.primal_type === "number") {
return getColumnNumberProps(property);
}
if (property.primal_type === "boolean") {
return getColumnEnumFilterProps(property);
}
if (isSearchFilter(property) && !((customColumn === null || customColumn === void 0 ? void 0 : customColumn.filters) === false)) {
return getColumnSearchProps(property);
}
if (valueEnum !== undefined && Object.keys(valueEnum).length > 0) {
return getColumnEnumFilterProps(property);
}
return {};
};