UNPKG

choerodon-ui

Version:

An enterprise-class UI design language and React-based implementation

1,035 lines (876 loc) 39.2 kB
"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 _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator")); var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator")); var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray")); 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 _mobx = require("mobx"); var _uniq = _interopRequireDefault(require("lodash/uniq")); var _pull = _interopRequireDefault(require("lodash/pull")); var _noop = _interopRequireDefault(require("lodash/noop")); var _map = _interopRequireDefault(require("lodash/map")); var _isObject = _interopRequireDefault(require("lodash/isObject")); var _isEmpty2 = _interopRequireDefault(require("lodash/isEmpty")); var _isNumber = _interopRequireDefault(require("lodash/isNumber")); var _isFunction = _interopRequireDefault(require("lodash/isFunction")); var _isEqual = _interopRequireDefault(require("lodash/isEqual")); var _isArray = _interopRequireDefault(require("lodash/isArray")); var _isString = _interopRequireDefault(require("lodash/isString")); var _omit = _interopRequireDefault(require("lodash/omit")); var _debounce = _interopRequireDefault(require("lodash/debounce")); var _utils = require("../../../../lib/configure/utils"); var _UnitConvertor = require("../../../../lib/_util/UnitConvertor"); var _icon = _interopRequireDefault(require("../../../../lib/icon")); var _KeyCode = _interopRequireDefault(require("../../../../lib/_util/KeyCode")); var _enum = require("../../../../lib/trigger/enum"); var _DataSet = _interopRequireDefault(require("../../data-set/DataSet")); var _enum2 = require("../../data-set/enum"); var _button = _interopRequireDefault(require("../../button")); var _dropdown = _interopRequireDefault(require("../../dropdown")); var _textField = _interopRequireDefault(require("../../text-field")); var _tooltip = _interopRequireDefault(require("../../tooltip")); var _TableContext = _interopRequireDefault(require("../TableContext")); var _localeContext = require("../../locale-context"); var _autobind = _interopRequireDefault(require("../../_util/autobind")); var _isEmpty3 = _interopRequireDefault(require("../../_util/isEmpty")); var _FieldList = _interopRequireDefault(require("../../table/query-bar/FieldList")); var _ColumnFilter = _interopRequireDefault(require("../tool-bar/ColumnFilter")); var _enum3 = require("../../text-field/enum"); var _iteratorUtils = require("../../_util/iteratorUtils"); var _QuickFilterMenu = _interopRequireDefault(require("../../table/query-bar/quick-filter/QuickFilterMenu")); var _QuickFilterMenuContext = _interopRequireDefault(require("../../table/query-bar/quick-filter/QuickFilterMenuContext")); var _QuickFilterDataSet = require("../../table/query-bar/quick-filter/QuickFilterDataSet"); /** * 当前数据是否有值并需要选中 * @param data */ function isSelect(data) { if ((0, _isObject["default"])(data[1])) { return !(0, _isEmpty2["default"])(data[1]); } return data[0] !== '__dirty' && !(0, _isEmpty3["default"])(data[1]); } function isEqualDynamicProps(originalValue, newValue) { if ((0, _isEqual["default"])(newValue, originalValue)) { return true; } if ((0, _isObject["default"])(newValue) && (0, _isObject["default"])(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 = (0, _isNumber["default"])(oldValue) ? (0, _isEmpty3["default"])(oldValue) : (0, _isEmpty2["default"])(oldValue); var nEp = (0, _isNumber["default"])(value) ? (0, _isEmpty3["default"])(value) : (0, _isEmpty2["default"])(value); if (oEp && nEp) { return true; } return (0, _isEqual["default"])(oldValue, value); }); } return (0, _isEqual["default"])(newValue, originalValue); } function getQueryData(queryDataSet) { var current = queryDataSet.current; if (current) { var queryData = (0, _omit["default"])(current.toData(true), ['__dirty']); return Object.keys(queryData).reduce(function (p, key) { var value = queryData[key]; if (!(0, _isEmpty3["default"])(value)) { p[key] = value; } return p; }, {}); } return {}; } var TableDynamicFilterBar = /*#__PURE__*/function (_Component) { (0, _inherits2["default"])(TableDynamicFilterBar, _Component); var _super = (0, _createSuper2["default"])(TableDynamicFilterBar); function TableDynamicFilterBar(props, context) { var _this; (0, _classCallCheck2["default"])(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) { _this.originalConditionFields = []; } else { var codes = Array.isArray(code) ? code : [code]; _this.originalConditionFields = (0, _uniq["default"])([].concat((0, _toConsumableArray2["default"])(_this.originalConditionFields), (0, _toConsumableArray2["default"])(codes))); } queryDataSet.setState('selectFields', (0, _toConsumableArray2["default"])(_this.originalConditionFields)); }; /** * 勾选 * @param code */ _this.handleSelect = function (code) { var queryDataSet = _this.props.queryDataSet; var codes = Array.isArray(code) ? code : [code]; var selectFields = queryDataSet.getState('selectFields') || []; queryDataSet.setState('selectFields', (0, _uniq["default"])([].concat((0, _toConsumableArray2["default"])(selectFields), (0, _toConsumableArray2["default"])(codes)))); var shouldUpdate = !(0, _isEqual["default"])((0, _mobx.toJS)(queryDataSet.getState('selectFields') || []), (0, _mobx.toJS)(_this.originalConditionFields)); _this.setConditionStatus(shouldUpdate ? _enum2.RecordStatus.update : _enum2.RecordStatus.sync); }; /** * 取消勾选 * @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["default"].apply(void 0, [(0, _toConsumableArray2["default"])(selectFields)].concat((0, _toConsumableArray2["default"])(codes)))); var shouldUpdate = !(0, _isEqual["default"])((0, _mobx.toJS)(queryDataSet.getState('selectFields')), (0, _mobx.toJS)(_this.originalConditionFields)); _this.setConditionStatus(shouldUpdate ? _enum2.RecordStatus.update : _enum2.RecordStatus.sync); }; (0, _mobx.runInAction)(function () { _this.fieldSelectHidden = true; _this.expand = true; }); return _this; } (0, _createClass2["default"])(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 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(_ref) { var _this2 = this; var dataSet, result, refSingleWrapper; return _regenerator["default"].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 = 7; break; } (0, _mobx.runInAction)(function () { var current = dataSet.current; dataSet.fields.forEach(function (field, key) { if (!field.isValid(current)) { _this2.handleSelect(key); } }); _this2.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 === _enum2.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, _this$props$onQuery = _this$props.onQuery, onQuery = _this$props$onQuery === void 0 ? _noop["default"] : _this$props$onQuery, autoQuery = _this$props.autoQuery; var status = _enum2.RecordStatus.update; if (record) { status = isEqualDynamicProps(this.originalValue, record.toData()) ? _enum2.RecordStatus.sync : _enum2.RecordStatus.update; } this.setConditionStatus(status); if (autoQuery) { dataSet.query(); onQuery(); } } /** * queryDS 新建,初始勾选值 */ }, { key: "handleDataSetCreate", value: function handleDataSetCreate(props) { var _this3 = this; var dataSet = props.dataSet, record = props.record; var queryDataSet = this.props.queryDataSet; var originalValue = record.toData(); var conditionData = Object.entries(originalValue); this.originalValue = originalValue; var fields = dataSet.fields; (0, _map["default"])(conditionData, function (data) { var name = data[0]; if (!fields.has(data[0]) && (0, _isObject["default"])(data[1]) && !(0, _isEmpty2["default"])(data[1]) && !(0, _isArray["default"])(data[1])) { name = "".concat(data[0], ".").concat(Object.keys(data[1])[0]); } if (isSelect(data) && !(queryDataSet.getState('selectFields') || []).includes(name)) { var field = dataSet.getField(name); if (!field || !field.get('bind', record)) { _this3.originalConditionFields.push(name); _this3.handleSelect(name); } } }); this.initMenuDataSet(); } }, { key: "initMenuDataSet", value: function () { var _initMenuDataSet = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() { var _this4 = this; var _this$props2, queryDataSet, dataSet, dynamicFilterBar, searchCode, searchCodes, menuDataSet, conditionDataSet, optionDataSet, filterMenuDataSet, result, menuRecord, current; return _regenerator["default"].wrap(function _callee2$(_context2) { while (1) { switch (_context2.prev = _context2.next) { case 0: _this$props2 = this.props, queryDataSet = _this$props2.queryDataSet, dataSet = _this$props2.dataSet, dynamicFilterBar = _this$props2.dynamicFilterBar, searchCode = _this$props2.searchCode; searchCodes = dynamicFilterBar && dynamicFilterBar.searchCode || searchCode; menuDataSet = new _DataSet["default"]((0, _QuickFilterDataSet.QuickFilterDataSet)({ searchCode: searchCodes, queryDataSet: queryDataSet, tableFilterAdapter: this.tableFilterAdapter })); conditionDataSet = new _DataSet["default"]((0, _QuickFilterDataSet.ConditionDataSet)()); optionDataSet = new _DataSet["default"]({ selection: _enum2.DataSetSelection.single }); filterMenuDataSet = new _DataSet["default"]({ autoCreate: true, fields: [{ name: 'filterName', type: _enum2.FieldType.string, textField: 'searchName', valueField: 'searchId', options: optionDataSet, ignore: _enum2.FieldIgnore.always }] }); queryDataSet.setState('menuDataSet', menuDataSet); queryDataSet.setState('conditionDataSet', conditionDataSet); queryDataSet.setState('optionDataSet', optionDataSet); queryDataSet.setState('filterMenuDataSet', filterMenuDataSet); _context2.next = 12; return menuDataSet.query(); case 12: result = _context2.sent; if (optionDataSet) { optionDataSet.loadData(result); } menuRecord = menuDataSet.current; if (menuRecord) { conditionDataSet.loadData(menuRecord.get('conditionList')); } if (result && result.length) { (0, _mobx.runInAction)(function () { _this4.shouldLocateData = true; }); } else { current = filterMenuDataSet.current; if (current) current.set('filterName', undefined); (0, _mobx.runInAction)(function () { _this4.shouldLocateData = true; }); if (dataSet.props.autoQuery) { dataSet.query(); } } case 17: case "end": return _context2.stop(); } } }, _callee2, 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$props3 = this.props, dynamicFilterBar = _this$props3.dynamicFilterBar, queryDataSet = _this$props3.queryDataSet, dataSet = _this$props3.dataSet; var suffixes = dynamicFilterBar && dynamicFilterBar.suffixes || tableStore.getConfig('tableFilterSuffix'); var children = []; if (suffixes && suffixes.length) { suffixes.forEach(function (suffix) { if (suffix === 'filter') { children.push( /*#__PURE__*/_react["default"].createElement(_ColumnFilter["default"], { prefixCls: proPrefixCls })); } else if ( /*#__PURE__*/(0, _react.isValidElement)(suffix)) { children.push(suffix); } else if ((0, _isFunction["default"])(suffix)) { children.push(suffix({ queryDataSet: queryDataSet, dataSet: dataSet })); } }); return /*#__PURE__*/_react["default"].createElement("div", { className: "".concat(proPrefixCls, "-dynamic-filter-bar-suffix") }, children); } } }, { key: "getPrefix", value: function getPrefix() { var proPrefixCls = this.context.tableStore.proPrefixCls; var _this$props4 = this.props, dynamicFilterBar = _this$props4.dynamicFilterBar, queryDataSet = _this$props4.queryDataSet, dataSet = _this$props4.dataSet; var prefixes = dynamicFilterBar && dynamicFilterBar.prefixes; var children = []; if (prefixes && prefixes.length) { prefixes.forEach(function (prefix) { if ((0, _isString["default"])(prefix) && prefix === 'filter') { children.push( /*#__PURE__*/_react["default"].createElement(_ColumnFilter["default"], { prefixCls: proPrefixCls })); } else if ( /*#__PURE__*/(0, _react.isValidElement)(prefix)) { children.push(prefix); } else if ((0, _isFunction["default"])(prefix)) { children.push(prefix({ queryDataSet: queryDataSet, dataSet: dataSet })); } }); return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", { className: "".concat(proPrefixCls, "-dynamic-filter-bar-prefix") }, children), /*#__PURE__*/_react["default"].createElement("span", { className: "".concat(proPrefixCls, "-filter-search-divide") })); } return null; } /** * 注入 onEnterDown 事件 * @param element * @param name */ }, { key: "createFields", value: function createFields(element, name) { var _this5 = this; var onEnterDown = element.props.onEnterDown; if (onEnterDown && (0, _isFunction["default"])(onEnterDown)) { return element; } var props = { onEnterDown: function onEnterDown() { _this5.handleQuery(); }, ref: function ref(node) { return _this5.refEditors.set(name, node); } }; return /*#__PURE__*/(0, _react.cloneElement)(element, props); } /** * 判断查询值是否为空 * @param value */ }, { key: "isEmpty", value: function isEmpty(value) { return (0, _mobx.isArrayLike)(value) ? !value.length : (0, _isEmpty3["default"])(value); } }, { key: "tableFilterAdapter", get: function get() { var dynamicFilterBar = this.props.dynamicFilterBar; var tableStore = this.context.tableStore; return dynamicFilterBar && dynamicFilterBar.tableFilterAdapter || tableStore.getConfig('tableFilterAdapter'); } /** * 是否单行操作 */ }, { key: "isSingleLineOpt", value: function isSingleLineOpt() { var fuzzyQuery = this.props.fuzzyQuery; return !(fuzzyQuery || this.tableFilterAdapter); } /** * 渲染展开逻辑 * @param hidden 是否隐藏全部 */ }, { key: "getExpandNode", value: function getExpandNode(hidden) { var _this6 = this; var proPrefixCls = this.context.tableStore.proPrefixCls; var expandButton = this.props.expandButton; if (!expandButton) { return; } return /*#__PURE__*/_react["default"].createElement("span", { className: "".concat(proPrefixCls, "-filter-menu-expand"), onClick: function onClick() { var refSingleWrapper = _this6.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; (0, _mobx.runInAction)(function () { _this6.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 = (0, _UnitConvertor.pxToRem)(childHeight + 18, true) || ''; refSingleWrapper.style.overflow = 'hidden'; } else { refSingleWrapper.style.height = ''; refSingleWrapper.style.overflow = ''; } } } }, this.expand ? /*#__PURE__*/_react["default"].createElement(_tooltip["default"], { title: (0, _localeContext.$l)('Table', 'collapse') }, /*#__PURE__*/_react["default"].createElement(_icon["default"], { type: "baseline-arrow_drop_up" })) : /*#__PURE__*/_react["default"].createElement(_tooltip["default"], { title: (0, _localeContext.$l)('Table', 'expand_button') }, /*#__PURE__*/_react["default"].createElement(_icon["default"], { type: "baseline-arrow_drop_down" }))); } /** * 渲染模糊搜索 */ }, { key: "getFuzzyQuery", value: function getFuzzyQuery() { var _this7 = this; var fuzzyQuery = this.props.fuzzyQuery; if (!fuzzyQuery) return null; var _this$props5 = this.props, dataSet = _this$props5.dataSet, dynamicFilterBar = _this$props5.dynamicFilterBar, autoQueryAfterReset = _this$props5.autoQueryAfterReset, fuzzyQueryPlaceholder = _this$props5.fuzzyQueryPlaceholder, _this$props5$onReset = _this$props5.onReset, onReset = _this$props5$onReset === void 0 ? _noop["default"] : _this$props5$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 || (0, _localeContext.$l)('Table', 'enter_search_content'); return /*#__PURE__*/_react["default"].createElement("div", { className: "".concat(proPrefixCls, "-filter-search") }, /*#__PURE__*/_react["default"].createElement(_textField["default"], { style: { width: 280 }, clearButton: true, placeholder: placeholder, prefix: /*#__PURE__*/_react["default"].createElement(_icon["default"], { type: "search" }), value: this.searchText, valueChangeAction: _enum3.ValueChangeAction.input, onChange: (0, _debounce["default"])(function (value) { (0, _mobx.runInAction)(function () { _this7.searchText = value || ''; if (dynamicFilterBar && dynamicFilterBar.quickSearch) { tableStore.highlightRowIndexs = []; tableStore.searchText = value || ''; node.forceUpdate(); } }); dataSet.setQueryParameter(searchText, value); _this7.handleQuery(); }, 500), onKeyDown: function onKeyDown(e) { if (e.keyCode === _KeyCode["default"].ENTER && dynamicFilterBar && dynamicFilterBar.quickSearch) { e.preventDefault(); var rows = (0, _toConsumableArray2["default"])(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() { (0, _mobx.runInAction)(function () { _this7.searchText = ''; if (dynamicFilterBar && dynamicFilterBar.quickSearch) { tableStore.searchText = ''; tableStore.highlightRowIndexs = []; node.forceUpdate(); } }); onReset(); if (autoQueryAfterReset) { dataSet.setQueryParameter(searchText, undefined); _this7.handleQuery(true); } } })); } /** * 渲染重置按钮 */ }, { key: "getResetButton", value: function getResetButton() { var _this8 = this; var proPrefixCls = this.context.tableStore.proPrefixCls; var _this$props6 = this.props, queryDataSet = _this$props6.queryDataSet, autoQueryAfterReset = _this$props6.autoQueryAfterReset, _this$props6$onReset = _this$props6.onReset, onReset = _this$props6$onReset === void 0 ? _noop["default"] : _this$props6$onReset; return /*#__PURE__*/_react["default"].createElement("div", { className: "".concat(proPrefixCls, "-filter-buttons") }, queryDataSet.getState('conditionStatus') === _enum2.RecordStatus.update && /*#__PURE__*/_react["default"].createElement(_button["default"], { onClick: function onClick() { if (queryDataSet) { var current = queryDataSet.current; if (current) { current.reset(); _this8.handleDataSetCreate({ dataSet: queryDataSet, record: current }); } } _this8.setConditionStatus(_enum2.RecordStatus.sync); onReset(); if (autoQueryAfterReset) { _this8.handleQuery(); } } }, (0, _localeContext.$l)('Table', 'reset_button'))); } /** * 筛选头 * fuzzyQuery + quickFilterMenu + resetButton + buttons */ }, { key: "getFilterMenu", value: function getFilterMenu() { var proPrefixCls = this.context.tableStore.proPrefixCls; var _this$props7 = this.props, queryFields = _this$props7.queryFields, queryDataSet = _this$props7.queryDataSet, dataSet = _this$props7.dataSet, dynamicFilterBar = _this$props7.dynamicFilterBar, searchCode = _this$props7.searchCode, autoQuery = _this$props7.autoQuery, expandButton = _this$props7.expandButton; if (queryDataSet && queryFields.length) { var prefix = this.getPrefix(); var fuzzyQuery = this.getFuzzyQuery(); var searchCodes = dynamicFilterBar && dynamicFilterBar.searchCode || searchCode; var quickFilterMenu = this.tableFilterAdapter && searchCodes ? /*#__PURE__*/_react["default"].createElement(_QuickFilterMenuContext["default"].Provider, { value: { 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 } }, /*#__PURE__*/_react["default"].createElement(_QuickFilterMenu["default"], null)) : null; var resetButton = this.isSingleLineOpt() || this.tableFilterAdapter ? null : this.getResetButton(); var expandNode = this.getExpandNode(true); return /*#__PURE__*/_react["default"].createElement("div", { className: "".concat(proPrefixCls, "-filter-menu") }, prefix, fuzzyQuery, quickFilterMenu, resetButton, this.isSingleLineOpt() ? null : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, expandButton ? /*#__PURE__*/_react["default"].createElement("span", { className: "".concat(proPrefixCls, "-filter-search-divide") }) : null, expandNode), this.renderSuffix()); } } /** * 渲染查询条 */ }, { key: "getQueryBar", value: function getQueryBar() { var _this9 = this; var proPrefixCls = this.context.tableStore.proPrefixCls; var _this$props8 = this.props, _this$props8$queryFie = _this$props8.queryFieldsLimit, queryFieldsLimit = _this$props8$queryFie === void 0 ? 3 : _this$props8$queryFie, queryFields = _this$props8.queryFields, queryDataSet = _this$props8.queryDataSet; var selectFields = queryDataSet.getState('selectFields') || []; var singleLineModeAction = this.isSingleLineOpt() ? /*#__PURE__*/_react["default"].createElement("div", { className: "".concat(proPrefixCls, "-dynamic-filter-bar-single-action") }, this.getResetButton(), this.getExpandNode(false)) : null; if (queryDataSet && queryFields.length) { return /*#__PURE__*/_react["default"].createElement("div", { key: "query_bar", className: "".concat(proPrefixCls, "-dynamic-filter-bar") }, this.getFilterMenu(), /*#__PURE__*/_react["default"].createElement("div", { className: "".concat(proPrefixCls, "--dynamic-filter-single-wrapper"), ref: function ref(node) { return _this9.refSingleWrapper = node; } }, /*#__PURE__*/_react["default"].createElement("div", { className: "".concat(proPrefixCls, "-filter-wrapper") }, queryFields.slice(0, queryFieldsLimit).map(function (element) { var _element$props = element.props, name = _element$props.name, hidden = _element$props.hidden; if (hidden) return null; var queryField = queryDataSet.getField(name); var itemClassName = "".concat(proPrefixCls, "-filter-item"); return /*#__PURE__*/_react["default"].createElement("div", { className: "".concat(proPrefixCls, "-filter-content"), key: name, onClick: function onClick() { return _this9.refEditors.get(name).focus(); } }, /*#__PURE__*/_react["default"].createElement("span", { className: "".concat(proPrefixCls, "-filter-label") }, queryField && queryField.get('label')), /*#__PURE__*/_react["default"].createElement("span", { className: itemClassName }, _this9.createFields(element, name))); }), queryFields.slice(queryFieldsLimit).map(function (element) { var _element$props2 = element.props, name = _element$props2.name, hidden = _element$props2.hidden; if (hidden) return null; var queryField = queryDataSet.getField(name); if (selectFields.includes(name)) { return /*#__PURE__*/_react["default"].createElement("div", { className: "".concat(proPrefixCls, "-filter-content"), key: name, onClick: function onClick() { return _this9.refEditors.get(name).focus(); } }, /*#__PURE__*/_react["default"].createElement(_icon["default"], { type: "cancel", className: "".concat(proPrefixCls, "-filter-item-close"), onClick: function onClick() { _this9.handleUnSelect([name]); } }), /*#__PURE__*/_react["default"].createElement("span", { className: "".concat(proPrefixCls, "-filter-label") }, queryField && queryField.get('label')), /*#__PURE__*/_react["default"].createElement("span", { className: "".concat(proPrefixCls, "-filter-item") }, _this9.createFields(element, name))); } return null; }), queryFieldsLimit < queryFields.length && /*#__PURE__*/_react["default"].createElement("div", { className: "".concat(proPrefixCls, "-filter-item") }, /*#__PURE__*/_react["default"].createElement(_dropdown["default"], { visible: !this.fieldSelectHidden, overlay: /*#__PURE__*/_react["default"].createElement("div", { role: "none", ref: function ref(node) { return _this9.refDropdown = node; }, onClick: function onClick(e) { e.stopPropagation(); } }, /*#__PURE__*/_react["default"].createElement(_FieldList["default"], { groups: [{ title: (0, _localeContext.$l)('Table', 'predefined_fields'), fields: (0, _iteratorUtils.iteratorFilterToArray)(queryDataSet.fields.values(), function (f) { return !f.get('bind') && !f.get('name').includes('__tls'); }).slice(queryFieldsLimit) }], prefixCls: "".concat(proPrefixCls, "-filter-list") || 'c7n-pro-table-filter-list', closeMenu: function closeMenu() { return (0, _mobx.runInAction)(function () { return _this9.fieldSelectHidden = true; }); }, value: selectFields, onSelect: this.handleSelect, onUnSelect: this.handleUnSelect })), trigger: [_enum.Action.click] }, /*#__PURE__*/_react["default"].createElement("span", { className: "".concat(proPrefixCls, "-add-fields"), onClick: function onClick(e) { e.nativeEvent.stopImmediatePropagation(); (0, _mobx.runInAction)(function () { _this9.fieldSelectHidden = false; }); } }, /*#__PURE__*/_react["default"].createElement(_icon["default"], { type: "add" }), (0, _localeContext.$l)('Table', 'add_filter'))))), singleLineModeAction)); } return null; } }, { key: "handleQuery", value: function handleQuery(collapse) { var _this$props9 = this.props, dataSet = _this$props9.dataSet, queryDataSet = _this$props9.queryDataSet, _this$props9$onQuery = _this$props9.onQuery, onQuery = _this$props9$onQuery === void 0 ? _noop["default"] : _this$props9$onQuery, autoQuery = _this$props9.autoQuery; if (autoQuery) { 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(); } }], [{ key: "contextType", get: function get() { return _TableContext["default"]; } }]); return TableDynamicFilterBar; }(_react.Component); TableDynamicFilterBar.defaultProps = { prefixCls: (0, _utils.getProPrefixCls)('table'), queryFieldsLimit: 3, autoQueryAfterReset: true, fuzzyQuery: true, autoQuery: true, expandButton: true }; (0, _tslib.__decorate)([_mobx.observable], TableDynamicFilterBar.prototype, "moreFields", void 0); (0, _tslib.__decorate)([_mobx.observable], TableDynamicFilterBar.prototype, "fieldSelectHidden", void 0); (0, _tslib.__decorate)([_mobx.observable], TableDynamicFilterBar.prototype, "expand", void 0); (0, _tslib.__decorate)([_mobx.observable], TableDynamicFilterBar.prototype, "searchText", void 0); (0, _tslib.__decorate)([_mobx.observable], TableDynamicFilterBar.prototype, "shouldLocateData", void 0); (0, _tslib.__decorate)([_mobx.action], TableDynamicFilterBar.prototype, "handleClickOut", void 0); (0, _tslib.__decorate)([_autobind["default"]], TableDynamicFilterBar.prototype, "handleDataSetValidate", null); (0, _tslib.__decorate)([_autobind["default"]], TableDynamicFilterBar.prototype, "setConditionStatus", null); (0, _tslib.__decorate)([_mobx.action], TableDynamicFilterBar.prototype, "setOriginalConditionFields", void 0); (0, _tslib.__decorate)([_autobind["default"]], TableDynamicFilterBar.prototype, "handleDataSetUpdate", null); (0, _tslib.__decorate)([_autobind["default"]], TableDynamicFilterBar.prototype, "handleDataSetCreate", null); (0, _tslib.__decorate)([_autobind["default"]], TableDynamicFilterBar.prototype, "initMenuDataSet", null); (0, _tslib.__decorate)([_mobx.action], TableDynamicFilterBar.prototype, "handleSelect", void 0); (0, _tslib.__decorate)([_mobx.action], TableDynamicFilterBar.prototype, "handleUnSelect", void 0); (0, _tslib.__decorate)([_autobind["default"]], TableDynamicFilterBar.prototype, "handleQuery", null); TableDynamicFilterBar = (0, _tslib.__decorate)([_mobxReact.observer], TableDynamicFilterBar); var _default = TableDynamicFilterBar; exports["default"] = _default; //# sourceMappingURL=TableDynamicFilterBar.js.map