choerodon-ui/pro/es/table/query-bar/TableDynamicFilterBar.js

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

import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
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 _typeof from "@babel/runtime/helpers/typeof";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import { __decorate } from "tslib";
import React, { cloneElement, Component, isValidElement } from 'react';
import { observer } from 'mobx-react';
import { action, isArrayLike, observable, runInAction, toJS } from 'mobx';
import uniq from 'lodash/uniq';
import pull from 'lodash/pull';
import noop from 'lodash/noop';
import map from 'lodash/map';
import isObject from 'lodash/isObject';
import isEnumEmpty from 'lodash/isEmpty';
import isNumber from 'lodash/isNumber';
import isFunction from 'lodash/isFunction';
import isEqual from 'lodash/isEqual';
import isArray from 'lodash/isArray';
import isString from 'lodash/isString';
import debounce from 'lodash/debounce';
import omit from 'lodash/omit';
import difference from 'lodash/difference';
import ConfigContext from '../../../../es/config-provider/ConfigContext';
import { pxToRem } from '../../../../es/_util/UnitConvertor';
import Icon from '../../../../es/icon';
import { Action } from '../../../../es/trigger/enum';
import DataSet from '../../data-set/DataSet';
import { DataSetEvents, DataSetSelection, FieldIgnore, FieldType, RecordStatus } from '../../data-set/enum';
import Button from '../../button';
import Dropdown from '../../dropdown';
import TextField from '../../text-field';
import { ValueChangeAction } from '../../text-field/enum';
import Tooltip from '../../tooltip';
import { $l } from '../../locale-context';
import autobind from '../../_util/autobind';
import _isEmpty from '../../_util/isEmpty';
import FieldList from './FieldList';
import TableButtons from './TableButtons';
import ColumnFilter from './ColumnFilter';
import QuickFilterMenu from './quick-filter/QuickFilterMenu';
import QuickFilterMenuContext from './quick-filter/QuickFilterMenuContext';
import { ConditionDataSet, QuickFilterDataSet } from './quick-filter/QuickFilterDataSet';
/**
 * 当前数据是否有值并需要选中
 * @param data
 */

function isSelect(data) {
  if (isObject(data[1])) {
    return !isEnumEmpty(data[1]);
  }

  return data[0] !== '__dirty' && !_isEmpty(data[1]);
}

export function isEqualDynamicProps(originalValue, newValue, dataSet, record) {
  if (isEqual(newValue, originalValue)) {
    return true;
  }

  if (isObject(newValue) && isObject(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;
      }

      if (isNumber(oldValue) || isNumber(value)) {
        var oEp = isNumber(oldValue) ? _isEmpty(oldValue) : isEnumEmpty(oldValue);
        var nEp = isNumber(value) ? _isEmpty(value) : isEnumEmpty(value);

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

        return String(oldValue) === String(value);
      }

      var field = dataSet.getField(key);

      if (field && field.get('lovCode') && oldValue && value) {
        var valueField = dataSet.getField(key).get('valueField', record);
        var textField = dataSet.getField(key).get('textField', record);
        return value[valueField] === oldValue[valueField] && value[textField] === oldValue[textField];
      }

      return isEqual(oldValue, value);
    });
  }

  return isEqual(newValue, originalValue);
}
/**
 * 提交副本数据
 * @param data
 */

export function omitData(data) {
  return omit(data, 'creationDate', 'createdBy', 'lastUpdateDate', 'lastUpdatedBy', 'objectVersionNumber', '_token', 'searchId', 'searchConditionId', 'searchQueryId', 'searchOrderId');
}
/**
 * obj 值使用 JSON 保存、获取赋值转化
 * @param value
 */

export function parseValue(value) {
  try {
    var res = JSON.parse(value);

    if (_typeof(res) === 'object') {
      return res;
    }

    return value;
  } catch (e) {
    return value;
  }
}
export function stringifyValue(value) {
  if (_typeof(value) === 'object') {
    return JSON.stringify(value);
  }

  return value;
}
export var CONDITIONSTATUS = '__CONDITIONSTATUS__';
export var SELECTFIELDS = '__SELECTFIELDS__';
export var MENUDATASET = '__MENUDATASET__';
export var CONDITIONDATASET = '__CONDITIONDATASET__';
export var OPTIONDATASET = '__OPTIONDATASET__';
export var FILTERMENUDATASET = '__FILTERMENUDATASET__';
export var MENURESULT = '__MENURESULT__';
export var SEARCHTEXT = '__SEARCHTEXT__';

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

  var _super = _createSuper(TableDynamicFilterBar);

  function TableDynamicFilterBar(props, context) {
    var _this;

    _classCallCheck(this, TableDynamicFilterBar);

    _this = _super.call(this, props, context);
    _this.refDropdown = null;
    _this.refSingleWrapper = null;
    _this.refEditors = new Map();
    _this.originalConditionFields = [];

    _this.handleClickOut = function (e) {
      if (_this.refDropdown && !_this.refDropdown.contains(e.target)) {
        _this.fieldSelectHidden = true;
      }
    };

    _this.setOriginalConditionFields = function (code) {
      var _this$props = _this.props,
          queryDataSet = _this$props.queryDataSet,
          dataSet = _this$props.dataSet;

      if (!code) {
        if (queryDataSet) {
          _this.initConditionFields({
            dataSet: queryDataSet,
            record: queryDataSet.get(0)
          });
        }
      } else {
        _this.originalConditionFields = Array.isArray(code) ? code : [code];
      }

      dataSet.setState(SELECTFIELDS, _toConsumableArray(_this.originalConditionFields));
    };
    /**
     * 勾选
     * @param code
     */


    _this.handleSelect = function (code) {
      var dataSet = _this.props.dataSet;
      var codes = Array.isArray(code) ? code : [code];
      var selectFields = dataSet.getState(SELECTFIELDS) || [];
      dataSet.setState(SELECTFIELDS, uniq([].concat(_toConsumableArray(selectFields), _toConsumableArray(codes))));
      var shouldUpdate = dataSet.getState(SELECTFIELDS).length !== _this.originalConditionFields.length || !!difference(toJS(dataSet.getState(SELECTFIELDS)), toJS(_this.originalConditionFields)).length;

      _this.setConditionStatus(shouldUpdate ? RecordStatus.update : RecordStatus.sync);
    };
    /**
     * 取消勾选
     * @param code
     */


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

      if (queryDataSet) {
        var current = queryDataSet.current;

        if (current) {
          codes.forEach(function (name) {
            return current.set(name, undefined);
          });
        }
      }

      var selectFields = dataSet.getState(SELECTFIELDS) || [];
      dataSet.setState(SELECTFIELDS, pull.apply(void 0, [_toConsumableArray(selectFields)].concat(_toConsumableArray(codes))));
      var shouldUpdate = dataSet.getState(SELECTFIELDS).length !== _this.originalConditionFields.length || !!difference(toJS(dataSet.getState(SELECTFIELDS)), toJS(_this.originalConditionFields)).length;

      _this.setConditionStatus(shouldUpdate ? RecordStatus.update : RecordStatus.sync);
    };

    runInAction(function () {
      _this.fieldSelectHidden = true;
      _this.expand = true;
    });
    return _this;
  }

  _createClass(TableDynamicFilterBar, [{
    key: "prefixCls",
    get: function get() {
      var prefixCls = this.props.prefixCls;
      var getProPrefixCls = this.context.getProPrefixCls;
      return getProPrefixCls('table', prefixCls);
    }
  }, {
    key: "queryFields",
    get: function get() {
      var queryFields = this.props.queryFields;
      return queryFields.filter(function (component) {
        return !component.props.hidden;
      });
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this2 = this;

      var _this$props3 = this.props,
          fuzzyQueryOnly = _this$props3.fuzzyQueryOnly,
          queryDataSet = _this$props3.queryDataSet;

      if (!fuzzyQueryOnly) {
        this.processDataSetListener(true);
        document.addEventListener('click', this.handleClickOut);

        if (this.isSingleLineOpt() && this.refSingleWrapper) {
          var _this$refSingleWrappe = this.refSingleWrapper.getBoundingClientRect(),
              height = _this$refSingleWrappe.height;

          var _this$refSingleWrappe2 = this.refSingleWrapper.children[0].children[0].getBoundingClientRect(),
              childHeight = _this$refSingleWrappe2.height;

          runInAction(function () {
            _this2.showExpandIcon = height > childHeight + 18;
          });
        }
      }

      if (this.originalValue === undefined && queryDataSet && queryDataSet.current) {
        this.initConditionFields({
          dataSet: queryDataSet,
          record: queryDataSet.current
        });
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      var fuzzyQueryOnly = this.props.fuzzyQueryOnly;

      if (!fuzzyQueryOnly) {
        document.removeEventListener('click', this.handleClickOut);
        this.processDataSetListener(false);
      }
    }
  }, {
    key: "processDataSetListener",
    value: function processDataSetListener(flag) {
      var _this$props4 = this.props,
          queryDataSet = _this$props4.queryDataSet,
          dataSet = _this$props4.dataSet;

      if (queryDataSet) {
        var handler = flag ? queryDataSet.addEventListener : queryDataSet.removeEventListener;
        var dsHandler = flag ? dataSet.addEventListener : dataSet.removeEventListener;
        handler.call(queryDataSet, DataSetEvents.validate, this.handleDataSetValidate);
        handler.call(queryDataSet, DataSetEvents.update, this.handleDataSetUpdate);
        handler.call(queryDataSet, DataSetEvents.create, this.handleDataSetCreate);
        dsHandler.call(dataSet, DataSetEvents.query, this.handleDataSetQuery);
      }
    }
  }, {
    key: "handleDataSetQuery",
    value: function () {
      var _handleDataSetQuery = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref) {
        var dataSet, res, conditionList, initQueryData;
        return _regeneratorRuntime.wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                dataSet = _ref.dataSet;

                if (!(!dataSet.getState(MENURESULT) && this.tableFilterAdapter)) {
                  _context.next = 13;
                  break;
                }

                _context.next = 4;
                return this.initMenuDataSet();

              case 4:
                res = dataSet.getState(MENURESULT);

                if (!(res && res.length && res.filter(function (menu) {
                  return menu.defaultFlag;
                }).length)) {
                  _context.next = 13;
                  break;
                }

                conditionList = res.filter(function (menu) {
                  return menu.defaultFlag;
                })[0].conditionList;
                initQueryData = {};

                if (!(conditionList && conditionList.length)) {
                  _context.next = 13;
                  break;
                }

                map(conditionList, function (condition) {
                  if (condition.comparator === 'EQUAL') {
                    var fieldName = condition.fieldName,
                        value = condition.value;
                    initQueryData[fieldName] = parseValue(value);
                  }
                });

                if (!Object.keys(initQueryData).length) {
                  _context.next = 13;
                  break;
                }

                dataSet.query();
                return _context.abrupt("return", false);

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

      function handleDataSetQuery(_x) {
        return _handleDataSetQuery.apply(this, arguments);
      }

      return handleDataSetQuery;
    }()
    /**
     * queryDataSet 查询前校验事件 触发展开动态字段
     * @param dataSet 查询DS
     * @param result
     */

  }, {
    key: "handleDataSetValidate",
    value: function () {
      var _handleDataSetValidate = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(_ref2) {
        var _this3 = this;

        var dataSet, result, refSingleWrapper;
        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
          while (1) {
            switch (_context2.prev = _context2.next) {
              case 0:
                dataSet = _ref2.dataSet, result = _ref2.result;
                _context2.next = 3;
                return result;

              case 3:
                if (_context2.sent) {
                  _context2.next = 7;
                  break;
                }

                runInAction(function () {
                  var current = dataSet.current;
                  dataSet.fields.forEach(function (field, key) {
                    if (!field.isValid(current)) {
                      _this3.handleSelect(key);
                    }
                  });
                  _this3.expand = true;
                });
                refSingleWrapper = this.refSingleWrapper;

                if (refSingleWrapper) {
                  refSingleWrapper.style.height = '';
                  refSingleWrapper.style.overflow = '';
                }

              case 7:
              case "end":
                return _context2.stop();
            }
          }
        }, _callee2, this);
      }));

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

      return handleDataSetValidate;
    }()
  }, {
    key: "setConditionStatus",
    value: function setConditionStatus(value, orglValue) {
      var dataSet = this.props.dataSet;
      dataSet.setState(CONDITIONSTATUS, value);

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

  }, {
    key: "handleDataSetUpdate",
    value: function handleDataSetUpdate(_ref3) {
      var record = _ref3.record;
      var _this$props5 = this.props,
          dataSet = _this$props5.dataSet,
          queryDataSet = _this$props5.queryDataSet,
          _this$props5$onQuery = _this$props5.onQuery,
          onQuery = _this$props5$onQuery === void 0 ? noop : _this$props5$onQuery,
          autoQuery = _this$props5.autoQuery;
      var status = RecordStatus.update;

      if (record) {
        status = isEqualDynamicProps(this.originalValue, omit(record.toData(), ['__dirty']), queryDataSet, record) ? RecordStatus.sync : RecordStatus.update;
      }

      this.setConditionStatus(status);

      if (autoQuery) {
        dataSet.query();
        onQuery();
      }
    }
    /**
     * queryDS 新建，初始勾选值
     */

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

      if (queryDataSet) {
        this.initConditionFields({
          dataSet: queryDataSet,
          record: queryDataSet.current
        });
      }
    }
    /**
     * 初始化勾选值、条件字段
     * @param props
     */

  }, {
    key: "initConditionFields",
    value: function initConditionFields(props) {
      var _this4 = this;

      var dataSet = props.dataSet,
          record = props.record;
      var originalValue = omit(record.toData(), ['__dirty']);
      var conditionData = Object.entries(originalValue);
      this.originalValue = originalValue;
      this.originalConditionFields = [];
      var fields = dataSet.fields;
      map(conditionData, function (data) {
        var name = data[0];

        if (!fields.has(data[0]) && isObject(data[1]) && !isEnumEmpty(data[1]) && !isArray(data[1])) {
          name = "".concat(data[0], ".").concat(Object.keys(data[1])[0]);
        }

        if (isSelect(data) && !(dataSet.getState(SELECTFIELDS) || []).includes(name)) {
          var field = dataSet.getField(name);

          if (!field || !field.get('bind', record)) {
            _this4.originalConditionFields.push(name);

            _this4.handleSelect(name);
          }
        }
      });
    }
    /**
     * 初始筛选条数据源状态
     */

  }, {
    key: "initMenuDataSet",
    value: function () {
      var _initMenuDataSet = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
        var _this5 = this;

        var _this$props6, queryDataSet, dataSet, dynamicFilterBar, searchCode, searchCodes, menuDataSet, conditionDataSet, optionDataSet, filterMenuDataSet, status, result, menuRecord, current;

        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
          while (1) {
            switch (_context3.prev = _context3.next) {
              case 0:
                _this$props6 = this.props, queryDataSet = _this$props6.queryDataSet, dataSet = _this$props6.dataSet, dynamicFilterBar = _this$props6.dynamicFilterBar, searchCode = _this$props6.searchCode;
                searchCodes = dynamicFilterBar && dynamicFilterBar.searchCode || searchCode;

                if (!this.tableFilterAdapter) {
                  _context3.next = 23;
                  break;
                }

                menuDataSet = new DataSet(QuickFilterDataSet({
                  searchCode: searchCodes,
                  queryDataSet: queryDataSet,
                  tableFilterAdapter: this.tableFilterAdapter
                }));
                conditionDataSet = new DataSet(ConditionDataSet());
                optionDataSet = new DataSet({
                  selection: DataSetSelection.single
                });
                filterMenuDataSet = new DataSet({
                  autoCreate: true,
                  fields: [{
                    name: 'filterName',
                    type: FieldType.string,
                    textField: 'searchName',
                    valueField: 'searchId',
                    options: optionDataSet,
                    ignore: FieldIgnore.always
                  }]
                });
                status = RecordStatus.update;

                if (queryDataSet && queryDataSet.current) {
                  status = isEqualDynamicProps(this.originalValue, omit(queryDataSet.current.toData(), ['__dirty']), queryDataSet, queryDataSet.current) ? RecordStatus.sync : RecordStatus.update;
                } // 初始化状态


                dataSet.setState(MENUDATASET, menuDataSet);
                dataSet.setState(CONDITIONDATASET, conditionDataSet);
                dataSet.setState(OPTIONDATASET, optionDataSet);
                dataSet.setState(FILTERMENUDATASET, filterMenuDataSet);
                dataSet.setState(CONDITIONSTATUS, status);
                dataSet.setState(SEARCHTEXT, '');
                _context3.next = 17;
                return menuDataSet.query();

              case 17:
                result = _context3.sent;
                dataSet.setState(MENURESULT, result);

                if (optionDataSet) {
                  optionDataSet.loadData(result);
                }

                menuRecord = menuDataSet.current;

                if (menuRecord) {
                  conditionDataSet.loadData(menuRecord.get('conditionList'));
                }

                if (result && result.length) {
                  runInAction(function () {
                    _this5.shouldLocateData = true;
                  });
                } else {
                  current = filterMenuDataSet.current;
                  if (current) current.set('filterName', undefined);
                  runInAction(function () {
                    _this5.shouldLocateData = true;
                  });
                }

              case 23:
                return _context3.abrupt("return", true);

              case 24:
              case "end":
                return _context3.stop();
            }
          }
        }, _callee3, this);
      }));

      function initMenuDataSet() {
        return _initMenuDataSet.apply(this, arguments);
      }

      return initMenuDataSet;
    }()
    /**
     * tableFilterSuffix 预留自定义区域
     */

  }, {
    key: "renderSuffix",
    value: function renderSuffix() {
      var _this$props7 = this.props,
          dynamicFilterBar = _this$props7.dynamicFilterBar,
          queryDataSet = _this$props7.queryDataSet,
          dataSet = _this$props7.dataSet,
          _this$props7$buttons = _this$props7.buttons,
          buttons = _this$props7$buttons === void 0 ? [] : _this$props7$buttons;
      var getConfig = this.context.getConfig;
      var prefixCls = this.prefixCls;
      var suffixes = dynamicFilterBar && dynamicFilterBar.suffixes || getConfig('tableFilterSuffix');
      var children = [];
      var suffixesDom = null;
      var tableButtons = buttons.length ? /*#__PURE__*/React.createElement(TableButtons, {
        key: "toolbar",
        prefixCls: "".concat(prefixCls, "-dynamic-filter"),
        buttons: buttons
      }) : null;

      if (suffixes && suffixes.length) {
        suffixes.forEach(function (suffix) {
          if (suffix === 'filter') {
            children.push( /*#__PURE__*/React.createElement(ColumnFilter, {
              prefixCls: prefixCls
            }));
          } else if ( /*#__PURE__*/isValidElement(suffix)) {
            children.push(suffix);
          } else if (isFunction(suffix)) {
            children.push(suffix({
              queryDataSet: queryDataSet,
              dataSet: dataSet
            }));
          }
        });
        suffixesDom = /*#__PURE__*/React.createElement("div", {
          className: "".concat(prefixCls, "-dynamic-filter-bar-suffix")
        }, children);
      }

      return [tableButtons, suffixesDom];
    }
  }, {
    key: "getPrefix",
    value: function getPrefix() {
      var _this$props8 = this.props,
          dynamicFilterBar = _this$props8.dynamicFilterBar,
          queryDataSet = _this$props8.queryDataSet,
          dataSet = _this$props8.dataSet;
      var prefixCls = this.prefixCls;
      var prefixes = dynamicFilterBar && dynamicFilterBar.prefixes;
      var children = [];

      if (prefixes && prefixes.length) {
        prefixes.forEach(function (prefix) {
          if (isString(prefix) && prefix === 'filter') {
            children.push( /*#__PURE__*/React.createElement(ColumnFilter, {
              prefixCls: prefixCls
            }));
          } else if ( /*#__PURE__*/isValidElement(prefix)) {
            children.push(prefix);
          } else if (isFunction(prefix)) {
            children.push(prefix({
              queryDataSet: queryDataSet,
              dataSet: dataSet
            }));
          }
        });
        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
          className: "".concat(prefixCls, "-dynamic-filter-bar-prefix")
        }, children), /*#__PURE__*/React.createElement("span", {
          className: "".concat(prefixCls, "-filter-search-divide")
        }));
      }

      return null;
    }
    /**
     * 注入 refEditors
     * @param element
     * @param name
     */

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

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

  }, {
    key: "isEmpty",
    value: function isEmpty(value) {
      return isArrayLike(value) ? !value.length : _isEmpty(value);
    }
  }, {
    key: "tableFilterAdapter",
    get: function get() {
      var _this$props9 = this.props,
          dynamicFilterBar = _this$props9.dynamicFilterBar,
          searchCode = _this$props9.searchCode;
      var getConfig = this.context.getConfig;
      var searchCodes = dynamicFilterBar && dynamicFilterBar.searchCode || searchCode;
      return searchCodes ? dynamicFilterBar && dynamicFilterBar.tableFilterAdapter || getConfig('tableFilterAdapter') : null;
    }
    /**
     * 是否单行操作
     */

  }, {
    key: "isSingleLineOpt",
    value: function isSingleLineOpt() {
      var fuzzyQuery = this.props.fuzzyQuery;
      return !(fuzzyQuery || this.tableFilterAdapter);
    }
  }, {
    key: "renderRefreshBtn",
    value: function renderRefreshBtn() {
      var prefixCls = this.prefixCls,
          dataSet = this.props.dataSet;
      return /*#__PURE__*/React.createElement("span", {
        className: "".concat(prefixCls, "-filter-menu-query"),
        onClick: function onClick(e) {
          e.stopPropagation();
          dataSet.query();
        }
      }, /*#__PURE__*/React.createElement(Tooltip, {
        title: $l('Table', 'refresh')
      }, /*#__PURE__*/React.createElement(Icon, {
        type: "refresh"
      })));
    }
    /**
     * 渲染展开逻辑
     * @param hidden 是否隐藏全部
     */

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

      var prefixCls = this.prefixCls,
          refreshBtn = this.props.refreshBtn;
      if (!this.showExpandIcon && !hidden) return refreshBtn ? this.renderRefreshBtn() : null;
      return /*#__PURE__*/React.createElement("span", {
        className: "".concat(prefixCls, "-filter-menu-expand"),
        onClick: function onClick() {
          var refSingleWrapper = _this7.refSingleWrapper;

          if (refSingleWrapper) {
            var _refSingleWrapper$get = refSingleWrapper.getBoundingClientRect(),
                height = _refSingleWrapper$get.height;

            var _refSingleWrapper$chi = refSingleWrapper.children[0].children[0].getBoundingClientRect(),
                childHeight = _refSingleWrapper$chi.height;

            runInAction(function () {
              _this7.expand = hidden ? height <= 0 : height <= childHeight + 18;
            });

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

            if (height > childHeight + 18 && !hidden) {
              // 收起留一行高度
              refSingleWrapper.style.height = pxToRem(childHeight + 18, true) || '';
              refSingleWrapper.style.overflow = 'hidden';
            } else {
              refSingleWrapper.style.height = '';
              refSingleWrapper.style.overflow = '';
            }
          }
        }
      }, refreshBtn ? this.renderRefreshBtn() : null, this.expand ? /*#__PURE__*/React.createElement(Tooltip, {
        title: $l('Table', 'collapse')
      }, /*#__PURE__*/React.createElement(Icon, {
        type: "baseline-arrow_drop_up"
      })) : /*#__PURE__*/React.createElement(Tooltip, {
        title: $l('Table', 'expand_button')
      }, /*#__PURE__*/React.createElement(Icon, {
        type: "baseline-arrow_drop_down"
      })));
    }
    /**
     * 渲染模糊搜索
     */

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

      var _this$props10 = this.props,
          dataSet = _this$props10.dataSet,
          dynamicFilterBar = _this$props10.dynamicFilterBar,
          fuzzyQuery = _this$props10.fuzzyQuery,
          fuzzyQueryPlaceholder = _this$props10.fuzzyQueryPlaceholder,
          _this$props10$onReset = _this$props10.onReset,
          onReset = _this$props10$onReset === void 0 ? noop : _this$props10$onReset;
      var getConfig = this.context.getConfig;
      var prefixCls = this.prefixCls;
      var searchText = dynamicFilterBar && dynamicFilterBar.searchText || getConfig('tableFilterSearchText') || 'params';
      var placeholder = fuzzyQueryPlaceholder || $l('Table', 'enter_search_content');
      if (!fuzzyQuery) return null;
      return /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefixCls, "-filter-search")
      }, /*#__PURE__*/React.createElement(TextField, {
        style: {
          width: 280
        },
        clearButton: true,
        placeholder: placeholder,
        prefix: /*#__PURE__*/React.createElement(Icon, {
          type: "search"
        }),
        value: dataSet.getState(SEARCHTEXT),
        valueChangeAction: ValueChangeAction.input,
        onChange: debounce(function (value) {
          runInAction(function () {
            dataSet.setState(SEARCHTEXT, value || '');
          });
          dataSet.setQueryParameter(searchText, value);

          _this8.handleQuery();
        }, 500),
        onClear: function onClear() {
          runInAction(function () {
            dataSet.setState(SEARCHTEXT, '');
          });
          onReset();
        }
      }));
    }
    /**
     * 渲染重置按钮
     */

  }, {
    key: "getResetButton",
    value: function getResetButton() {
      var _this9 = this;

      var _this$props11 = this.props,
          queryDataSet = _this$props11.queryDataSet,
          dataSet = _this$props11.dataSet,
          autoQueryAfterReset = _this$props11.autoQueryAfterReset,
          _this$props11$onReset = _this$props11.onReset,
          onReset = _this$props11$onReset === void 0 ? noop : _this$props11$onReset;
      var prefixCls = this.prefixCls;
      return /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefixCls, "-filter-buttons")
      }, dataSet.getState(CONDITIONSTATUS) === RecordStatus.update && /*#__PURE__*/React.createElement(Button, {
        onClick: function onClick() {
          var shouldQuery = false;

          if (queryDataSet) {
            var current = queryDataSet.current;

            if (current) {
              shouldQuery = !isEqualDynamicProps(_this9.originalValue, omit(current.toData(), ['__dirty']), queryDataSet, current);
              current.reset();
              dataSet.setState(SEARCHTEXT, '');
              dataSet.setState(SELECTFIELDS, _toConsumableArray(_this9.originalConditionFields));
            }
          }

          _this9.setConditionStatus(RecordStatus.sync);

          onReset();

          if (autoQueryAfterReset && shouldQuery) {
            _this9.handleQuery();
          }
        }
      }, $l('Table', 'reset_button')));
    }
    /**
     * 筛选头
     * fuzzyQuery + quickFilterMenu + resetButton + buttons
     */

  }, {
    key: "getFilterMenu",
    value: function getFilterMenu() {
      var _this$props12 = this.props,
          queryFields = _this$props12.queryFields,
          queryDataSet = _this$props12.queryDataSet,
          dataSet = _this$props12.dataSet,
          dynamicFilterBar = _this$props12.dynamicFilterBar,
          searchCode = _this$props12.searchCode,
          autoQuery = _this$props12.autoQuery,
          fuzzyQueryOnly = _this$props12.fuzzyQueryOnly;
      var prefixCls = this.prefixCls;
      var prefix = this.getPrefix();
      var suffix = this.renderSuffix();
      var fuzzyQuery = this.getFuzzyQuery();

      if (fuzzyQueryOnly) {
        return /*#__PURE__*/React.createElement("div", {
          className: "".concat(prefixCls, "-filter-menu")
        }, prefix, fuzzyQuery, suffix);
      }

      if (queryDataSet && queryFields.length) {
        var searchCodes = dynamicFilterBar && dynamicFilterBar.searchCode || searchCode;
        var quickFilterMenu = this.tableFilterAdapter && searchCodes ? /*#__PURE__*/React.createElement(QuickFilterMenuContext.Provider, {
          value: {
            autoQuery: autoQuery,
            prefixCls: prefixCls,
            expand: this.expand,
            dataSet: dataSet,
            queryDataSet: queryDataSet,
            onChange: this.handleSelect,
            conditionStatus: dataSet.getState(CONDITIONSTATUS),
            onStatusChange: this.setConditionStatus,
            selectFields: dataSet.getState(SELECTFIELDS),
            onOriginalChange: this.setOriginalConditionFields,
            menuDataSet: dataSet.getState(MENUDATASET),
            filterMenuDataSet: dataSet.getState(FILTERMENUDATASET),
            conditionDataSet: dataSet.getState(CONDITIONDATASET),
            optionDataSet: dataSet.getState(OPTIONDATASET),
            shouldLocateData: this.shouldLocateData
          }
        }, /*#__PURE__*/React.createElement(QuickFilterMenu, null)) : null;
        var resetButton = this.isSingleLineOpt() || this.tableFilterAdapter ? null : this.getResetButton();
        return /*#__PURE__*/React.createElement("div", {
          className: "".concat(prefixCls, "-filter-menu")
        }, prefix, fuzzyQuery, quickFilterMenu, resetButton, this.isSingleLineOpt() ? null : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
          className: "".concat(prefixCls, "-filter-search-divide")
        }), this.getExpandNode(true)), suffix);
      }
    }
    /**
     * 查询字段初始顺序
     * 排除动态属性影响
     */

  }, {
    key: "originOrderQueryFields",
    get: function get() {
      var queryDataSet = this.props.queryDataSet;
      var result = [];

      if (queryDataSet) {
        var fields = queryDataSet.fields,
            _queryDataSet$props$f = queryDataSet.props.fields,
            propFields = _queryDataSet$props$f === void 0 ? [] : _queryDataSet$props$f;
        var cloneFields = fields.toJS();
        propFields.forEach(function (_ref4) {
          var name = _ref4.name;

          if (name) {
            var field = cloneFields.get(name);

            if (field && !field.get('bind') && !field.get('name').includes('__tls')) {
              result.push(field);
            }
          }
        });
      }

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

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

      var _this$props13 = this.props,
          _this$props13$queryFi = _this$props13.queryFieldsLimit,
          queryFieldsLimit = _this$props13$queryFi === void 0 ? 3 : _this$props13$queryFi,
          queryFields = _this$props13.queryFields,
          queryDataSet = _this$props13.queryDataSet,
          dataSet = _this$props13.dataSet,
          fuzzyQueryOnly = _this$props13.fuzzyQueryOnly;
      var prefixCls = this.prefixCls;
      var selectFields = dataSet.getState(SELECTFIELDS) || [];

      if (fuzzyQueryOnly) {
        return /*#__PURE__*/React.createElement("div", {
          key: "query_bar",
          className: "".concat(prefixCls, "-dynamic-filter-bar")
        }, this.getFilterMenu());
      }

      if (queryDataSet && queryFields.length) {
        var singleLineModeAction = this.isSingleLineOpt() ? /*#__PURE__*/React.createElement("div", {
          className: "".concat(prefixCls, "-dynamic-filter-bar-single-action")
        }, this.getResetButton(), this.getExpandNode(false)) : null;
        return /*#__PURE__*/React.createElement("div", {
          key: "query_bar",
          className: "".concat(prefixCls, "-dynamic-filter-bar")
        }, this.getFilterMenu(), /*#__PURE__*/React.createElement("div", {
          className: "".concat(prefixCls, "--dynamic-filter-single-wrapper"),
          ref: function ref(node) {
            return _this10.refSingleWrapper = node;
          }
        }, /*#__PURE__*/React.createElement("div", {
          className: "".concat(prefixCls, "-filter-wrapper")
        }, this.queryFields.slice(0, queryFieldsLimit).map(function (element) {
          var _element$props = element.props,
              name = _element$props.name,
              hidden = _element$props.hidden;
          if (hidden) return null;
          var queryField = queryDataSet.getField(name);
          var itemClassName = "".concat(prefixCls, "-filter-item");
          return /*#__PURE__*/React.createElement("div", {
            className: "".concat(prefixCls, "-filter-content"),
            key: name,
            onClick: function onClick() {
              var editor = _this10.refEditors.get(name);

              if (editor) {
                _this10.refEditors.get(name).focus();
              }
            }
          }, /*#__PURE__*/React.createElement("span", {
            className: "".concat(prefixCls, "-filter-label")
          }, queryField && queryField.get('label')), /*#__PURE__*/React.createElement("span", {
            className: itemClassName
          }, _this10.createFields(element, name)));
        }), this.queryFields.slice(queryFieldsLimit).map(function (element) {
          var _element$props2 = element.props,
              name = _element$props2.name,
              hidden = _element$props2.hidden;
          if (hidden) return null;
          var queryField = queryDataSet.getField(name);

          if (selectFields.includes(name)) {
            return /*#__PURE__*/React.createElement("div", {
              className: "".concat(prefixCls, "-filter-content"),
              key: name,
              onClick: function onClick() {
                var editor = _this10.refEditors.get(name);

                if (editor) {
                  _this10.refEditors.get(name).focus();
                }
              }
            }, /*#__PURE__*/React.createElement(Icon, {
              type: "cancel",
              className: "".concat(prefixCls, "-filter-item-close"),
              onClick: function onClick() {
                _this10.handleUnSelect([name]);
              }
            }), /*#__PURE__*/React.createElement("span", {
              className: "".concat(prefixCls, "-filter-label")
            }, queryField && queryField.get('label')), /*#__PURE__*/React.createElement("span", {
              className: "".concat(prefixCls, "-filter-item")
            }, _this10.createFields(element, name)));
          }

          return null;
        }), queryFieldsLimit < this.queryFields.length && /*#__PURE__*/React.createElement("div", {
          className: "".concat(prefixCls, "-filter-item")
        }, /*#__PURE__*/React.createElement(Dropdown, {
          visible: !this.fieldSelectHidden,
          overlay: /*#__PURE__*/React.createElement("div", {
            role: "none",
            ref: function ref(node) {
              return _this10.refDropdown = node;
            },
            onClick: function onClick(e) {
              e.stopPropagation();
            }
          }, /*#__PURE__*/React.createElement(FieldList, {
            groups: [{
              title: $l('Table', 'predefined_fields'),
              fields: this.originOrderQueryFields.slice(queryFieldsLimit)
            }],
            prefixCls: "".concat(prefixCls, "-filter-list") || 'c7n-pro-table-filter-list',
            closeMenu: function closeMenu() {
              return runInAction(function () {
                return _this10.fieldSelectHidden = true;
              });
            },
            value: selectFields,
            onSelect: this.handleSelect,
            onUnSelect: this.handleUnSelect
          })),
          trigger: [Action.click]
        }, /*#__PURE__*/React.createElement("span", {
          className: "".concat(prefixCls, "-add-fields"),
          onClick: function onClick(e) {
            e.nativeEvent.stopImmediatePropagation();
            runInAction(function () {
              _this10.fieldSelectHidden = false;
            });
          }
        }, /*#__PURE__*/React.createElement(Icon, {
          type: "add"
        }), $l('Table', 'add_filter'))))), singleLineModeAction));
      }

      return null;
    }
  }, {
    key: "handleQuery",
    value: function handleQuery(collapse) {
      var _this$props14 = this.props,
          dataSet = _this$props14.dataSet,
          _this$props14$onQuery = _this$props14.onQuery,
          onQuery = _this$props14$onQuery === void 0 ? noop : _this$props14$onQuery,
          autoQuery = _this$props14.autoQuery;

      if (autoQuery) {
        dataSet.query();
      }

      if (!collapse) {
        onQuery();
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props15 = this.props,
          summaryBar = _this$props15.summaryBar,
          buttons = _this$props15.buttons;
      var prefixCls = this.prefixCls;
      var queryBar = this.getQueryBar();

      if (queryBar) {
        return [queryBar, summaryBar];
      }

      return /*#__PURE__*/React.createElement(TableButtons, {
        key: "toolbar",
        prefixCls: "".concat(prefixCls, "-dynamic-filter-buttons"),
        buttons: buttons
      }, summaryBar);
    }
  }], [{
    key: "contextType",
    get: function get() {
      return ConfigContext;
    }
  }]);

  return TableDynamicFilterBar;
}(Component);

TableDynamicFilterBar.defaultProps = {
  queryFieldsLimit: 3,
  autoQueryAfterReset: true,
  fuzzyQuery: true,
  fuzzyQueryOnly: false,
  autoQuery: true,
  refreshBtn: true,
  buttons: []
};

__decorate([observable], TableDynamicFilterBar.prototype, "moreFields", void 0);

__decorate([observable], TableDynamicFilterBar.prototype, "fieldSelectHidden", void 0);

__decorate([observable], TableDynamicFilterBar.prototype, "expand", void 0);

__decorate([observable], TableDynamicFilterBar.prototype, "searchText", void 0);

__decorate([observable], TableDynamicFilterBar.prototype, "shouldLocateData", void 0);

__decorate([observable], TableDynamicFilterBar.prototype, "showExpandIcon", void 0);

__decorate([action], TableDynamicFilterBar.prototype, "handleClickOut", void 0);

__decorate([autobind], TableDynamicFilterBar.prototype, "handleDataSetQuery", null);

__decorate([autobind], TableDynamicFilterBar.prototype, "handleDataSetValidate", null);

__decorate([autobind], TableDynamicFilterBar.prototype, "setConditionStatus", null);

__decorate([action], TableDynamicFilterBar.prototype, "setOriginalConditionFields", void 0);

__decorate([autobind], TableDynamicFilterBar.prototype, "handleDataSetUpdate", null);

__decorate([autobind], TableDynamicFilterBar.prototype, "handleDataSetCreate", null);

__decorate([action], TableDynamicFilterBar.prototype, "initConditionFields", null);

__decorate([autobind], TableDynamicFilterBar.prototype, "initMenuDataSet", null);

__decorate([action], TableDynamicFilterBar.prototype, "handleSelect", void 0);

__decorate([action], TableDynamicFilterBar.prototype, "handleUnSelect", void 0);

__decorate([autobind], TableDynamicFilterBar.prototype, "handleQuery", null);

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