choerodon-ui/es/table/ColumnFilter.js

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

import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
import React, { Component } from 'react';
import Button from '../button/Button';
import SelectTrigger from '../rc-components/select/SelectTrigger';
import { Item as MenuItem } from '../rc-components/menu';
import { UNSELECTABLE_ATTRIBUTE, UNSELECTABLE_STYLE } from '../rc-components/select/util';
import { getColumnKey } from './util';
import { Size } from '../_util/enum';
import ConfigContext from '../config-provider/ConfigContext';

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

  var _super = _createSuper(ColumnFilter);

  function ColumnFilter() {
    var _this;

    _classCallCheck(this, ColumnFilter);

    _this = _super.apply(this, arguments);
    _this.state = {
      open: false
    };

    _this.onMenuSelect = function (item) {
      item.item.props.value.hidden = false;

      _this.fireChange(item);
    };

    _this.onMenuDeselect = function (item) {
      item.item.props.value.hidden = true;

      _this.fireChange(item);
    };

    _this.onDropdownVisibleChange = function (open) {
      var _assertThisInitialize = _assertThisInitialized(_this),
          state = _assertThisInitialize.state;

      if (state.open !== open) {
        _this.setState({
          open: open
        });
      }
    };

    return _this;
  }

  _createClass(ColumnFilter, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
          prefixCls = _this$props.prefixCls,
          getPopupContainer = _this$props.getPopupContainer;
      var open = this.state.open;
      var getPrefixCls = this.context.getPrefixCls;
      return /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefixCls, "-columns-chooser")
      }, /*#__PURE__*/React.createElement(SelectTrigger, {
        prefixCls: getPrefixCls('select'),
        showAction: ['click'],
        options: this.getOptions(),
        value: this.getVisibleColumns(),
        getPopupContainer: getPopupContainer,
        multiple: true,
        onDropdownVisibleChange: this.onDropdownVisibleChange,
        onMenuSelect: this.onMenuSelect,
        onMenuDeselect: this.onMenuDeselect,
        visible: open,
        popupPlacement: "bottomRight",
        dropdownMatchSelectWidth: false,
        dropdownStyle: {
          minWidth: 187
        }
      }, /*#__PURE__*/React.createElement(Button, {
        shape: "circle",
        icon: "view_column",
        size: Size.small
      })));
    }
  }, {
    key: "fireChange",
    value: function fireChange(item) {
      var onColumnFilterChange = this.props.onColumnFilterChange;

      if (onColumnFilterChange) {
        onColumnFilterChange(item);
      }
    }
  }, {
    key: "getOptions",
    value: function getOptions() {
      var columns = this.props.columns;
      var options = [];
      (columns || []).forEach(function (column, i) {
        var title = column.title,
            notDisplay = column.notDisplay,
            disableClick = column.disableClick;

        if (title && !notDisplay) {
          options.push( /*#__PURE__*/React.createElement(MenuItem, {
            disabled: disableClick,
            style: UNSELECTABLE_STYLE,
            attribute: UNSELECTABLE_ATTRIBUTE,
            value: column,
            key: getColumnKey(column, i)
          }, title));
        }
      });
      return options;
    }
  }, {
    key: "getVisibleColumns",
    value: function getVisibleColumns() {
      var columns = this.props.columns;
      return (columns || []).filter(function (column) {
        return !column.hidden;
      });
    }
  }], [{
    key: "contextType",
    get: function get() {
      return ConfigContext;
    }
  }]);

  return ColumnFilter;
}(Component);

export { ColumnFilter as default };
ColumnFilter.displayName = 'ColumnFilter';
//# sourceMappingURL=ColumnFilter.js.map