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

🌈 🚀lm组件库。🚀

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["instance", "item", "value", "onChange", "options"],
  _excluded2 = ["getFilterValue", "setFilterValue"];
import React, { useMemo, useState } from 'react';
import { getIsHas, getValueForType } from "../utils";
import DropdownFilter from "./DropdownFIlter";

// 下拉筛选组件
/*
 * 筛选组件使用时只传入 instance, item
 * 其余参数皆为单独使用时传入
 */
var 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: '暂无数据'
};
var FilterControl = /*#__PURE__*/React.memo(function (props) {
  var _props$instance = props.instance,
    instance = _props$instance === void 0 ? {} : _props$instance,
    _props$item = props.item,
    item = _props$item === void 0 ? {} : _props$item,
    value = props.value,
    onChange = props.onChange,
    options = props.options,
    resetProps = _objectWithoutProperties(props, _excluded);
  var getFilterValue = instance.getFilterValue,
    _setFilterValue = instance.setFilterValue,
    resetInstanceProps = _objectWithoutProperties(instance, _excluded2);

  // 重组item值
  var resetItem = useMemo(function () {
    var data = item.data;
    return _objectSpread(_objectSpread(_objectSpread({}, item), resetProps), {}, {
      data: data || options
    });
  }, [item, resetProps, options]);

  // 单独使用时的缓存数据(非受控模式) 默认值: [] || ''
  var _useState = useState(function () {
      return getValueForType(resetItem.type);
    }),
    _useState2 = _slicedToArray(_useState, 2),
    aliveValue = _useState2[0],
    setAliveValue = _useState2[1];

  // 单独使用 检查是否受控模式
  var transformFilterValue = useMemo(function () {
    return value || aliveValue;
  }, [value, aliveValue]);
  var filterValue = useMemo(function () {
    var val = getFilterValue === null || getFilterValue === void 0 ? void 0 : getFilterValue(resetItem);
    if (getIsHas(val)) {
      return val;
    }
    return val || transformFilterValue;
  }, [getFilterValue, resetItem, transformFilterValue]);

  // 单独使用时抛出选中的值
  var handleChange = function handleChange(val) {
    setAliveValue === null || setAliveValue === void 0 ? void 0 : setAliveValue(val);
    onChange === null || onChange === void 0 ? void 0 : onChange(val);
  };

  // 重组instance
  var resetInstance = _objectSpread(_objectSpread({
    locale: locale
  }, resetInstanceProps), {}, {
    filterValue: filterValue,
    setFilterValue: function setFilterValue(val) {
      return (_setFilterValue || handleChange)(val, resetItem);
    }
  });
  return /*#__PURE__*/React.createElement(DropdownFilter, {
    instance: resetInstance,
    item: resetItem
  });
});
export default FilterControl;