choerodon-ui/pro/lib/table/query-bar/TableProfessionalBar.js

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

"use strict";

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

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

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

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

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

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

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

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

var _tslib = require("tslib");

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

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

var _mobx = require("mobx");

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

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

var _classnames = _interopRequireDefault(require("classnames"));

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

var _utils = require("../../../../lib/configure/utils");

var _TableButtons = _interopRequireDefault(require("./TableButtons"));

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

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

var _enum = require("../../button/enum");

var _form = _interopRequireDefault(require("../../form"));

var _enum2 = require("../../form/enum");

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

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

var _enum3 = require("../../core/enum");

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

  var _super = (0, _createSuper2["default"])(TableProfessionalBar);

  function TableProfessionalBar() {
    var _this;

    (0, _classCallCheck2["default"])(this, TableProfessionalBar);
    _this = _super.apply(this, arguments);

    _this.openMore = function (fields) {
      var tableStore = _this.context.tableStore;

      if (_this.moreFields && _this.moreFields.length) {
        _this.moreFields = [];
      } else {
        _this.moreFields = fields;
      }

      if (tableStore.node) {
        tableStore.node.handleHeightTypeChange();
      }

      return _this.moreFields;
    };

    return _this;
  }

  (0, _createClass2["default"])(TableProfessionalBar, [{
    key: "queryFields",
    get: function get() {
      var queryFields = this.props.queryFields;
      return queryFields.filter(function (component) {
        return !component.props.hidden;
      });
    }
  }, {
    key: "prefixCls",
    get: function get() {
      var prefixCls = this.props.prefixCls;
      var _this$context$tableSt = this.context.tableStore.getProPrefixCls,
          getProPrefixCls = _this$context$tableSt === void 0 ? _utils.getProPrefixCls : _this$context$tableSt;
      return getProPrefixCls('table', prefixCls);
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this2 = this;

      var _this$props = this.props,
          queryFieldsLimit = _this$props.queryFieldsLimit,
          queryFields = _this$props.queryFields,
          queryDataSet = _this$props.queryDataSet,
          defaultExpanded = _this$props.defaultExpanded;

      if (queryDataSet && queryFields.length && defaultExpanded) {
        (0, _mobx.runInAction)(function () {
          _this2.moreFields = _this2.createFields(queryFields.filter(function (f) {
            return !f.props.hidden;
          }).slice(queryFieldsLimit));
        });
      }

      this.processDataSetListener(true);
    }
  }, {
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps, _) {
      var _this3 = this;

      var queryFieldsLimit = nextProps.queryFieldsLimit,
          queryFields = nextProps.queryFields,
          queryDataSet = nextProps.queryDataSet,
          defaultExpanded = nextProps.defaultExpanded;

      if (queryDataSet && queryFields.length && (defaultExpanded || this.moreFields && this.moreFields.length)) {
        (0, _mobx.runInAction)(function () {
          _this3.moreFields = _this3.createFields(queryFields.filter(function (f) {
            return !f.props.hidden;
          }).slice(queryFieldsLimit));
        });
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      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);
      }
    }
    /**
     * queryDataSet 查询前校验事件 触发展开动态字段
     * @param dataSet 查询DS
     * @param result
     */

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

        var result, queryFieldsLimit, moreFields;
        return _regenerator["default"].wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                result = _ref.result;
                queryFieldsLimit = this.props.queryFieldsLimit;
                moreFields = this.createFields(this.queryFields.slice(queryFieldsLimit));
                _context.next = 5;
                return result;

              case 5:
                if (_context.sent) {
                  _context.next = 7;
                  break;
                }

                (0, _mobx.runInAction)(function () {
                  _this4.moreFields = moreFields;
                });

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

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

      return handleDataSetValidate;
    }()
  }, {
    key: "handleFieldEnter",
    value: function handleFieldEnter() {
      this.handleQuery();
    }
  }, {
    key: "handleQuery",
    value: function () {
      var _handleQuery = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(collapse) {
        var _this$props2, dataSet, queryDataSet, _this$props2$onQuery, onQuery;

        return _regenerator["default"].wrap(function _callee2$(_context2) {
          while (1) {
            switch (_context2.prev = _context2.next) {
              case 0:
                _this$props2 = this.props, dataSet = _this$props2.dataSet, queryDataSet = _this$props2.queryDataSet, _this$props2$onQuery = _this$props2.onQuery, onQuery = _this$props2$onQuery === void 0 ? _noop["default"] : _this$props2$onQuery;
                _context2.t0 = queryDataSet;

                if (!_context2.t0) {
                  _context2.next = 6;
                  break;
                }

                _context2.next = 5;
                return queryDataSet.validate();

              case 5:
                _context2.t0 = _context2.sent;

              case 6:
                if (!_context2.t0) {
                  _context2.next = 12;
                  break;
                }

                _context2.next = 9;
                return dataSet.query();

              case 9:
                if (collapse) {
                  _context2.next = 12;
                  break;
                }

                _context2.next = 12;
                return onQuery();

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

      function handleQuery(_x2) {
        return _handleQuery.apply(this, arguments);
      }

      return handleQuery;
    }()
  }, {
    key: "getResetButton",
    value: function getResetButton() {
      var prefixCls = this.prefixCls;
      return /*#__PURE__*/_react["default"].createElement(_button["default"], {
        key: 'lov_reset_btn',
        className: "".concat(prefixCls, "-professional-reset-btn"),
        funcType: _enum.FuncType.raised,
        onClick: this.handleQueryReset
      }, (0, _localeContext.$l)('Table', 'reset_button'));
    }
  }, {
    key: "getMoreFieldsButton",
    value: function getMoreFieldsButton(fields) {
      var _this5 = this;

      var prefixCls = this.prefixCls;

      if (fields.length) {
        return /*#__PURE__*/_react["default"].createElement(_button["default"], {
          className: "".concat(prefixCls, "-professional-query-more"),
          funcType: _enum.FuncType.raised,
          onClick: function onClick() {
            return _this5.openMore(fields);
          }
        }, (0, _localeContext.$l)('Table', 'more'), this.moreFields && this.moreFields.length ? /*#__PURE__*/_react["default"].createElement(_icon["default"], {
          type: 'expand_less'
        }) : /*#__PURE__*/_react["default"].createElement(_icon["default"], {
          type: 'expand_more'
        }));
      }
    }
    /**
     * 注入 onEnterDown 事件
     * @param elements
     */

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

      return elements.map(function (element) {
        var onEnterDown = element.props.onEnterDown;

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

        var props = {
          onEnterDown: _this6.handleFieldEnter
        };
        return /*#__PURE__*/(0, _react.cloneElement)(element, props);
      });
    }
  }, {
    key: "getQueryBar",
    value: function getQueryBar() {
      var _this7 = this;

      var _this$props3 = this.props,
          queryFieldsLimit = _this$props3.queryFieldsLimit,
          queryFields = _this$props3.queryFields,
          queryDataSet = _this$props3.queryDataSet,
          formProps = _this$props3.formProps;
      var prefixCls = this.prefixCls;

      if (queryDataSet && queryFields.length) {
        var currentFields = /*#__PURE__*/_react["default"].createElement(_form["default"], (0, _extends2["default"])({
          dataSet: queryDataSet,
          columns: queryFieldsLimit,
          labelTooltip: _enum3.Tooltip.overflow,
          labelWidth: 80
        }, formProps), this.createFields(this.queryFields.slice(0, queryFieldsLimit)), this.moreFields);

        var moreFields = this.createFields(this.queryFields.slice(queryFieldsLimit));
        var moreFieldsButton = this.getMoreFieldsButton(moreFields);
        var noVerticalFlag = false;
        var labelLayout = formProps && formProps.labelLayout || (0, _utils.getConfig)('labelLayout');

        if (labelLayout !== _enum2.LabelLayout.vertical) {
          noVerticalFlag = true;
        }

        return /*#__PURE__*/_react["default"].createElement("div", {
          key: "query_bar",
          className: "".concat(prefixCls, "-professional-query-bar")
        }, currentFields, /*#__PURE__*/_react["default"].createElement("span", {
          className: (0, _classnames["default"])("".concat(prefixCls, "-professional-query-bar-button"), (0, _defineProperty2["default"])({}, "".concat(prefixCls, "-professional-query-bar-button-vertical"), !noVerticalFlag))
        }, moreFieldsButton, this.getResetButton(), /*#__PURE__*/_react["default"].createElement(_button["default"], {
          color: _enum.ButtonColor.primary,
          wait: 500,
          onClick: function onClick() {
            return _this7.handleQuery();
          }
        }, (0, _localeContext.$l)('Table', 'query_button'))));
      }
    }
  }, {
    key: "handleQueryReset",
    value: function handleQueryReset() {
      var _this$props4 = this.props,
          queryDataSet = _this$props4.queryDataSet,
          autoQueryAfterReset = _this$props4.autoQueryAfterReset,
          _this$props4$onReset = _this$props4.onReset,
          onReset = _this$props4$onReset === void 0 ? _noop["default"] : _this$props4$onReset;

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

        if (current) {
          current.reset();
          onReset();

          if (autoQueryAfterReset) {
            this.handleQuery(true);
          }
        }
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props5 = this.props,
          buttons = _this$props5.buttons,
          summaryBar = _this$props5.summaryBar;
      var prefixCls = this.prefixCls;
      var queryBar = this.getQueryBar();
      var tableButtons = buttons.length ? /*#__PURE__*/_react["default"].createElement("div", {
        key: "professional_toolbar",
        className: "".concat(prefixCls, "-professional-toolbar")
      }, /*#__PURE__*/_react["default"].createElement(_TableButtons["default"], {
        key: "table_buttons",
        prefixCls: prefixCls,
        buttons: buttons
      }, summaryBar)) : /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefixCls, "-toolbar"),
        key: "professional_toolbar"
      }, summaryBar);
      return [queryBar, tableButtons];
    }
  }], [{
    key: "contextType",
    get: function get() {
      return _TableContext["default"];
    }
  }]);
  return TableProfessionalBar;
}(_react.Component);

TableProfessionalBar.defaultProps = {
  queryFieldsLimit: 3,
  autoQueryAfterReset: true
};
(0, _tslib.__decorate)([_mobx.observable], TableProfessionalBar.prototype, "moreFields", void 0);
(0, _tslib.__decorate)([_autobind["default"]], TableProfessionalBar.prototype, "handleDataSetValidate", null);
(0, _tslib.__decorate)([_autobind["default"]], TableProfessionalBar.prototype, "handleFieldEnter", null);
(0, _tslib.__decorate)([_autobind["default"]], TableProfessionalBar.prototype, "handleQuery", null);
(0, _tslib.__decorate)([_mobx.action], TableProfessionalBar.prototype, "openMore", void 0);
(0, _tslib.__decorate)([_autobind["default"]], TableProfessionalBar.prototype, "handleQueryReset", null);
TableProfessionalBar = (0, _tslib.__decorate)([_mobxReact.observer], TableProfessionalBar);
var _default = TableProfessionalBar;
exports["default"] = _default;
//# sourceMappingURL=TableProfessionalBar.js.map