choerodon-ui/pro/es/performance-table/query-bar/TableProfessionalBar.js

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

import _extends from "@babel/runtime/helpers/extends";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
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 _regeneratorRuntime from "@babel/runtime/regenerator";
import { __decorate } from "tslib";
import React, { cloneElement, Component } from 'react';
import { observer } from 'mobx-react';
import { action, observable, runInAction } from 'mobx';
import isFunction from 'lodash/isFunction';
import omit from 'lodash/omit';
import noop from 'lodash/noop';
import Icon from '../../../../es/icon';
import { getProPrefixCls } from '../../../../es/configure/utils';
import Button from '../../button';
import TableContext from '../TableContext';
import { ButtonColor, FuncType } from '../../button/enum';
import Form from '../../form';
import { $l } from '../../locale-context';
import autobind from '../../_util/autobind';
import isEmpty from '../../_util/isEmpty';
import { TableQueryBarType } from '../../table/enum';

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

  var _super = _createSuper(TableProfessionalBar);

  function TableProfessionalBar() {
    var _this;

    _classCallCheck(this, TableProfessionalBar);

    _this = _super.apply(this, arguments);

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

      return _this.moreFields;
    };

    return _this;
  }

  _createClass(TableProfessionalBar, [{
    key: "prefixCls",
    get: function get() {
      if ('prefixCls' in this.props) {
        var _prefixCls = this.props.prefixCls;
        return _prefixCls;
      }

      var _this$context$tableSt = this.context.tableStore.prefixCls,
          prefixCls = _this$context$tableSt === void 0 ? getProPrefixCls('performance-table') : _this$context$tableSt;
      return 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) {
        runInAction(function () {
          _this2.moreFields = _this2.createFields(queryFields.slice(queryFieldsLimit));
        });
      }

      this.processDataSetListener(true);
    }
  }, {
    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 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref) {
        var _this3 = this;

        var result, _this$props2, queryFieldsLimit, queryFields, moreFields;

        return _regeneratorRuntime.wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                result = _ref.result;
                _this$props2 = this.props, queryFieldsLimit = _this$props2.queryFieldsLimit, queryFields = _this$props2.queryFields;
                moreFields = this.createFields(queryFields.slice(queryFieldsLimit));
                _context.next = 5;
                return result;

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

                runInAction(function () {
                  _this3.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 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(collapse) {
        var _this$props3, dataSet, queryDataSet, _this$props3$onQuery, onQuery, current, queryData, data;

        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
          while (1) {
            switch (_context2.prev = _context2.next) {
              case 0:
                _this$props3 = this.props, dataSet = _this$props3.dataSet, queryDataSet = _this$props3.queryDataSet, _this$props3$onQuery = _this$props3.onQuery, onQuery = _this$props3$onQuery === void 0 ? noop : _this$props3$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 = 15;
                  break;
                }

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

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

                current = queryDataSet.current;
                queryData = current ? omit(current.toData(true), ['__dirty']) : undefined;
                data = queryData ? Object.keys(queryData).reduce(function (p, key) {
                  var value = queryData[key];

                  if (!isEmpty(value)) {
                    p[key] = value;
                  }

                  return p;
                }, {}) : {};
                _context2.next = 15;
                return onQuery({
                  dataSet: dataSet,
                  queryDataSet: queryDataSet,
                  data: data
                });

              case 15:
              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.createElement(Button, {
        key: 'lov_reset_btn',
        className: "".concat(prefixCls, "-professional-reset-btn"),
        funcType: FuncType.raised,
        onClick: this.handleQueryReset
      }, $l('Table', 'reset_button'));
    }
  }, {
    key: "getMoreFieldsButton",
    value: function getMoreFieldsButton(fields) {
      var _this4 = this;

      var prefixCls = this.prefixCls;

      if (fields.length) {
        return /*#__PURE__*/React.createElement(Button, {
          className: "".concat(prefixCls, "-professional-query-more"),
          funcType: FuncType.raised,
          onClick: function onClick() {
            return _this4.openMore(fields);
          }
        }, $l('Table', 'more'), this.moreFields && this.moreFields.length ? /*#__PURE__*/React.createElement(Icon, {
          type: 'expand_less'
        }) : /*#__PURE__*/React.createElement(Icon, {
          type: 'expand_more'
        }));
      }
    }
    /**
     * 注入 onEnterDown 事件
     * @param elements
     */

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

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

        if (onEnterDown && isFunction(onEnterDown)) {
          return element;
        }

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

      var _this$props4 = this.props,
          queryFieldsLimit = _this$props4.queryFieldsLimit,
          queryFields = _this$props4.queryFields,
          queryDataSet = _this$props4.queryDataSet,
          queryFormProps = _this$props4.queryFormProps;
      var prefixCls = this.prefixCls;

      if (queryDataSet && queryFields.length) {
        var currentFields = /*#__PURE__*/React.createElement(Form, _extends({
          dataSet: queryDataSet,
          columns: queryFieldsLimit
        }, queryFormProps), this.createFields(queryFields.slice(0, queryFieldsLimit)), this.moreFields);
        var moreFields = this.createFields(queryFields.slice(queryFieldsLimit));
        var moreFieldsButton = this.getMoreFieldsButton(moreFields);
        return /*#__PURE__*/React.createElement("div", {
          key: "query_bar",
          className: "".concat(prefixCls, "-professional-query-bar")
        }, currentFields, /*#__PURE__*/React.createElement("span", {
          className: "".concat(prefixCls, "-professional-query-bar-button")
        }, moreFieldsButton, this.getResetButton(), /*#__PURE__*/React.createElement(Button, {
          color: ButtonColor.primary,
          wait: 500,
          onClick: function onClick() {
            return _this6.handleQuery();
          }
        }, $l('Table', 'query_button'))));
      }
    }
  }, {
    key: "handleQueryReset",
    value: function handleQueryReset() {
      var _this$props5 = this.props,
          queryDataSet = _this$props5.queryDataSet,
          _this$props5$onReset = _this$props5.onReset,
          onReset = _this$props5$onReset === void 0 ? noop : _this$props5$onReset;

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

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

        this.handleQuery(true);
      }
    }
  }, {
    key: "render",
    value: function render() {
      return this.getQueryBar();
    }
  }], [{
    key: "contextType",
    get: function get() {
      return TableContext;
    }
  }]);

  return TableProfessionalBar;
}(Component);

TableProfessionalBar.defaultProps = {
  queryFieldsLimit: 3
};
TableProfessionalBar.__TableQueryBarType = TableQueryBarType.professionalBar;

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

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

__decorate([autobind], TableProfessionalBar.prototype, "handleFieldEnter", null);

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

__decorate([action], TableProfessionalBar.prototype, "openMore", void 0);

__decorate([autobind], TableProfessionalBar.prototype, "handleQueryReset", null);

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