linkmore-design/lib/advanced-filter/index.js

🌈 🚀lm组件库。🚀

"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 _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
var _isNil = _interopRequireDefault(require("lodash/isNil"));
var _pick = _interopRequireDefault(require("lodash/pick"));
var _react = _interopRequireWildcard(require("react"));
var _form = _interopRequireDefault(require("../form"));
var _LocaleReceiver = _interopRequireDefault(require("../locale-provider/LocaleReceiver"));
var _Basic = _interopRequireDefault(require("./components/Basic"));
var _Complex = _interopRequireDefault(require("./components/Complex"));
var _Custom = _interopRequireDefault(require("./components/Custom"));
var _FuzzySearch = _interopRequireDefault(require("./components/FuzzySearch"));
var _constants = require("./constants");
var _controls = _interopRequireDefault(require("./controls"));
const initialProps = {
  dataSource: [],
  // 数据源
  enableSearch: true,
  // 是否启用模糊查询
  enableBasic: true,
  // 是否启用基础筛选
  enableComplex: false,
  // 是否启用高级筛选
  enableCustom: false,
  // 是否启用自定义筛选
  customOptions: [],
  // 自定义筛选下拉项
  enableClear: true,
  // 是否展示一件清空
  enableAutoString: true,
  // 是否自动将筛选结构值转换为字符串
  enableUnLimitedPlaceholder: true,
  // 默认展示不限自定义筛选选项
  size: 'middle',
  // 尺寸
  searchConfig: {
    [_constants.DYNAMIC_ENUM.RELATION]: 'or',
    [_constants.DYNAMIC_ENUM.OPERATOR]: 'contains',
    [_constants.DYNAMIC_ENUM.FIELD_TYPE]: 'string'
  },
  placeholder: '',
  // 搜索占位符
  customRender: null // 自定义一级筛选Dom
};

const Wrapper = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
  const {
    enableSearch,
    enableBasic,
    dataSource,
    searchKey,
    searchConfig,
    colon,
    addonBefore,
    onChange,
    onValuesChange,
    onClearChange,
    onSelect,
    size
  } = props;
  const [form] = _form.default.useForm();
  const fuzzyRef = (0, _react.useRef)();
  const [isChange, setIsChange] = (0, _react.useState)(false);

  /** 触发查询 */
  const onSearch = (0, _ahooks.useMemoizedFn)(async () => {
    const values = await form.getFieldsValue(true);
    /** 重组返回数据 */
    const basicFilter = {
      ...values?.[_constants.FIELD_ENUM.BASIC],
      conditions: (values?.[_constants.FIELD_ENUM.BASIC]?.[_constants.FIELD_ENUM.CONDITIONS] || [])?.filter(item => !(0, _isNil.default)(item?.[_constants.DYNAMIC_ENUM.VALUE]))
    };
    const searchFilter = {
      ...values?.[_constants.FIELD_ENUM.SEARCH],
      conditions: (values?.[_constants.FIELD_ENUM.SEARCH]?.[_constants.FIELD_ENUM.CONDITIONS] || [])?.filter(item => !(0, _isNil.default)(item?.[_constants.DYNAMIC_ENUM.VALUE]))
    };
    const complexFilter = {
      ...values?.[_constants.FIELD_ENUM.COMPLEX],
      conditions: (values?.[_constants.FIELD_ENUM.COMPLEX]?.[_constants.FIELD_ENUM.CONDITIONS] || [])?.map(item => {
        return {
          ...item,
          relation: values?.[_constants.FIELD_ENUM.COMPLEX]?.[_constants.FIELD_ENUM.RELATION]
        };
      })
    };
    const resetValues = {
      [_constants.FIELD_ENUM.SEARCH]: searchFilter,
      [_constants.FIELD_ENUM.BASIC]: basicFilter,
      [_constants.FIELD_ENUM.COMPLEX]: complexFilter,
      [_constants.FIELD_ENUM.CUSTOM]: values[_constants.FIELD_ENUM.CUSTOM]
    };
    fuzzyRef.current?.setValue?.(resetValues[_constants.FIELD_ENUM.SEARCH]?.[_constants.FIELD_ENUM.CONDITIONS]?.[0]?.[_constants.DYNAMIC_ENUM.VALUE]);
    await onChange?.(resetValues);
  });

  //若为基础筛选则直接触发查询
  const handleValuesChange = (0, _ahooks.useMemoizedFn)((changedValues, values) => {
    onValuesChange?.(changedValues, values);
    const isBasic = (_constants.FIELD_ENUM.BASIC in changedValues);
    const isSearch = (_constants.FIELD_ENUM.SEARCH in changedValues);
    const isComplex = (_constants.FIELD_ENUM.COMPLEX in changedValues);
    const isCustom = (_constants.FIELD_ENUM.CUSTOM in changedValues);
    if (isBasic || isSearch || isCustom) {
      onSearch();
    }
    if (isBasic || isComplex) {
      setIsChange(true);
    }
    if (isCustom) {
      setIsChange(false);
    }
  });

  /** 重组dataSource */
  const resetDataSource = (0, _react.useMemo)(() => {
    if (!Array.isArray(dataSource)) return [];
    return dataSource.map(item => ({
      ...(0, _pick.default)(item, ['title', 'show', 'type', _constants.SOURCE_ENUM.TABLE_OBJ, 'multiple', 'fieldNames', 'placeholder', 'showSearch', 'showAllChecked']),
      // cascader
      ...(0, _pick.default)(item, ['showCheckedStrategy']),
      // datePicker
      ...(0, _pick.default)(item, ['onOpenChange', 'picker', 'showTime', 'format']),
      ...(0, _pick.default)(item, ['dependencies']),
      [_constants.DYNAMIC_ENUM.FIELD_NAME]: item[_constants.SOURCE_ENUM.FIELD_NAME] || item[_constants.DYNAMIC_ENUM.FIELD_NAME],
      [_constants.DYNAMIC_ENUM.FIELD_TYPE]: item[_constants.SOURCE_ENUM.FIELD_TYPE] || item[_constants.DYNAMIC_ENUM.FIELD_TYPE] || _constants.initialFieldsValue[_constants.DYNAMIC_ENUM.FIELD_TYPE],
      [_constants.DYNAMIC_ENUM.OPERATOR]: item[_constants.SOURCE_ENUM.OPERATOR] || _constants.initialFieldsValue[_constants.DYNAMIC_ENUM.OPERATOR],
      [_constants.DYNAMIC_ENUM.RELATION]: item[_constants.SOURCE_ENUM.RELATION] || _constants.initialFieldsValue[_constants.DYNAMIC_ENUM.RELATION],
      options: item[_constants.SOURCE_ENUM.OPTIONS],
      colon: item.colon ?? colon
    }));
  }, [dataSource]);
  const initialBasicConditions = (0, _react.useMemo)(() => resetDataSource.filter(item => item.show !== false), [resetDataSource]);
  const initialFuzzyConditions = (0, _react.useMemo)(() => {
    const keys = Array.isArray(searchKey) ? searchKey : typeof searchKey === 'string' ? [searchKey] : [];
    return keys.reduce((pre, cur) => cur ? pre.concat({
      ...searchConfig,
      [_constants.DYNAMIC_ENUM.FIELD_NAME]: cur
    }) : pre, []);
  }, [searchKey]);
  const isEnableSearch = enableSearch && !(0, _isEmpty.default)(searchKey);

  /** 自定义重置方法 (使用resetFields重置时页面会闪一下) */
  const onReset = (0, _ahooks.useMemoizedFn)(async () => {
    await form.setFieldsValue({
      [_constants.FIELD_ENUM.SEARCH]: {
        relation: _constants.initialFieldsValue[_constants.DYNAMIC_ENUM.RELATION],
        conditions: initialFuzzyConditions
      },
      [_constants.FIELD_ENUM.BASIC]: {
        relation: _constants.initialFieldsValue[_constants.DYNAMIC_ENUM.RELATION],
        conditions: initialBasicConditions
      },
      [_constants.FIELD_ENUM.COMPLEX]: {
        relation: _constants.initialFieldsValue[_constants.DYNAMIC_ENUM.RELATION],
        conditions: undefined
      },
      [_constants.FIELD_ENUM.CUSTOM]: undefined
    });
  });
  const onClear = (0, _ahooks.useMemoizedFn)(async () => {
    await onReset();
    onClearChange?.();
    onSearch?.();
  });

  // 向外暴露出的方法
  (0, _react.useImperativeHandle)(ref, () => ({
    ...form,
    reset: onReset
  }));
  return /*#__PURE__*/_react.default.createElement(_form.default, {
    form: form,
    component: false,
    initialValues: {
      [_constants.FIELD_ENUM.SEARCH]: {
        [_constants.FIELD_ENUM.RELATION]: _constants.initialFieldsValue[_constants.DYNAMIC_ENUM.RELATION],
        [_constants.FIELD_ENUM.CONDITIONS]: initialFuzzyConditions
      },
      [_constants.FIELD_ENUM.BASIC]: {
        [_constants.FIELD_ENUM.RELATION]: _constants.initialFieldsValue[_constants.DYNAMIC_ENUM.RELATION],
        [_constants.FIELD_ENUM.CONDITIONS]: initialBasicConditions
      },
      [_constants.FIELD_ENUM.COMPLEX]: {
        [_constants.FIELD_ENUM.RELATION]: _constants.initialFieldsValue[_constants.DYNAMIC_ENUM.RELATION]
      }
    },
    onValuesChange: handleValuesChange
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames.default)('lm_adv_filter', {
      [`lm_adv_filter_${size}`]: size
    })
  }, addonBefore, /*#__PURE__*/_react.default.createElement(_Custom.default, (0, _extends2.default)({}, props, {
    onSelect: onSelect,
    isChange: isChange,
    dataSource: resetDataSource
  })), isEnableSearch && /*#__PURE__*/_react.default.createElement(_FuzzySearch.default, (0, _extends2.default)({}, props, {
    ref: fuzzyRef
  })), enableBasic && /*#__PURE__*/_react.default.createElement(_Basic.default, {
    dataSource: resetDataSource
  }), /*#__PURE__*/_react.default.createElement(_Complex.default, (0, _extends2.default)({}, props, {
    onSearch: onSearch,
    onClear: onClear,
    dataSource: resetDataSource
  }))));
});
const AdvancedFilter = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
  const defaultRef = (0, _react.useRef)(null);
  const resetProps = {
    ...initialProps,
    ...props
  };
  return /*#__PURE__*/_react.default.createElement(_LocaleReceiver.default, {
    componentName: "AdvancedFilter"
  }, contextLocale => /*#__PURE__*/_react.default.createElement(Wrapper, (0, _extends2.default)({
    ref: ref || defaultRef
  }, resetProps, {
    locale: contextLocale
  })));
});
AdvancedFilter.Control = _controls.default;
var _default = AdvancedFilter;
exports.default = _default;