linkmore-design
Version:
🌈 🚀lm组件库。🚀
117 lines (111 loc) • 4.68 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import { useMemoizedFn } from 'ahooks';
import cls from 'classnames';
import isNil from 'lodash/isNil';
import React, { useMemo, useRef, useState } from 'react';
import Dropdown from "../../../dropdown";
import Form from "../../../form";
import IconFont from "../../../icon-font";
import { FIELD_ENUM } from "../../constants";
import Clear from "../Clear";
import ComplexRender from "./ComplexRender";
/**
* 高级筛选和一键清空
* @description 高级筛选的数量和一键清空会用到同一个值: queryCount
*/
var Complex = function Complex(props) {
var _Form$useWatch;
var enableComplex = props.enableComplex,
enableClear = props.enableClear,
onSearch = props.onSearch,
onClear = props.onClear,
locale = props.locale;
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
open = _useState2[0],
setOpen = _useState2[1];
var form = Form.useFormInstance();
/** 用于保存初始查询的数据 */
var sourceRef = useRef(form.getFieldValue(FIELD_ENUM.COMPLEX));
var basicConditions = Form.useWatch([FIELD_ENUM.BASIC, FIELD_ENUM.CONDITIONS]);
var conditionsLen = (_Form$useWatch = Form.useWatch([FIELD_ENUM.COMPLEX, FIELD_ENUM.CONDITIONS])) === null || _Form$useWatch === void 0 ? void 0 : _Form$useWatch.length;
/** 存在基础筛选 */
var isExcitingBasicConditions = useMemo(function () {
if (!enableClear) return false;
if (!Array.isArray(basicConditions)) return false;
return basicConditions.some(function (item) {
return !isNil(item.value);
});
}, [basicConditions]);
/** 正在查询的数量 */
var queryCount = useMemo(function () {
var _sourceRef$current, _sourceRef$current$FI;
if (!open) return conditionsLen;
return (_sourceRef$current = sourceRef.current) === null || _sourceRef$current === void 0 ? void 0 : (_sourceRef$current$FI = _sourceRef$current[FIELD_ENUM.CONDITIONS]) === null || _sourceRef$current$FI === void 0 ? void 0 : _sourceRef$current$FI.length;
}, [open, conditionsLen]);
/** 当前是否存在过滤项 */
var isExitingFilter = isExcitingBasicConditions || !!queryCount;
/** 取消查询时, 恢复原查询数据 */
var onCancel = useMemoizedFn(function () {
setOpen(false);
form.setFieldValue(FIELD_ENUM.COMPLEX, sourceRef.current);
});
var onOk = useMemoizedFn( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
// 防止查询延迟时立即关闭的数据重置
sourceRef.current = form.getFieldValue(FIELD_ENUM.COMPLEX);
_context.next = 3;
return onSearch === null || onSearch === void 0 ? void 0 : onSearch();
case 3:
setOpen(false);
case 4:
case "end":
return _context.stop();
}
}, _callee);
})));
var onOpenChange = useMemoizedFn(function (isOpen) {
/** 打开弹窗时, 保存查询参数 */
if (isOpen) {
setOpen(isOpen);
sourceRef.current = form.getFieldValue(FIELD_ENUM.COMPLEX);
}
!isOpen && onCancel();
});
var dropdownRender = useMemoizedFn(function () {
return /*#__PURE__*/React.createElement(ComplexRender, _extends({}, props, {
onCancel: onCancel,
onOk: onOk
}));
});
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Form.Item, {
name: FIELD_ENUM.COMPLEX,
noStyle: true
}), enableComplex && /*#__PURE__*/React.createElement(Dropdown, {
trigger: ['click'],
placement: "bottomLeft",
open: open,
dropdownRender: dropdownRender,
onOpenChange: onOpenChange,
destroyPopupOnHide: true
}, /*#__PURE__*/React.createElement("div", {
className: cls('lm_filter_basic_item lm_filter_complex_item', {
expand: open,
active: !!queryCount
})
}, /*#__PURE__*/React.createElement(IconFont, {
type: "icon-a-tongyonga5shaixuan",
className: "filter_item_icon addon_before"
}), /*#__PURE__*/React.createElement("span", {
className: "filter_item_label"
}, locale.complex, !!queryCount && "(".concat(queryCount, ")")))), isExitingFilter && enableClear && /*#__PURE__*/React.createElement(Clear, {
onClear: onClear,
locale: locale
}));
};
export default Complex;