choerodon-ui/lib/table/ColumnFilterMenu.js

An enterprise-class UI design language and React-based implementation

"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 _toArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toArray"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));

var _react = _interopRequireWildcard(require("react"));

var _enum = require("../_util/enum");

var _menu = _interopRequireDefault(require("../menu"));

var _dropdown = _interopRequireDefault(require("../dropdown"));

var _icon = _interopRequireDefault(require("../icon"));

var _button = _interopRequireDefault(require("../button"));

var _message = _interopRequireDefault(require("../message"));

var _FilterDropdownMenuWrapper = _interopRequireDefault(require("./FilterDropdownMenuWrapper"));

var _ColumnFilterMenuItem = _interopRequireDefault(require("./ColumnFilterMenuItem"));

var _util = require("./util");

function getParentNode(triggerNode) {
  return triggerNode.parentNode;
}

var ColumnFilterMenu = /*#__PURE__*/function (_Component) {
  (0, _inherits2["default"])(ColumnFilterMenu, _Component);

  var _super = (0, _createSuper2["default"])(ColumnFilterMenu);

  function ColumnFilterMenu(props) {
    var _this;

    (0, _classCallCheck2["default"])(this, ColumnFilterMenu);
    _this = _super.call(this, props);
    _this.items = {}; // 存储编辑的 column 的组件的 ref

    _this.handleEditChange = function (editing) {
      var prevCustomColumns = _this.state.prevCustomColumns;

      _this.setState({
        editing: editing,
        customColumns: prevCustomColumns
      });
    }; // 渲染标题旁边的 icon


    _this.renderFilterIcon = function () {
      var locale = _this.props.locale;
      return /*#__PURE__*/_react["default"].createElement(_icon["default"], {
        title: locale.filterTitle,
        className: "custom-bars",
        type: "format_list_bulleted"
      });
    }; // 确认按钮点击


    _this.handleConfirmBtnClick = function () {
      var _this$props = _this.props,
          _this$props$columns = _this$props.columns,
          columns = _this$props$columns === void 0 ? [] : _this$props$columns,
          confirmFilter = _this$props.confirmFilter,
          store = _this$props.store;
      var customColumnsGetPromise = [];
      columns.map(function (column, index) {
        return (0, _util.getColumnKey)(column, index);
      }).forEach(function (key) {
        var columnFilterMenuItem = _this.items[key];

        if (columnFilterMenuItem) {
          customColumnsGetPromise.push(columnFilterMenuItem.getValidateCustomColumn());
        }
      });
      Promise.all(customColumnsGetPromise).then(function (_ref) {
        var _ref2 = (0, _toArray2["default"])(_ref),
            customColumns = _ref2.slice(0);

        _this.setState({
          customColumns: customColumns,
          editing: false
        });

        store.setState({
          customColumns: customColumns
        });
        confirmFilter(customColumns);
      }, function (err) {
        _message["default"].error(err && err.message);
      });
    }; // 获取编辑组件的 ref


    _this.handleItemRef = function (key, element) {
      _this.items[key] = element;
    };

    _this.state = {
      editing: false,
      customColumns: props.customColumns || [],
      prevCustomColumns: props.customColumns || []
    };
    return _this;
  }

  (0, _createClass2["default"])(ColumnFilterMenu, [{
    key: "render",
    value: function render() {
      var _this$props2 = this.props,
          locale = _this$props2.locale,
          prefixCls = _this$props2.prefixCls,
          dropdownProps = _this$props2.dropdownProps,
          getPopupContainer = _this$props2.getPopupContainer;
      var dropdownPrefixCls = dropdownProps.prefixCls;
      var editing = this.state.editing;
      var editTitle = this.renderEditTitle();
      var editContent = this.renderEditContent(); // this.renderMenus(columns)

      var menus = /*#__PURE__*/_react["default"].createElement(_FilterDropdownMenuWrapper["default"], {
        className: "".concat(prefixCls, "-dropdown custom-column-dropdown")
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(dropdownPrefixCls, "-menu-item")
      }, editTitle), /*#__PURE__*/_react["default"].createElement(_menu["default"], {
        multiple: true,
        prefixCls: "".concat(dropdownPrefixCls, "-menu"),
        getPopupContainer: getParentNode
      }, editContent), /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefixCls, "-dropdown-btns")
      }, /*#__PURE__*/_react["default"].createElement(_button["default"], {
        size: _enum.Size.small,
        className: "".concat(prefixCls, "-dropdown-link confirm"),
        onClick: this.handleConfirmBtnClick
      }, locale.filterConfirm)));

      return /*#__PURE__*/_react["default"].createElement(_dropdown["default"], (0, _extends2["default"])({}, dropdownProps, {
        trigger: ['click'],
        overlay: menus,
        visible: editing,
        onVisibleChange: this.handleEditChange,
        getPopupContainer: getPopupContainer,
        forceRender: true
      }), this.renderFilterIcon());
    }
  }, {
    key: "renderEditItem",
    value: function renderEditItem(column, index) {
      var _this2 = this;

      var _this$props3 = this.props,
          checkboxPrefixCls = _this$props3.checkboxPrefixCls,
          inputNumberProps = _this$props3.inputNumberProps;
      var customColumns = this.state.customColumns;
      var key = (0, _util.getColumnKey)(column);
      var customColumn = customColumns.find(function (fCustomColumn) {
        return fCustomColumn.fieldKey === key;
      });
      return /*#__PURE__*/_react["default"].createElement(_menu["default"].Item, {
        key: key
      }, /*#__PURE__*/_react["default"].createElement(_ColumnFilterMenuItem["default"], {
        inputNumberProps: inputNumberProps,
        checkboxPrefixCls: checkboxPrefixCls,
        customColumn: customColumn,
        column: column,
        index: index,
        ref: function ref(item) {
          return _this2.handleItemRef(key, item);
        }
      }));
    } // 渲染编辑的标题

  }, {
    key: "renderEditTitle",
    value: function renderEditTitle() {
      var filterBarLocale = this.props.filterBarLocale;

      var _ref3 = filterBarLocale || {},
          display = _ref3.display,
          field = _ref3.field,
          fixedLeft = _ref3.fixedLeft,
          orderSeq = _ref3.orderSeq;

      return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
        className: "dropdown-menu-text"
      }, display), /*#__PURE__*/_react["default"].createElement("div", {
        className: "dropdown-menu-text"
      }, field), /*#__PURE__*/_react["default"].createElement("div", {
        className: "dropdown-menu-text"
      }, fixedLeft), /*#__PURE__*/_react["default"].createElement("div", {
        className: "dropdown-menu-text"
      }, orderSeq));
    } // 渲染编辑区域内容

  }, {
    key: "renderEditContent",
    value: function renderEditContent() {
      var _this3 = this;

      var _this$props$columns2 = this.props.columns,
          columns = _this$props$columns2 === void 0 ? [] : _this$props$columns2;
      return columns.map(function (column, index) {
        return _this3.renderEditItem(column, index);
      });
    }
  }], [{
    key: "getDerivedStateFromProps",
    value: function getDerivedStateFromProps(nextProps, prevState) {
      var customColumns = nextProps.customColumns;
      var prevCustomColumns = prevState.prevCustomColumns;

      if (customColumns && customColumns !== prevCustomColumns) {
        return {
          customColumns: customColumns,
          prevCustomColumns: customColumns
        };
      }

      return null;
    }
  }]);
  return ColumnFilterMenu;
}(_react.Component);

exports["default"] = ColumnFilterMenu;
//# sourceMappingURL=ColumnFilterMenu.js.map