choerodon-ui/pro/es/table/query-bar/ColumnFilter.js

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

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
import { __decorate } from "tslib";
import React, { Component } from 'react';
import { action, observable } from 'mobx';
import { observer } from 'mobx-react';
import Menu, { Item } from '../../../../es/rc-components/menu/index';
import Button from '../../button/Button';
import Dropdown from '../../dropdown/Dropdown';
import { Size } from '../../core/enum';
import { FuncType } from '../../button/enum';
import TableContext from '../TableContext';
import { getHeader } from '../utils';
import { Placements } from '../../dropdown/enum';
import { stopEvent, stopPropagation } from '../../_util/EventManager';
import autobind from '../../_util/autobind';

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

var ColumnFilter = /*#__PURE__*/function (_Component) {
  _inherits(ColumnFilter, _Component);

  var _super = _createSuper(ColumnFilter);

  function ColumnFilter(props, context) {
    var _this;

    _classCallCheck(this, ColumnFilter);

    _this = _super.call(this, props, context);

    _this.setDropDownHidden(true);

    return _this;
  }

  _createClass(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)) {
        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.createElement("div", {
        className: prefixCls,
        onFocus: stopPropagation,
        onMouseDown: stopPropagation,
        tabIndex: -1
      }, /*#__PURE__*/React.createElement(Dropdown, {
        placement: Placements.bottomRight,
        overlay: this.getMenu,
        hidden: this.hidden,
        onHiddenChange: this.handleHiddenChange
      }, /*#__PURE__*/React.createElement(Button, {
        funcType: FuncType.flat,
        icon: "view_column",
        size: 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,
            headerGroups = _ref4.headerGroups;

        if (column.hideable) {
          var header = getHeader(_objectSpread(_objectSpread({}, column), {}, {
            dataSet: dataSet,
            aggregation: aggregation,
            group: headerGroup,
            groups: headerGroups
          }));

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

            columns.push([column, header, key]);
          }
        }
      });
      return /*#__PURE__*/React.createElement(Menu, {
        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 = _slicedToArray(_ref5, 3),
            column = _ref6[0],
            header = _ref6[1],
            key = _ref6[2];

        return /*#__PURE__*/React.createElement(Item, {
          key: key,
          value: column
        }, /*#__PURE__*/React.createElement("span", null, header));
      });
    }
  }], [{
    key: "contextType",
    get: function get() {
      return TableContext;
    }
  }]);

  return ColumnFilter;
}(Component);

ColumnFilter.displayName = 'ColumnFilter';

__decorate([observable], ColumnFilter.prototype, "hidden", void 0);

__decorate([autobind], ColumnFilter.prototype, "saveMenu", null);

__decorate([autobind], ColumnFilter.prototype, "handleHiddenChange", null);

__decorate([autobind], ColumnFilter.prototype, "handleKeyDown", null);

__decorate([action], ColumnFilter.prototype, "setDropDownHidden", null);

__decorate([action], ColumnFilter.prototype, "handleMenuSelect", null);

__decorate([action], ColumnFilter.prototype, "handleMenuUnSelect", null);

__decorate([autobind], ColumnFilter.prototype, "getMenu", null);

ColumnFilter = __decorate([observer], ColumnFilter);
export default ColumnFilter;
//# sourceMappingURL=ColumnFilter.js.map