linkmore-design/lib/lm-filter/customFilter/index.js

🌈 🚀lm组件库。🚀

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _dropdown = _interopRequireDefault(require("../../dropdown"));
var _iconFont = _interopRequireDefault(require("../../icon-font"));
var _CustomSelectFilter = _interopRequireDefault(require("../components/CustomSelectFilter"));
var _drawer = _interopRequireDefault(require("./drawer"));
var _saveModal = _interopRequireDefault(require("./saveModal"));
const CustomDiy = ({
  instance
}) => {
  const {
    state,
    dispatch,
    size,
    customOptions,
    setCustomFilter,
    locale
  } = instance;
  const {
    customFilter
  } = state;
  const [visible, setVisible] = (0, _react.useState)(false);

  // 下拉数据
  const filterOptions = customOptions || [{
    label: locale.unlimited,
    value: '',
    default: true
  }];

  // 默认展示
  const defaultValue = (0, _react.useMemo)(() => {
    return filterOptions.find(v => v.value === customFilter?.value) || {};
  }, [filterOptions, customFilter]);
  const selectInstance = {
    locale,
    filterValue: defaultValue.value,
    filters: filterOptions,
    onEdit: valObj => {
      dispatch({
        type: 'changeCustomDrawer',
        customDrawer: {
          ...valObj,
          visible: true,
          type: 'edit'
        }
      });
      setVisible(false);
    },
    onAdd: () => {
      dispatch({
        type: 'changeCustomDrawer',
        customDrawer: {
          visible: true,
          type: 'add',
          data: {}
        }
      });
      setVisible(false);
    },
    setFilterValue: val => {
      setCustomFilter?.(val);
      setVisible(false);
    },
    visible,
    setVisible
  };
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_dropdown.default, {
    trigger: ['click'],
    visible: visible,
    placement: "bottomLeft",
    overlay: /*#__PURE__*/_react.default.createElement(_CustomSelectFilter.default, {
      instance: selectInstance
    }),
    overlayClassName: "filter_dropdown_container_custom",
    onVisibleChange: v => setVisible(v),
    destroyPopupOnHide: true
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames.default)('lm_filter_custom_select', {
      expand: visible,
      small: size === 'small'
    })
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "lm_filter_custom_select_label"
  }, /*#__PURE__*/_react.default.createElement("span", {
    className: (0, _classnames.default)({
      placeholder: !defaultValue.value
    })
  }, defaultValue.label)), /*#__PURE__*/_react.default.createElement("div", {
    className: "lm_filter_custom_select_icon addon_after"
  }, /*#__PURE__*/_react.default.createElement(_iconFont.default, {
    type: "icon-a-jiantoua2xialaxia"
  })))), /*#__PURE__*/_react.default.createElement(_drawer.default, {
    instance: instance
  }), /*#__PURE__*/_react.default.createElement(_saveModal.default, {
    instance: instance
  }));
};
const LmFilterCustom = ({
  instance
}) => {
  const {
    customRender,
    enableCustom
  } = instance;
  if (!customRender && !enableCustom) return null;
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "lm_filter_custom"
  }, enableCustom && /*#__PURE__*/_react.default.createElement(CustomDiy, {
    instance: instance
  }), customRender?.({
    instance
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: "lm_filter_custom_line"
  }));
};
var _default = LmFilterCustom;
exports.default = _default;