choerodon-ui/es/table/ColumnFilterMenu.js

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

import _extends from "@babel/runtime/helpers/extends";
import _toArray from "@babel/runtime/helpers/toArray";
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 React, { Component } from 'react';
import { Size } from '../_util/enum';
import Menu from '../menu';
import Dropdown from '../dropdown';
import Icon from '../icon';
import Button from '../button';
import message from '../message';
import FilterDropdownMenuWrapper from './FilterDropdownMenuWrapper';
import ColumnFilterMenuItem from './ColumnFilterMenuItem';
import { getColumnKey } from './util';

function getParentNode(triggerNode) {
  return triggerNode.parentNode;
}

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

  var _super = _createSuper(ColumnFilterMenu);

  function ColumnFilterMenu(props) {
    var _this;

    _classCallCheck(this, ColumnFilterMenu);

    _this = _super.call(this, props);
    _this.items = {}; // 存储编辑的 column 的组件的 ref

    _this.handleEditChange = function (editing) {
      var prevCustomColumns = _this.state.prevCustomColumns;

      _this.setState({
        editing: editing,
        customColumns: prevCustomColumns
      });
    }; // 渲染标题旁边的 icon


    _this.renderFilterIcon = function () {
      var locale = _this.props.locale;
      return /*#__PURE__*/React.createElement(Icon, {
        title: locale.filterTitle,
        className: "custom-bars",
        type: "format_list_bulleted"
      });
    }; // 确认按钮点击


    _this.handleConfirmBtnClick = function () {
      var _this$props = _this.props,
          _this$props$columns = _this$props.columns,
          columns = _this$props$columns === void 0 ? [] : _this$props$columns,
          confirmFilter = _this$props.confirmFilter,
          store = _this$props.store;
      var customColumnsGetPromise = [];
      columns.map(function (column, index) {
        return getColumnKey(column, index);
      }).forEach(function (key) {
        var columnFilterMenuItem = _this.items[key];

        if (columnFilterMenuItem) {
          customColumnsGetPromise.push(columnFilterMenuItem.getValidateCustomColumn());
        }
      });
      Promise.all(customColumnsGetPromise).then(function (_ref) {
        var _ref2 = _toArray(_ref),
            customColumns = _ref2.slice(0);

        _this.setState({
          customColumns: customColumns,
          editing: false
        });

        store.setState({
          customColumns: customColumns
        });
        confirmFilter(customColumns);
      }, function (err) {
        message.error(err && err.message);
      });
    }; // 获取编辑组件的 ref


    _this.handleItemRef = function (key, element) {
      _this.items[key] = element;
    };

    _this.state = {
      editing: false,
      customColumns: props.customColumns || [],
      prevCustomColumns: props.customColumns || []
    };
    return _this;
  }

  _createClass(ColumnFilterMenu, [{
    key: "render",
    value: function render() {
      var _this$props2 = this.props,
          locale = _this$props2.locale,
          prefixCls = _this$props2.prefixCls,
          dropdownProps = _this$props2.dropdownProps,
          getPopupContainer = _this$props2.getPopupContainer;
      var dropdownPrefixCls = dropdownProps.prefixCls;
      var editing = this.state.editing;
      var editTitle = this.renderEditTitle();
      var editContent = this.renderEditContent(); // this.renderMenus(columns)

      var menus = /*#__PURE__*/React.createElement(FilterDropdownMenuWrapper, {
        className: "".concat(prefixCls, "-dropdown custom-column-dropdown")
      }, /*#__PURE__*/React.createElement("div", {
        className: "".concat(dropdownPrefixCls, "-menu-item")
      }, editTitle), /*#__PURE__*/React.createElement(Menu, {
        multiple: true,
        prefixCls: "".concat(dropdownPrefixCls, "-menu"),
        getPopupContainer: getParentNode
      }, editContent), /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefixCls, "-dropdown-btns")
      }, /*#__PURE__*/React.createElement(Button, {
        size: Size.small,
        className: "".concat(prefixCls, "-dropdown-link confirm"),
        onClick: this.handleConfirmBtnClick
      }, locale.filterConfirm)));
      return /*#__PURE__*/React.createElement(Dropdown, _extends({}, dropdownProps, {
        trigger: ['click'],
        overlay: menus,
        visible: editing,
        onVisibleChange: this.handleEditChange,
        getPopupContainer: getPopupContainer,
        forceRender: true
      }), this.renderFilterIcon());
    }
  }, {
    key: "renderEditItem",
    value: function renderEditItem(column, index) {
      var _this2 = this;

      var _this$props3 = this.props,
          checkboxPrefixCls = _this$props3.checkboxPrefixCls,
          inputNumberProps = _this$props3.inputNumberProps;
      var customColumns = this.state.customColumns;
      var key = getColumnKey(column);
      var customColumn = customColumns.find(function (fCustomColumn) {
        return fCustomColumn.fieldKey === key;
      });
      return /*#__PURE__*/React.createElement(Menu.Item, {
        key: key
      }, /*#__PURE__*/React.createElement(ColumnFilterMenuItem, {
        inputNumberProps: inputNumberProps,
        checkboxPrefixCls: checkboxPrefixCls,
        customColumn: customColumn,
        column: column,
        index: index,
        ref: function ref(item) {
          return _this2.handleItemRef(key, item);
        }
      }));
    } // 渲染编辑的标题

  }, {
    key: "renderEditTitle",
    value: function renderEditTitle() {
      var filterBarLocale = this.props.filterBarLocale;

      var _ref3 = filterBarLocale || {},
          display = _ref3.display,
          field = _ref3.field,
          fixedLeft = _ref3.fixedLeft,
          orderSeq = _ref3.orderSeq;

      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
        className: "dropdown-menu-text"
      }, display), /*#__PURE__*/React.createElement("div", {
        className: "dropdown-menu-text"
      }, field), /*#__PURE__*/React.createElement("div", {
        className: "dropdown-menu-text"
      }, fixedLeft), /*#__PURE__*/React.createElement("div", {
        className: "dropdown-menu-text"
      }, orderSeq));
    } // 渲染编辑区域内容

  }, {
    key: "renderEditContent",
    value: function renderEditContent() {
      var _this3 = this;

      var _this$props$columns2 = this.props.columns,
          columns = _this$props$columns2 === void 0 ? [] : _this$props$columns2;
      return columns.map(function (column, index) {
        return _this3.renderEditItem(column, index);
      });
    }
  }], [{
    key: "getDerivedStateFromProps",
    value: function getDerivedStateFromProps(nextProps, prevState) {
      var customColumns = nextProps.customColumns;
      var prevCustomColumns = prevState.prevCustomColumns;

      if (customColumns && customColumns !== prevCustomColumns) {
        return {
          customColumns: customColumns,
          prevCustomColumns: customColumns
        };
      }

      return null;
    }
  }]);

  return ColumnFilterMenu;
}(Component);

export { ColumnFilterMenu as default };
//# sourceMappingURL=ColumnFilterMenu.js.map