choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
310 lines (255 loc) • 10 kB
JavaScript
;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
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 _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _tslib = require("tslib");
var _react = _interopRequireWildcard(require("react"));
var _mobxReact = require("mobx-react");
var _noop = _interopRequireDefault(require("lodash/noop"));
var _UnitConvertor = require("../../../../lib/_util/UnitConvertor");
var _utils = require("../../../../lib/configure/utils");
var _Button = _interopRequireDefault(require("../../button/Button"));
var _enum = require("../../button/enum");
var _modal = _interopRequireDefault(require("../../modal"));
var _Form = _interopRequireDefault(require("../../form/Form"));
var _icon = _interopRequireDefault(require("../../icon"));
var _localeContext = require("../../locale-context");
var _autobind = _interopRequireDefault(require("../../_util/autobind"));
var _TableButtons = _interopRequireDefault(require("./TableButtons"));
function _createSuper(Derived) {
function isNativeReflectConstruct() {
if (typeof Reflect === "undefined" || !Reflect.construct) return false;
if (Reflect.construct.sham) return false;
if (typeof Proxy === "function") return true;
try {
Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
return true;
} catch (e) {
return false;
}
}
return function () {
var Super = (0, _getPrototypeOf2["default"])(Derived),
result;
if (isNativeReflectConstruct()) {
var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor;
result = Reflect.construct(Super, arguments, NewTarget);
} else {
result = Super.apply(this, arguments);
}
return (0, _possibleConstructorReturn2["default"])(this, result);
};
}
var TableToolBar =
/*#__PURE__*/
function (_Component) {
(0, _inherits2["default"])(TableToolBar, _Component);
var _super = _createSuper(TableToolBar);
function TableToolBar() {
(0, _classCallCheck2["default"])(this, TableToolBar);
return _super.apply(this, arguments);
}
(0, _createClass2["default"])(TableToolBar, [{
key: "handleFieldEnter",
value: function handleFieldEnter() {
this.handleQuery();
if (this.modal) {
this.modal.close();
}
}
}, {
key: "handleQueryReset",
value: function handleQueryReset() {
var _this$props = this.props,
queryDataSet = _this$props.queryDataSet,
_this$props$onReset = _this$props.onReset,
onReset = _this$props$onReset === void 0 ? _noop["default"] : _this$props$onReset;
if (queryDataSet) {
var current = queryDataSet.current;
if (current) {
current.reset();
onReset();
}
this.handleQuery(true);
}
}
}, {
key: "handleQuery",
value: function () {
var _handleQuery = (0, _asyncToGenerator2["default"])(
/*#__PURE__*/
_regenerator["default"].mark(function _callee(collapse) {
var _this$props2, dataSet, queryDataSet, _this$props2$onQuery, onQuery;
return _regenerator["default"].wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.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;
_context.next = 3;
return queryDataSet === null || queryDataSet === void 0 ? void 0 : queryDataSet.validate();
case 3:
if (!_context.sent) {
_context.next = 6;
break;
}
dataSet.query();
if (!collapse) {
onQuery();
}
case 6:
case "end":
return _context.stop();
}
}
}, _callee, this);
}));
function handleQuery(_x) {
return _handleQuery.apply(this, arguments);
}
return handleQuery;
}()
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
if (this.modal) {
this.modal.close(true);
}
}
}, {
key: "getQueryBar",
value: function getQueryBar() {
var _this = this;
var _this$props3 = this.props,
prefixCls = _this$props3.prefixCls,
queryFieldsLimit = _this$props3.queryFieldsLimit,
queryFields = _this$props3.queryFields,
queryDataSet = _this$props3.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 more;
var dirtyInfo;
if (moreFields.length) {
more = this.getMoreButton(moreFields);
dirtyInfo = this.getDirtyInfo(queryDataSet, moreFields);
}
return _react["default"].createElement("span", {
className: "".concat(prefixCls, "-query-bar")
}, dirtyInfo, currentFields, _react["default"].createElement(_Button["default"], {
color: _enum.ButtonColor.primary,
onClick: function onClick() {
_this.handleQuery();
}
}, (0, _localeContext.$l)('Table', 'query_button')), more);
}
}
}, {
key: "getDirtyInfo",
value: function getDirtyInfo(dataSet, moreFields) {
if (dataSet && moreFields.some(function (element) {
var name = element.props.name;
var field = dataSet.getField(name);
return field ? field.isDirty(dataSet.current) : false;
})) {
var prefixCls = this.props.prefixCls;
return _react["default"].createElement("span", {
className: "".concat(prefixCls, "-query-bar-dirty-info")
}, _react["default"].createElement(_icon["default"], {
type: "info"
}), _react["default"].createElement("span", null, (0, _localeContext.$l)('Table', 'dirty_info')), _react["default"].createElement("a", {
onClick: this.handleQueryReset
}, (0, _localeContext.$l)('Table', 'restore')));
}
}
}, {
key: "getMoreButton",
value: function getMoreButton(moreFields) {
var _this2 = this;
return _react["default"].createElement(_Button["default"], {
color: _enum.ButtonColor.primary,
funcType: _enum.FuncType.flat,
onClick: function onClick() {
return _this2.openMore(moreFields);
}
}, (0, _localeContext.$l)('Table', 'advanced_search'));
}
}, {
key: "createFields",
value: function createFields(elements, dataSet, isMore) {
var _this3 = this;
return elements.map(function (element, index) {
var name = element.props.name;
var props = {
autoFocus: isMore && index === 0,
onEnterDown: _this3.handleFieldEnter,
style: isMore ? undefined : {
width: (0, _UnitConvertor.pxToRem)(130)
}
};
var field = dataSet.getField(name);
if (field) {
var label = field.get('label');
if (label) {
if (isMore) {
props.label = label;
} else {
props.placeholder = label;
}
}
}
return (0, _react.cloneElement)(element, props);
});
}
}, {
key: "openMore",
value: function openMore(children) {
this.modal = _modal["default"].open({
title: (0, _localeContext.$l)('Table', 'advanced_search'),
children: _react["default"].createElement(_Form["default"], null, children),
okText: (0, _localeContext.$l)('Table', 'query_button'),
onOk: this.handleQuery,
style: {
width: (0, _UnitConvertor.pxToRem)(400)
},
drawer: true
});
}
}, {
key: "render",
value: function render() {
var _this$props4 = this.props,
prefixCls = _this$props4.prefixCls,
pagination = _this$props4.pagination,
buttons = _this$props4.buttons;
return [_react["default"].createElement(_TableButtons["default"], {
key: "toolbar",
prefixCls: prefixCls,
buttons: buttons
}, this.getQueryBar()), pagination];
}
}]);
return TableToolBar;
}(_react.Component);
TableToolBar.displayName = 'TableToolBar';
TableToolBar.defaultProps = {
prefixCls: (0, _utils.getProPrefixCls)('table'),
queryFieldsLimit: 1,
pagination: null
};
(0, _tslib.__decorate)([_autobind["default"]], TableToolBar.prototype, "handleFieldEnter", null);
(0, _tslib.__decorate)([_autobind["default"]], TableToolBar.prototype, "handleQueryReset", null);
(0, _tslib.__decorate)([_autobind["default"]], TableToolBar.prototype, "handleQuery", null);
TableToolBar = (0, _tslib.__decorate)([_mobxReact.observer], TableToolBar);
var _default = TableToolBar;
exports["default"] = _default;
//# sourceMappingURL=TableToolBar.js.map