UNPKG

choerodon-ui

Version:

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

796 lines (688 loc) 27.2 kB
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