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

🌈 🚀lm组件库。🚀

import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useState, useMemo } from 'react';
import cn from 'classnames';
import Dropdown from "../../dropdown";
import IconFont from "../../icon-font";
import CustomSelect from "../components/CustomSelectFilter";
import CostomFilterDrawer from "./drawer";
import SaveModal from "./saveModal";
var CustomDiy = function CustomDiy(_ref) {
  var instance = _ref.instance;
  var state = instance.state,
    dispatch = instance.dispatch,
    size = instance.size,
    customOptions = instance.customOptions,
    setCustomFilter = instance.setCustomFilter,
    locale = instance.locale;
  var customFilter = state.customFilter;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    visible = _useState2[0],
    setVisible = _useState2[1];

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

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