linkmore-design
Version:
🌈 🚀lm组件库。🚀
232 lines (226 loc) • 13.4 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
var _searchConfig;
import _regeneratorRuntime from "@babel/runtime/regenerator";
import { useMemoizedFn } from 'ahooks';
import cls from 'classnames';
import isEmpty from 'lodash/isEmpty';
import isNil from 'lodash/isNil';
import pick from 'lodash/pick';
import React, { forwardRef, useImperativeHandle, useMemo, useRef, useState } from 'react';
import Form from "../form";
import LocaleReceiver from "../locale-provider/LocaleReceiver";
import Basic from "./components/Basic";
import Complex from "./components/Complex";
import Custom from "./components/Custom";
import FuzzySearch from "./components/FuzzySearch";
import { DYNAMIC_ENUM, FIELD_ENUM, initialFieldsValue, SOURCE_ENUM } from "./constants";
import Control from "./controls";
var initialProps = {
dataSource: [],
// 数据源
enableSearch: true,
// 是否启用模糊查询
enableBasic: true,
// 是否启用基础筛选
enableComplex: false,
// 是否启用高级筛选
enableCustom: false,
// 是否启用自定义筛选
customOptions: [],
// 自定义筛选下拉项
enableClear: true,
// 是否展示一件清空
enableAutoString: true,
// 是否自动将筛选结构值转换为字符串
enableUnLimitedPlaceholder: true,
// 默认展示不限自定义筛选选项
size: 'middle',
// 尺寸
searchConfig: (_searchConfig = {}, _defineProperty(_searchConfig, DYNAMIC_ENUM.RELATION, 'or'), _defineProperty(_searchConfig, DYNAMIC_ENUM.OPERATOR, 'contains'), _defineProperty(_searchConfig, DYNAMIC_ENUM.FIELD_TYPE, 'string'), _searchConfig),
placeholder: '',
// 搜索占位符
customRender: null // 自定义一级筛选Dom
};
var Wrapper = /*#__PURE__*/forwardRef(function (props, ref) {
var _FIELD_ENUM$SEARCH, _FIELD_ENUM$BASIC, _ref7;
var enableSearch = props.enableSearch,
enableBasic = props.enableBasic,
dataSource = props.dataSource,
searchKey = props.searchKey,
searchConfig = props.searchConfig,
colon = props.colon,
addonBefore = props.addonBefore,
onChange = props.onChange,
onValuesChange = props.onValuesChange,
onClearChange = props.onClearChange,
onSelect = props.onSelect,
size = props.size;
var _Form$useForm = Form.useForm(),
_Form$useForm2 = _slicedToArray(_Form$useForm, 1),
form = _Form$useForm2[0];
var fuzzyRef = useRef();
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
isChange = _useState2[0],
setIsChange = _useState2[1];
/** 触发查询 */
var onSearch = useMemoizedFn( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
var _ref2, _values$FIELD_ENUM$BA, _ref3, _values$FIELD_ENUM$SE, _ref4, _values$FIELD_ENUM$CO, _resetValues, _fuzzyRef$current, _fuzzyRef$current$set, _resetValues$FIELD_EN, _resetValues$FIELD_EN2, _resetValues$FIELD_EN3;
var values, basicFilter, searchFilter, complexFilter, resetValues;
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return form.getFieldsValue(true);
case 2:
values = _context.sent;
/** 重组返回数据 */
basicFilter = _objectSpread(_objectSpread({}, values === null || values === void 0 ? void 0 : values[FIELD_ENUM.BASIC]), {}, {
conditions: (_ref2 = (values === null || values === void 0 ? void 0 : (_values$FIELD_ENUM$BA = values[FIELD_ENUM.BASIC]) === null || _values$FIELD_ENUM$BA === void 0 ? void 0 : _values$FIELD_ENUM$BA[FIELD_ENUM.CONDITIONS]) || []) === null || _ref2 === void 0 ? void 0 : _ref2.filter(function (item) {
return !isNil(item === null || item === void 0 ? void 0 : item[DYNAMIC_ENUM.VALUE]);
})
});
searchFilter = _objectSpread(_objectSpread({}, values === null || values === void 0 ? void 0 : values[FIELD_ENUM.SEARCH]), {}, {
conditions: (_ref3 = (values === null || values === void 0 ? void 0 : (_values$FIELD_ENUM$SE = values[FIELD_ENUM.SEARCH]) === null || _values$FIELD_ENUM$SE === void 0 ? void 0 : _values$FIELD_ENUM$SE[FIELD_ENUM.CONDITIONS]) || []) === null || _ref3 === void 0 ? void 0 : _ref3.filter(function (item) {
return !isNil(item === null || item === void 0 ? void 0 : item[DYNAMIC_ENUM.VALUE]);
})
});
complexFilter = _objectSpread(_objectSpread({}, values === null || values === void 0 ? void 0 : values[FIELD_ENUM.COMPLEX]), {}, {
conditions: (_ref4 = (values === null || values === void 0 ? void 0 : (_values$FIELD_ENUM$CO = values[FIELD_ENUM.COMPLEX]) === null || _values$FIELD_ENUM$CO === void 0 ? void 0 : _values$FIELD_ENUM$CO[FIELD_ENUM.CONDITIONS]) || []) === null || _ref4 === void 0 ? void 0 : _ref4.map(function (item) {
var _values$FIELD_ENUM$CO2;
return _objectSpread(_objectSpread({}, item), {}, {
relation: values === null || values === void 0 ? void 0 : (_values$FIELD_ENUM$CO2 = values[FIELD_ENUM.COMPLEX]) === null || _values$FIELD_ENUM$CO2 === void 0 ? void 0 : _values$FIELD_ENUM$CO2[FIELD_ENUM.RELATION]
});
})
});
resetValues = (_resetValues = {}, _defineProperty(_resetValues, FIELD_ENUM.SEARCH, searchFilter), _defineProperty(_resetValues, FIELD_ENUM.BASIC, basicFilter), _defineProperty(_resetValues, FIELD_ENUM.COMPLEX, complexFilter), _defineProperty(_resetValues, FIELD_ENUM.CUSTOM, values[FIELD_ENUM.CUSTOM]), _resetValues);
(_fuzzyRef$current = fuzzyRef.current) === null || _fuzzyRef$current === void 0 ? void 0 : (_fuzzyRef$current$set = _fuzzyRef$current.setValue) === null || _fuzzyRef$current$set === void 0 ? void 0 : _fuzzyRef$current$set.call(_fuzzyRef$current, (_resetValues$FIELD_EN = resetValues[FIELD_ENUM.SEARCH]) === null || _resetValues$FIELD_EN === void 0 ? void 0 : (_resetValues$FIELD_EN2 = _resetValues$FIELD_EN[FIELD_ENUM.CONDITIONS]) === null || _resetValues$FIELD_EN2 === void 0 ? void 0 : (_resetValues$FIELD_EN3 = _resetValues$FIELD_EN2[0]) === null || _resetValues$FIELD_EN3 === void 0 ? void 0 : _resetValues$FIELD_EN3[DYNAMIC_ENUM.VALUE]);
_context.next = 10;
return onChange === null || onChange === void 0 ? void 0 : onChange(resetValues);
case 10:
case "end":
return _context.stop();
}
}, _callee);
})));
//若为基础筛选则直接触发查询
var handleValuesChange = useMemoizedFn(function (changedValues, values) {
onValuesChange === null || onValuesChange === void 0 ? void 0 : onValuesChange(changedValues, values);
var isBasic = (FIELD_ENUM.BASIC in changedValues);
var isSearch = (FIELD_ENUM.SEARCH in changedValues);
var isComplex = (FIELD_ENUM.COMPLEX in changedValues);
var isCustom = (FIELD_ENUM.CUSTOM in changedValues);
if (isBasic || isSearch || isCustom) {
onSearch();
}
if (isBasic || isComplex) {
setIsChange(true);
}
if (isCustom) {
setIsChange(false);
}
});
/** 重组dataSource */
var resetDataSource = useMemo(function () {
if (!Array.isArray(dataSource)) return [];
return dataSource.map(function (item) {
var _item$colon, _objectSpread2;
return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, pick(item, ['title', 'show', 'type', SOURCE_ENUM.TABLE_OBJ, 'multiple', 'fieldNames', 'placeholder', 'showSearch', 'showAllChecked'])), pick(item, ['showCheckedStrategy'])), pick(item, ['onOpenChange', 'picker', 'showTime', 'format'])), pick(item, ['dependencies'])), {}, (_objectSpread2 = {}, _defineProperty(_objectSpread2, DYNAMIC_ENUM.FIELD_NAME, item[SOURCE_ENUM.FIELD_NAME] || item[DYNAMIC_ENUM.FIELD_NAME]), _defineProperty(_objectSpread2, DYNAMIC_ENUM.FIELD_TYPE, item[SOURCE_ENUM.FIELD_TYPE] || item[DYNAMIC_ENUM.FIELD_TYPE] || initialFieldsValue[DYNAMIC_ENUM.FIELD_TYPE]), _defineProperty(_objectSpread2, DYNAMIC_ENUM.OPERATOR, item[SOURCE_ENUM.OPERATOR] || initialFieldsValue[DYNAMIC_ENUM.OPERATOR]), _defineProperty(_objectSpread2, DYNAMIC_ENUM.RELATION, item[SOURCE_ENUM.RELATION] || initialFieldsValue[DYNAMIC_ENUM.RELATION]), _defineProperty(_objectSpread2, "options", item[SOURCE_ENUM.OPTIONS]), _defineProperty(_objectSpread2, "colon", (_item$colon = item.colon) !== null && _item$colon !== void 0 ? _item$colon : colon), _objectSpread2));
});
}, [dataSource]);
var initialBasicConditions = useMemo(function () {
return resetDataSource.filter(function (item) {
return item.show !== false;
});
}, [resetDataSource]);
var initialFuzzyConditions = useMemo(function () {
var keys = Array.isArray(searchKey) ? searchKey : typeof searchKey === 'string' ? [searchKey] : [];
return keys.reduce(function (pre, cur) {
return cur ? pre.concat(_objectSpread(_objectSpread({}, searchConfig), {}, _defineProperty({}, DYNAMIC_ENUM.FIELD_NAME, cur))) : pre;
}, []);
}, [searchKey]);
var isEnableSearch = enableSearch && !isEmpty(searchKey);
/** 自定义重置方法 (使用resetFields重置时页面会闪一下) */
var onReset = useMemoizedFn( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
var _form$setFieldsValue;
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) switch (_context2.prev = _context2.next) {
case 0:
_context2.next = 2;
return form.setFieldsValue((_form$setFieldsValue = {}, _defineProperty(_form$setFieldsValue, FIELD_ENUM.SEARCH, {
relation: initialFieldsValue[DYNAMIC_ENUM.RELATION],
conditions: initialFuzzyConditions
}), _defineProperty(_form$setFieldsValue, FIELD_ENUM.BASIC, {
relation: initialFieldsValue[DYNAMIC_ENUM.RELATION],
conditions: initialBasicConditions
}), _defineProperty(_form$setFieldsValue, FIELD_ENUM.COMPLEX, {
relation: initialFieldsValue[DYNAMIC_ENUM.RELATION],
conditions: undefined
}), _defineProperty(_form$setFieldsValue, FIELD_ENUM.CUSTOM, undefined), _form$setFieldsValue));
case 2:
case "end":
return _context2.stop();
}
}, _callee2);
})));
var onClear = useMemoizedFn( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
return _regeneratorRuntime.wrap(function _callee3$(_context3) {
while (1) switch (_context3.prev = _context3.next) {
case 0:
_context3.next = 2;
return onReset();
case 2:
onClearChange === null || onClearChange === void 0 ? void 0 : onClearChange();
onSearch === null || onSearch === void 0 ? void 0 : onSearch();
case 4:
case "end":
return _context3.stop();
}
}, _callee3);
})));
// 向外暴露出的方法
useImperativeHandle(ref, function () {
return _objectSpread(_objectSpread({}, form), {}, {
reset: onReset
});
});
return /*#__PURE__*/React.createElement(Form, {
form: form,
component: false,
initialValues: (_ref7 = {}, _defineProperty(_ref7, FIELD_ENUM.SEARCH, (_FIELD_ENUM$SEARCH = {}, _defineProperty(_FIELD_ENUM$SEARCH, FIELD_ENUM.RELATION, initialFieldsValue[DYNAMIC_ENUM.RELATION]), _defineProperty(_FIELD_ENUM$SEARCH, FIELD_ENUM.CONDITIONS, initialFuzzyConditions), _FIELD_ENUM$SEARCH)), _defineProperty(_ref7, FIELD_ENUM.BASIC, (_FIELD_ENUM$BASIC = {}, _defineProperty(_FIELD_ENUM$BASIC, FIELD_ENUM.RELATION, initialFieldsValue[DYNAMIC_ENUM.RELATION]), _defineProperty(_FIELD_ENUM$BASIC, FIELD_ENUM.CONDITIONS, initialBasicConditions), _FIELD_ENUM$BASIC)), _defineProperty(_ref7, FIELD_ENUM.COMPLEX, _defineProperty({}, FIELD_ENUM.RELATION, initialFieldsValue[DYNAMIC_ENUM.RELATION])), _ref7),
onValuesChange: handleValuesChange
}, /*#__PURE__*/React.createElement("div", {
className: cls('lm_adv_filter', _defineProperty({}, "lm_adv_filter_".concat(size), size))
}, addonBefore, /*#__PURE__*/React.createElement(Custom, _extends({}, props, {
onSelect: onSelect,
isChange: isChange,
dataSource: resetDataSource
})), isEnableSearch && /*#__PURE__*/React.createElement(FuzzySearch, _extends({}, props, {
ref: fuzzyRef
})), enableBasic && /*#__PURE__*/React.createElement(Basic, {
dataSource: resetDataSource
}), /*#__PURE__*/React.createElement(Complex, _extends({}, props, {
onSearch: onSearch,
onClear: onClear,
dataSource: resetDataSource
}))));
});
var AdvancedFilter = /*#__PURE__*/forwardRef(function (props, ref) {
var defaultRef = useRef(null);
var resetProps = _objectSpread(_objectSpread({}, initialProps), props);
return /*#__PURE__*/React.createElement(LocaleReceiver, {
componentName: "AdvancedFilter"
}, function (contextLocale) {
return /*#__PURE__*/React.createElement(Wrapper, _extends({
ref: ref || defaultRef
}, resetProps, {
locale: contextLocale
}));
});
});
AdvancedFilter.Control = Control;
export default AdvancedFilter;