linkmore-design/lib/lm-filter/complexFilter/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 _tag = _interopRequireDefault(require("../../tag"));
var _button = _interopRequireDefault(require("../../button"));
var _drawer = _interopRequireDefault(require("../../drawer"));
var _input = _interopRequireDefault(require("../../input"));
var _space = _interopRequireDefault(require("../../space"));
var _iconFont = _interopRequireDefault(require("../../icon-font"));
var _virtualList = _interopRequireDefault(require("../../virtual-list"));
var _utils = require("../utils");
var _valueDrawer = _interopRequireDefault(require("./valueDrawer"));
// 选中的筛选项
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 ListGroup = ({
  instance,
  filterItemData
}) => {
  const {
    dispatch,
    dataSource,
    locale
  } = instance;
  const inputRef = (0, _react.useRef)(null);
  const [options, setOptions] = (0, _react.useState)(() => dataSource);

  // 未过滤的筛选项
  const getNotFilters = (0, _react.useCallback)(() => {
    return dataSource?.filter(v => !filterItemData?.some(s => s.field === v.field));
  }, [dataSource, filterItemData]);
  const handleSearch = val => {
    const arr = getNotFilters();
    setOptions(arr.filter(v => v.title?.indexOf(val) > -1));
  };

  // 编辑
  const handleEdit = ({
    field
  }) => {
    // 单项匹配数据, 根据字段名查找
    const getItem = dataSource.find(v => v.field === field);
    // 编辑
    dispatch({
      type: 'changeValueDrawer',
      valueDrawer: {
        visible: true,
        type: 'complex',
        data: {
          ...getItem,
          value: []
        }
      }
    });
  };
  (0, _react.useEffect)(() => {
    const val = inputRef.current?.input?.value || '';
    handleSearch(val);
  }, [filterItemData]);
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
    className: "list_group"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "list_group_title"
  }, locale.complexDrawerSelectQeuryItem), /*#__PURE__*/_react.default.createElement("div", {
    className: "list_group_search"
  }, /*#__PURE__*/_react.default.createElement(_input.default.Search, {
    ref: inputRef,
    allowClear: true,
    placeholder: locale.placeholder,
    onSearch: handleSearch
  })), /*#__PURE__*/_react.default.createElement(_virtualList.default, {
    options: options,
    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("div", {
      className: "item_box",
      onClick: () => handleEdit(item)
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "item_header"
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "item_header_title"
    }, item.title), /*#__PURE__*/_react.default.createElement(_iconFont.default, {
      type: "lmweb-plus",
      className: "item_header_icon icon_plus"
    }))));
  })));
};
const ComplexDrawer = ({
  instance
}) => {
  const {
    state,
    dispatch,
    onQuery,
    locale
  } = instance;
  const {
    complexDrawer
  } = state;
  const isHas = (0, _react.useMemo)(() => (0, _utils.getIsHas)(complexDrawer.data), [complexDrawer.data]);

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

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

  // 弹窗配置项
  const config = {
    title: /*#__PURE__*/_react.default.createElement(Tit, null),
    visible: complexDrawer.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.cancel), /*#__PURE__*/_react.default.createElement(_button.default, {
      type: "primary",
      onClick: onSearch,
      size: "small"
    }, locale.query))
  };
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_drawer.default, config, /*#__PURE__*/_react.default.createElement("div", {
    className: "complex_filter_body"
  }, isHas && /*#__PURE__*/_react.default.createElement("div", {
    className: "checked_group"
  }, /*#__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(ListGroup, {
    instance: instance,
    filterItemData: filterItemData
  })), /*#__PURE__*/_react.default.createElement(_valueDrawer.default, {
    instance: instance
  })));
};
var _default = ComplexDrawer;
exports.default = _default;