choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
274 lines (234 loc) • 9.93 kB
JavaScript
"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 _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 _noop = _interopRequireDefault(require("lodash/noop"));
var _isFunction = _interopRequireDefault(require("lodash/isFunction"));
var _utils = require("../../../../lib/configure/utils");
var _icon = _interopRequireDefault(require("../../../../lib/icon"));
var _FilterSelect = _interopRequireDefault(require("./FilterSelect"));
var _ColumnFilter = _interopRequireDefault(require("./ColumnFilter"));
var _TableContext = _interopRequireDefault(require("../TableContext"));
var _localeContext = require("../../locale-context");
var _select = _interopRequireDefault(require("../../select"));
var _enum = require("../../form/enum");
var _Option = _interopRequireDefault(require("../../option/Option"));
var _autobind = _interopRequireDefault(require("../../_util/autobind"));
var TableComboBar = /*#__PURE__*/function (_Component) {
(0, _inherits2["default"])(TableComboBar, _Component);
var _super = (0, _createSuper2["default"])(TableComboBar);
function TableComboBar() {
(0, _classCallCheck2["default"])(this, TableComboBar);
return _super.apply(this, arguments);
}
(0, _createClass2["default"])(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["default"].createElement(_ColumnFilter["default"], {
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["default"].createElement(_Option["default"], {
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["default"].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 && (0, _isFunction["default"])(onEnterDown)) {
return element;
}
var props = {
onEnterDown: this.handleFieldEnter,
labelLayout: _enum.LabelLayout.none,
dataSet: queryDataSet,
name: fieldName,
addonBefore: /*#__PURE__*/_react["default"].createElement(_select["default"], {
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__*/(0, _react.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["default"].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["default"].createElement("div", {
key: "toolbar",
className: "".concat(prefixCls, "-toolbar")
}, /*#__PURE__*/_react["default"].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["default"].createElement("div", {
key: "combo_toolbar",
className: "".concat(defaultPrefixCls)
}, dropDownArea && !isFold && /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(defaultPrefixCls, "-action-button")
}, dropDownArea()), !isFold && /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(defaultPrefixCls, "-filter-title")
}, title), buttonArea && !isFold && /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(defaultPrefixCls, "-filter-buttons")
}, buttonArea()), searchable && !isFold && /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(defaultPrefixCls, "-filter")
}, /*#__PURE__*/_react["default"].createElement("span", null, (0, _localeContext.$l)('Table', 'query_button'), ":"), queryBar), fold && /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(defaultPrefixCls, "-fold"),
onClick: function onClick() {
return _this2.handleFold();
}
}, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
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 ? (0, _localeContext.$l)('Table', 'filter_bar_placeholder') : _this$props5$placehol,
_this$props5$onQuery = _this$props5.onQuery,
onQuery = _this$props5$onQuery === void 0 ? _noop["default"] : _this$props5$onQuery,
_this$props5$onReset = _this$props5.onReset,
onReset = _this$props5$onReset === void 0 ? _noop["default"] : _this$props5$onReset;
var isFold = this.context.tableStore.isFold;
var filterbBr = this.getFilterbar();
var buttons = this.getButtons();
return [filterbBr, !isFold && buttons, !isFold && /*#__PURE__*/_react["default"].createElement(_FilterSelect["default"], {
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["default"];
}
}]);
return TableComboBar;
}(_react.Component);
TableComboBar.defaultProps = {
prefixCls: (0, _utils.getProPrefixCls)('table'),
paramName: 'params',
queryHeaderConfig: {}
};
(0, _tslib.__decorate)([_autobind["default"]], TableComboBar.prototype, "handleFieldEnter", null);
(0, _tslib.__decorate)([_autobind["default"]], TableComboBar.prototype, "createFields", null);
TableComboBar = (0, _tslib.__decorate)([_mobxReact.observer], TableComboBar);
var _default = TableComboBar;
exports["default"] = _default;
//# sourceMappingURL=TableComboBar.js.map