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

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

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 { __decorate } from "tslib";
import React, { cloneElement, Component } from 'react';
import { observer } from 'mobx-react';
import noop from 'lodash/noop';
import isFunction from 'lodash/isFunction';
import { getProPrefixCls } from '../../../../es/configure/utils';
import Icon from '../../../../es/icon';
import FilterSelect from './FilterSelect';
import ColumnFilter from './ColumnFilter';
import TableContext from '../TableContext';
import { $l } from '../../locale-context';
import ObserverSelect from '../../select';
import { LabelLayout } from '../../form/enum';
import Option from '../../option/Option';
import autobind from '../../_util/autobind';

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

  var _super = _createSuper(TableComboBar);

  function TableComboBar() {
    _classCallCheck(this, TableComboBar);

    return _super.apply(this, arguments);
  }

  _createClass(TableComboBar, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var queryDataSet = this.props.queryDataSet;

      if (queryDataSet) {
        queryDataSet.setState('currentField', queryDataSet.fields.keys().next().value || '');
      }
    }
  }, {
    key: "renderSuffix",
    value: function renderSuffix() {
      var prefixCls = this.props.prefixCls;
      return /*#__PURE__*/React.createElement(ColumnFilter, {
        prefixCls: prefixCls
      });
    }
  }, {
    key: "getFieldLabel",
    value: function getFieldLabel(field, record) {
      return field.get('label', record) || field.name;
    }
  }, {
    key: "getFieldSelectOptions",
    value: function getFieldSelectOptions() {
      var _this = this;

      var queryDataSet = this.props.queryDataSet;
      var data = [];

      if (queryDataSet) {
        var current = queryDataSet.current;
        queryDataSet.fields.forEach(function (field, key) {
          if (!field.get('bind', current)) {
            data.push( /*#__PURE__*/React.createElement(Option, {
              key: String(key),
              value: String(key)
            }, _this.getFieldLabel(field, current)));
          }
        });
      }

      return data;
    }
  }, {
    key: "handleFieldEnter",
    value: function handleFieldEnter(e) {
      e.stopPropagation();
    }
  }, {
    key: "createFields",
    value: function createFields(element) {
      if (!element) {
        return /*#__PURE__*/React.createElement('span');
      }

      var _this$props = this.props,
          queryDataSet = _this$props.queryDataSet,
          prefixCls = _this$props.prefixCls;
      var _element$props = element.props,
          onEnterDown = _element$props.onEnterDown,
          fieldName = _element$props.name;

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

      var props = {
        onEnterDown: this.handleFieldEnter,
        labelLayout: LabelLayout.none,
        dataSet: queryDataSet,
        name: fieldName,
        addonBefore: /*#__PURE__*/React.createElement(ObserverSelect, {
          className: "".concat(prefixCls, "-combo-toolbar-select"),
          clearButton: false,
          value: queryDataSet && queryDataSet.getState('currentField'),
          onChange: function onChange(value) {
            if (queryDataSet) {
              queryDataSet.setState('currentField', value);
            }
          }
        }, this.getFieldSelectOptions())
      };
      return /*#__PURE__*/cloneElement(element, props);
    }
  }, {
    key: "getQueryBar",
    value: function getQueryBar() {
      var _this$props2 = this.props,
          prefixCls = _this$props2.prefixCls,
          queryDataSet = _this$props2.queryDataSet,
          queryFields = _this$props2.queryFields;

      if (queryDataSet) {
        var currentField = this.createFields(queryFields.find(function (queryField) {
          return queryField.key === queryDataSet.getState('currentField');
        }));
        return /*#__PURE__*/React.createElement("div", {
          key: "query_bar",
          className: "".concat(prefixCls, "-combo-query-bar")
        }, currentField);
      }
    }
  }, {
    key: "handleFold",
    value: function handleFold() {
      var tableStore = this.context.tableStore;
      tableStore.setFold();
    }
  }, {
    key: "getButtons",
    value: function getButtons() {
      var _this$props3 = this.props,
          prefixCls = _this$props3.prefixCls,
          buttons = _this$props3.buttons;

      if (buttons.length) {
        return /*#__PURE__*/React.createElement("div", {
          key: "toolbar",
          className: "".concat(prefixCls, "-toolbar")
        }, /*#__PURE__*/React.createElement("span", {
          className: "".concat(prefixCls, "-toolbar-button-group")
        }, buttons));
      }
    }
  }, {
    key: "getFilterbar",
    value: function getFilterbar() {
      var _this2 = this;

      var isFold = this.context.tableStore.isFold;
      var _this$props4 = this.props,
          prefixCls = _this$props4.prefixCls,
          buttonArea = _this$props4.buttonArea,
          dropDownArea = _this$props4.dropDownArea,
          searchable = _this$props4.searchable,
          title = _this$props4.title,
          fold = _this$props4.fold;
      var queryBar = this.getQueryBar();
      var defaultPrefixCls = "".concat(prefixCls, "-combo-toolbar");

      if (buttonArea || dropDownArea || searchable || title || fold) {
        return /*#__PURE__*/React.createElement("div", {
          key: "combo_toolbar",
          className: "".concat(defaultPrefixCls)
        }, dropDownArea && !isFold && /*#__PURE__*/React.createElement("div", {
          className: "".concat(defaultPrefixCls, "-action-button")
        }, dropDownArea()), !isFold && /*#__PURE__*/React.createElement("div", {
          className: "".concat(defaultPrefixCls, "-filter-title")
        }, title), buttonArea && !isFold && /*#__PURE__*/React.createElement("div", {
          className: "".concat(defaultPrefixCls, "-filter-buttons")
        }, buttonArea()), searchable && !isFold && /*#__PURE__*/React.createElement("div", {
          className: "".concat(defaultPrefixCls, "-filter")
        }, /*#__PURE__*/React.createElement("span", null, $l('Table', 'query_button'), ":"), queryBar), fold && /*#__PURE__*/React.createElement("div", {
          className: "".concat(defaultPrefixCls, "-fold"),
          onClick: function onClick() {
            return _this2.handleFold();
          }
        }, /*#__PURE__*/React.createElement(Icon, {
          type: isFold ? 'indeterminate_check_box-o' : 'add_box-o'
        })));
      }

      return null;
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props5 = this.props,
          prefixCls = _this$props5.prefixCls,
          dataSet = _this$props5.dataSet,
          queryDataSet = _this$props5.queryDataSet,
          paramName = _this$props5.paramName,
          _this$props5$placehol = _this$props5.placeholder,
          placeholder = _this$props5$placehol === void 0 ? $l('Table', 'filter_bar_placeholder') : _this$props5$placehol,
          _this$props5$onQuery = _this$props5.onQuery,
          onQuery = _this$props5$onQuery === void 0 ? noop : _this$props5$onQuery,
          _this$props5$onReset = _this$props5.onReset,
          onReset = _this$props5$onReset === void 0 ? noop : _this$props5$onReset;
      var isFold = this.context.tableStore.isFold;
      var filterbBr = this.getFilterbar();
      var buttons = this.getButtons();
      return [filterbBr, !isFold && buttons, !isFold && /*#__PURE__*/React.createElement(FilterSelect, {
        key: "filter",
        prefixCls: "".concat(prefixCls, "-filter-select"),
        optionDataSet: dataSet,
        queryDataSet: queryDataSet,
        placeholder: placeholder,
        suffix: this.renderSuffix(),
        paramName: paramName,
        onQuery: onQuery,
        onReset: onReset
      })];
    }
  }], [{
    key: "contextType",
    get: function get() {
      return TableContext;
    }
  }]);

  return TableComboBar;
}(Component);

TableComboBar.defaultProps = {
  prefixCls: getProPrefixCls('table'),
  paramName: 'params',
  queryHeaderConfig: {}
};

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

__decorate([autobind], TableComboBar.prototype, "createFields", null);

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