linkmore-design
Version:
🌈 🚀lm组件库。🚀
105 lines (99 loc) • 4.39 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _ahooks = require("ahooks");
var _classnames = _interopRequireDefault(require("classnames"));
var _isNil = _interopRequireDefault(require("lodash/isNil"));
var _react = _interopRequireWildcard(require("react"));
var _dropdown = _interopRequireDefault(require("../../../dropdown"));
var _form = _interopRequireDefault(require("../../../form"));
var _iconFont = _interopRequireDefault(require("../../../icon-font"));
var _constants = require("../../constants");
var _Clear = _interopRequireDefault(require("../Clear"));
var _ComplexRender = _interopRequireDefault(require("./ComplexRender"));
/**
* 高级筛选和一键清空
* @description 高级筛选的数量和一键清空会用到同一个值: queryCount
*/
const Complex = props => {
const {
enableComplex,
enableClear,
onSearch,
onClear,
locale
} = props;
const [open, setOpen] = (0, _react.useState)(false);
const form = _form.default.useFormInstance();
/** 用于保存初始查询的数据 */
const sourceRef = (0, _react.useRef)(form.getFieldValue(_constants.FIELD_ENUM.COMPLEX));
const basicConditions = _form.default.useWatch([_constants.FIELD_ENUM.BASIC, _constants.FIELD_ENUM.CONDITIONS]);
const conditionsLen = _form.default.useWatch([_constants.FIELD_ENUM.COMPLEX, _constants.FIELD_ENUM.CONDITIONS])?.length;
/** 存在基础筛选 */
const isExcitingBasicConditions = (0, _react.useMemo)(() => {
if (!enableClear) return false;
if (!Array.isArray(basicConditions)) return false;
return basicConditions.some(item => !(0, _isNil.default)(item.value));
}, [basicConditions]);
/** 正在查询的数量 */
const queryCount = (0, _react.useMemo)(() => {
if (!open) return conditionsLen;
return sourceRef.current?.[_constants.FIELD_ENUM.CONDITIONS]?.length;
}, [open, conditionsLen]);
/** 当前是否存在过滤项 */
const isExitingFilter = isExcitingBasicConditions || !!queryCount;
/** 取消查询时, 恢复原查询数据 */
const onCancel = (0, _ahooks.useMemoizedFn)(() => {
setOpen(false);
form.setFieldValue(_constants.FIELD_ENUM.COMPLEX, sourceRef.current);
});
const onOk = (0, _ahooks.useMemoizedFn)(async () => {
// 防止查询延迟时立即关闭的数据重置
sourceRef.current = form.getFieldValue(_constants.FIELD_ENUM.COMPLEX);
await onSearch?.();
setOpen(false);
});
const onOpenChange = (0, _ahooks.useMemoizedFn)(isOpen => {
/** 打开弹窗时, 保存查询参数 */
if (isOpen) {
setOpen(isOpen);
sourceRef.current = form.getFieldValue(_constants.FIELD_ENUM.COMPLEX);
}
!isOpen && onCancel();
});
const dropdownRender = (0, _ahooks.useMemoizedFn)(() => /*#__PURE__*/_react.default.createElement(_ComplexRender.default, (0, _extends2.default)({}, props, {
onCancel: onCancel,
onOk: onOk
})));
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_form.default.Item, {
name: _constants.FIELD_ENUM.COMPLEX,
noStyle: true
}), enableComplex && /*#__PURE__*/_react.default.createElement(_dropdown.default, {
trigger: ['click'],
placement: "bottomLeft",
open: open,
dropdownRender: dropdownRender,
onOpenChange: onOpenChange,
destroyPopupOnHide: true
}, /*#__PURE__*/_react.default.createElement("div", {
className: (0, _classnames.default)('lm_filter_basic_item lm_filter_complex_item', {
expand: open,
active: !!queryCount
})
}, /*#__PURE__*/_react.default.createElement(_iconFont.default, {
type: "lm-icon-a-tongyonga5shaixuan",
className: "filter_item_icon addon_before"
}), /*#__PURE__*/_react.default.createElement("span", {
className: "filter_item_label"
}, locale.complex, !!queryCount && `(${queryCount})`))), isExitingFilter && enableClear && /*#__PURE__*/_react.default.createElement(_Clear.default, {
onClear: onClear,
locale: locale
}));
};
var _default = Complex;
exports.default = _default;