choerodon-ui/pro/es/performance-table/tool-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 Icon from '../../../../es/icon';
import Menu, { Item } from '../../../../es/rc-components/menu/index';
import { Action } from '../../../../es/trigger/enum';
import Dropdown from '../../dropdown/Dropdown';
import TableContext from '../TableContext';
import { Placements } from '../../dropdown/enum';
import Column from '../Column';
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: "render",
    value: function render() {
      var prefixCls = this.props.prefixCls;
      return /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefixCls, "-columns-chooser"),
        onFocus: stopPropagation,
        onMouseDown: stopPropagation,
        tabIndex: -1
      }, /*#__PURE__*/React.createElement(Dropdown, {
        trigger: [Action.click],
        placement: Placements.bottomRight,
        overlay: this.getMenu,
        hidden: this.hidden,
        onHiddenChange: this.handleHiddenChange
      }, /*#__PURE__*/React.createElement(Icon, {
        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 = _objectSpread(_objectSpread({}, Column.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.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.createElement(Menu, {
        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 = _slicedToArray(_ref4, 3),
            column = _ref5[0],
            header = _ref5[1],
            key = _ref5[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([autobind, action], ColumnFilter.prototype, "handleMenuSelect", null);

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

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

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