choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
279 lines (235 loc) • 9.53 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 _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
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 _isFunction = _interopRequireDefault(require("lodash/isFunction"));
var _noop = _interopRequireDefault(require("lodash/noop"));
var _UnitConvertor = require("../../../../lib/_util/UnitConvertor");
var _utils = require("../../../../lib/configure/utils");
var _button = _interopRequireDefault(require("../../button"));
var _enum = require("../../button/enum");
var _localeContext = require("../../locale-context");
var _autobind = _interopRequireDefault(require("../../_util/autobind"));
var _TableButtons = _interopRequireDefault(require("./TableButtons"));
var _FilterSelect = _interopRequireDefault(require("./FilterSelect"));
var _modal = _interopRequireDefault(require("../../modal"));
var _Form = _interopRequireDefault(require("../../form/Form"));
var _enum2 = require("../../form/enum");
var TableAdvancedQueryBar = /*#__PURE__*/function (_Component) {
(0, _inherits2["default"])(TableAdvancedQueryBar, _Component);
var _super = (0, _createSuper2["default"])(TableAdvancedQueryBar);
function TableAdvancedQueryBar() {
(0, _classCallCheck2["default"])(this, TableAdvancedQueryBar);
return _super.apply(this, arguments);
}
(0, _createClass2["default"])(TableAdvancedQueryBar, [{
key: "componentWillUnmount",
value: function componentWillUnmount() {
if (this.modal) {
this.modal.close(true);
}
}
}, {
key: "handleFieldEnter",
value: function handleFieldEnter() {
this.handleQuery();
if (this.modal) {
this.modal.close();
}
}
}, {
key: "handleQuery",
value: function handleQuery() {
var dataSet = this.props.dataSet;
dataSet.query();
}
}, {
key: "valueFilter",
value: function valueFilter(value) {
var _this$props = this.props,
queryFields = _this$props.queryFields,
queryFieldsLimit = _this$props.queryFieldsLimit;
return queryFields.slice(0, queryFieldsLimit).every(function (element) {
return element.props.name !== value;
});
}
}, {
key: "getMoreFieldsButton",
value: function getMoreFieldsButton(fields) {
var _this = this;
if (fields.length) {
return /*#__PURE__*/_react["default"].createElement(_button["default"], {
funcType: _enum.FuncType.raised,
color: _enum.ButtonColor.primary,
onClick: function onClick() {
return _this.openMore(fields);
}
}, (0, _localeContext.$l)('Table', 'advanced_query'));
}
}
}, {
key: "openMore",
value: function openMore(children) {
this.modal = _modal["default"].open({
title: (0, _localeContext.$l)('Table', 'advanced_query'),
children: /*#__PURE__*/_react["default"].createElement(_Form["default"], {
labelLayout: _enum2.LabelLayout["float"]
}, children),
okText: (0, _localeContext.$l)('Table', 'query_button'),
onOk: this.handleQuery,
style: {
width: (0, _UnitConvertor.pxToRem)(380)
},
drawer: true
});
}
}, {
key: "getResetButton",
value: function getResetButton() {
return /*#__PURE__*/_react["default"].createElement(_button["default"], {
funcType: _enum.FuncType.raised,
onClick: this.handleQueryReset
}, (0, _localeContext.$l)('Table', 'reset_button'));
}
}, {
key: "getQueryBar",
value: function getQueryBar() {
var _this$props2 = this.props,
prefixCls = _this$props2.prefixCls,
queryFieldsLimit = _this$props2.queryFieldsLimit,
queryFields = _this$props2.queryFields,
buttons = _this$props2.buttons,
queryDataSet = _this$props2.queryDataSet;
if (queryDataSet && queryFields.length) {
var currentFields = this.createFields(queryFields.slice(0, queryFieldsLimit), queryDataSet, false);
var moreFields = this.createFields(queryFields.slice(queryFieldsLimit), queryDataSet, true);
var moreFieldsButton = this.getMoreFieldsButton(moreFields);
return /*#__PURE__*/_react["default"].createElement("div", {
key: "toolbar",
className: "".concat(prefixCls, "-advanced-query-bar")
}, currentFields, /*#__PURE__*/_react["default"].createElement("span", {
className: "".concat(prefixCls, "-advanced-query-bar-button")
}, this.getResetButton(), moreFieldsButton, buttons));
}
}
}, {
key: "createFields",
value: function createFields(elements, dataSet, isMore) {
var _this2 = this;
return elements.map(function (element) {
var _element$props = element.props,
name = _element$props.name,
style = _element$props.style,
onEnterDown = _element$props.onEnterDown;
var newStyle = {};
if (!isMore) {
newStyle.width = (0, _UnitConvertor.pxToRem)(260);
newStyle.marginRight = (0, _UnitConvertor.pxToRem)(10);
}
var props = {
onEnterDown: (0, _isFunction["default"])(onEnterDown) ? onEnterDown : _this2.handleFieldEnter,
labelLayout: _enum2.LabelLayout["float"],
style: (0, _objectSpread2["default"])({
marginRight: !isMore ? (0, _UnitConvertor.pxToRem)(10) : 0
}, style)
};
var field = dataSet.getField(name);
if (field) {
var label = field.get('label');
if (label) {
if (isMore) {
props.label = label;
} else {
props.placeholder = label;
}
}
}
return /*#__PURE__*/(0, _react.cloneElement)(element, props);
});
}
}, {
key: "handleQueryReset",
value: function handleQueryReset() {
var _this$props3 = this.props,
queryDataSet = _this$props3.queryDataSet,
dataSet = _this$props3.dataSet,
queryFields = _this$props3.queryFields,
_this$props3$onReset = _this$props3.onReset,
onReset = _this$props3$onReset === void 0 ? _noop["default"] : _this$props3$onReset;
if (queryDataSet) {
var current = queryDataSet.current;
if (current) {
current.reset();
onReset();
}
dataSet.fireEvent('queryBarReset', {
dataSet: dataSet,
queryFields: queryFields
});
this.handleQuery();
}
}
}, {
key: "getFilterSelect",
value: function getFilterSelect() {
var _this$props4 = this.props,
prefixCls = _this$props4.prefixCls,
dataSet = _this$props4.dataSet,
queryDataSet = _this$props4.queryDataSet,
_this$props4$onQuery = _this$props4.onQuery,
onQuery = _this$props4$onQuery === void 0 ? _noop["default"] : _this$props4$onQuery;
return /*#__PURE__*/_react["default"].createElement(_FilterSelect["default"], {
key: "filter",
prefixCls: "".concat(prefixCls, "-filter-select"),
className: "".concat(prefixCls, "-advanced-query-bar-options"),
optionDataSet: dataSet,
queryDataSet: queryDataSet,
prefix: "".concat((0, _localeContext.$l)('Table', 'advanced_query_conditions'), ":"),
editable: false,
filter: this.valueFilter,
hiddenIfNone: true,
onQuery: onQuery
});
}
}, {
key: "render",
value: function render() {
var _this$props5 = this.props,
buttons = _this$props5.buttons,
prefixCls = _this$props5.prefixCls;
var queryBar = this.getQueryBar();
if (queryBar) {
return [queryBar, this.getFilterSelect()];
}
return /*#__PURE__*/_react["default"].createElement(_TableButtons["default"], {
key: "toolbar",
prefixCls: prefixCls,
buttons: buttons
});
}
}]);
return TableAdvancedQueryBar;
}(_react.Component);
TableAdvancedQueryBar.defaultProps = {
prefixCls: (0, _utils.getProPrefixCls)('table'),
queryFieldsLimit: 1
};
(0, _tslib.__decorate)([_autobind["default"]], TableAdvancedQueryBar.prototype, "handleFieldEnter", null);
(0, _tslib.__decorate)([_autobind["default"]], TableAdvancedQueryBar.prototype, "handleQuery", null);
(0, _tslib.__decorate)([_autobind["default"]], TableAdvancedQueryBar.prototype, "valueFilter", null);
(0, _tslib.__decorate)([_autobind["default"]], TableAdvancedQueryBar.prototype, "handleQueryReset", null);
TableAdvancedQueryBar = (0, _tslib.__decorate)([_mobxReact.observer], TableAdvancedQueryBar);
var _default = TableAdvancedQueryBar;
exports["default"] = _default;
//# sourceMappingURL=TableAdvancedQueryBar.js.map