choerodon-ui/pro/lib/performance-table/query-bar/TableDynamicFilterBar.js

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

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));

var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));

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 _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _tslib = require("tslib");

var _react = _interopRequireWildcard(require("react"));

var _mobxReact = require("mobx-react");

var _mobx = require("mobx");

var _uniq = _interopRequireDefault(require("lodash/uniq"));

var _pull = _interopRequireDefault(require("lodash/pull"));

var _noop = _interopRequireDefault(require("lodash/noop"));

var _map = _interopRequireDefault(require("lodash/map"));

var _isObject = _interopRequireDefault(require("lodash/isObject"));

var _isEmpty2 = _interopRequireDefault(require("lodash/isEmpty"));

var _isNumber = _interopRequireDefault(require("lodash/isNumber"));

var _isFunction = _interopRequireDefault(require("lodash/isFunction"));

var _isEqual = _interopRequireDefault(require("lodash/isEqual"));

var _isArray = _interopRequireDefault(require("lodash/isArray"));

var _isString = _interopRequireDefault(require("lodash/isString"));

var _omit = _interopRequireDefault(require("lodash/omit"));

var _configure = require("../../../../lib/configure");

var _UnitConvertor = require("../../../../lib/_util/UnitConvertor");

var _icon = _interopRequireDefault(require("../../../../lib/icon"));

var _KeyCode = _interopRequireDefault(require("../../../../lib/_util/KeyCode"));

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

var _enum2 = require("../../data-set/enum");

var _button = _interopRequireDefault(require("../../button"));

var _dropdown = _interopRequireDefault(require("../../dropdown"));

var _textField = _interopRequireDefault(require("../../text-field"));

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

var _localeContext = require("../../locale-context");

var _autobind = _interopRequireDefault(require("../../_util/autobind"));

var _isEmpty3 = _interopRequireDefault(require("../../_util/isEmpty"));

var _FieldList = _interopRequireDefault(require("../../table/query-bar/FieldList"));

var _quickFilter = _interopRequireDefault(require("../../table/query-bar/quick-filter"));

var _ColumnFilter = _interopRequireDefault(require("../tool-bar/ColumnFilter"));

function _createSuper(Derived) {
  function isNativeReflectConstruct() {
    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
    if (Reflect.construct.sham) return false;
    if (typeof Proxy === "function") return true;

    try {
      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
      return true;
    } catch (e) {
      return false;
    }
  }

  return function () {
    var Super = (0, _getPrototypeOf2["default"])(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor;
      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return (0, _possibleConstructorReturn2["default"])(this, result);
  };
}

/**
 * 当前数据是否有值并需要选中
 * @param data
 */
function isSelect(data) {
  if ((0, _isObject["default"])(data[1])) {
    return !(0, _isEmpty2["default"])(data[1]);
  }

  return data[0] !== '__dirty' && !(0, _isEmpty3["default"])(data[1]);
}

function isEqualDynamicProps(originalValue, newValue) {
  if ((0, _isEqual["default"])(newValue, originalValue)) {
    return true;
  }

  if ((0, _isObject["default"])(newValue) && (0, _isObject["default"])(originalValue) && Object.keys(newValue).length) {
    return Object.keys(newValue).every(function (key) {
      var value = newValue[key];
      var oldValue = originalValue[key];

      if (oldValue === value) {
        return true;
      }

      var oEp = (0, _isNumber["default"])(oldValue) ? (0, _isEmpty3["default"])(oldValue) : (0, _isEmpty2["default"])(oldValue);
      var nEp = (0, _isNumber["default"])(value) ? (0, _isEmpty3["default"])(value) : (0, _isEmpty2["default"])(value);

      if (oEp && nEp) {
        return true;
      }

      return (0, _isEqual["default"])(oldValue, value);
    });
  }

  return (0, _isEqual["default"])(newValue, originalValue);
}

function getQueryData(queryDataSet) {
  var _queryDataSet$current;

  var queryData = (0, _omit["default"])(queryDataSet === null || queryDataSet === void 0 ? void 0 : (_queryDataSet$current = queryDataSet.current) === null || _queryDataSet$current === void 0 ? void 0 : _queryDataSet$current.toData(true), ['__dirty']);
  return Object.keys(queryData).reduce(function (p, key) {
    var value = queryData[key];

    if (!(0, _isEmpty3["default"])(value)) {
      p[key] = value;
    }

    return p;
  }, {});
}

var TableDynamicFilterBar =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2["default"])(TableDynamicFilterBar, _Component);

  var _super = _createSuper(TableDynamicFilterBar);

  function TableDynamicFilterBar(props, context) {
    var _this;

    (0, _classCallCheck2["default"])(this, TableDynamicFilterBar);
    _this = _super.call(this, props, context);
    _this.refDropdown = null;
    _this.refFilterWrapper = null;
    _this.refEditors = new Map();
    _this.originalConditionKeys = [];
    _this.enterNum = 0;

    _this.handleClickOut = function (e) {
      if (_this.refDropdown && !_this.refDropdown.contains(e.target)) {
        _this.fieldSelectHidden = true;
      }
    };
    /**
     * 勾选
     * @param code
     */


    _this.handleSelect = function (code) {
      var codes = Array.isArray(code) ? code : [code];
      _this.selectFields = (0, _uniq["default"])([].concat((0, _toConsumableArray2["default"])(_this.selectFields), (0, _toConsumableArray2["default"])(codes)));
    };
    /**
     * 取消勾选
     * @param code
     */


    _this.handleUnSelect = function (code) {
      var queryDataSet = _this.props.queryDataSet;
      var codes = Array.isArray(code) ? code : [code];

      if (queryDataSet) {
        codes.map(function (name) {
          if (queryDataSet.current) {
            queryDataSet.current.set(name, undefined);
          }

          return null;
        });
      }

      _this.selectFields = _pull["default"].apply(void 0, [(0, _toConsumableArray2["default"])(_this.selectFields)].concat((0, _toConsumableArray2["default"])(codes)));
    };

    (0, _mobx.runInAction)(function () {
      _this.fieldSelectHidden = true;
      _this.selectFields = [];
      _this.expand = true;
    });
    return _this;
  }

  (0, _createClass2["default"])(TableDynamicFilterBar, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.processDataSetListener(true);
      document.addEventListener('click', this.handleClickOut);
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      document.removeEventListener('click', this.handleClickOut);
      this.processDataSetListener(false);
    }
  }, {
    key: "processDataSetListener",
    value: function processDataSetListener(flag) {
      var queryDataSet = this.props.queryDataSet;

      if (queryDataSet) {
        var handler = flag ? queryDataSet.addEventListener : queryDataSet.removeEventListener;
        handler.call(queryDataSet, 'validate', this.handleDataSetValidate);
        handler.call(queryDataSet, 'update', this.handleDataSetUpdate);
        handler.call(queryDataSet, 'create', this.handleDataSetCreate);
      }
    }
    /**
     * queryDataSet 查询前校验事件 触发展开动态字段
     * @param dataSet 查询DS
     * @param result
     */

  }, {
    key: "handleDataSetValidate",
    value: function () {
      var _handleDataSetValidate = (0, _asyncToGenerator2["default"])(
      /*#__PURE__*/
      _regenerator["default"].mark(function _callee(_ref) {
        var _this2 = this;

        var dataSet, result, fields;
        return _regenerator["default"].wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                dataSet = _ref.dataSet, result = _ref.result;
                _context.next = 3;
                return result;

              case 3:
                if (_context.sent) {
                  _context.next = 9;
                  break;
                }

                fields = (0, _toConsumableArray2["default"])(dataSet.fields.keys());
                (0, _map["default"])(fields, function (field) {
                  if (!dataSet.current.getField(field).isValid()) {
                    _this2.handleSelect(field);
                  }
                });
                (0, _mobx.runInAction)(function () {
                  _this2.expand = true;
                });
                this.refFilterWrapper.style.height = '';
                this.refFilterWrapper.style.overflow = '';

              case 9:
              case "end":
                return _context.stop();
            }
          }
        }, _callee, this);
      }));

      function handleDataSetValidate(_x) {
        return _handleDataSetValidate.apply(this, arguments);
      }

      return handleDataSetValidate;
    }()
  }, {
    key: "setConditionStatus",
    value: function setConditionStatus(value, orglValue) {
      var _this3 = this;

      (0, _mobx.runInAction)(function () {
        return _this3.conditionStatus = value;
      });

      if (value === _enum2.RecordStatus.sync && orglValue) {
        this.originalValue = orglValue;
      }
    }
    /**
     * 筛选条件更新 触发表格查询
     */

  }, {
    key: "handleDataSetUpdate",
    value: function handleDataSetUpdate(_ref2) {
      var record = _ref2.record;
      var _this$props = this.props,
          dataSet = _this$props.dataSet,
          queryDataSet = _this$props.queryDataSet,
          _this$props$onQuery = _this$props.onQuery,
          onQuery = _this$props$onQuery === void 0 ? _noop["default"] : _this$props$onQuery;
      var status = _enum2.RecordStatus.update;

      if (record) {
        status = isEqualDynamicProps(this.originalValue, record.toData()) ? _enum2.RecordStatus.sync : _enum2.RecordStatus.update;
      }

      this.setConditionStatus(status);
      dataSet.query();
      var data = getQueryData(queryDataSet);
      onQuery({
        dataSet: dataSet,
        queryDataSet: queryDataSet,
        data: data
      });
    }
    /**
     * queryDS 新建，初始勾选值
     */

  }, {
    key: "handleDataSetCreate",
    value: function handleDataSetCreate(_ref3) {
      var _this4 = this;

      var dataSet = _ref3.dataSet,
          record = _ref3.record;
      var conditionData = Object.entries(record.toData());
      this.originalValue = record.toData();
      var keys = (0, _toConsumableArray2["default"])(dataSet.fields.keys());
      (0, _map["default"])(conditionData, function (data) {
        var name = data[0];

        if (!keys.includes(data[0]) && (0, _isObject["default"])(data[1]) && !(0, _isEmpty2["default"])(data[1]) && !(0, _isArray["default"])(data[1])) {
          name = "".concat(data[0], ".").concat(Object.keys(data[1])[0]);
        }

        if (isSelect(data) && !dataSet.getField(name).get('bind')) {
          _this4.handleSelect(name);
        }
      });
    }
    /**
     * 注入 onEnterDown 事件
     * @param element
     * @param name
     */

  }, {
    key: "createFields",
    value: function createFields(element, name) {
      var _this5 = this;

      var onEnterDown = element.props.onEnterDown;

      if (onEnterDown && (0, _isFunction["default"])(onEnterDown)) {
        return element;
      }

      var props = {
        onEnterDown: function onEnterDown() {
          _this5.handleQuery();
        },
        ref: function ref(node) {
          return _this5.refEditors.set(name, node);
        }
      };
      return (0, _react.cloneElement)(element, props);
    }
    /**
     * 判断查询值是否为空
     * @param value
     */

  }, {
    key: "isEmpty",
    value: function isEmpty(value) {
      return (0, _mobx.isArrayLike)(value) ? !value.length : (0, _isEmpty3["default"])(value);
    }
    /**
     * 渲染展开逻辑
     * @param hidden 是否隐藏全部
     */

  }, {
    key: "getExpandNode",
    value: function getExpandNode(hidden) {
      var _this6 = this;

      var proPrefixCls = this.context.tableStore.proPrefixCls;
      return _react["default"].createElement("span", {
        className: "".concat(proPrefixCls, "-filter-menu-expand"),
        onClick: function onClick() {
          var _this6$refFilterWrapp = _this6.refFilterWrapper.getBoundingClientRect(),
              height = _this6$refFilterWrapp.height;

          var _this6$refFilterWrapp2 = _this6.refFilterWrapper.children[0].getBoundingClientRect(),
              childHeight = _this6$refFilterWrapp2.height;

          (0, _mobx.runInAction)(function () {
            _this6.expand = hidden ? height <= 0 : height <= childHeight + 2;
          });

          if (hidden && height) {
            // 收起全部
            _this6.refFilterWrapper.style.display = 'none';
          } else {
            _this6.refFilterWrapper.style.display = 'flex';
            _this6.refFilterWrapper.style.height = '';
            _this6.refFilterWrapper.style.overflow = '';
          }

          if (height > childHeight && !hidden) {
            // 收起留一行高度
            _this6.refFilterWrapper.style.height = (0, _UnitConvertor.pxToRem)(childHeight) || '';
            _this6.refFilterWrapper.style.overflow = 'hidden';
          } else {
            _this6.refFilterWrapper.style.height = '';
            _this6.refFilterWrapper.style.overflow = '';
          }
        }
      }, this.expand ? _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_icon["default"], {
        type: "baseline-arrow_drop_up"
      })) : _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_icon["default"], {
        type: "baseline-arrow_drop_down"
      })));
    }
    /**
     * 获取筛选下拉
     */

  }, {
    key: "getFilterMenu",
    value: function getFilterMenu() {
      var _this7 = this;

      var _this$props2 = this.props,
          queryFields = _this$props2.queryFields,
          queryDataSet = _this$props2.queryDataSet,
          dataSet = _this$props2.dataSet,
          dynamicFilterBar = _this$props2.dynamicFilterBar,
          _this$props2$onReset = _this$props2.onReset,
          onReset = _this$props2$onReset === void 0 ? _noop["default"] : _this$props2$onReset;
      var _this$context = this.context,
          tableStore = _this$context.tableStore,
          _this$context$tableSt = _this$context.tableStore,
          proPrefixCls = _this$context$tableSt.proPrefixCls,
          node = _this$context$tableSt.node,
          highlightRowIndexs = _this$context$tableSt.highlightRowIndexs;
      var tableFilterAdapter = (dynamicFilterBar === null || dynamicFilterBar === void 0 ? void 0 : dynamicFilterBar.tableFilterAdapter) || (0, _configure.getConfig)('tableFilterAdapter');
      var searchText = (dynamicFilterBar === null || dynamicFilterBar === void 0 ? void 0 : dynamicFilterBar.searchText) || (0, _configure.getConfig)('tableFilterSearchText') || 'params';

      if (queryDataSet && queryFields.length) {
        return _react["default"].createElement("div", {
          className: "".concat(proPrefixCls, "-filter-menu")
        }, this.renderPrefix(), _react["default"].createElement("div", {
          className: "".concat(proPrefixCls, "-filter-search")
        }, _react["default"].createElement(_textField["default"], {
          clearButton: true,
          placeholder: (0, _localeContext.$l)('Table', 'enter_search_content'),
          prefix: _react["default"].createElement(_icon["default"], {
            type: "search"
          }),
          style: {
            width: 280
          },
          value: this.searchText,
          onChange: function onChange() {
            return _noop["default"];
          },
          onKeyDown: function onKeyDown(e) {
            if (e.keyCode === _KeyCode["default"].ENTER && (dynamicFilterBar === null || dynamicFilterBar === void 0 ? void 0 : dynamicFilterBar.quickSearch)) {
              e.preventDefault();
              var rows = (0, _toConsumableArray2["default"])(new Set(highlightRowIndexs));
              node.scrollTop(rows[_this7.enterNum] * node.getRowHeight());
              _this7.enterNum += 1;

              if (_this7.enterNum + 1 > rows.length) {
                _this7.enterNum = 0;
              }
            }
          },
          onClear: function onClear() {
            (0, _mobx.runInAction)(function () {
              _this7.searchText = '';

              if (dynamicFilterBar === null || dynamicFilterBar === void 0 ? void 0 : dynamicFilterBar.quickSearch) {
                tableStore.searchText = '';
                tableStore.highlightRowIndexs = [];
                node.forceUpdate();
              }
            });
            onReset();
            dataSet.setQueryParameter(searchText, undefined);

            _this7.handleQuery(true);
          },
          onInput: function onInput(e) {
            // @ts-ignore
            var value = e.target.value;
            (0, _mobx.runInAction)(function () {
              _this7.searchText = value || '';

              if (dynamicFilterBar === null || dynamicFilterBar === void 0 ? void 0 : dynamicFilterBar.quickSearch) {
                tableStore.highlightRowIndexs = [];
                tableStore.searchText = value || '';
                node.forceUpdate();
              }
            });
            dataSet.setQueryParameter(searchText, value);

            _this7.handleQuery();
          }
        })), tableFilterAdapter ? _react["default"].createElement(_quickFilter["default"], {
          prefixCls: proPrefixCls,
          expand: this.expand,
          dynamicFilterBar: dynamicFilterBar,
          dataSet: dataSet,
          queryDataSet: queryDataSet,
          onChange: this.handleSelect,
          conditionStatus: this.conditionStatus,
          onStatusChange: this.setConditionStatus
        }) : _react["default"].createElement("div", {
          className: "".concat(proPrefixCls, "-filter-buttons")
        }, this.conditionStatus === _enum2.RecordStatus.update && _react["default"].createElement(_button["default"], {
          onClick: function onClick() {
            if (queryDataSet && queryDataSet.current) {
              queryDataSet.current.reset();
            }

            _this7.handleDataSetCreate({
              dataSet: queryDataSet,
              record: queryDataSet.current
            });

            _this7.setConditionStatus(_enum2.RecordStatus.sync);

            dataSet.query();
            onReset();
          }
        }, (0, _localeContext.$l)('Table', 'reset_button'))), _react["default"].createElement("span", {
          className: "".concat(proPrefixCls, "-filter-search-divide")
        }), this.getExpandNode(true), this.renderSuffix());
      }
    }
    /**
     * tableFilterSuffix 预留自定义区域
     */

  }, {
    key: "renderSuffix",
    value: function renderSuffix() {
      var _this$props3 = this.props,
          queryDataSet = _this$props3.queryDataSet,
          dataSet = _this$props3.dataSet,
          dynamicFilterBar = _this$props3.dynamicFilterBar;
      var proPrefixCls = this.context.tableStore.proPrefixCls;
      var suffixes = (dynamicFilterBar === null || dynamicFilterBar === void 0 ? void 0 : dynamicFilterBar.suffixes) || (0, _configure.getConfig)('tableFilterSuffix');
      var children = [];

      if (suffixes && suffixes.length) {
        suffixes.forEach(function (suffix) {
          if (suffix === 'filter') {
            children.push(_react["default"].createElement(_ColumnFilter["default"], {
              prefixCls: proPrefixCls
            }));
          } else if ((0, _react.isValidElement)(suffix)) {
            children.push(suffix);
          } else if ((0, _isFunction["default"])(suffix)) {
            children.push(suffix({
              queryDataSet: queryDataSet,
              dataSet: dataSet
            }));
          }
        });
        return _react["default"].createElement("div", {
          className: "".concat(proPrefixCls, "-dynamic-filter-bar-suffix")
        }, children);
      }

      return null;
    }
  }, {
    key: "renderPrefix",
    value: function renderPrefix() {
      var _this$props4 = this.props,
          queryDataSet = _this$props4.queryDataSet,
          dataSet = _this$props4.dataSet,
          dynamicFilterBar = _this$props4.dynamicFilterBar;
      var proPrefixCls = this.context.tableStore.proPrefixCls;
      var prefixes = dynamicFilterBar === null || dynamicFilterBar === void 0 ? void 0 : dynamicFilterBar.prefixes;
      var children = [];

      if (prefixes && prefixes.length) {
        prefixes.forEach(function (prefix) {
          if ((0, _isString["default"])(prefix) && prefix === 'filter') {
            children.push(_react["default"].createElement(_ColumnFilter["default"], {
              prefixCls: proPrefixCls
            }));
          } else if ((0, _react.isValidElement)(prefix)) {
            children.push(prefix);
          } else if ((0, _isFunction["default"])(prefix)) {
            children.push(prefix({
              queryDataSet: queryDataSet,
              dataSet: dataSet
            }));
          }
        });
        return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement("div", {
          className: "".concat(proPrefixCls, "-dynamic-filter-bar-prefix")
        }, children), _react["default"].createElement("span", {
          className: "".concat(proPrefixCls, "-filter-search-divide")
        }));
      }

      return null;
    }
    /**
     * 渲染查询条
     */

  }, {
    key: "getQueryBar",
    value: function getQueryBar() {
      var _this8 = this;

      var _this$props5 = this.props,
          prefixCls = _this$props5.prefixCls,
          _this$props5$queryFie = _this$props5.queryFieldsLimit,
          queryFieldsLimit = _this$props5$queryFie === void 0 ? 3 : _this$props5$queryFie,
          queryFields = _this$props5.queryFields,
          queryDataSet = _this$props5.queryDataSet;
      var proPrefixCls = this.context.tableStore.proPrefixCls;

      if (queryDataSet && queryFields.length) {
        return _react["default"].createElement("div", {
          key: "query_bar",
          className: "".concat(prefixCls, "-dynamic-filter-bar")
        }, this.getFilterMenu(), _react["default"].createElement("div", {
          className: "".concat(proPrefixCls, "-filter-wrapper"),
          ref: function ref(wrapperNode) {
            return _this8.refFilterWrapper = wrapperNode;
          }
        }, queryFields.slice(0, queryFieldsLimit).map(function (element) {
          var name = element.props.name;
          var queryField = queryDataSet.getField(name);
          var itemClassName = "".concat(proPrefixCls, "-filter-item ").concat(proPrefixCls, "-filter-item-label");
          return _react["default"].createElement("div", {
            className: "".concat(proPrefixCls, "-filter-content"),
            key: name,
            onClick: function onClick() {
              return _this8.refEditors.get(name).focus();
            }
          }, _react["default"].createElement("span", {
            className: "".concat(proPrefixCls, "-filter-label")
          }, queryField === null || queryField === void 0 ? void 0 : queryField.get('label')), _react["default"].createElement("span", {
            className: itemClassName
          }, _this8.createFields(element, name)));
        }), queryFields.slice(queryFieldsLimit).map(function (element) {
          var name = element.props.name;
          var queryField = queryDataSet.getField(name);

          if (_this8.selectFields.includes(name)) {
            return _react["default"].createElement("div", {
              className: "".concat(proPrefixCls, "-filter-content"),
              key: name,
              onClick: function onClick() {
                return _this8.refEditors.get(name).focus();
              }
            }, _react["default"].createElement(_icon["default"], {
              type: "cancel",
              className: "".concat(proPrefixCls, "-filter-item-close"),
              onClick: function onClick() {
                _this8.handleUnSelect([name]);
              }
            }), _react["default"].createElement("span", {
              className: "".concat(proPrefixCls, "-filter-label")
            }, queryField === null || queryField === void 0 ? void 0 : queryField.get('label')), _react["default"].createElement("span", {
              className: "".concat(proPrefixCls, "-filter-item")
            }, _this8.createFields(element, name)));
          }

          return null;
        }), queryFieldsLimit < queryFields.length && _react["default"].createElement("div", {
          className: "".concat(proPrefixCls, "-filter-item")
        }, _react["default"].createElement(_dropdown["default"], {
          visible: !this.fieldSelectHidden,
          overlay: _react["default"].createElement("div", {
            role: "none",
            ref: function ref(dropdownNode) {
              return _this8.refDropdown = dropdownNode;
            },
            onClick: function onClick(e) {
              e.stopPropagation();
            }
          }, _react["default"].createElement(_FieldList["default"], {
            groups: [{
              title: (0, _localeContext.$l)('Table', 'predefined_fields'),
              fields: (0, _toConsumableArray2["default"])(queryDataSet.fields.values()).filter(function (f) {
                return !f.get('bind');
              }).slice(queryFieldsLimit)
            }],
            prefixCls: "".concat(proPrefixCls, "-filter-list") || 'c7n-pro-table-filter-list',
            closeMenu: function closeMenu() {
              return (0, _mobx.runInAction)(function () {
                return _this8.fieldSelectHidden = true;
              });
            },
            value: this.selectFields,
            onSelect: this.handleSelect,
            onUnSelect: this.handleUnSelect
          })),
          trigger: [_enum.Action.click]
        }, _react["default"].createElement("span", {
          className: "".concat(proPrefixCls, "-add-fields"),
          onClick: function onClick(e) {
            e.nativeEvent.stopImmediatePropagation();
            (0, _mobx.runInAction)(function () {
              _this8.fieldSelectHidden = false;
            });
          }
        }, _react["default"].createElement(_icon["default"], {
          type: "add"
        }), (0, _localeContext.$l)('Table', 'add_filter'))))));
      }

      return null;
    }
  }, {
    key: "handleQuery",
    value: function handleQuery(collapse) {
      var _this$props6 = this.props,
          dataSet = _this$props6.dataSet,
          queryDataSet = _this$props6.queryDataSet,
          _this$props6$onQuery = _this$props6.onQuery,
          onQuery = _this$props6$onQuery === void 0 ? _noop["default"] : _this$props6$onQuery;
      dataSet.query();

      if (!collapse) {
        var data = getQueryData(queryDataSet);
        onQuery({
          dataSet: dataSet,
          queryDataSet: queryDataSet,
          data: data,
          params: this.searchText
        });
      }
    }
  }, {
    key: "render",
    value: function render() {
      return this.getQueryBar();
    }
  }]);
  return TableDynamicFilterBar;
}(_react.Component);

TableDynamicFilterBar.contextType = _TableContext["default"];
TableDynamicFilterBar.defaultProps = {
  prefixCls: (0, _configure.getProPrefixCls)('table'),
  queryFieldsLimit: 3
};
(0, _tslib.__decorate)([_mobx.observable], TableDynamicFilterBar.prototype, "moreFields", void 0);
(0, _tslib.__decorate)([_mobx.observable], TableDynamicFilterBar.prototype, "fieldSelectHidden", void 0);
(0, _tslib.__decorate)([_mobx.observable], TableDynamicFilterBar.prototype, "selectFields", void 0);
(0, _tslib.__decorate)([_mobx.observable], TableDynamicFilterBar.prototype, "expand", void 0);
(0, _tslib.__decorate)([_mobx.observable], TableDynamicFilterBar.prototype, "searchText", void 0);
(0, _tslib.__decorate)([_mobx.observable], TableDynamicFilterBar.prototype, "conditionStatus", void 0);
(0, _tslib.__decorate)([_mobx.action], TableDynamicFilterBar.prototype, "handleClickOut", void 0);
(0, _tslib.__decorate)([_autobind["default"]], TableDynamicFilterBar.prototype, "handleDataSetValidate", null);
(0, _tslib.__decorate)([_autobind["default"]], TableDynamicFilterBar.prototype, "setConditionStatus", null);
(0, _tslib.__decorate)([_autobind["default"]], TableDynamicFilterBar.prototype, "handleDataSetUpdate", null);
(0, _tslib.__decorate)([_autobind["default"]], TableDynamicFilterBar.prototype, "handleDataSetCreate", null);
(0, _tslib.__decorate)([_mobx.action], TableDynamicFilterBar.prototype, "handleSelect", void 0);
(0, _tslib.__decorate)([_mobx.action], TableDynamicFilterBar.prototype, "handleUnSelect", void 0);
(0, _tslib.__decorate)([_autobind["default"]], TableDynamicFilterBar.prototype, "handleQuery", null);
TableDynamicFilterBar = (0, _tslib.__decorate)([_mobxReact.observer], TableDynamicFilterBar);
var _default = TableDynamicFilterBar;
exports["default"] = _default;
//# sourceMappingURL=TableDynamicFilterBar.js.map