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

🌈 🚀lm组件库。🚀

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
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"];
import _regeneratorRuntime from "@babel/runtime/regenerator";
import React, { useState, useEffect, useMemo } from 'react';
import Form from "../../form";
import Button from "../../button";
import Dropdown from "../../dropdown";
import Drawer from "../../drawer";
import Input from "../../input";
import Radio from "../../radio";
import Space from "../../space";
import Tag from "../../tag";
import IconFont from "../../icon-font";
import VirtualList from "../../virtual-list";
import { getIsHas, getFlatItem } from "../utils";
// import CustomModal from '../components/modal'
import SelectFilter from "../components/SelectFilter";
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 DropdownBtn = function DropdownBtn(_ref2) {
  var instance = _ref2.instance;
  var dispatch = instance.dispatch,
    dataSource = instance.dataSource,
    locale = instance.locale;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    visible = _useState2[0],
    setVisible = _useState2[1];
  var selectInstance = {
    filterValue: '',
    setFilterValue: function setFilterValue(_, valObj) {
      setVisible(false);
      dispatch({
        type: 'changeValueDrawer',
        valueDrawer: {
          visible: true,
          type: 'custom',
          data: _objectSpread(_objectSpread({}, valObj), {}, {
            value: []
          })
        }
      });
    }
  };
  var itemProps = {
    data: dataSource,
    fieldNames: {
      label: 'title',
      value: 'field'
    }
  };
  return /*#__PURE__*/React.createElement(Dropdown, {
    trigger: ['click'],
    placement: "bottomLeft",
    visible: visible,
    onVisibleChange: function onVisibleChange(v) {
      return setVisible(v);
    },
    overlay: /*#__PURE__*/React.createElement(SelectFilter, {
      instance: selectInstance,
      item: itemProps
    }),
    overlayClassName: "filter_dropdown_container_btn"
  }, /*#__PURE__*/React.createElement(Button, {
    block: true,
    type: "dashed",
    icon: /*#__PURE__*/React.createElement(IconFont, {
      type: "lmweb-plus"
    }),
    size: "middle"
  }, locale.customDrawerDropdownButton));
};
var Index = function Index(_ref3) {
  var instance = _ref3.instance;
  var state = instance.state,
    dispatch = instance.dispatch,
    locale = instance.locale;
  var customDrawer = state.customDrawer;
  var _Form$useForm = Form.useForm(),
    _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
    form = _Form$useForm2[0];

  // 过滤的内容转数组
  var filterItemData = useMemo(function () {
    return getIsHas(customDrawer.data) ? Object.entries(customDrawer.data).map(function (v) {
      return {
        field: v[0],
        value: v[1]
      };
    }) : [];
  }, [customDrawer.data]);

  // 关闭抽屉
  var onClose = function onClose() {
    dispatch({
      type: 'changeCustomDrawer',
      customDrawer: _objectSpread(_objectSpread({}, customDrawer), {}, {
        visible: false
      })
    });
  };

  // 保存数据
  var onSave = /*#__PURE__*/function () {
    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
      var val, nValue;
      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) switch (_context.prev = _context.next) {
          case 0:
            _context.prev = 0;
            _context.next = 3;
            return form.validateFields();
          case 3:
            val = _context.sent;
            nValue = _objectSpread(_objectSpread({}, customDrawer), val);
            if (!nValue.value) {
              Object.assign(nValue, {
                value: "diy".concat(Date.now())
              });
            }
            dispatch({
              type: 'changeSaveModal',
              saveModal: {
                visible: true,
                data: nValue
              }
            });
            _context.next = 12;
            break;
          case 9:
            _context.prev = 9;
            _context.t0 = _context["catch"](0);
            console.log('error:', _context.t0);
          case 12:
          case "end":
            return _context.stop();
        }
      }, _callee, null, [[0, 9]]);
    }));
    return function onSave() {
      return _ref4.apply(this, arguments);
    };
  }();

  // 弹窗配置项
  var config = {
    title: customDrawer.type === 'edit' ? "".concat(locale.customDrawerEdit).concat(customDrawer.label) : locale.customDrawerTitle,
    visible: customDrawer.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.customDrawerCancel), /*#__PURE__*/React.createElement(Button, {
      type: "primary",
      onClick: onSave,
      size: "small"
    }, locale.customDrawerOk))
  };
  useEffect(function () {
    if (customDrawer.visible) {
      form.resetFields();
    }
  }, [customDrawer.visible, form]);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Drawer, config, /*#__PURE__*/React.createElement("div", {
    className: "custom_filter_body"
  }, /*#__PURE__*/React.createElement(Form, {
    form: form,
    initialValues: {
      label: customDrawer.label,
      default: !!customDrawer.default
    },
    layout: "vertical"
  }, /*#__PURE__*/React.createElement("div", {
    className: "filter_drawer_group"
  }, /*#__PURE__*/React.createElement(Form.Item, {
    name: "label",
    label: locale.customDrawerInputLabel,
    rules: [{
      required: true,
      message: locale.customDrawerInputMessage
    }]
  }, /*#__PURE__*/React.createElement(Input, {
    placeholder: locale.placeholder,
    size: "middle"
  }))), /*#__PURE__*/React.createElement("div", {
    className: "filter_drawer_group"
  }, /*#__PURE__*/React.createElement(Form.Item, {
    name: "default",
    label: locale.customDrawerDefault
  }, /*#__PURE__*/React.createElement(Radio.Group, {
    size: "small"
  }, /*#__PURE__*/React.createElement(Radio, {
    value: true
  }, locale.customDrawerDefaultRadioYes), /*#__PURE__*/React.createElement(Radio, {
    value: false
  }, locale.customDrawerDefaultRadioNo))))), /*#__PURE__*/React.createElement("div", {
    className: "filter_drawer_group"
  }, /*#__PURE__*/React.createElement("div", {
    className: "filter_drawer_group_add"
  }, /*#__PURE__*/React.createElement(DropdownBtn, {
    instance: instance
  })), /*#__PURE__*/React.createElement(VirtualList, {
    options: filterItemData,
    className: "filter_drawer_group_list"
  }, function (_ref5) {
    var item = _ref5.item,
      resetProps = _objectWithoutProperties(_ref5, _excluded);
    return /*#__PURE__*/React.createElement("div", _extends({}, resetProps, {
      className: "filter_drawer_group_item"
    }), /*#__PURE__*/React.createElement(ListItemChecked, {
      instance: instance,
      item: item
    }));
  }))), /*#__PURE__*/React.createElement(ValueDrawer, {
    instance: instance
  })));
};
export default Index;