choerodon-ui/pro/lib/table/query-bar/ColumnFilter.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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));

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 _tslib = require("tslib");

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

var _mobx = require("mobx");

var _mobxReact = require("mobx-react");

var _index = _interopRequireWildcard(require("../../../../lib/rc-components/menu/index"));

var _Button = _interopRequireDefault(require("../../button/Button"));

var _Dropdown = _interopRequireDefault(require("../../dropdown/Dropdown"));

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

var _enum2 = require("../../button/enum");

var _TableContext = _interopRequireDefault(require("../TableContext"));

var _utils = require("../utils");

var _enum3 = require("../../dropdown/enum");

var _EventManager = require("../../_util/EventManager");

var _autobind = _interopRequireDefault(require("../../_util/autobind"));

function handleMenuClick(_ref) {
  var domEvent = _ref.domEvent;
  domEvent.preventDefault();
}

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

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

  function ColumnFilter(props, context) {
    var _this;

    (0, _classCallCheck2["default"])(this, ColumnFilter);
    _this = _super.call(this, props, context);

    _this.setDropDownHidden(true);

    return _this;
  }

  (0, _createClass2["default"])(ColumnFilter, [{
    key: "saveMenu",
    value: function saveMenu(node) {
      this.menu = node;
    }
  }, {
    key: "handleHiddenChange",
    value: function handleHiddenChange(hidden) {
      this.setDropDownHidden(hidden);
    }
  }, {
    key: "handleKeyDown",
    value: function handleKeyDown(e) {
      if (this.menu && this.menu.onKeyDown(e)) {
        (0, _EventManager.stopEvent)(e);
      }
    }
  }, {
    key: "setDropDownHidden",
    value: function setDropDownHidden(hidden) {
      this.hidden = hidden;
    }
  }, {
    key: "getPrefixCls",
    value: function getPrefixCls() {
      var prefixCls = this.props.prefixCls;
      return "".concat(prefixCls, "-columns-chooser");
    }
  }, {
    key: "render",
    value: function render() {
      var prefixCls = this.getPrefixCls();
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: prefixCls,
        onFocus: _EventManager.stopPropagation,
        onMouseDown: _EventManager.stopPropagation,
        tabIndex: -1
      }, /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
        placement: _enum3.Placements.bottomRight,
        overlay: this.getMenu,
        hidden: this.hidden,
        onHiddenChange: this.handleHiddenChange
      }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
        funcType: _enum2.FuncType.flat,
        icon: "view_column",
        size: _enum.Size.small,
        onKeyDown: this.handleKeyDown
      })));
    }
  }, {
    key: "handleMenuSelect",
    value: function handleMenuSelect(_ref2) {
      var value = _ref2.item.props.value;
      value.hidden = false;
    }
  }, {
    key: "handleMenuUnSelect",
    value: function handleMenuUnSelect(_ref3) {
      var value = _ref3.item.props.value;
      value.hidden = true;
    }
  }, {
    key: "getMenu",
    value: function getMenu() {
      var prefixCls = this.props.prefixCls;
      var selfPrefixCls = this.getPrefixCls();
      var _this$context = this.context,
          tableStore = _this$context.tableStore,
          dataSet = _this$context.dataSet,
          aggregation = _this$context.aggregation;
      var allLeafs = tableStore.columnGroups.allLeafs;
      var selectedKeys = [];
      var columns = [];
      allLeafs.forEach(function (_ref4) {
        var column = _ref4.column,
            key = _ref4.key,
            headerGroup = _ref4.headerGroup;

        if (column.hideable) {
          var header = (0, _utils.getHeader)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, column), {}, {
            dataSet: dataSet,
            aggregation: aggregation,
            group: headerGroup
          }));

          if (header) {
            if (!column.hidden) {
              selectedKeys.push(key);
            }

            columns.push([column, header, key]);
          }
        }
      });
      return /*#__PURE__*/_react["default"].createElement(_index["default"], {
        ref: this.saveMenu,
        multiple: true,
        defaultActiveFirst: true,
        prefixCls: "".concat(prefixCls, "-dropdown-menu"),
        className: "".concat(selfPrefixCls, "-dropdown-menu"),
        selectedKeys: selectedKeys,
        onSelect: this.handleMenuSelect,
        onDeselect: this.handleMenuUnSelect,
        onClick: handleMenuClick
      }, this.getOptions(columns));
    }
  }, {
    key: "getOptions",
    value: function getOptions(columns) {
      return columns.map(function (_ref5) {
        var _ref6 = (0, _slicedToArray2["default"])(_ref5, 3),
            column = _ref6[0],
            header = _ref6[1],
            key = _ref6[2];

        return /*#__PURE__*/_react["default"].createElement(_index.Item, {
          key: key,
          value: column
        }, /*#__PURE__*/_react["default"].createElement("span", null, header));
      });
    }
  }], [{
    key: "contextType",
    get: function get() {
      return _TableContext["default"];
    }
  }]);
  return ColumnFilter;
}(_react.Component);

ColumnFilter.displayName = 'ColumnFilter';
(0, _tslib.__decorate)([_mobx.observable], ColumnFilter.prototype, "hidden", void 0);
(0, _tslib.__decorate)([_autobind["default"]], ColumnFilter.prototype, "saveMenu", null);
(0, _tslib.__decorate)([_autobind["default"]], ColumnFilter.prototype, "handleHiddenChange", null);
(0, _tslib.__decorate)([_autobind["default"]], ColumnFilter.prototype, "handleKeyDown", null);
(0, _tslib.__decorate)([_mobx.action], ColumnFilter.prototype, "setDropDownHidden", null);
(0, _tslib.__decorate)([_mobx.action], ColumnFilter.prototype, "handleMenuSelect", null);
(0, _tslib.__decorate)([_mobx.action], ColumnFilter.prototype, "handleMenuUnSelect", null);
(0, _tslib.__decorate)([_autobind["default"]], ColumnFilter.prototype, "getMenu", null);
ColumnFilter = (0, _tslib.__decorate)([_mobxReact.observer], ColumnFilter);
var _default = ColumnFilter;
exports["default"] = _default;
//# sourceMappingURL=ColumnFilter.js.map