choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
1,370 lines (1,188 loc) • 54.9 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _createForOfIteratorHelper from "@babel/runtime/helpers/createForOfIteratorHelper";
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 _createSuper from "@babel/runtime/helpers/createSuper";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import { __decorate } from "tslib";
import React, { cloneElement, Component, isValidElement } from 'react';
import { observer } from 'mobx-react';
import { action, isArrayLike, observable, runInAction, toJS } 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 debounce from 'lodash/debounce';
import difference from 'lodash/difference';
import classNames from 'classnames';
import { getProPrefixCls } from '../../../../es/configure/utils';
import { pxToRem } from '../../../../es/_util/UnitConvertor';
import Icon from '../../../../es/icon';
import KeyCode from '../../../../es/_util/KeyCode';
import { Action } from '../../../../es/trigger/enum';
import DataSet from '../../data-set/DataSet';
import { DataSetEvents, DataSetSelection, FieldIgnore, FieldType, RecordStatus } from '../../data-set/enum';
import Button from '../../button';
import Dropdown from '../../dropdown';
import TextField from '../../text-field';
import Tooltip from '../../tooltip';
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 ColumnFilter from '../tool-bar/ColumnFilter';
import { ValueChangeAction } from '../../text-field/enum';
import QuickFilterMenu from '../../table/query-bar/quick-filter/QuickFilterMenu';
import QuickFilterMenuContext from '../../table/query-bar/quick-filter/QuickFilterMenuContext';
import { ConditionDataSet, QuickFilterDataSet } from '../../table/query-bar/quick-filter/QuickFilterDataSet';
import { hide, show } from '../../tooltip/singleton';
import { ShowHelp } from '../../field/enum';
import TableButtons from '../../table/query-bar/TableButtons';
/**
* 当前数据是否有值并需要选中
* @param data
*/
function isSelect(data) {
if (isObject(data[1])) {
return !isEnumEmpty(data[1]);
}
return data[0] !== '__dirty' && !_isEmpty(data[1]);
}
export function isEqualDynamicProps(originalValue, newValue, dataSet, record, name) {
if (isEqual(newValue, originalValue)) {
return true;
}
if (isObject(newValue) && isObject(originalValue) && Object.keys(newValue).length) {
var combineKeys = Object.keys(newValue).concat(Object.keys(originalValue));
return combineKeys.every(function (key) {
var value = newValue[key];
var oldValue = originalValue[key];
if (oldValue === value) {
return true;
}
if (_isEmpty(oldValue) && _isEmpty(value)) {
return true;
}
if (name && name.includes('.')) {
return _isEmpty(oldValue) && _isEmpty(record.get(name));
}
if (isNumber(oldValue) || isNumber(value)) {
var oEp = isNumber(oldValue) ? _isEmpty(oldValue) : isEnumEmpty(oldValue);
var nEp = isNumber(value) ? _isEmpty(value) : isEnumEmpty(value);
if (oEp && nEp) {
return true;
}
return String(oldValue) === String(value);
}
var field = dataSet.getField(key);
if (field && field.get('range', record)) {
var rangeValue = value ? isArray(value) ? value.join('') : Object.values(value).join('') : '';
var rangeOldValue = oldValue ? isArray(oldValue) ? oldValue.join('') : Object.values(oldValue).join('') : '';
return rangeValue === rangeOldValue;
}
if (field && field.get('lovCode') && oldValue && value) {
var valueField = dataSet.getField(key).get('valueField', record);
var textField = dataSet.getField(key).get('textField', record);
return value[valueField] === oldValue[valueField] && value[textField] === oldValue[textField];
}
return isEqual(oldValue, value);
});
}
return isEqual(newValue, originalValue);
}
function getQueryData(queryDataSet) {
var current = queryDataSet.current;
if (current) {
var queryData = omit(current.toData(true), ['__dirty']);
return Object.keys(queryData).reduce(function (p, key) {
var value = queryData[key];
if (!_isEmpty(value)) {
p[key] = value;
}
return p;
}, {});
}
return {};
}
export var CONDITIONSTATUS = '__CONDITIONSTATUS__';
export var SELECTFIELDS = '__SELECTFIELDS__';
export var MENUDATASET = '__MENUDATASET__';
export var CONDITIONDATASET = '__CONDITIONDATASET__';
export var OPTIONDATASET = '__OPTIONDATASET__';
export var FILTERMENUDATASET = '__FILTERMENUDATASET__';
export var MENURESULT = '__MENURESULT__';
export var SELECTCHANGE = '__SELECTCHANGE__';
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.refSingleWrapper = null;
_this.refEditors = new Map();
_this.originalConditionFields = [];
_this.enterNum = 0;
_this.handleClickOut = function (e) {
if (_this.refDropdown && !_this.refDropdown.contains(e.target)) {
_this.fieldSelectHidden = true;
}
};
_this.setOriginalConditionFields = function (code) {
var queryDataSet = _this.props.queryDataSet;
if (!code) {
if (queryDataSet) {
_this.initConditionFields({
dataSet: queryDataSet,
record: queryDataSet.get(0)
});
}
} else {
_this.originalConditionFields = Array.isArray(code) ? code : [code];
}
queryDataSet.setState(SELECTFIELDS, _toConsumableArray(_this.originalConditionFields));
};
/**
* 勾选
* @param code
* @param record
*/
_this.handleSelect = function (code, record) {
var queryDataSet = _this.props.queryDataSet;
var codes = Array.isArray(code) ? code : [code];
var selectFields = queryDataSet.getState(SELECTFIELDS) || [];
queryDataSet.setState(SELECTFIELDS, uniq([].concat(_toConsumableArray(selectFields), _toConsumableArray(codes))));
var shouldUpdate = queryDataSet.getState(SELECTFIELDS).length !== _this.originalConditionFields.length || !!difference(toJS(queryDataSet.getState(SELECTFIELDS)), toJS(_this.originalConditionFields)).length;
var isDirty = record ? record.dirty : false;
_this.setConditionStatus(shouldUpdate || isDirty ? RecordStatus.update : RecordStatus.sync);
queryDataSet.setState(SELECTCHANGE, shouldUpdate);
};
/**
* 取消勾选
* @param code
*/
_this.handleUnSelect = function (code) {
var queryDataSet = _this.props.queryDataSet;
var codes = Array.isArray(code) ? code : [code];
if (queryDataSet) {
var current = queryDataSet.current;
if (current) {
codes.forEach(function (name) {
return current.set(name, undefined);
});
}
}
var selectFields = queryDataSet.getState(SELECTFIELDS) || [];
queryDataSet.setState(SELECTFIELDS, pull.apply(void 0, [_toConsumableArray(selectFields)].concat(_toConsumableArray(codes))));
var shouldUpdate = queryDataSet.getState(SELECTFIELDS).length !== _this.originalConditionFields.length || !!difference(toJS(queryDataSet.getState(SELECTFIELDS)), toJS(_this.originalConditionFields)).length;
_this.setConditionStatus(shouldUpdate ? RecordStatus.update : RecordStatus.sync);
queryDataSet.setState(SELECTCHANGE, shouldUpdate);
};
runInAction(function () {
_this.fieldSelectHidden = true;
_this.expand = true;
});
return _this;
}
_createClass(TableDynamicFilterBar, [{
key: "prefixCls",
get: function get() {
if ('prefixCls' in this.props) {
var prefixCls = this.props.prefixCls;
return prefixCls;
}
var _this$context$tableSt = this.context.tableStore.proPrefixCls,
proPrefixCls = _this$context$tableSt === void 0 ? getProPrefixCls('performance-table') : _this$context$tableSt;
return proPrefixCls;
}
}, {
key: "queryFields",
get: function get() {
var _this$props = this.props,
queryFields = _this$props.queryFields,
queryDataSet = _this$props.queryDataSet;
var menuDataSet = queryDataSet.getState(MENUDATASET);
var isTenant = menuDataSet && menuDataSet.current && menuDataSet.current.get('isTenant');
return queryFields.filter(function (component) {
if (component.props.hidden) {
return !component.props.hidden;
}
if (isTenant && queryDataSet && queryDataSet.getField(component.props.name)) {
return queryDataSet.getField(component.props.name).get('fieldVisible') !== 0;
}
return !component.props.hidden;
});
}
}, {
key: "componentDidMount",
value: function componentDidMount() {
var _this2 = this;
var _this$props2 = this.props,
fuzzyQueryOnly = _this$props2.fuzzyQueryOnly,
queryDataSet = _this$props2.queryDataSet;
if (!fuzzyQueryOnly) {
this.processDataSetListener(true);
document.addEventListener('click', this.handleClickOut);
if (this.isSingleLineOpt() && this.refSingleWrapper) {
var _this$refSingleWrappe = this.refSingleWrapper.getBoundingClientRect(),
height = _this$refSingleWrappe.height;
var _this$refSingleWrappe2 = this.refSingleWrapper.children[0].children[0].getBoundingClientRect(),
childHeight = _this$refSingleWrappe2.height;
runInAction(function () {
_this2.showExpandIcon = height > childHeight + 18;
});
}
}
if (this.originalValue === undefined && queryDataSet && queryDataSet.current) {
this.initConditionFields({
dataSet: queryDataSet,
record: queryDataSet.current
});
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
var fuzzyQueryOnly = this.props.fuzzyQueryOnly;
if (!fuzzyQueryOnly) {
document.removeEventListener('click', this.handleClickOut);
this.processDataSetListener(false);
}
if (this.isTooltipShown) {
hide();
delete this.isTooltipShown;
}
}
}, {
key: "componentWillReceiveProps",
value: function componentWillReceiveProps(nextProps) {
var _this3 = this;
var fuzzyQueryOnly = nextProps.fuzzyQueryOnly,
queryDataSet = nextProps.queryDataSet; // eslint-disable-next-line react/destructuring-assignment
if (queryDataSet !== this.props.queryDataSet || fuzzyQueryOnly !== this.props.fuzzyQueryOnly) {
runInAction(function () {
_this3.fieldSelectHidden = true;
_this3.expand = true;
});
if (!fuzzyQueryOnly) {
// 移除原有实例监听
this.processDataSetListener(false);
this.processDataSetListener(true, nextProps);
if (this.isSingleLineOpt() && this.refSingleWrapper) {
var _this$refSingleWrappe3 = this.refSingleWrapper.getBoundingClientRect(),
height = _this$refSingleWrappe3.height;
var _this$refSingleWrappe4 = this.refSingleWrapper.children[0].children[0].getBoundingClientRect(),
childHeight = _this$refSingleWrappe4.height;
runInAction(function () {
_this3.showExpandIcon = height > childHeight + 18;
});
}
}
if (this.originalValue === undefined && queryDataSet && queryDataSet.current) {
this.initConditionFields({
dataSet: queryDataSet,
record: queryDataSet.current
});
}
}
}
}, {
key: "processDataSetListener",
value: function processDataSetListener(flag, nextProps) {
var _ref = nextProps || this.props,
queryDataSet = _ref.queryDataSet;
if (queryDataSet) {
var handler = flag ? queryDataSet.addEventListener : queryDataSet.removeEventListener;
handler.call(queryDataSet, DataSetEvents.validate, this.handleDataSetValidate);
handler.call(queryDataSet, DataSetEvents.update, this.handleDataSetUpdate);
handler.call(queryDataSet, DataSetEvents.create, this.handleDataSetCreate);
handler.call(queryDataSet, DataSetEvents.reset, this.handleDataSetReset);
handler.call(queryDataSet, DataSetEvents.load, this.handleDataSetLoad);
}
}
/**
* queryDataSet 查询前校验事件 触发展开动态字段
* @param dataSet 查询DS
* @param result
*/
}, {
key: "handleDataSetValidate",
value: function () {
var _handleDataSetValidate = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref2) {
var _this4 = this;
var dataSet, result, refSingleWrapper;
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
dataSet = _ref2.dataSet, result = _ref2.result;
_context.next = 3;
return result;
case 3:
if (_context.sent) {
_context.next = 7;
break;
}
runInAction(function () {
var current = dataSet.current;
dataSet.fields.forEach(function (field, key) {
if (!field.isValid(current)) {
_this4.handleSelect(key);
}
});
_this4.expand = true;
});
refSingleWrapper = this.refSingleWrapper;
if (refSingleWrapper) {
refSingleWrapper.style.height = '';
refSingleWrapper.style.overflow = '';
}
case 7:
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 queryDataSet = this.props.queryDataSet;
queryDataSet.setState(CONDITIONSTATUS, value);
if (value === RecordStatus.sync && orglValue) {
this.originalValue = orglValue;
}
}
/**
* 筛选条件更新 触发表格查询
*/
}, {
key: "handleDataSetUpdate",
value: function () {
var _handleDataSetUpdate = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(_ref3) {
var record, name, oldValue, value, _this$props3, dataSet, queryDataSet, _this$props3$onQuery, onQuery, autoQuery, field, shouldQuery, rangeValue, rangeOldValue, status, hasFocus, _iterator, _step, _step$value, key, _value;
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
record = _ref3.record, name = _ref3.name, oldValue = _ref3.oldValue, value = _ref3.value;
_this$props3 = this.props, dataSet = _this$props3.dataSet, queryDataSet = _this$props3.queryDataSet, _this$props3$onQuery = _this$props3.onQuery, onQuery = _this$props3$onQuery === void 0 ? noop : _this$props3$onQuery, autoQuery = _this$props3.autoQuery;
field = queryDataSet && queryDataSet.getField(name);
shouldQuery = true;
if (field && field.get('range', record)) {
rangeValue = value ? isArray(value) ? value.join('') : Object.values(value).join('') : '';
rangeOldValue = oldValue ? isArray(oldValue) ? oldValue.join('') : Object.values(oldValue).join('') : '';
shouldQuery = rangeValue !== rangeOldValue;
}
status = RecordStatus.update;
if (record) {
status = isEqualDynamicProps(this.originalValue, omit(record.toData(), ['__dirty']), queryDataSet, record, name) ? RecordStatus.sync : RecordStatus.update;
}
this.setConditionStatus(status);
if (!(autoQuery && shouldQuery)) {
_context2.next = 28;
break;
}
_context2.next = 11;
return dataSet.modifiedCheck(undefined, dataSet, 'query');
case 11:
if (!_context2.sent) {
_context2.next = 27;
break;
}
_context2.t0 = queryDataSet && queryDataSet.current;
if (!_context2.t0) {
_context2.next = 17;
break;
}
_context2.next = 16;
return queryDataSet.current.validate();
case 16:
_context2.t0 = _context2.sent;
case 17:
if (!_context2.t0) {
_context2.next = 22;
break;
}
dataSet.query();
onQuery();
_context2.next = 25;
break;
case 22:
hasFocus = false;
_iterator = _createForOfIteratorHelper(this.refEditors.entries());
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
_step$value = _slicedToArray(_step.value, 2), key = _step$value[0], _value = _step$value[1];
if (_value && !_value.valid && !hasFocus) {
this.refEditors.get(key).focus();
hasFocus = true;
}
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
case 25:
_context2.next = 28;
break;
case 27:
record.init(name, oldValue);
case 28:
case "end":
return _context2.stop();
}
}
}, _callee2, this);
}));
function handleDataSetUpdate(_x2) {
return _handleDataSetUpdate.apply(this, arguments);
}
return handleDataSetUpdate;
}()
/**
* queryDS 新建，初始勾选值
*/
}, {
key: "handleDataSetCreate",
value: function handleDataSetCreate() {
var queryDataSet = this.props.queryDataSet;
if (queryDataSet) {
this.initConditionFields({
dataSet: queryDataSet,
record: queryDataSet.current
});
}
this.initMenuDataSet();
}
/**
* queryDS reset，初始记录
*/
}, {
key: "handleDataSetReset",
value: function handleDataSetReset() {
var queryDataSet = this.props.queryDataSet;
if (queryDataSet && !this.tableFilterAdapter) {
queryDataSet.create();
}
}
/**
* queryDS load，兼容项目loadData([])的处理，初始化记录
*/
}, {
key: "handleDataSetLoad",
value: function handleDataSetLoad(_ref4) {
var dataSet = _ref4.dataSet;
if (!this.tableFilterAdapter && !dataSet.length) {
dataSet.create();
}
}
/**
* 初始化勾选值、条件字段
* @param props
*/
}, {
key: "initConditionFields",
value: function initConditionFields(props) {
var _this5 = this;
var dataSet = props.dataSet,
record = props.record;
var originalValue = omit(record.toData(), ['__dirty']);
var conditionData = Object.entries(originalValue);
this.originalValue = originalValue;
this.originalConditionFields = [];
var fields = dataSet.fields;
map(conditionData, function (data) {
var name = data[0];
if (!fields.has(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.getState(SELECTFIELDS) || []).includes(name)) {
var field = dataSet.getField(name);
if (!field || !field.get('bind', record) || field.get('usedFlag')) {
_this5.originalConditionFields.push(name);
_this5.handleSelect(name);
}
}
});
}
}, {
key: "initMenuDataSet",
value: function () {
var _initMenuDataSet = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
var _this6 = this;
var _this$props4, queryDataSet, dynamicFilterBar, searchCode, getConfig, searchCodes, menuDataSet, conditionDataSet, optionDataSet, filterMenuDataSet, status, result, menuRecord, current;
return _regeneratorRuntime.wrap(function _callee3$(_context3) {
while (1) {
switch (_context3.prev = _context3.next) {
case 0:
_this$props4 = this.props, queryDataSet = _this$props4.queryDataSet, dynamicFilterBar = _this$props4.dynamicFilterBar, searchCode = _this$props4.searchCode;
getConfig = this.context.tableStore.getConfig;
searchCodes = dynamicFilterBar && dynamicFilterBar.searchCode || searchCode;
menuDataSet = new DataSet(QuickFilterDataSet({
searchCode: searchCodes,
queryDataSet: queryDataSet,
tableFilterAdapter: this.tableFilterAdapter
}), {
getConfig: getConfig
});
conditionDataSet = new DataSet(ConditionDataSet(), {
getConfig: getConfig
});
optionDataSet = new DataSet({
paging: false,
selection: DataSetSelection.single,
fields: [{
// 是否租户默认配置
name: 'isTenant',
type: FieldType.string,
transformResponse: function transformResponse(value) {
return value ? $l('Table', 'preset') : $l('Table', 'user');
},
group: true
}]
}, {
getConfig: getConfig
});
filterMenuDataSet = new DataSet({
autoCreate: true,
fields: [{
name: 'filterName',
type: FieldType.string,
textField: 'searchName',
valueField: 'searchId',
options: optionDataSet,
ignore: FieldIgnore.always
}]
}, {
getConfig: getConfig
});
status = RecordStatus.update;
if (queryDataSet && queryDataSet.current) {
status = isEqualDynamicProps(this.originalValue, omit(queryDataSet.current.toData(), ['__dirty']), queryDataSet, queryDataSet.current) ? RecordStatus.sync : RecordStatus.update;
} else {
status = RecordStatus.sync;
}
queryDataSet.setState(MENUDATASET, menuDataSet);
queryDataSet.setState(CONDITIONDATASET, conditionDataSet);
queryDataSet.setState(OPTIONDATASET, optionDataSet);
queryDataSet.setState(FILTERMENUDATASET, filterMenuDataSet);
queryDataSet.setState(CONDITIONSTATUS, status);
_context3.next = 16;
return menuDataSet.query();
case 16:
result = _context3.sent;
queryDataSet.setState(MENURESULT, result);
if (optionDataSet) {
optionDataSet.loadData(result);
}
menuRecord = menuDataSet.current;
if (menuRecord) {
conditionDataSet.loadData(menuRecord.get('conditionList'));
}
if (result && result.length) {
runInAction(function () {
_this6.shouldLocateData = true;
});
if (queryDataSet && queryDataSet.fields) {
this.tempFields = queryDataSet.snapshot().dataSet.fields;
}
} else {
current = filterMenuDataSet.current;
if (current) current.set('filterName', undefined);
runInAction(function () {
_this6.shouldLocateData = true;
});
}
return _context3.abrupt("return", true);
case 23:
case "end":
return _context3.stop();
}
}
}, _callee3, this);
}));
function initMenuDataSet() {
return _initMenuDataSet.apply(this, arguments);
}
return initMenuDataSet;
}()
/**
* tableFilterSuffix 预留自定义区域
*/
}, {
key: "renderSuffix",
value: function renderSuffix() {
var _this$context = this.context,
tableStore = _this$context.tableStore,
proPrefixCls = _this$context.tableStore.proPrefixCls;
var _this$props5 = this.props,
dynamicFilterBar = _this$props5.dynamicFilterBar,
queryDataSet = _this$props5.queryDataSet,
dataSet = _this$props5.dataSet,
_this$props5$buttons = _this$props5.buttons,
buttons = _this$props5$buttons === void 0 ? [] : _this$props5$buttons;
var suffixes = dynamicFilterBar && dynamicFilterBar.suffixes || tableStore.getConfig('tableFilterSuffix');
var children = [];
var suffixesDom = null;
var tableButtons = buttons.length ? /*#__PURE__*/React.createElement(TableButtons, {
key: "toolbar",
prefixCls: "".concat(proPrefixCls, "-dynamic-filter"),
buttons: buttons
}) : null;
if (suffixes && suffixes.length) {
suffixes.forEach(function (suffix) {
if (suffix === 'filter') {
children.push( /*#__PURE__*/React.createElement(ColumnFilter, {
prefixCls: proPrefixCls
}));
} else if ( /*#__PURE__*/isValidElement(suffix)) {
children.push(suffix);
} else if (isFunction(suffix)) {
children.push(suffix({
queryDataSet: queryDataSet,
dataSet: dataSet
}));
}
});
suffixesDom = /*#__PURE__*/React.createElement("div", {
className: "".concat(proPrefixCls, "-dynamic-filter-bar-suffix")
}, children);
}
return [tableButtons, suffixesDom];
}
}, {
key: "getPrefix",
value: function getPrefix() {
var proPrefixCls = this.context.tableStore.proPrefixCls;
var _this$props6 = this.props,
dynamicFilterBar = _this$props6.dynamicFilterBar,
queryDataSet = _this$props6.queryDataSet,
dataSet = _this$props6.dataSet;
var prefixes = dynamicFilterBar && dynamicFilterBar.prefixes;
var children = [];
if (prefixes && prefixes.length) {
prefixes.forEach(function (prefix) {
if (isString(prefix) && prefix === 'filter') {
children.push( /*#__PURE__*/React.createElement(ColumnFilter, {
prefixCls: proPrefixCls
}));
} else if ( /*#__PURE__*/isValidElement(prefix)) {
children.push(prefix);
} else if (isFunction(prefix)) {
children.push(prefix({
queryDataSet: queryDataSet,
dataSet: dataSet
}));
}
});
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
className: "".concat(proPrefixCls, "-dynamic-filter-bar-prefix")
}, children), /*#__PURE__*/React.createElement("span", {
className: "".concat(proPrefixCls, "-filter-search-divide")
}));
}
return null;
}
/**
* 注入 onEnterDown 事件
* @param element
* @param name
*/
}, {
key: "createFields",
value: function createFields(element, name) {
var _this7 = this;
var onEnterDown = element.props.onEnterDown;
if (onEnterDown && isFunction(onEnterDown)) {
return element;
}
var props = {
onEnterDown: function onEnterDown() {
_this7.handleQuery();
},
ref: function ref(node) {
return _this7.refEditors.set(name, node);
}
};
return /*#__PURE__*/cloneElement(element, props);
}
/**
* 判断查询值是否为空
* @param value
*/
}, {
key: "isEmpty",
value: function isEmpty(value) {
return isArrayLike(value) ? !value.length : _isEmpty(value);
}
}, {
key: "tableFilterAdapter",
get: function get() {
var _this$props7 = this.props,
dynamicFilterBar = _this$props7.dynamicFilterBar,
searchCode = _this$props7.searchCode;
var tableStore = this.context.tableStore;
var searchCodes = dynamicFilterBar && dynamicFilterBar.searchCode || searchCode;
return searchCodes ? dynamicFilterBar && dynamicFilterBar.tableFilterAdapter || tableStore.getConfig('tableFilterAdapter') : null;
}
/**
* 是否单行操作
*/
}, {
key: "isSingleLineOpt",
value: function isSingleLineOpt() {
var fuzzyQuery = this.props.fuzzyQuery;
return !(fuzzyQuery || this.tableFilterAdapter);
}
}, {
key: "renderRefreshBtn",
value: function renderRefreshBtn() {
var _this8 = this;
var proPrefixCls = this.context.tableStore.proPrefixCls;
return /*#__PURE__*/React.createElement("span", {
className: "".concat(proPrefixCls, "-filter-menu-query"),
onClick: function onClick(e) {
e.stopPropagation();
var _this8$props = _this8.props,
dataSet = _this8$props.dataSet,
queryDataSet = _this8$props.queryDataSet,
_this8$props$onRefres = _this8$props.onRefresh,
onRefresh = _this8$props$onRefres === void 0 ? noop : _this8$props$onRefres;
var data = getQueryData(queryDataSet);
onRefresh({
dataSet: dataSet,
queryDataSet: queryDataSet,
data: data,
params: _this8.searchText
});
}
}, /*#__PURE__*/React.createElement(Tooltip, {
title: $l('Table', 'refresh')
}, /*#__PURE__*/React.createElement(Icon, {
type: "refresh"
})));
}
/**
* 渲染展开逻辑
* @param hidden 是否隐藏全部
*/
}, {
key: "getExpandNode",
value: function getExpandNode(hidden) {
var _this9 = this;
var proPrefixCls = this.context.tableStore.proPrefixCls;
var refreshBtn = this.props.refreshBtn;
if (!this.showExpandIcon && !hidden) return refreshBtn ? this.renderRefreshBtn() : null;
return /*#__PURE__*/React.createElement("span", {
className: "".concat(proPrefixCls, "-filter-menu-expand"),
onClick: function onClick() {
var refSingleWrapper = _this9.refSingleWrapper;
if (refSingleWrapper) {
var _refSingleWrapper$get = refSingleWrapper.getBoundingClientRect(),
height = _refSingleWrapper$get.height;
var _refSingleWrapper$chi = refSingleWrapper.children[0].children[0].getBoundingClientRect(),
childHeight = _refSingleWrapper$chi.height;
runInAction(function () {
_this9.expand = hidden ? height <= 0 : height <= childHeight + 18;
});
if (hidden && height) {
// 收起全部
refSingleWrapper.style.display = 'none';
} else {
refSingleWrapper.style.display = 'flex';
refSingleWrapper.style.height = '';
refSingleWrapper.style.overflow = '';
}
if (height > childHeight + 18 && !hidden) {
// 收起留一行高度
refSingleWrapper.style.height = pxToRem(childHeight + 18, true) || '';
refSingleWrapper.style.overflow = 'hidden';
} else {
refSingleWrapper.style.height = '';
refSingleWrapper.style.overflow = '';
}
}
}
}, refreshBtn ? this.renderRefreshBtn() : null, this.expand ? /*#__PURE__*/React.createElement(Tooltip, {
title: $l('Table', 'collapse')
}, /*#__PURE__*/React.createElement(Icon, {
type: "baseline-arrow_drop_up"
})) : /*#__PURE__*/React.createElement(Tooltip, {
title: $l('Table', 'expand_button')
}, /*#__PURE__*/React.createElement(Icon, {
type: "baseline-arrow_drop_down"
})));
}
/**
* 渲染模糊搜索
*/
}, {
key: "getFuzzyQuery",
value: function getFuzzyQuery() {
var _this10 = this;
var fuzzyQuery = this.props.fuzzyQuery;
if (!fuzzyQuery) return null;
var _this$props8 = this.props,
dataSet = _this$props8.dataSet,
dynamicFilterBar = _this$props8.dynamicFilterBar,
autoQueryAfterReset = _this$props8.autoQueryAfterReset,
fuzzyQueryPlaceholder = _this$props8.fuzzyQueryPlaceholder,
_this$props8$onReset = _this$props8.onReset,
onReset = _this$props8$onReset === void 0 ? noop : _this$props8$onReset;
var _this$context2 = this.context,
tableStore = _this$context2.tableStore,
_this$context2$tableS = _this$context2.tableStore,
proPrefixCls = _this$context2$tableS.proPrefixCls,
node = _this$context2$tableS.node,
highlightRowIndexs = _this$context2$tableS.highlightRowIndexs;
var searchText = dynamicFilterBar && dynamicFilterBar.searchText || tableStore.getConfig('tableFilterSearchText') || 'params';
var placeholder = fuzzyQueryPlaceholder || $l('Table', 'enter_search_content');
return /*#__PURE__*/React.createElement("div", {
className: "".concat(proPrefixCls, "-filter-search")
}, /*#__PURE__*/React.createElement(TextField, {
style: {
width: 280
},
clearButton: true,
placeholder: placeholder,
prefix: /*#__PURE__*/React.createElement(Icon, {
type: "search"
}),
value: this.searchText,
valueChangeAction: ValueChangeAction.input,
onChange: debounce(function (value) {
runInAction(function () {
_this10.searchText = value || '';
if (dynamicFilterBar && dynamicFilterBar.quickSearch) {
tableStore.highlightRowIndexs = [];
tableStore.searchText = value || '';
node.forceUpdate();
}
});
dataSet.setQueryParameter(searchText, value);
_this10.handleQuery();
}, 500),
onKeyDown: function onKeyDown(e) {
if (e.keyCode === KeyCode.ENTER && dynamicFilterBar && dynamicFilterBar.quickSearch) {
e.preventDefault();
var rows = _toConsumableArray(new Set(highlightRowIndexs));
node.scrollTop(rows[_this10.enterNum] * node.getRowHeight());
_this10.enterNum += 1;
if (_this10.enterNum + 1 > rows.length) {
_this10.enterNum = 0;
}
}
},
onClear: function onClear() {
runInAction(function () {
_this10.searchText = '';
if (dynamicFilterBar && dynamicFilterBar.quickSearch) {
tableStore.searchText = '';
tableStore.highlightRowIndexs = [];
node.forceUpdate();
}
});
onReset();
if (autoQueryAfterReset) {
dataSet.setQueryParameter(searchText, undefined);
_this10.handleQuery(true);
}
}
}));
}
/**
* 渲染重置按钮
*/
}, {
key: "getResetButton",
value: function getResetButton() {
var _this11 = this;
var proPrefixCls = this.context.tableStore.proPrefixCls;
var _this$props9 = this.props,
queryDataSet = _this$props9.queryDataSet,
autoQueryAfterReset = _this$props9.autoQueryAfterReset,
_this$props9$onReset = _this$props9.onReset,
onReset = _this$props9$onReset === void 0 ? noop : _this$props9$onReset;
return /*#__PURE__*/React.createElement("div", {
className: "".concat(proPrefixCls, "-filter-buttons")
}, queryDataSet.getState(CONDITIONSTATUS) === RecordStatus.update && /*#__PURE__*/React.createElement(Button, {
onClick: function onClick() {
if (queryDataSet) {
var current = queryDataSet.current;
if (current) {
current.reset();
_this11.handleDataSetCreate();
queryDataSet.setState(SELECTFIELDS, _toConsumableArray(_this11.originalConditionFields));
}
}
_this11.setConditionStatus(RecordStatus.sync);
onReset();
if (autoQueryAfterReset) {
_this11.handleQuery();
}
}
}, $l('Table', 'reset_button')));
}
/**
* 筛选头
* fuzzyQuery + quickFilterMenu + resetButton + buttons
*/
}, {
key: "getFilterMenu",
value: function getFilterMenu() {
var proPrefixCls = this.context.tableStore.proPrefixCls;
var _this$props10 = this.props,
queryFields = _this$props10.queryFields,
queryDataSet = _this$props10.queryDataSet,
dataSet = _this$props10.dataSet,
dynamicFilterBar = _this$props10.dynamicFilterBar,
searchCode = _this$props10.searchCode,
autoQuery = _this$props10.autoQuery,
fuzzyQueryOnly = _this$props10.fuzzyQueryOnly;
var prefix = this.getPrefix();
var suffix = this.renderSuffix();
var fuzzyQuery = this.getFuzzyQuery();
if (fuzzyQueryOnly) {
return /*#__PURE__*/React.createElement("div", {
className: "".concat(proPrefixCls, "-filter-menu")
}, prefix, fuzzyQuery, suffix);
}
if (queryDataSet && queryFields.length) {
var searchCodes = dynamicFilterBar && dynamicFilterBar.searchCode || searchCode;
var quickFilterMenu = this.tableFilterAdapter && searchCodes ? /*#__PURE__*/React.createElement(QuickFilterMenuContext.Provider, {
value: {
tempQueryFields: this.tempFields,
autoQuery: autoQuery,
prefixCls: proPrefixCls,
expand: this.expand,
dataSet: dataSet,
queryDataSet: queryDataSet,
onChange: this.handleSelect,
conditionStatus: queryDataSet.getState(CONDITIONSTATUS),
onStatusChange: this.setConditionStatus,
selectFields: queryDataSet.getState(SELECTFIELDS),
onOriginalChange: this.setOriginalConditionFields,
menuDataSet: queryDataSet.getState(MENUDATASET),
filterMenuDataSet: queryDataSet.getState(FILTERMENUDATASET),
conditionDataSet: queryDataSet.getState(CONDITIONDATASET),
optionDataSet: queryDataSet.getState(OPTIONDATASET),
shouldLocateData: this.shouldLocateData,
initConditionFields: this.initConditionFields,
newFilterDataSet: {}
}
}, /*#__PURE__*/React.createElement(QuickFilterMenu, null)) : null;
var resetButton = this.isSingleLineOpt() || this.tableFilterAdapter ? null : this.getResetButton();
return /*#__PURE__*/React.createElement("div", {
className: "".concat(proPrefixCls, "-filter-menu")
}, prefix, fuzzyQuery, quickFilterMenu, resetButton, this.isSingleLineOpt() ? null : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
className: "".concat(proPrefixCls, "-filter-search-divide")
}), this.getExpandNode(true)), suffix);
}
}
/**
* 查询字段初始顺序
* 排除动态属性影响
*/
}, {
key: "originOrderQueryFields",
get: function get() {
var queryDataSet = this.props.queryDataSet;
var result = [];
if (queryDataSet) {
var fields = queryDataSet.fields,
_queryDataSet$props$f = queryDataSet.props.fields,
propFields = _queryDataSet$props$f === void 0 ? [] : _queryDataSet$props$f;
var cloneFields = fields.toJS();
propFields.forEach(function (_ref5) {
var name = _ref5.name;
if (name) {
var field = cloneFields.get(name);
var hasBindProps = function hasBindProps(propsName) {
return field && field.get(propsName) && field.get(propsName).bind;
};
if (field && !field.get('bind') && !hasBindProps('computedProps') && !hasBindProps('dynamicProps') && !field.get('name').includes('__tls')) {
result.push(field);
}
}
});
}
return result;
}
}, {
key: "handleHelpMouseEnter",
value: function handleHelpMouseEnter(e, help) {
var target = e.target;
show(target, {
title: help
});
this.isTooltipShown = true;
}
}, {
key: "handleHelpMouseLeave",
value: function handleHelpMouseLeave() {
hide();
}
}, {
key: "renderTooltipHelp",
value: function renderTooltipHelp(help) {
var _this12 = this;
if (help) {
return /*#__PURE__*/React.createElement(Icon, {
type: "help",
// @ts-ignore
onMouseEnter: function onMouseEnter(e) {
return _this12.handleHelpMouseEnter(e, help);
},
onMouseLeave: this.handleHelpMouseLeave
});
}
}
/**
* 渲染查询条
*/
}, {
key: "getQueryBar",
value: function getQueryBar() {
var _this13 = this;
var _this$context3 = this.context,
tableStore = _this$context3.tableStore,
proPrefixCls = _this$context3.tableStore.proPrefixCls;
var _this$props11 = this.props,
_this$props11$queryFi = _this$props11.queryFieldsLimit,
queryFieldsLimit = _this$props11$queryFi === void 0 ? 3 : _this$props11$queryFi,
queryFields = _this$props11.queryFields,
queryDataSet = _this$props11.queryDataSet,
fuzzyQueryOnly = _this$props11.fuzzyQueryOnly;
var menuDataSet = queryDataSet.getState(MENUDATASET);
var isTenant = menuDataSet && menuDataSet.current && menuDataSet.current.get('isTenant');
var fieldsLimit = queryFieldsLimit;
if (isTenant) {
fieldsLimit = 0;
}
var selectFields = queryDataSet.getState(SELECTFIELDS) || [];
if (fuzzyQueryOnly) {
return /*#__PURE__*/React.createElement("div", {
key: "query_bar",
className: "".concat(proPrefixCls, "-dynamic-filter-bar")
}, this.getFilterMenu());
}
if (queryDataSet && queryFields.length) {
var singleLineModeAction = this.isSingleLineOpt() ? /*#__PURE__*/React.createElement("div", {
className: "".concat(proPrefixCls, "-dynamic-filter-bar-single-action")
}, this.getResetButton(), this.getExpandNode(false)) : null;
return /*#__PURE__*/React.createElement("div", {
key: "query_bar",
className: "".concat(proPrefixCls, "-dynamic-filter-bar")
}, this.getFilterMenu(), /*#__PURE__*/React.createElement("div", {
className: "".concat(proPrefixCls, "--dynamic-filter-single-wrapper"),
ref: function ref(node) {
return _this13.refSingleWrapper = node;
}
}, /*#__PURE__*/React.createElement("div", {
className: "".concat(proPrefixCls, "-filter-wrapper")
}, this.queryFields.slice(0, fieldsLimit).map(function (element) {
var _element$props = element.props,
name = _element$props.name,
hidden = _element$props.hidden,
showHelp = _element$props.showHelp,
disabled = _element$props.disabled,
help = _element$props.help;
var isLabelShowHelp = (showHelp || tableStore.getConfig('showHelp')) === ShowHelp.label;
if (hidden) return null;
var queryField = queryDataSet.getField(name);
var label = queryField && queryField.get('label', queryDataSet.current);
var itemContentClassName = classNames("".concat(proPrefixCls, "-filter-content"), _defineProperty({}, "".concat(proPrefixCls, "-filter-content-disabled"), disabled || queryField && queryField.get('disabled', queryDataSet.current)));
return /*#__PURE__*/React.createElement("div", {
className: itemContentClassName,
key: name,
onClick: debounce(function () {
var editor = _this13.refEditors.get(name);
if (editor) {
if (isFunction(editor.isSuffixClick) && !editor.element.className.includes("c7n-pro-suffix-click")) {
editor.element.className += ' c7n-pro-suffix-click';
}
_this13.refEditors.get(name).focus();
}
}, 200),
onBlur: function onBlur() {
var editor = _this13.refEditors.get(name);
if (editor && editor.element.className.includes("c7n-pro-suffix-click")) {
editor.element.className = editor.element.className.split(" c7n-pro-suffix-click")[0];
}
}
}, /*#__PURE__*/React.createElement("span", {
className: "".concat(proPrefixCls, "-filter-label")
}, label, isLabelShowHelp ? _this13.renderTooltipHelp(help || queryField && queryField.get('help', queryDataSet.current)) : null), /*#__PURE__*/React.createElement("span", {
className: "".concat(proPrefixCls, "-filter-item")
}, _this13.createFields(element, name)));
}), this.queryFields.slice(fieldsLimit).map(function (element) {
var _element$props2 = element.props,
name = _element$props2.name,
hidden = _element$props2.hidden,
showHelp = _element$props2.showHelp,
disabled = _element$props2.disabled,
help = _element$props2.help;
var isLabelShowHelp = (showHelp || tableStore.getConfig('showHelp')) === ShowHelp.label;
if (hidden) return null;
var queryField = queryDataSet.getField(name);
var label = queryField && queryField.get('label', queryDataSet.current);
var itemContentClassName = classNames("".concat(proPrefixCls, "-filter-content"), _defineProperty({}, "".concat(proPrefixCls, "-filter-content-disabled"), disabled || queryField && queryField.get('disabled', queryDataSet.current)));
if (selectFields.includes(name)) {
return /*#__PURE__*/React.createElement("div", {
className: itemContentClassName,
key: name,
onClick: debounce(function () {
var editor = _this13.refEditors.get(name);
if (editor) {
if (isFunction(editor.isSuffixClick) && !editor.element.className.includes("c7n-pro-suffix-click")) {
editor.element.className += ' c7n-pro-suffix-click';
}
_this13.refEditors.get(name).focus();
}
}, 200),
onBlur: function onBlur() {
var editor = _this13.refEditors.get(name);
if (editor && editor.element.className.includes("c7n-pro-suffix-click")) {
editor.element.className = editor.element.className.split(" c7n-pro-suffix-click")[0];
}
}
}, /*#__PURE__*/React.createElement(Icon, {
type: "cancel",
className: "".concat(proPrefixCls, "-filter-item-close"),
onClick: function onClick() {
_this13.handleUnSelect([name]);
}
}), /*#__PURE__*/React.createElement("span", {
className: "".concat(proPrefixCls, "-filter-label")
}, label, isLabelShowHelp ? _this13.renderTooltipHelp(help || queryField && queryField.get('help', queryDataSet.current)) : null), /*#__PURE__*/React.createElement("span", {
className: "".concat(proPrefixCls, "-filter-item")
}, _this13.createFields(element, name)));
}
return null;
}), fieldsLimit < this.queryFields.length && /*#__PURE__*/React.createElement("div", {
className: "".concat(proPrefixCls, "-filter-item")
}, /*#__PURE__*/React.createElement(Dropdown, {
visible: !this.fieldSelectHidden,
overlay: