UNPKG

choerodon-ui

Version:

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

748 lines (626 loc) 27.7 kB
"use strict"; var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard"); var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); Object.defineProperty(exports, "__esModule", { value: true }); exports["default"] = void 0; var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty")); 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 _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn")); var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf")); var _tslib = require("tslib"); var _react = _interopRequireWildcard(require("react")); var _mobxReact = require("mobx-react"); var _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 _classnames = _interopRequireDefault(require("classnames")); var _configure = require("../../../../lib/configure"); var _UnitConvertor = require("../../../../lib/_util/UnitConvertor"); var _icon = _interopRequireDefault(require("../../../../lib/icon")); var _enum = require("../../data-set/enum"); var _button = _interopRequireDefault(require("../../button")); var _dropdown = _interopRequireDefault(require("../../dropdown")); var _textField = _interopRequireDefault(require("../../text-field")); var _TableContext = _interopRequireDefault(require("../TableContext")); var _enum2 = require("../../button/enum"); var _localeContext = require("../../locale-context"); var _autobind = _interopRequireDefault(require("../../_util/autobind")); var _isEmpty3 = _interopRequireDefault(require("../../_util/isEmpty")); var _enum3 = require("../../trigger/enum"); var _FieldList = _interopRequireDefault(require("./FieldList")); var _TableButtons = _interopRequireDefault(require("./TableButtons")); var _ColumnFilter = _interopRequireDefault(require("./ColumnFilter")); var _quickFilter = _interopRequireDefault(require("./quick-filter")); function _createSuper(Derived) { function isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } } return function () { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (isNativeReflectConstruct()) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; } /** * 当前数据是否有值并需要选中 * @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); } var TableDynamicFilterBar = /*#__PURE__*/ function (_Component) { (0, _inherits2["default"])(TableDynamicFilterBar, _Component); var _super = _createSuper(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.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 = (0, _uniq["default"])([].concat((0, _toConsumableArray2["default"])(_this.selectFields), (0, _toConsumableArray2["default"])(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["default"].apply(void 0, [(0, _toConsumableArray2["default"])(_this.selectFields)].concat((0, _toConsumableArray2["default"])(codes))); }; (0, _mobx.runInAction)(function () { _this.fieldSelectHidden = true; _this.selectFields = []; _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, fields; 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 = 9; break; } fields = (0, _toConsumableArray2["default"])(dataSet.fields.keys()); (0, _map["default"])(fields, function (field) { if (!dataSet.current.getField(field).isValid()) { _this2.handleSelect(field); } }); (0, _mobx.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; (0, _mobx.runInAction)(function () { return _this3.conditionStatus = value; }); if (value === _enum.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; var status = _enum.RecordStatus.update; if (record) { status = isEqualDynamicProps(this.originalValue, record.toData()) ? _enum.RecordStatus.sync : _enum.RecordStatus.update; } this.setConditionStatus(status); dataSet.query(); onQuery(); } /** * 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 = (0, _toConsumableArray2["default"])(dataSet.fields.keys()); (0, _map["default"])(conditionData, function (data) { var name = data[0]; if (!keys.includes(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) && !dataSet.getField(name).get('bind')) { _this4.handleSelect(name); } }); } /** * tableFilterSuffix 预留自定义区域 */ }, { key: "renderSuffix", value: function renderSuffix() { var _this$props2 = this.props, prefixCls = _this$props2.prefixCls, dynamicFilterBar = _this$props2.dynamicFilterBar, queryDataSet = _this$props2.queryDataSet, dataSet = _this$props2.dataSet; var suffixes = (dynamicFilterBar === null || dynamicFilterBar === void 0 ? void 0 : dynamicFilterBar.suffixes) || (0, _configure.getConfig)('tableFilterSuffix') || undefined; var children = []; if (suffixes && suffixes.length) { suffixes.forEach(function (suffix) { if ((0, _isString["default"])(suffix) && suffix === 'filter') { children.push(_react["default"].createElement(_ColumnFilter["default"], { prefixCls: prefixCls })); } else if ((0, _react.isValidElement)(suffix)) { children.push(suffix); } else if ((0, _isFunction["default"])(suffix)) { children.push(suffix({ queryDataSet: queryDataSet, dataSet: dataSet })); } }); return _react["default"].createElement("div", { className: "".concat(prefixCls, "-dynamic-filter-bar-suffix") }, children); } return null; } /** * 注入 onEnterDown 事件 * @param element */ }, { key: "createFields", value: function createFields(element) { var _this5 = this; var onEnterDown = element.props.onEnterDown; if (onEnterDown && (0, _isFunction["default"])(onEnterDown)) { return element; } var props = { onEnterDown: function onEnterDown() { _this5.handleQuery(); } }; return (0, _react.cloneElement)(element, props); } /** * 判断查询值是否为空 * @param value */ }, { key: "isEmpty", value: function isEmpty(value) { return (0, _mobx.isArrayLike)(value) ? !value.length : (0, _isEmpty3["default"])(value); } /** * 渲染展开逻辑 * @param hidden 是否隐藏全部 */ }, { key: "getExpandNode", value: function getExpandNode(hidden) { var _this6 = this; var prefixCls = this.props.prefixCls; return _react["default"].createElement("span", { className: "".concat(prefixCls, "-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; (0, _mobx.runInAction)(function () { _this6.expand = hidden ? height <= 0 : height <= childHeight + 2; }); if (hidden && height) { // 收起全部 _this6.refFilterWrapper.style.display = 'none'; } else { _this6.refFilterWrapper.style.display = 'inline-flex'; _this6.refFilterWrapper.style.height = ''; _this6.refFilterWrapper.style.overflow = ''; } if (height > childHeight && !hidden) { // 收起留一行高度 _this6.refFilterWrapper.style.height = (0, _UnitConvertor.pxToRem)(childHeight) || ''; _this6.refFilterWrapper.style.overflow = 'hidden'; } else { _this6.refFilterWrapper.style.height = ''; _this6.refFilterWrapper.style.overflow = ''; } } }, this.expand ? _react["default"].createElement(_react["default"].Fragment, null, (0, _localeContext.$l)('Table', 'collapse'), _react["default"].createElement(_icon["default"], { type: 'expand_less' })) : _react["default"].createElement(_react["default"].Fragment, null, (0, _localeContext.$l)('Table', 'expand_button'), _react["default"].createElement(_icon["default"], { type: 'expand_more' }))); } /** * 获取筛选下拉 */ }, { key: "getFilterMenu", value: function getFilterMenu() { var _this7 = this; var _this$props3 = this.props, prefixCls = _this$props3.prefixCls, queryFields = _this$props3.queryFields, queryDataSet = _this$props3.queryDataSet, dataSet = _this$props3.dataSet, dynamicFilterBar = _this$props3.dynamicFilterBar, _this$props3$onReset = _this$props3.onReset, onReset = _this$props3$onReset === void 0 ? _noop["default"] : _this$props3$onReset; var tableFilterAdapter = (dynamicFilterBar === null || dynamicFilterBar === void 0 ? void 0 : dynamicFilterBar.tableFilterAdapter) || (0, _configure.getConfig)('tableFilterAdapter'); if (queryDataSet && queryFields.length && tableFilterAdapter) { return _react["default"].createElement("div", { className: "".concat(prefixCls, "-filter-menu") }, _react["default"].createElement(_quickFilter["default"], { prefixCls: prefixCls, expand: this.expand, dynamicFilterBar: dynamicFilterBar, dataSet: dataSet, queryDataSet: queryDataSet, onChange: this.handleSelect, conditionStatus: this.conditionStatus, onStatusChange: this.setConditionStatus }), this.getExpandNode(true)); } if (queryDataSet && queryDataSet.current) { return _react["default"].createElement("div", { className: "".concat(prefixCls, "-filter-rest-buttons") }, this.conditionStatus === _enum.RecordStatus.update && _react["default"].createElement(_button["default"], { onClick: function onClick() { if (queryDataSet && queryDataSet.current) { queryDataSet.current.reset(); } _this7.handleDataSetCreate({ dataSet: queryDataSet, record: queryDataSet.current }); _this7.setConditionStatus(_enum.RecordStatus.sync); dataSet.query(); onReset(); }, color: _enum2.ButtonColor.primary }, (0, _localeContext.$l)('Table', 'reset_button')), this.getExpandNode(false)); } } /** * 渲染查询条 */ }, { key: "getQueryBar", value: function getQueryBar() { var _this8 = this; var _this$props4 = this.props, prefixCls = _this$props4.prefixCls, _this$props4$queryFie = _this$props4.queryFieldsLimit, queryFieldsLimit = _this$props4$queryFie === void 0 ? 3 : _this$props4$queryFie, queryFields = _this$props4.queryFields, queryDataSet = _this$props4.queryDataSet, _this$props4$onReset = _this$props4.onReset, onReset = _this$props4$onReset === void 0 ? _noop["default"] : _this$props4$onReset, dataSet = _this$props4.dataSet, dynamicFilterBar = _this$props4.dynamicFilterBar; var searchText = (dynamicFilterBar === null || dynamicFilterBar === void 0 ? void 0 : dynamicFilterBar.searchText) || (0, _configure.getConfig)('tableFilterSearchText') || 'params'; if (queryDataSet && queryFields.length) { return _react["default"].createElement("div", { key: "query_bar", className: "".concat(prefixCls, "-dynamic-filter-bar") }, this.getFilterMenu(), _react["default"].createElement("div", { className: "".concat(prefixCls, "-filter-wrapper"), ref: function ref(node) { return _this8.refFilterWrapper = node; } }, queryFields.slice(0, queryFieldsLimit).map(function (element) { var _element$props = element.props, name = _element$props.name, suffixCls = _element$props.suffixCls; var value = element.props.dataSet.current && element.props.dataSet.current.get(name); var queryField = queryDataSet.getField(name); var hasLabel = !_this8.isEmpty(value) || suffixCls === 'checkbox'; var itemClassName = (0, _classnames["default"])("".concat(prefixCls, "-filter-item"), (0, _defineProperty2["default"])({}, "".concat(prefixCls, "-filter-item-label"), hasLabel)); return _react["default"].createElement("div", { className: "".concat(prefixCls, "-filter-content"), key: "".concat(name, "-label") }, hasLabel ? _react["default"].createElement("span", { className: "".concat(prefixCls, "-filter-label") }, queryField === null || queryField === void 0 ? void 0 : queryField.get('label')) : null, _react["default"].createElement("span", { className: itemClassName }, _this8.createFields(element))); }), queryFields.slice(queryFieldsLimit).map(function (element) { var _element$props2 = element.props, name = _element$props2.name, suffixCls = _element$props2.suffixCls; var value = element.props.dataSet.current && element.props.dataSet.current.get(name); var queryField = queryDataSet.getField(name); if (_this8.selectFields.includes(name)) { return _react["default"].createElement("div", { className: "".concat(prefixCls, "-filter-content"), key: name }, _react["default"].createElement("span", { className: "".concat(prefixCls, "-filter-label") }, !_this8.isEmpty(value) || suffixCls === 'checkbox' ? queryField === null || queryField === void 0 ? void 0 : queryField.get('label') : ''), _react["default"].createElement("span", { className: "".concat(prefixCls, "-filter-item") }, _this8.createFields(element), _react["default"].createElement(_icon["default"], { type: "cancel", className: "".concat(prefixCls, "-filter-item-close"), onClick: function onClick() { _this8.handleUnSelect([name]); } }))); } return null; }), queryFieldsLimit < queryFields.length && _react["default"].createElement("div", { className: "".concat(prefixCls, "-filter-item") }, _react["default"].createElement(_dropdown["default"], { visible: !this.fieldSelectHidden, overlay: _react["default"].createElement("div", { role: "none", ref: function ref(node) { return _this8.refDropdown = node; }, onClick: function onClick(e) { e.stopPropagation(); } }, _react["default"].createElement(_FieldList["default"], { groups: [{ title: (0, _localeContext.$l)('Table', 'predefined_fields'), fields: (0, _toConsumableArray2["default"])(queryDataSet.fields.values()).filter(function (f) { return !f.get('bind'); }).slice(queryFieldsLimit) }], prefixCls: "".concat(prefixCls, "-filter-list") || 'c7n-pro-table-filter-list', closeMenu: function closeMenu() { return (0, _mobx.runInAction)(function () { return _this8.fieldSelectHidden = true; }); }, value: this.selectFields, onSelect: this.handleSelect, onUnSelect: this.handleUnSelect })), trigger: [_enum3.Action.click] }, _react["default"].createElement("span", { className: "".concat(prefixCls, "-add-fields"), onClick: function onClick(e) { e.nativeEvent.stopImmediatePropagation(); (0, _mobx.runInAction)(function () { _this8.fieldSelectHidden = false; }); } }, (0, _localeContext.$l)('Table', 'add_filter'), _react["default"].createElement(_icon["default"], { type: "arrow_drop_down" })))), _react["default"].createElement("div", { className: "".concat(prefixCls, "-filter-search") }, _react["default"].createElement(_textField["default"], { clearButton: true, placeholder: (0, _localeContext.$l)('Table', 'enter_search_content'), suffix: _react["default"].createElement(_icon["default"], { type: "search" }), value: this.searchText, onChange: function onChange() { return _noop["default"]; }, onClear: function onClear() { (0, _mobx.runInAction)(function () { _this8.searchText = ''; }); onReset(); dataSet.setQueryParameter(searchText, undefined); _this8.handleQuery(true); }, onInput: function onInput(e) { // @ts-ignore var value = e.target.value; (0, _mobx.runInAction)(function () { _this8.searchText = value || ''; }); dataSet.setQueryParameter(searchText, value); _this8.handleQuery(); } })))); } return null; } }, { key: "handleQuery", value: function handleQuery(collapse) { var _this$props5 = this.props, dataSet = _this$props5.dataSet, _this$props5$onQuery = _this$props5.onQuery, onQuery = _this$props5$onQuery === void 0 ? _noop["default"] : _this$props5$onQuery; dataSet.query(); if (!collapse) { onQuery(); } } }, { key: "render", value: function render() { var _this$props6 = this.props, prefixCls = _this$props6.prefixCls, buttons = _this$props6.buttons, summaryBar = _this$props6.summaryBar; var queryBar = this.getQueryBar(); var tableButtons = buttons.length ? _react["default"].createElement("div", { key: "dynamic_filter_toolbar", className: "".concat(prefixCls, "-dynamic-filter-toolbar") }, _react["default"].createElement(_TableButtons["default"], { key: "toolbar", prefixCls: prefixCls, buttons: buttons }, summaryBar, this.renderSuffix())) : _react["default"].createElement("div", { className: "".concat(prefixCls, "-toolbar") }, summaryBar); return [queryBar, tableButtons]; } }]); return TableDynamicFilterBar; }(_react.Component); TableDynamicFilterBar.contextType = _TableContext["default"]; TableDynamicFilterBar.defaultProps = { prefixCls: (0, _configure.getProPrefixCls)('table'), queryFieldsLimit: 3 }; (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, "selectFields", 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, "conditionStatus", 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)([_autobind["default"]], TableDynamicFilterBar.prototype, "handleDataSetUpdate", null); (0, _tslib.__decorate)([_autobind["default"]], TableDynamicFilterBar.prototype, "handleDataSetCreate", 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