linkmore-design/lib/lm-filter/customFilter/drawer.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 _react = _interopRequireWildcard(require("react"));
var _form = _interopRequireDefault(require("../../form"));
var _button = _interopRequireDefault(require("../../button"));
var _dropdown = _interopRequireDefault(require("../../dropdown"));
var _drawer = _interopRequireDefault(require("../../drawer"));
var _input = _interopRequireDefault(require("../../input"));
var _radio = _interopRequireDefault(require("../../radio"));
var _space = _interopRequireDefault(require("../../space"));
var _tag = _interopRequireDefault(require("../../tag"));
var _iconFont = _interopRequireDefault(require("../../icon-font"));
var _virtualList = _interopRequireDefault(require("../../virtual-list"));
var _utils = require("../utils");
var _SelectFilter = _interopRequireDefault(require("../components/SelectFilter"));
var _valueDrawer = _interopRequireDefault(require("./valueDrawer"));
// import CustomModal from '../components/modal'

// 选中的筛选项
const ListItemChecked = ({
  instance,
  item: itemProps
}) => {
  const {
    state,
    dispatch,
    dataSource,
    locale
  } = instance;
  const {
    complexDrawer
  } = state;
  const {
    field,
    value: valueObj = {}
  } = itemProps;

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

  // 选中值的处理
  const resetValue = (0, _react.useMemo)(() => valueObj.value, [valueObj.value]);

  // 选中的数据
  const checkedValues = (0, _react.useMemo)(() => {
    const checkedValue = valueObj.value;
    if (Array.isArray(checkedValue)) {
      if (['date'].includes(getItem.type)) {
        return [{
          value: resetValue,
          label: `${resetValue[0]} ~ ${resetValue[1]}`
        }];
      }
      if (getItem.type === 'nested') {
        return checkedValue;
      }
      if (getItem.type === 'cascader') {
        return (0, _utils.getFlatItem)(getItem, checkedValue, 'parent');
      }
      return getItem.data?.filter(v => checkedValue.includes(v.value));
    }
    if (['input', 'date'].includes(getItem.type)) {
      return resetValue ? [{
        value: resetValue,
        label: resetValue
      }] : [];
    }
    const filterValue = getItem.data.find(v => v.value === checkedValue);
    return filterValue ? [filterValue] : [];
  }, [getItem, valueObj.value]);

  // 编辑
  const handleEdit = () => {
    dispatch({
      type: 'changeValueDrawer',
      valueDrawer: {
        visible: true,
        data: {
          ...getItem,
          ...valueObj
        }
      }
    });
  };

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

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

  // Tags显示
  const tagElem = () => {
    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_tag.default, {
      className: "add_tags"
    }, /*#__PURE__*/_react.default.createElement(_iconFont.default, {
      type: "lmweb-plus"
    }), " ", locale.drawerItemAdd), checkedValues?.map(v => /*#__PURE__*/_react.default.createElement(_tag.default, {
      key: v.value,
      closable: true,
      onClose: () => onTagClose(v.value)
    }, v.label)));
  };

  // 模式
  const modeLabel = (0, _react.useMemo)(() => valueObj.mode === 'and' ? locale.and : locale.or, [valueObj.mode]);
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
    className: "item_box",
    onClick: handleEdit
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "item_header"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "item_header_title"
  }, `${getItem.title}（${modeLabel}）`), /*#__PURE__*/_react.default.createElement(_iconFont.default, {
    type: "lmweb-close1",
    onClick: handleDelete,
    className: "item_header_icon"
  })), /*#__PURE__*/_react.default.createElement("div", {
    className: "item_tags"
  }, tagElem())));
};

// 新增筛选项按钮
const DropdownBtn = ({
  instance
}) => {
  const {
    dispatch,
    dataSource,
    locale
  } = instance;
  const [visible, setVisible] = (0, _react.useState)(false);
  const selectInstance = {
    filterValue: '',
    setFilterValue: (_, valObj) => {
      setVisible(false);
      dispatch({
        type: 'changeValueDrawer',
        valueDrawer: {
          visible: true,
          type: 'custom',
          data: {
            ...valObj,
            value: []
          }
        }
      });
    }
  };
  const itemProps = {
    data: dataSource,
    fieldNames: {
      label: 'title',
      value: 'field'
    }
  };
  return /*#__PURE__*/_react.default.createElement(_dropdown.default, {
    trigger: ['click'],
    placement: "bottomLeft",
    visible: visible,
    onVisibleChange: v => setVisible(v),
    overlay: /*#__PURE__*/_react.default.createElement(_SelectFilter.default, {
      instance: selectInstance,
      item: itemProps
    }),
    overlayClassName: "filter_dropdown_container_btn"
  }, /*#__PURE__*/_react.default.createElement(_button.default, {
    block: true,
    type: "dashed",
    icon: /*#__PURE__*/_react.default.createElement(_iconFont.default, {
      type: "lmweb-plus"
    }),
    size: "middle"
  }, locale.customDrawerDropdownButton));
};
const Index = ({
  instance
}) => {
  const {
    state,
    dispatch,
    locale
  } = instance;
  const {
    customDrawer
  } = state;
  const [form] = _form.default.useForm();

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

  // 关闭抽屉
  const onClose = () => {
    dispatch({
      type: 'changeCustomDrawer',
      customDrawer: {
        ...customDrawer,
        visible: false
      }
    });
  };

  // 保存数据
  const onSave = async () => {
    try {
      const val = await form.validateFields();
      const nValue = {
        ...customDrawer,
        ...val
      };
      if (!nValue.value) {
        Object.assign(nValue, {
          value: `diy${Date.now()}`
        });
      }
      dispatch({
        type: 'changeSaveModal',
        saveModal: {
          visible: true,
          data: nValue
        }
      });
    } catch (error) {
      console.log('error:', error);
    }
  };

  // 弹窗配置项
  const config = {
    title: customDrawer.type === 'edit' ? `${locale.customDrawerEdit}${customDrawer.label}` : locale.customDrawerTitle,
    visible: customDrawer.visible,
    onClose,
    width: 440,
    placement: 'right',
    destroyOnClose: true,
    className: 'lm_filter_drawer',
    extra: /*#__PURE__*/_react.default.createElement(_space.default, null, /*#__PURE__*/_react.default.createElement(_button.default, {
      onClick: onClose,
      size: "small"
    }, locale.customDrawerCancel), /*#__PURE__*/_react.default.createElement(_button.default, {
      type: "primary",
      onClick: onSave,
      size: "small"
    }, locale.customDrawerOk))
  };
  (0, _react.useEffect)(() => {
    if (customDrawer.visible) {
      form.resetFields();
    }
  }, [customDrawer.visible, form]);
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_drawer.default, config, /*#__PURE__*/_react.default.createElement("div", {
    className: "custom_filter_body"
  }, /*#__PURE__*/_react.default.createElement(_form.default, {
    form: form,
    initialValues: {
      label: customDrawer.label,
      default: !!customDrawer.default
    },
    layout: "vertical"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "filter_drawer_group"
  }, /*#__PURE__*/_react.default.createElement(_form.default.Item, {
    name: "label",
    label: locale.customDrawerInputLabel,
    rules: [{
      required: true,
      message: locale.customDrawerInputMessage
    }]
  }, /*#__PURE__*/_react.default.createElement(_input.default, {
    placeholder: locale.placeholder,
    size: "middle"
  }))), /*#__PURE__*/_react.default.createElement("div", {
    className: "filter_drawer_group"
  }, /*#__PURE__*/_react.default.createElement(_form.default.Item, {
    name: "default",
    label: locale.customDrawerDefault
  }, /*#__PURE__*/_react.default.createElement(_radio.default.Group, {
    size: "small"
  }, /*#__PURE__*/_react.default.createElement(_radio.default, {
    value: true
  }, locale.customDrawerDefaultRadioYes), /*#__PURE__*/_react.default.createElement(_radio.default, {
    value: false
  }, locale.customDrawerDefaultRadioNo))))), /*#__PURE__*/_react.default.createElement("div", {
    className: "filter_drawer_group"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "filter_drawer_group_add"
  }, /*#__PURE__*/_react.default.createElement(DropdownBtn, {
    instance: instance
  })), /*#__PURE__*/_react.default.createElement(_virtualList.default, {
    options: filterItemData,
    className: "filter_drawer_group_list"
  }, ({
    item,
    ...resetProps
  }) => {
    return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, resetProps, {
      className: "filter_drawer_group_item"
    }), /*#__PURE__*/_react.default.createElement(ListItemChecked, {
      instance: instance,
      item: item
    }));
  }))), /*#__PURE__*/_react.default.createElement(_valueDrawer.default, {
    instance: instance
  })));
};
var _default = Index;
exports.default = _default;