choerodon-ui/pro/lib/performance-table/tool-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 _icon = _interopRequireDefault(require("../../../../lib/icon"));

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

var _enum = require("../../../../lib/trigger/enum");

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

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

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

var _Column = _interopRequireDefault(require("../Column"));

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: "render",
    value: function render() {
      var prefixCls = this.props.prefixCls;
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefixCls, "-columns-chooser"),
        onFocus: _EventManager.stopPropagation,
        onMouseDown: _EventManager.stopPropagation,
        tabIndex: -1
      }, /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
        trigger: [_enum.Action.click],
        placement: _enum2.Placements.bottomRight,
        overlay: this.getMenu,
        hidden: this.hidden,
        onHiddenChange: this.handleHiddenChange
      }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
        type: "view_column",
        onClick: this.handleKeyDown,
        style: {
          cursor: 'pointer'
        }
      })));
    }
  }, {
    key: "handleMenuSelect",
    value: function handleMenuSelect(_ref2) {
      var value = _ref2.item.props.value;
      var node = this.context.tableStore.node;
      value.hidden = false;
      node._cacheCells = null;
      node.forceUpdate();
    }
  }, {
    key: "handleMenuUnSelect",
    value: function handleMenuUnSelect(_ref3) {
      var value = _ref3.item.props.value;
      var node = this.context.tableStore.node;
      value.hidden = true;
      node._cacheCells = null;
      node.forceUpdate();
    }
  }, {
    key: "getMenu",
    value: function getMenu() {
      var _this$context$tableSt = this.context.tableStore,
          proPrefixCls = _this$context$tableSt.proPrefixCls,
          originalChildren = _this$context$tableSt.originalChildren,
          originalColumns = _this$context$tableSt.originalColumns;
      var selfPrefixCls = "".concat(proPrefixCls, "-columns-chooser");
      var selectedKeys = [];
      var menuColumns = [];

      if (originalColumns && originalColumns.length) {
        originalColumns.forEach(function (column) {
          var newColumn = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, _Column["default"].defaultProps), column);
          var hideable = newColumn.hideable,
              hidden = newColumn.hidden,
              title = newColumn.title,
              dataIndex = newColumn.dataIndex,
              key = newColumn.key;

          if (hideable && title) {
            var keys = key || dataIndex;

            if (!hidden) {
              selectedKeys.push(keys);
            }

            var header = typeof title === 'function' ? title() : title;
            menuColumns.push([column, header, keys]);
          }
        });
      } else if (originalChildren && originalChildren.length) {
        // todo children hidden
        originalChildren.forEach(function (column) {
          if ( /*#__PURE__*/_react["default"].isValidElement(column)) {
            var columnChildren = column.props.children;
            var _column$props = column.props,
                hideable = _column$props.hideable,
                hidden = _column$props.hidden;

            if (hideable && columnChildren[0]) {
              var key = columnChildren[1].props.dataKey;

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

              menuColumns.push([column.props, columnChildren[0].props.children, key]);
            }
          }
        });
      }

      return /*#__PURE__*/_react["default"].createElement(_index["default"], {
        ref: this.saveMenu,
        multiple: true,
        defaultActiveFirst: true,
        prefixCls: "".concat(proPrefixCls, "-dropdown-menu"),
        className: "".concat(selfPrefixCls, "-dropdown-menu"),
        selectedKeys: selectedKeys,
        onSelect: this.handleMenuSelect,
        onDeselect: this.handleMenuUnSelect,
        onClick: handleMenuClick
      }, this.getOptions(menuColumns));
    }
  }, {
    key: "getOptions",
    value: function getOptions(columns) {
      return columns.map(function (_ref4) {
        var _ref5 = (0, _slicedToArray2["default"])(_ref4, 3),
            column = _ref5[0],
            header = _ref5[1],
            key = _ref5[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)([_autobind["default"], _mobx.action], ColumnFilter.prototype, "handleMenuSelect", null);
(0, _tslib.__decorate)([_autobind["default"], _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