choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
796 lines (688 loc) • 27.2 kB
JavaScript
import _regeneratorRuntime from "@babel/runtime/regenerator";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
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 = _getPrototypeOf(Derived),
result;
if (isNativeReflectConstruct()) {
var NewTarget = _getPrototypeOf(this).constructor;
result = Reflect.construct(Super, arguments, NewTarget);
} else {
result = Super.apply(this, arguments);
}
return _possibleConstructorReturn(this, result);
};
}
import { __decorate } from "tslib";
import React, { cloneElement, Component, isValidElement } from 'react';
import { observer } from 'mobx-react';
import { action, isArrayLike, observable, runInAction } from 'mobx';
import uniq from 'lodash/uniq';
import pull from 'lodash/pull';
import noop from 'lodash/noop';
import map from 'lodash/map';
import isObject from 'lodash/isObject';
import isEnumEmpty from 'lodash/isEmpty';
import isNumber from 'lodash/isNumber';
import isFunction from 'lodash/isFunction';
import isEqual from 'lodash/isEqual';
import isArray from 'lodash/isArray';
import isString from 'lodash/isString';
import omit from 'lodash/omit';
import { getConfig, getProPrefixCls } from '../../../../es/configure';
import { pxToRem } from '../../../../es/_util/UnitConvertor';
import Icon from '../../../../es/icon';
import KeyCode from '../../../../es/_util/KeyCode';
import { Action } from '../../../../es/trigger/enum';
import { RecordStatus } from '../../data-set/enum';
import Button from '../../button';
import Dropdown from '../../dropdown';
import TextField from '../../text-field';
import TableContext from '../TableContext';
import { $l } from '../../locale-context';
import autobind from '../../_util/autobind';
import _isEmpty from '../../_util/isEmpty';
import FieldList from '../../table/query-bar/FieldList';
import QuickFilterMenu from '../../table/query-bar/quick-filter';
import ColumnFilter from '../tool-bar/ColumnFilter';
/**
* 当前数据是否有值并需要选中
* @param data
*/
function isSelect(data) {
if (isObject(data[1])) {
return !isEnumEmpty(data[1]);
}
return data[0] !== '__dirty' && !_isEmpty(data[1]);
}
function isEqualDynamicProps(originalValue, newValue) {
if (isEqual(newValue, originalValue)) {
return true;
}
if (isObject(newValue) && isObject(originalValue) && Object.keys(newValue).length) {
return Object.keys(newValue).every(function (key) {
var value = newValue[key];
var oldValue = originalValue[key];
if (oldValue === value) {
return true;
}
var oEp = isNumber(oldValue) ? _isEmpty(oldValue) : isEnumEmpty(oldValue);
var nEp = isNumber(value) ? _isEmpty(value) : isEnumEmpty(value);
if (oEp && nEp) {
return true;
}
return isEqual(oldValue, value);
});
}
return isEqual(newValue, originalValue);
}
function getQueryData(queryDataSet) {
var _queryDataSet$current;
var queryData = omit(queryDataSet === null || queryDataSet === void 0 ? void 0 : (_queryDataSet$current = queryDataSet.current) === null || _queryDataSet$current === void 0 ? void 0 : _queryDataSet$current.toData(true), ['__dirty']);
return Object.keys(queryData).reduce(function (p, key) {
var value = queryData[key];
if (!_isEmpty(value)) {
p[key] = value;
}
return p;
}, {});
}
var TableDynamicFilterBar =
/*#__PURE__*/
function (_Component) {
_inherits(TableDynamicFilterBar, _Component);
var _super = _createSuper(TableDynamicFilterBar);
function TableDynamicFilterBar(props, context) {
var _this;
_classCallCheck(this, TableDynamicFilterBar);
_this = _super.call(this, props, context);
_this.refDropdown = null;
_this.refFilterWrapper = null;
_this.refEditors = new Map();
_this.originalConditionKeys = [];
_this.enterNum = 0;
_this.handleClickOut = function (e) {
if (_this.refDropdown && !_this.refDropdown.contains(e.target)) {
_this.fieldSelectHidden = true;
}
};
/**
* 勾选
* @param code
*/
_this.handleSelect = function (code) {
var codes = Array.isArray(code) ? code : [code];
_this.selectFields = uniq([].concat(_toConsumableArray(_this.selectFields), _toConsumableArray(codes)));
};
/**
* 取消勾选
* @param code
*/
_this.handleUnSelect = function (code) {
var queryDataSet = _this.props.queryDataSet;
var codes = Array.isArray(code) ? code : [code];
if (queryDataSet) {
codes.map(function (name) {
if (queryDataSet.current) {
queryDataSet.current.set(name, undefined);
}
return null;
});
}
_this.selectFields = pull.apply(void 0, [_toConsumableArray(_this.selectFields)].concat(_toConsumableArray(codes)));
};
runInAction(function () {
_this.fieldSelectHidden = true;
_this.selectFields = [];
_this.expand = true;
});
return _this;
}
_createClass(TableDynamicFilterBar, [{
key: "componentDidMount",
value: function componentDidMount() {
this.processDataSetListener(true);
document.addEventListener('click', this.handleClickOut);
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
document.removeEventListener('click', this.handleClickOut);
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);
handler.call(queryDataSet, 'update', this.handleDataSetUpdate);
handler.call(queryDataSet, 'create', this.handleDataSetCreate);
}
}
/**
* queryDataSet 查询前校验事件 触发展开动态字段
* @param dataSet 查询DS
* @param result
*/
}, {
key: "handleDataSetValidate",
value: function () {
var _handleDataSetValidate = _asyncToGenerator(
/*#__PURE__*/
_regeneratorRuntime.mark(function _callee(_ref) {
var _this2 = this;
var dataSet, result, fields;
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
dataSet = _ref.dataSet, result = _ref.result;
_context.next = 3;
return result;
case 3:
if (_context.sent) {
_context.next = 9;
break;
}
fields = _toConsumableArray(dataSet.fields.keys());
map(fields, function (field) {
if (!dataSet.current.getField(field).isValid()) {
_this2.handleSelect(field);
}
});
runInAction(function () {
_this2.expand = true;
});
this.refFilterWrapper.style.height = '';
this.refFilterWrapper.style.overflow = '';
case 9:
case "end":
return _context.stop();
}
}
}, _callee, this);
}));
function handleDataSetValidate(_x) {
return _handleDataSetValidate.apply(this, arguments);
}
return handleDataSetValidate;
}()
}, {
key: "setConditionStatus",
value: function setConditionStatus(value, orglValue) {
var _this3 = this;
runInAction(function () {
return _this3.conditionStatus = value;
});
if (value === RecordStatus.sync && orglValue) {
this.originalValue = orglValue;
}
}
/**
* 筛选条件更新 触发表格查询
*/
}, {
key: "handleDataSetUpdate",
value: function handleDataSetUpdate(_ref2) {
var record = _ref2.record;
var _this$props = this.props,
dataSet = _this$props.dataSet,
queryDataSet = _this$props.queryDataSet,
_this$props$onQuery = _this$props.onQuery,
onQuery = _this$props$onQuery === void 0 ? noop : _this$props$onQuery;
var status = RecordStatus.update;
if (record) {
status = isEqualDynamicProps(this.originalValue, record.toData()) ? RecordStatus.sync : RecordStatus.update;
}
this.setConditionStatus(status);
dataSet.query();
var data = getQueryData(queryDataSet);
onQuery({
dataSet: dataSet,
queryDataSet: queryDataSet,
data: data
});
}
/**
* queryDS 新建,初始勾选值
*/
}, {
key: "handleDataSetCreate",
value: function handleDataSetCreate(_ref3) {
var _this4 = this;
var dataSet = _ref3.dataSet,
record = _ref3.record;
var conditionData = Object.entries(record.toData());
this.originalValue = record.toData();
var keys = _toConsumableArray(dataSet.fields.keys());
map(conditionData, function (data) {
var name = data[0];
if (!keys.includes(data[0]) && isObject(data[1]) && !isEnumEmpty(data[1]) && !isArray(data[1])) {
name = "".concat(data[0], ".").concat(Object.keys(data[1])[0]);
}
if (isSelect(data) && !dataSet.getField(name).get('bind')) {
_this4.handleSelect(name);
}
});
}
/**
* 注入 onEnterDown 事件
* @param element
* @param name
*/
}, {
key: "createFields",
value: function createFields(element, name) {
var _this5 = this;
var onEnterDown = element.props.onEnterDown;
if (onEnterDown && isFunction(onEnterDown)) {
return element;
}
var props = {
onEnterDown: function onEnterDown() {
_this5.handleQuery();
},
ref: function ref(node) {
return _this5.refEditors.set(name, node);
}
};
return cloneElement(element, props);
}
/**
* 判断查询值是否为空
* @param value
*/
}, {
key: "isEmpty",
value: function isEmpty(value) {
return isArrayLike(value) ? !value.length : _isEmpty(value);
}
/**
* 渲染展开逻辑
* @param hidden 是否隐藏全部
*/
}, {
key: "getExpandNode",
value: function getExpandNode(hidden) {
var _this6 = this;
var proPrefixCls = this.context.tableStore.proPrefixCls;
return React.createElement("span", {
className: "".concat(proPrefixCls, "-filter-menu-expand"),
onClick: function onClick() {
var _this6$refFilterWrapp = _this6.refFilterWrapper.getBoundingClientRect(),
height = _this6$refFilterWrapp.height;
var _this6$refFilterWrapp2 = _this6.refFilterWrapper.children[0].getBoundingClientRect(),
childHeight = _this6$refFilterWrapp2.height;
runInAction(function () {
_this6.expand = hidden ? height <= 0 : height <= childHeight + 2;
});
if (hidden && height) {
// 收起全部
_this6.refFilterWrapper.style.display = 'none';
} else {
_this6.refFilterWrapper.style.display = 'flex';
_this6.refFilterWrapper.style.height = '';
_this6.refFilterWrapper.style.overflow = '';
}
if (height > childHeight && !hidden) {
// 收起留一行高度
_this6.refFilterWrapper.style.height = pxToRem(childHeight) || '';
_this6.refFilterWrapper.style.overflow = 'hidden';
} else {
_this6.refFilterWrapper.style.height = '';
_this6.refFilterWrapper.style.overflow = '';
}
}
}, this.expand ? React.createElement(React.Fragment, null, React.createElement(Icon, {
type: "baseline-arrow_drop_up"
})) : React.createElement(React.Fragment, null, React.createElement(Icon, {
type: "baseline-arrow_drop_down"
})));
}
/**
* 获取筛选下拉
*/
}, {
key: "getFilterMenu",
value: function getFilterMenu() {
var _this7 = this;
var _this$props2 = this.props,
queryFields = _this$props2.queryFields,
queryDataSet = _this$props2.queryDataSet,
dataSet = _this$props2.dataSet,
dynamicFilterBar = _this$props2.dynamicFilterBar,
_this$props2$onReset = _this$props2.onReset,
onReset = _this$props2$onReset === void 0 ? noop : _this$props2$onReset;
var _this$context = this.context,
tableStore = _this$context.tableStore,
_this$context$tableSt = _this$context.tableStore,
proPrefixCls = _this$context$tableSt.proPrefixCls,
node = _this$context$tableSt.node,
highlightRowIndexs = _this$context$tableSt.highlightRowIndexs;
var tableFilterAdapter = (dynamicFilterBar === null || dynamicFilterBar === void 0 ? void 0 : dynamicFilterBar.tableFilterAdapter) || getConfig('tableFilterAdapter');
var searchText = (dynamicFilterBar === null || dynamicFilterBar === void 0 ? void 0 : dynamicFilterBar.searchText) || getConfig('tableFilterSearchText') || 'params';
if (queryDataSet && queryFields.length) {
return React.createElement("div", {
className: "".concat(proPrefixCls, "-filter-menu")
}, this.renderPrefix(), React.createElement("div", {
className: "".concat(proPrefixCls, "-filter-search")
}, React.createElement(TextField, {
clearButton: true,
placeholder: $l('Table', 'enter_search_content'),
prefix: React.createElement(Icon, {
type: "search"
}),
style: {
width: 280
},
value: this.searchText,
onChange: function onChange() {
return noop;
},
onKeyDown: function onKeyDown(e) {
if (e.keyCode === KeyCode.ENTER && (dynamicFilterBar === null || dynamicFilterBar === void 0 ? void 0 : dynamicFilterBar.quickSearch)) {
e.preventDefault();
var rows = _toConsumableArray(new Set(highlightRowIndexs));
node.scrollTop(rows[_this7.enterNum] * node.getRowHeight());
_this7.enterNum += 1;
if (_this7.enterNum + 1 > rows.length) {
_this7.enterNum = 0;
}
}
},
onClear: function onClear() {
runInAction(function () {
_this7.searchText = '';
if (dynamicFilterBar === null || dynamicFilterBar === void 0 ? void 0 : dynamicFilterBar.quickSearch) {
tableStore.searchText = '';
tableStore.highlightRowIndexs = [];
node.forceUpdate();
}
});
onReset();
dataSet.setQueryParameter(searchText, undefined);
_this7.handleQuery(true);
},
onInput: function onInput(e) {
// @ts-ignore
var value = e.target.value;
runInAction(function () {
_this7.searchText = value || '';
if (dynamicFilterBar === null || dynamicFilterBar === void 0 ? void 0 : dynamicFilterBar.quickSearch) {
tableStore.highlightRowIndexs = [];
tableStore.searchText = value || '';
node.forceUpdate();
}
});
dataSet.setQueryParameter(searchText, value);
_this7.handleQuery();
}
})), tableFilterAdapter ? React.createElement(QuickFilterMenu, {
prefixCls: proPrefixCls,
expand: this.expand,
dynamicFilterBar: dynamicFilterBar,
dataSet: dataSet,
queryDataSet: queryDataSet,
onChange: this.handleSelect,
conditionStatus: this.conditionStatus,
onStatusChange: this.setConditionStatus
}) : React.createElement("div", {
className: "".concat(proPrefixCls, "-filter-buttons")
}, this.conditionStatus === RecordStatus.update && React.createElement(Button, {
onClick: function onClick() {
if (queryDataSet && queryDataSet.current) {
queryDataSet.current.reset();
}
_this7.handleDataSetCreate({
dataSet: queryDataSet,
record: queryDataSet.current
});
_this7.setConditionStatus(RecordStatus.sync);
dataSet.query();
onReset();
}
}, $l('Table', 'reset_button'))), React.createElement("span", {
className: "".concat(proPrefixCls, "-filter-search-divide")
}), this.getExpandNode(true), this.renderSuffix());
}
}
/**
* tableFilterSuffix 预留自定义区域
*/
}, {
key: "renderSuffix",
value: function renderSuffix() {
var _this$props3 = this.props,
queryDataSet = _this$props3.queryDataSet,
dataSet = _this$props3.dataSet,
dynamicFilterBar = _this$props3.dynamicFilterBar;
var proPrefixCls = this.context.tableStore.proPrefixCls;
var suffixes = (dynamicFilterBar === null || dynamicFilterBar === void 0 ? void 0 : dynamicFilterBar.suffixes) || getConfig('tableFilterSuffix');
var children = [];
if (suffixes && suffixes.length) {
suffixes.forEach(function (suffix) {
if (suffix === 'filter') {
children.push(React.createElement(ColumnFilter, {
prefixCls: proPrefixCls
}));
} else if (isValidElement(suffix)) {
children.push(suffix);
} else if (isFunction(suffix)) {
children.push(suffix({
queryDataSet: queryDataSet,
dataSet: dataSet
}));
}
});
return React.createElement("div", {
className: "".concat(proPrefixCls, "-dynamic-filter-bar-suffix")
}, children);
}
return null;
}
}, {
key: "renderPrefix",
value: function renderPrefix() {
var _this$props4 = this.props,
queryDataSet = _this$props4.queryDataSet,
dataSet = _this$props4.dataSet,
dynamicFilterBar = _this$props4.dynamicFilterBar;
var proPrefixCls = this.context.tableStore.proPrefixCls;
var prefixes = dynamicFilterBar === null || dynamicFilterBar === void 0 ? void 0 : dynamicFilterBar.prefixes;
var children = [];
if (prefixes && prefixes.length) {
prefixes.forEach(function (prefix) {
if (isString(prefix) && prefix === 'filter') {
children.push(React.createElement(ColumnFilter, {
prefixCls: proPrefixCls
}));
} else if (isValidElement(prefix)) {
children.push(prefix);
} else if (isFunction(prefix)) {
children.push(prefix({
queryDataSet: queryDataSet,
dataSet: dataSet
}));
}
});
return React.createElement(React.Fragment, null, React.createElement("div", {
className: "".concat(proPrefixCls, "-dynamic-filter-bar-prefix")
}, children), React.createElement("span", {
className: "".concat(proPrefixCls, "-filter-search-divide")
}));
}
return null;
}
/**
* 渲染查询条
*/
}, {
key: "getQueryBar",
value: function getQueryBar() {
var _this8 = this;
var _this$props5 = this.props,
prefixCls = _this$props5.prefixCls,
_this$props5$queryFie = _this$props5.queryFieldsLimit,
queryFieldsLimit = _this$props5$queryFie === void 0 ? 3 : _this$props5$queryFie,
queryFields = _this$props5.queryFields,
queryDataSet = _this$props5.queryDataSet;
var proPrefixCls = this.context.tableStore.proPrefixCls;
if (queryDataSet && queryFields.length) {
return React.createElement("div", {
key: "query_bar",
className: "".concat(prefixCls, "-dynamic-filter-bar")
}, this.getFilterMenu(), React.createElement("div", {
className: "".concat(proPrefixCls, "-filter-wrapper"),
ref: function ref(wrapperNode) {
return _this8.refFilterWrapper = wrapperNode;
}
}, queryFields.slice(0, queryFieldsLimit).map(function (element) {
var name = element.props.name;
var queryField = queryDataSet.getField(name);
var itemClassName = "".concat(proPrefixCls, "-filter-item ").concat(proPrefixCls, "-filter-item-label");
return React.createElement("div", {
className: "".concat(proPrefixCls, "-filter-content"),
key: name,
onClick: function onClick() {
return _this8.refEditors.get(name).focus();
}
}, React.createElement("span", {
className: "".concat(proPrefixCls, "-filter-label")
}, queryField === null || queryField === void 0 ? void 0 : queryField.get('label')), React.createElement("span", {
className: itemClassName
}, _this8.createFields(element, name)));
}), queryFields.slice(queryFieldsLimit).map(function (element) {
var name = element.props.name;
var queryField = queryDataSet.getField(name);
if (_this8.selectFields.includes(name)) {
return React.createElement("div", {
className: "".concat(proPrefixCls, "-filter-content"),
key: name,
onClick: function onClick() {
return _this8.refEditors.get(name).focus();
}
}, React.createElement(Icon, {
type: "cancel",
className: "".concat(proPrefixCls, "-filter-item-close"),
onClick: function onClick() {
_this8.handleUnSelect([name]);
}
}), React.createElement("span", {
className: "".concat(proPrefixCls, "-filter-label")
}, queryField === null || queryField === void 0 ? void 0 : queryField.get('label')), React.createElement("span", {
className: "".concat(proPrefixCls, "-filter-item")
}, _this8.createFields(element, name)));
}
return null;
}), queryFieldsLimit < queryFields.length && React.createElement("div", {
className: "".concat(proPrefixCls, "-filter-item")
}, React.createElement(Dropdown, {
visible: !this.fieldSelectHidden,
overlay: React.createElement("div", {
role: "none",
ref: function ref(dropdownNode) {
return _this8.refDropdown = dropdownNode;
},
onClick: function onClick(e) {
e.stopPropagation();
}
}, React.createElement(FieldList, {
groups: [{
title: $l('Table', 'predefined_fields'),
fields: _toConsumableArray(queryDataSet.fields.values()).filter(function (f) {
return !f.get('bind');
}).slice(queryFieldsLimit)
}],
prefixCls: "".concat(proPrefixCls, "-filter-list") || 'c7n-pro-table-filter-list',
closeMenu: function closeMenu() {
return runInAction(function () {
return _this8.fieldSelectHidden = true;
});
},
value: this.selectFields,
onSelect: this.handleSelect,
onUnSelect: this.handleUnSelect
})),
trigger: [Action.click]
}, React.createElement("span", {
className: "".concat(proPrefixCls, "-add-fields"),
onClick: function onClick(e) {
e.nativeEvent.stopImmediatePropagation();
runInAction(function () {
_this8.fieldSelectHidden = false;
});
}
}, React.createElement(Icon, {
type: "add"
}), $l('Table', 'add_filter'))))));
}
return null;
}
}, {
key: "handleQuery",
value: function handleQuery(collapse) {
var _this$props6 = this.props,
dataSet = _this$props6.dataSet,
queryDataSet = _this$props6.queryDataSet,
_this$props6$onQuery = _this$props6.onQuery,
onQuery = _this$props6$onQuery === void 0 ? noop : _this$props6$onQuery;
dataSet.query();
if (!collapse) {
var data = getQueryData(queryDataSet);
onQuery({
dataSet: dataSet,
queryDataSet: queryDataSet,
data: data,
params: this.searchText
});
}
}
}, {
key: "render",
value: function render() {
return this.getQueryBar();
}
}]);
return TableDynamicFilterBar;
}(Component);
TableDynamicFilterBar.contextType = TableContext;
TableDynamicFilterBar.defaultProps = {
prefixCls: getProPrefixCls('table'),
queryFieldsLimit: 3
};
__decorate([observable], TableDynamicFilterBar.prototype, "moreFields", void 0);
__decorate([observable], TableDynamicFilterBar.prototype, "fieldSelectHidden", void 0);
__decorate([observable], TableDynamicFilterBar.prototype, "selectFields", void 0);
__decorate([observable], TableDynamicFilterBar.prototype, "expand", void 0);
__decorate([observable], TableDynamicFilterBar.prototype, "searchText", void 0);
__decorate([observable], TableDynamicFilterBar.prototype, "conditionStatus", void 0);
__decorate([action], TableDynamicFilterBar.prototype, "handleClickOut", void 0);
__decorate([autobind], TableDynamicFilterBar.prototype, "handleDataSetValidate", null);
__decorate([autobind], TableDynamicFilterBar.prototype, "setConditionStatus", null);
__decorate([autobind], TableDynamicFilterBar.prototype, "handleDataSetUpdate", null);
__decorate([autobind], TableDynamicFilterBar.prototype, "handleDataSetCreate", null);
__decorate([action], TableDynamicFilterBar.prototype, "handleSelect", void 0);
__decorate([action], TableDynamicFilterBar.prototype, "handleUnSelect", void 0);
__decorate([autobind], TableDynamicFilterBar.prototype, "handleQuery", null);
TableDynamicFilterBar = __decorate([observer], TableDynamicFilterBar);
export default TableDynamicFilterBar;
//# sourceMappingURL=TableDynamicFilterBar.js.map