linkmore-design/es/lm-filter/complexFilter/drawer.js

🌈 🚀lm组件库。🚀

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
var _excluded = ["item"],
  _excluded2 = ["item"];
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import Tag from "../../tag";
import Button from "../../button";
import Drawer from "../../drawer";
import Input from "../../input";
import Space from "../../space";
import IconFont from "../../icon-font";
import VirtualList from "../../virtual-list";
import { getIsHas, getFlatItem } from "../utils";
import ValueDrawer from "./valueDrawer";

// 选中的筛选项
var ListItemChecked = function ListItemChecked(_ref) {
  var instance = _ref.instance,
    itemProps = _ref.item;
  var state = instance.state,
    dispatch = instance.dispatch,
    dataSource = instance.dataSource,
    locale = instance.locale;
  var complexDrawer = state.complexDrawer;
  var field = itemProps.field,
    _itemProps$value = itemProps.value,
    valueObj = _itemProps$value === void 0 ? {} : _itemProps$value;

  // 单项匹配数据, 根据字段名查找, 嵌套筛选时查询父级
  var getItem = useMemo(function () {
    return dataSource.find(function (v) {
      return [field, valueObj.originField].includes(v.field);
    });
  }, [field, valueObj.originField, dataSource]);

  // 选中值的处理
  var resetValue = useMemo(function () {
    return valueObj.value;
  }, [valueObj.value]);

  // 选中的数据
  var checkedValues = useMemo(function () {
    var checkedValue = valueObj.value;
    if (Array.isArray(checkedValue)) {
      var _getItem$data;
      if (['date'].includes(getItem.type)) {
        return [{
          value: resetValue,
          label: "".concat(resetValue[0], " ~ ").concat(resetValue[1])
        }];
      }
      if (getItem.type === 'nested') {
        return checkedValue;
      }
      if (getItem.type === 'cascader') {
        return getFlatItem(getItem, checkedValue, 'parent');
      }
      return (_getItem$data = getItem.data) === null || _getItem$data === void 0 ? void 0 : _getItem$data.filter(function (v) {
        return checkedValue.includes(v.value);
      });
    }
    if (['input', 'date'].includes(getItem.type)) {
      return resetValue ? [{
        value: resetValue,
        label: resetValue
      }] : [];
    }
    var filterValue = getItem.data.find(function (v) {
      return v.value === checkedValue;
    });
    return filterValue ? [filterValue] : [];
  }, [getItem, valueObj.value]);

  // 编辑
  var handleEdit = function handleEdit() {
    dispatch({
      type: 'changeValueDrawer',
      valueDrawer: {
        visible: true,
        data: _objectSpread(_objectSpread({}, getItem), valueObj)
      }
    });
  };

  // 删除
  var handleDelete = function handleDelete(e) {
    e.stopPropagation();
    var filterValues = _objectSpread({}, complexDrawer.data);
    delete filterValues[field];
    dispatch({
      type: 'changeComplexDrawer',
      complexDrawer: {
        visible: true,
        data: filterValues
      }
    });
  };

  // 删除Tag
  var onTagClose = function onTagClose(val) {
    var originData = _objectSpread({}, complexDrawer.data);
    var nValue = '';
    if (['select', 'checkbox'].includes(getItem.type)) {
      nValue = originData[field].value.filter(function (v) {
        return !v.includes(val);
      });
    }
    if (['input'].includes(getItem.type)) {
      nValue = '';
    }
    if (['cascader'].includes(getItem.type)) {
      nValue = [];
    }
    var filterValues = _objectSpread(_objectSpread({}, originData), {}, _defineProperty({}, field, _objectSpread(_objectSpread({}, originData[field]), {}, {
      value: nValue
    })));
    dispatch({
      type: 'changeComplexDrawer',
      complexDrawer: {
        visible: true,
        data: filterValues
      }
    });
  };

  // Tags显示
  var tagElem = function tagElem() {
    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tag, {
      className: "add_tags"
    }, /*#__PURE__*/React.createElement(IconFont, {
      type: "lmweb-plus"
    }), " ", locale.drawerItemAdd), checkedValues === null || checkedValues === void 0 ? void 0 : checkedValues.map(function (v) {
      return /*#__PURE__*/React.createElement(Tag, {
        key: v.value,
        closable: true,
        onClose: function onClose() {
          return onTagClose(v.value);
        }
      }, v.label);
    }));
  };

  // 模式
  var modeLabel = useMemo(function () {
    return valueObj.mode === 'and' ? locale.and : locale.or;
  }, [valueObj.mode]);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: "item_box",
    onClick: handleEdit
  }, /*#__PURE__*/React.createElement("div", {
    className: "item_header"
  }, /*#__PURE__*/React.createElement("div", {
    className: "item_header_title"
  }, "".concat(getItem.title, "\uFF08").concat(modeLabel, "\uFF09")), /*#__PURE__*/React.createElement(IconFont, {
    type: "lmweb-close1",
    onClick: handleDelete,
    className: "item_header_icon"
  })), /*#__PURE__*/React.createElement("div", {
    className: "item_tags"
  }, tagElem())));
};

// 全部筛选项
var ListGroup = function ListGroup(_ref2) {
  var instance = _ref2.instance,
    filterItemData = _ref2.filterItemData;
  var dispatch = instance.dispatch,
    dataSource = instance.dataSource,
    locale = instance.locale;
  var inputRef = useRef(null);
  var _useState = useState(function () {
      return dataSource;
    }),
    _useState2 = _slicedToArray(_useState, 2),
    options = _useState2[0],
    setOptions = _useState2[1];

  // 未过滤的筛选项
  var getNotFilters = useCallback(function () {
    return dataSource === null || dataSource === void 0 ? void 0 : dataSource.filter(function (v) {
      return !(filterItemData !== null && filterItemData !== void 0 && filterItemData.some(function (s) {
        return s.field === v.field;
      }));
    });
  }, [dataSource, filterItemData]);
  var handleSearch = function handleSearch(val) {
    var arr = getNotFilters();
    setOptions(arr.filter(function (v) {
      var _v$title;
      return ((_v$title = v.title) === null || _v$title === void 0 ? void 0 : _v$title.indexOf(val)) > -1;
    }));
  };

  // 编辑
  var handleEdit = function handleEdit(_ref3) {
    var field = _ref3.field;
    // 单项匹配数据, 根据字段名查找
    var getItem = dataSource.find(function (v) {
      return v.field === field;
    });
    // 编辑
    dispatch({
      type: 'changeValueDrawer',
      valueDrawer: {
        visible: true,
        type: 'complex',
        data: _objectSpread(_objectSpread({}, getItem), {}, {
          value: []
        })
      }
    });
  };
  useEffect(function () {
    var _inputRef$current, _inputRef$current$inp;
    var val = ((_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : (_inputRef$current$inp = _inputRef$current.input) === null || _inputRef$current$inp === void 0 ? void 0 : _inputRef$current$inp.value) || '';
    handleSearch(val);
  }, [filterItemData]);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: "list_group"
  }, /*#__PURE__*/React.createElement("div", {
    className: "list_group_title"
  }, locale.complexDrawerSelectQeuryItem), /*#__PURE__*/React.createElement("div", {
    className: "list_group_search"
  }, /*#__PURE__*/React.createElement(Input.Search, {
    ref: inputRef,
    allowClear: true,
    placeholder: locale.placeholder,
    onSearch: handleSearch
  })), /*#__PURE__*/React.createElement(VirtualList, {
    options: options,
    className: "filter_drawer_group_list"
  }, function (_ref4) {
    var item = _ref4.item,
      resetProps = _objectWithoutProperties(_ref4, _excluded);
    return /*#__PURE__*/React.createElement("div", _extends({}, resetProps, {
      className: "filter_drawer_group_item"
    }), /*#__PURE__*/React.createElement("div", {
      className: "item_box",
      onClick: function onClick() {
        return handleEdit(item);
      }
    }, /*#__PURE__*/React.createElement("div", {
      className: "item_header"
    }, /*#__PURE__*/React.createElement("div", {
      className: "item_header_title"
    }, item.title), /*#__PURE__*/React.createElement(IconFont, {
      type: "lmweb-plus",
      className: "item_header_icon icon_plus"
    }))));
  })));
};
var ComplexDrawer = function ComplexDrawer(_ref5) {
  var instance = _ref5.instance;
  var state = instance.state,
    dispatch = instance.dispatch,
    onQuery = instance.onQuery,
    locale = instance.locale;
  var complexDrawer = state.complexDrawer;
  var isHas = useMemo(function () {
    return getIsHas(complexDrawer.data);
  }, [complexDrawer.data]);

  // 过滤的内容转数组
  var filterItemData = useMemo(function () {
    return isHas ? Object.entries(complexDrawer.data).map(function (v) {
      return {
        field: v[0],
        value: v[1]
      };
    }) : [];
  }, [complexDrawer.data, isHas]);
  var onClose = function onClose() {
    dispatch({
      type: 'changeComplexDrawer',
      complexDrawer: _objectSpread(_objectSpread({}, complexDrawer), {}, {
        visible: false
      })
    });
  };
  var onSearch = function onSearch() {
    var complexFilter = complexDrawer.data;
    onQuery === null || onQuery === void 0 ? void 0 : onQuery({
      complexFilter: complexFilter,
      type: 'complex'
    });
  };

  // 初始化筛选
  useEffect(function () {
    if (complexDrawer.visible) {
      dispatch({
        type: 'changeComplexDrawer',
        complexDrawer: {
          data: state.complexFilter,
          visible: complexDrawer.visible
        }
      });
    }
  }, [dispatch, complexDrawer.visible]);
  var Tit = function Tit() {
    return /*#__PURE__*/React.createElement("div", {
      onClick: function onClick() {
        return console.log('title', state);
      }
    }, locale.complexDrawerTitle);
  };

  // 弹窗配置项
  var config = {
    title: /*#__PURE__*/React.createElement(Tit, null),
    visible: complexDrawer.visible,
    onClose: onClose,
    width: 440,
    placement: 'right',
    destroyOnClose: true,
    className: 'lm_filter_drawer',
    extra: /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Button, {
      onClick: onClose,
      size: "small"
    }, locale.cancel), /*#__PURE__*/React.createElement(Button, {
      type: "primary",
      onClick: onSearch,
      size: "small"
    }, locale.query))
  };
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Drawer, config, /*#__PURE__*/React.createElement("div", {
    className: "complex_filter_body"
  }, isHas && /*#__PURE__*/React.createElement("div", {
    className: "checked_group"
  }, /*#__PURE__*/React.createElement(VirtualList, {
    options: filterItemData,
    className: "filter_drawer_group_list"
  }, function (_ref6) {
    var item = _ref6.item,
      resetProps = _objectWithoutProperties(_ref6, _excluded2);
    return /*#__PURE__*/React.createElement("div", _extends({}, resetProps, {
      className: "filter_drawer_group_item"
    }), /*#__PURE__*/React.createElement(ListItemChecked, {
      instance: instance,
      item: item
    }));
  })), /*#__PURE__*/React.createElement(ListGroup, {
    instance: instance,
    filterItemData: filterItemData
  })), /*#__PURE__*/React.createElement(ValueDrawer, {
    instance: instance
  })));
};
export default ComplexDrawer;