linkmore-design/lib/lm-filter/components/index.js

🌈 🚀lm组件库。🚀

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _utils = require("../utils");
var _DropdownFIlter = _interopRequireDefault(require("./DropdownFIlter"));
// 下拉筛选组件
/*
 * 筛选组件使用时只传入 instance, item
 * 其余参数皆为单独使用时传入
 */
const locale = {
  placeholder: '请输入',
  default: '默认',
  and: '且',
  or: '或',
  cancel: '取消',
  query: '查询',
  ok: '确定',
  all: '全部',
  selected: '已选',
  unlimited: '不限',
  customAdd: '新增自定义查询',
  customDrawerEdit: '编辑',
  customDrawerTitle: '创建自定义查询',
  customDrawerInputLabel: '名称',
  customDrawerInputMessage: '请输入名称',
  customDrawerDefault: '设为默认',
  customDrawerDefaultRadioYes: '是',
  customDrawerDefaultRadioNo: '否',
  customDrawerDropdownButton: '新增筛选项',
  saveModalTitle: '保存查询',
  saveModalTip: '保存查询后，下次可以在自定义查询里快速找到，进行快捷查询',
  clear: '一键清空',
  complexDrawerTitle: '高级筛选',
  complexDrawerSelectQeuryItem: '选择查询项',
  drawerItemAdd: '新增',
  queryMethods: '查询方式',
  queryMethodsAnd: '且，查询同时满足此选项条件',
  queryMethodsOr: '或，查询包含此选项条件',
  selectField: '选择字段值',
  datePickerPlaceholder: '选择时间',
  rangePickerStartPlaceholder: '开始日期',
  rangePickerEndPlaceholder: '结束日期',
  week: '周',
  month: '月份',
  quarter: '季度',
  year: '年份',
  select: '选择',
  date: '日期',
  empty: '暂无数据'
};
const FilterControl = /*#__PURE__*/_react.default.memo(props => {
  const {
    instance = {},
    item = {},
    value,
    onChange,
    options,
    ...resetProps
  } = props;
  const {
    getFilterValue,
    setFilterValue,
    ...resetInstanceProps
  } = instance;

  // 重组item值
  const resetItem = (0, _react.useMemo)(() => {
    const {
      data
    } = item;
    return {
      ...item,
      ...resetProps,
      data: data || options
    };
  }, [item, resetProps, options]);

  // 单独使用时的缓存数据(非受控模式) 默认值: [] || ''
  const [aliveValue, setAliveValue] = (0, _react.useState)(() => (0, _utils.getValueForType)(resetItem.type));

  // 单独使用 检查是否受控模式
  const transformFilterValue = (0, _react.useMemo)(() => value || aliveValue, [value, aliveValue]);
  const filterValue = (0, _react.useMemo)(() => {
    const val = getFilterValue?.(resetItem);
    if ((0, _utils.getIsHas)(val)) {
      return val;
    }
    return val || transformFilterValue;
  }, [getFilterValue, resetItem, transformFilterValue]);

  // 单独使用时抛出选中的值
  const handleChange = val => {
    setAliveValue?.(val);
    onChange?.(val);
  };

  // 重组instance
  const resetInstance = {
    locale,
    ...resetInstanceProps,
    filterValue,
    setFilterValue: val => (setFilterValue || handleChange)(val, resetItem)
  };
  return /*#__PURE__*/_react.default.createElement(_DropdownFIlter.default, {
    instance: resetInstance,
    item: resetItem
  });
});
var _default = FilterControl;
exports.default = _default;