UNPKG

choerodon-ui

Version:

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

691 lines (612 loc) 27.1 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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray")); var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty")); var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2")); var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator")); var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray")); var _react = _interopRequireWildcard(require("react")); var _mobx = require("mobx"); var _mobxReactLite = require("mobx-react-lite"); var _reactBeautifulDnd = require("react-beautiful-dnd"); var _sortBy = _interopRequireDefault(require("lodash/sortBy")); var _isNumber = _interopRequireDefault(require("lodash/isNumber")); var _omit = _interopRequireDefault(require("lodash/omit")); var _noop = _interopRequireDefault(require("lodash/noop")); var _collapse = _interopRequireDefault(require("../../../../lib/collapse")); var _tag = _interopRequireDefault(require("../../../../lib/tag")); var _utils = require("choerodon-ui/dataset/utils"); var _CollapsePanel = _interopRequireDefault(require("../../../../lib/collapse/CollapsePanel")); var _BoardContext = _interopRequireDefault(require("../BoardContext")); var _select = _interopRequireDefault(require("../../select")); var _form = _interopRequireDefault(require("../../form")); var _enum = require("../../data-set/enum"); var _selectBox = _interopRequireDefault(require("../../select-box")); var _button = _interopRequireDefault(require("../../button")); var _icon = _interopRequireDefault(require("../../icon")); var _enum2 = require("../enum"); var _utils2 = require("../../table/utils"); var _tree = _interopRequireDefault(require("./tree")); var _TreeNode = _interopRequireDefault(require("./tree/TreeNode")); var _treeUtils = require("../../_util/treeUtils"); var _tooltip = _interopRequireDefault(require("../../tooltip")); var _numberField = _interopRequireDefault(require("../../number-field")); var _textField = _interopRequireDefault(require("../../text-field")); var _localeContext = require("../../locale-context"); var _interface = require("../../button/interface"); var _DataSet = _interopRequireDefault(require("../../data-set/DataSet")); // import { $l } from 'choerodon-ui/pro/lib/locale-context'; function normalizeColumnsToTreeData(columns, displayFields, displaySort) { return (0, _toConsumableArray2["default"])((0, _treeUtils.treeReduce)(columns, function (map, column, _sort, parentColumn) { if ((!column.__tableGroup || !column.children && column.__group) && column.name) { var key = column.__originalKey || (0, _utils2.getColumnKey)(column); var sort = displaySort ? displaySort.find(function (s) { return s.name === key; }) : undefined; map.set(key, { key: key, parentKey: parentColumn && (parentColumn.__originalKey || (0, _utils2.getColumnKey)(parentColumn)), width: column.width, header: column.header, title: column.title, hidden: !displayFields.includes(column.name), name: column.name, sort: (0, _isNumber["default"])(sort) ? sort : column.sort || 999, hideable: column.hideable }); } return map; }, new Map()).values()); } var KanbanCustomizationSettings = function CustomizationSettings(props) { var modal = props.modal, viewMode = props.viewMode; var _useContext = (0, _react.useContext)(_BoardContext["default"]), _useContext$onConfigC = _useContext.onConfigChange, onConfigChange = _useContext$onConfigC === void 0 ? _noop["default"] : _useContext$onConfigC, autoQuery = _useContext.autoQuery, customizedCode = _useContext.customizedCode, getConfig = _useContext.getConfig, optionDS = _useContext.optionDS, prefixCls = _useContext.prefixCls, customizedDS = _useContext.customizedDS, dataSet = _useContext.dataSet, saveCustomized = _useContext.saveCustomized, displayFields = _useContext.displayFields; var tempCustomized = (0, _react.useRef)(customizedDS.current.toData()); var defaultData = tempCustomized.current; var PanelRef = (0, _react.useRef)(null); var customizedLoad = getConfig('customizedLoad'); var kanbanRecord = (0, _react.useMemo)(function () { return new _DataSet["default"]({ autoCreate: true, fields: [{ name: _enum2.ViewField.groupField, type: _enum.FieldType.string, options: optionDS, defaultValue: defaultData[_enum2.ViewField.groupField], ignore: viewMode === _enum2.ViewMode.card ? _enum.FieldIgnore.always : _enum.FieldIgnore.clean, required: true }, { name: _enum2.ViewField.viewName, type: _enum.FieldType.string, defaultValue: defaultData[_enum2.ViewField.viewName] || '', required: true }, { name: _enum2.ViewField.viewHeight, type: _enum.FieldType.number, defaultValue: defaultData[_enum2.ViewField.viewHeight] || 366, step: 1, required: true }, { name: _enum2.ViewField.cardWidth, type: _enum.FieldType.number, defaultValue: defaultData[_enum2.ViewField.cardWidth] || 6 }, { name: _enum2.ViewField.displayFields, type: _enum.FieldType.string, multiple: true, defaultValue: defaultData[_enum2.ViewField.displayFields] || displayFields.slice(0, 3).map(function (field) { return field.name || field.header; }) }, { name: _enum2.ViewField.sort, type: _enum.FieldType.object, defaultValue: defaultData[_enum2.ViewField.sort] }, { name: _enum2.ViewField.combineSort, type: _enum.FieldType.object, defaultValue: defaultData[_enum2.ViewField.combineSort] }, { name: _enum2.ViewField.showLabel, type: _enum.FieldType["boolean"], trueValue: 1, falseValue: 0, defaultValue: defaultData[_enum2.ViewField.showLabel] === 0 ? 0 : 1 }] }).current; }, []); var sortPrefixCls = "".concat(prefixCls, "-customization-combine-sort"); var fields = dataSet.fields, combineSort = dataSet.props.combineSort; var sortableFieldNames = (0, _react.useMemo)(function () { return displayFields.map(function (df) { return df.sortable && df.name; }); }, [displayFields]); var sortFieldOptions = (0, _react.useMemo)(function () { var sortFieldData = []; if (fields && sortableFieldNames && sortableFieldNames.length > 0) { fields.forEach(function (field) { if (sortableFieldNames.includes(field.name)) { sortFieldData.push({ value: field.name, meaning: field.get('label') || field.name }); } }); } return new _DataSet["default"]({ autoQuery: false, autoCreate: false, paging: false, fields: [{ name: 'value', type: _enum.FieldType.string }, { name: 'meaning', type: _enum.FieldType.string }], data: sortFieldData }); }, [fields, sortableFieldNames]); var sortDS = (0, _react.useMemo)(function () { var _dataSet$combineSortF = dataSet.combineSortFieldNames, combineSortFieldNames = _dataSet$combineSortF === void 0 ? new Map() : _dataSet$combineSortF; var data = []; combineSortFieldNames.forEach(function (sortOrder, fieldName) { var record = sortFieldOptions.records.find(function (record) { return record.get('value') === fieldName; }); if (record) { var field = dataSet.getField(fieldName); data.push({ sortName: fieldName, order: sortOrder || field && field.order || _enum.SortOrder.asc }); } }); return new _DataSet["default"]({ forceValidate: true, autoQuery: false, autoCreate: false, paging: false, fields: [{ name: 'sortName', type: _enum.FieldType.string, options: sortFieldOptions }, { name: 'order', type: _enum.FieldType.string, defaultValue: _enum.SortOrder.asc }], data: data, events: { update: function update(_ref) { var dataSet = _ref.dataSet; kanbanRecord.set('combineSort', dataSet.toData()); }, remove: function remove(_ref2) { var dataSet = _ref2.dataSet; kanbanRecord.set('combineSort', dataSet.toData()); } } }); }, [sortFieldOptions, dataSet, dataSet.combineSortFieldNames]); var optionsFilter = function optionsFilter(record) { return sortDS.every(function (sortRecord) { return sortRecord.get('sortName') !== record.get('value'); }); }; var SortDragItem = function SortDragItem(_ref3) { var record = _ref3.record, index = _ref3.index; var key = record.key; return /*#__PURE__*/_react["default"].createElement(_reactBeautifulDnd.Draggable, { draggableId: String(key), index: record.index }, function (pro, snapshot) { return /*#__PURE__*/_react["default"].createElement("span", (0, _extends2["default"])({ ref: pro.innerRef }, pro.draggableProps, { className: "".concat(sortPrefixCls, "-list-item").concat(snapshot.isDragging ? " ".concat(sortPrefixCls, "-list-item-dragging") : '') }), /*#__PURE__*/_react["default"].createElement("span", (0, _extends2["default"])({}, pro.dragHandleProps, { className: "".concat(sortPrefixCls, "-list-item-drag") }), /*#__PURE__*/_react["default"].createElement(_icon["default"], { type: "baseline-drag_indicator" })), /*#__PURE__*/_react["default"].createElement("span", { className: "".concat(sortPrefixCls, "-list-item-index") }, /*#__PURE__*/_react["default"].createElement(_tag["default"], null, index + 1)), /*#__PURE__*/_react["default"].createElement(_select["default"], { placeholder: (0, _localeContext.$l)('Table', 'please_select_column'), className: "".concat(sortPrefixCls, "-list-item-sortName"), record: record, name: "sortName", optionsFilter: optionsFilter, notFoundContent: (0, _localeContext.$l)('Table', 'no_save_filter'), clearButton: false }), /*#__PURE__*/_react["default"].createElement(_selectBox["default"], { record: record, name: "order", className: "".concat(sortPrefixCls, "-list-item-sortOrder") }, /*#__PURE__*/_react["default"].createElement(_selectBox["default"].Option, { value: _enum.SortOrder.asc }, (0, _localeContext.$l)('Table', 'ascending')), /*#__PURE__*/_react["default"].createElement(_selectBox["default"].Option, { value: _enum.SortOrder.desc }, (0, _localeContext.$l)('Table', 'descending'))), /*#__PURE__*/_react["default"].createElement(_button["default"], { className: "".concat(sortPrefixCls, "-list-item-delete"), icon: 'delete_black-o', funcType: _interface.FuncType.link, color: _interface.ButtonColor.primary, onClick: function onClick() { return sortDS["delete"](record, !!record.get('sortName')); } })); }); }; var onDragEnd = (0, _react.useCallback)(function (result) { if (result.destination) { sortDS.move(result.source.index, result.destination.index); kanbanRecord.set('combineSort', sortDS.toData()); } }, [sortDS.length]); var columnDataSet = (0, _react.useMemo)(function () { return new _DataSet["default"]({ data: normalizeColumnsToTreeData(displayFields, kanbanRecord.get(_enum2.ViewField.displayFields), kanbanRecord.get(_enum2.ViewField.sort)), paging: false, primaryKey: 'key', idField: 'key', parentField: 'parentKey', events: { update: function update(_ref4) { var dataSet = _ref4.dataSet, name = _ref4.name; if (name === 'sort') { kanbanRecord.set(_enum2.ViewField.sort, (0, _sortBy["default"])(dataSet.records, [function (r) { return r.get('sort'); }]).map(function (r) { return { name: r.get('name'), sort: r.get('sort') }; })); } kanbanRecord.set(_enum2.ViewField.displayFields, (0, _sortBy["default"])(dataSet.filter(function (r) { return !r.get('hidden'); }), [function (r) { return r.get('sort'); }]).map(function (r) { return r.get('name'); })); } } }); }, []); var groupedTreeRecords = columnDataSet.groupedTreeRecords; var handleRestoreKanban = (0, _react.useCallback)((0, _mobx.action)(function (e) { e.stopPropagation(); kanbanRecord.set(defaultData); if (modal) { modal.close(); } }), [kanbanRecord, modal]); var handleOk = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() { var _defaultView, _customizedLoad, detailRes, res, mergeRes, defaultView, records, sortInfo, currentViewDS; return _regenerator["default"].wrap(function _callee$(_context) { while (1) { switch (_context.prev = _context.next) { case 0: if (!(customizedDS && customizedDS.current)) { _context.next = 23; break; } customizedDS.current.set(kanbanRecord.toData()); _context.prev = 2; // const saveCustomized(customizedDS.current.toData()); _customizedLoad = getConfig('customizedLoad'); _context.next = 6; return saveCustomized(customizedDS.current.toData()); case 6: detailRes = _context.sent; _context.next = 9; return _customizedLoad(customizedCode, 'Board', { type: 'list' }); case 9: res = _context.sent; mergeRes = res.map(function (r) { if (r.id === detailRes[_enum2.ViewField.id]) { return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, detailRes), {}, { objectVersionNumber: r.objectVersionNumber }); } return r; }); defaultView = (_defaultView = { code: customizedCode }, (0, _defineProperty2["default"])(_defaultView, _enum2.ViewField.viewName, '初始列表视图'), (0, _defineProperty2["default"])(_defaultView, _enum2.ViewField.viewMode, _enum2.ViewMode.table), (0, _defineProperty2["default"])(_defaultView, _enum2.ViewField.id, '__DEFAULT__'), _defaultView); customizedDS.loadData([].concat((0, _toConsumableArray2["default"])(mergeRes), [defaultView])); records = sortDS.filter(function (r) { return r.get('sortName') && r.get('order'); }); sortInfo = new Map(); records.forEach(function (record) { sortInfo.set(record.get('sortName'), record.get('order')); }); currentViewDS = dataSet.getState('__CURRENTVIEWDS__'); if (currentViewDS && sortInfo) { currentViewDS.fields.forEach(function (current) { current.order = undefined; }); currentViewDS.combineSort = true; currentViewDS.combineSortFieldNames = _mobx.observable.map(sortInfo); sortInfo.forEach(function (sortOrder, fieldName) { var field = currentViewDS.getField(fieldName); if (field) { field.order = sortOrder; } }); onConfigChange({ config: customizedDS.current.toData(), currentViewDS: currentViewDS }); if (autoQuery) { currentViewDS.query(); } } _context.next = 22; break; case 20: _context.prev = 20; _context.t0 = _context["catch"](2); case 22: if (modal) { modal.close(); } case 23: case "end": return _context.stop(); } } }, _callee, null, [[2, 20]]); })), [kanbanRecord, modal]); (0, _react.useEffect)(function () { if (modal) { modal.update({ footer: function footer(okBtn, cancelBtn) { return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/(0, _react.cloneElement)(cancelBtn, { onClick: handleRestoreKanban }), /*#__PURE__*/(0, _react.cloneElement)(okBtn, { onClick: handleOk })); } }); } }, [modal]); var loadDetail = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() { var res, dataJson; return _regenerator["default"].wrap(function _callee2$(_context2) { while (1) { switch (_context2.prev = _context2.next) { case 0: _context2.next = 2; return customizedLoad(customizedCode, 'Board', (0, _defineProperty2["default"])({ type: 'detail' }, _enum2.ViewField.id, defaultData[_enum2.ViewField.id])); case 2: res = _context2.sent; try { dataJson = res.dataJson ? JSON.parse(res.dataJson) : {}; kanbanRecord.init((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, (0, _omit["default"])(res, 'dataJson')), dataJson)); sortDS.loadData(dataJson.combineSort); } catch (error) { (0, _utils.warning)(false, error.message); } case 4: case "end": return _context2.stop(); } } }, _callee2); })), []); (0, _react.useEffect)(function () { loadDetail(); }, []); var handleDragTreeNode = (0, _react.useCallback)((0, _mobx.action)(function (srcIndex, destIndex) { var records = (0, _sortBy["default"])(columnDataSet.records, [function (r) { return r.get('sort'); }]); var _records$splice = records.splice(srcIndex, 1), _records$splice2 = (0, _slicedToArray2["default"])(_records$splice, 1), removed = _records$splice2[0]; records.splice(destIndex, 0, removed); records.forEach(function (r, index) { r.set('sort', index); }); }), [columnDataSet]); var handleDragEnd = (0, _react.useCallback)(function (_ref7) { var destination = _ref7.destination, srcIndex = _ref7.source.index; if (destination) { var destIndex = destination.index; // const src = srcDroppableId.split('__--__'); handleDragTreeNode(srcIndex, destIndex); // , src[1] } }, [handleDragTreeNode]); var renderPopupContent = (0, _react.useCallback)(function () { return /*#__PURE__*/_react["default"].createElement("div", { className: "".concat(prefixCls, "-customization-panel-content") }, /*#__PURE__*/_react["default"].createElement(_reactBeautifulDnd.DragDropContext, { onDragEnd: handleDragEnd }, /*#__PURE__*/_react["default"].createElement(_tree["default"], null, (0, _sortBy["default"])(groupedTreeRecords[0].records, [function (r) { return r.get('sort'); }]).map(function (record, index, list) { var children = /*#__PURE__*/_react["default"].createElement(_TreeNode["default"], { key: record.key, record: record, isLeaf: true, index: index, records: list }); return record.get('draggable') !== false && (!record.parent || list.length > 1) ? /*#__PURE__*/_react["default"].createElement(_reactBeautifulDnd.Draggable, { key: record.key, draggableId: String(record.key), index: index }, function (provided, snapshot) { return /*#__PURE__*/(0, _react.cloneElement)(children, { provided: provided, snapshot: snapshot }); }) : children; })))); }, [kanbanRecord.get(_enum2.ViewField.displayFields), kanbanRecord.get(_enum2.ViewField.sort), groupedTreeRecords]); return /*#__PURE__*/_react["default"].createElement("div", { ref: PanelRef }, /*#__PURE__*/_react["default"].createElement(_collapse["default"] // onChange={handleCollapseChange} , { // onChange={handleCollapseChange} defaultActiveKey: ['kanban', 'card', 'data'], // expandIcon={renderIcon} expandIconPosition: "text-right", className: "".concat(prefixCls, "-customization"), ghost: true }, /*#__PURE__*/_react["default"].createElement(_CollapsePanel["default"], { header: /*#__PURE__*/_react["default"].createElement("span", { className: "".concat(prefixCls, "-customization-panel-title") }, "\u663E\u793A\u8BBE\u7F6E"), key: "kanban" }, /*#__PURE__*/_react["default"].createElement(_form["default"], { className: "".concat(prefixCls, "-customization-form"), record: kanbanRecord }, /*#__PURE__*/_react["default"].createElement(_textField["default"], { name: _enum2.ViewField.viewName, label: "\u89C6\u56FE\u540D\u79F0" }), /*#__PURE__*/_react["default"].createElement(_select["default"], { name: "groupField", label: "\u5206\u7EC4\u5B57\u6BB5", clearButton: false, hidden: viewMode !== _enum2.ViewMode.kanban }), /*#__PURE__*/_react["default"].createElement(_numberField["default"], { label: "\u89C6\u56FE\u9AD8\u5EA6", name: _enum2.ViewField.viewHeight }))), /*#__PURE__*/_react["default"].createElement(_CollapsePanel["default"], { header: /*#__PURE__*/_react["default"].createElement("span", { className: "".concat(prefixCls, "-customization-panel-title") }, "\u5361\u7247\u8BBE\u7F6E"), key: "card" }, /*#__PURE__*/_react["default"].createElement(_form["default"], { className: "".concat(prefixCls, "-customization-form"), record: kanbanRecord }, /*#__PURE__*/_react["default"].createElement(_select["default"], { name: "cardWidth", label: "\u5361\u7247\u5BBD\u5EA6", key: "cardWidth", clearButton: false }, /*#__PURE__*/_react["default"].createElement(_select["default"].Option, { value: 4 }, "\u7A84"), /*#__PURE__*/_react["default"].createElement(_select["default"].Option, { value: 6 }, "\u9002\u4E2D"), /*#__PURE__*/_react["default"].createElement(_select["default"].Option, { value: 8 }, "\u8F83\u5BBD"), /*#__PURE__*/_react["default"].createElement(_select["default"].Option, { value: 12 }, "\u5BBD")), /*#__PURE__*/_react["default"].createElement(_select["default"], { name: "displayFields", label: "\u663E\u793A\u5B57\u6BB5", key: "displayFields", popupContent: renderPopupContent, onClear: function onClear() { return kanbanRecord.set(_enum2.ViewField.displayFields, null); }, getPopupContainer: function getPopupContainer() { return PanelRef.current; } }, displayFields.map(function (field) { if (!field.hidden) { var header = (0, _utils2.getHeader)({ name: field.name, title: field.title, header: field.header, dataSet: dataSet }); return /*#__PURE__*/_react["default"].createElement(_select["default"].Option, { value: field.name, key: "".concat(field.name, "_option") }, header); } return null; }).filter(Boolean)), /*#__PURE__*/_react["default"].createElement(_selectBox["default"], { name: "showLabel", key: "showLabel", label: "\u663E\u793A\u5B57\u6BB5\u540D\u79F0" }, /*#__PURE__*/_react["default"].createElement(_selectBox["default"].Option, { style: { paddingRight: 16 }, value: 1 }, "\u662F"), /*#__PURE__*/_react["default"].createElement(_selectBox["default"].Option, { value: 0 }, "\u5426")))), /*#__PURE__*/_react["default"].createElement(_CollapsePanel["default"], { header: /*#__PURE__*/_react["default"].createElement("span", { className: "".concat(prefixCls, "-customization-panel-title") }, "\u6570\u636E\u8BBE\u7F6E"), key: "data" }, /*#__PURE__*/_react["default"].createElement("div", { className: "".concat(prefixCls, "-customization-panel-des") }, /*#__PURE__*/_react["default"].createElement("span", null, "\u9009\u62E9\u6B64\u89C6\u56FE\u4E0B\u7684\u8BB0\u5F55\u9ED8\u8BA4\u6392\u5E8F\u65B9\u5F0F"), /*#__PURE__*/_react["default"].createElement(_tooltip["default"], { title: "\u53EF\u6392\u5E8F\u7684\u524D\u63D0\u662F\u540E\u7AEF\u67E5\u8BE2\u5DF2\u652F\u6301\u6392\u5E8F" }, /*#__PURE__*/_react["default"].createElement(_icon["default"], { type: 'help' }))), /*#__PURE__*/_react["default"].createElement("div", { className: "".concat(sortPrefixCls, "-content") }, /*#__PURE__*/_react["default"].createElement("div", { className: "".concat(sortPrefixCls, "-list-container") }, /*#__PURE__*/_react["default"].createElement(_reactBeautifulDnd.DragDropContext, { onDragEnd: onDragEnd }, /*#__PURE__*/_react["default"].createElement(_reactBeautifulDnd.Droppable, { droppableId: "combine-sort", direction: "vertical" }, function (provided) { return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({ ref: provided.innerRef }, provided.droppableProps, { className: "".concat(sortPrefixCls, "-list") }), sortDS.map(function (record, index) { var key = record.key; return /*#__PURE__*/_react["default"].createElement(SortDragItem, { key: key, record: record, index: index }); }), provided.placeholder); }))), /*#__PURE__*/_react["default"].createElement("div", { className: "".concat(sortPrefixCls, "-add-button") }, /*#__PURE__*/_react["default"].createElement(_button["default"], { funcType: _interface.FuncType.link, icon: "add", onClick: function onClick() { return sortDS.create(); }, color: _interface.ButtonColor.primary, disabled: combineSort ? sortDS.length >= sortFieldOptions.length : sortDS.length > 0 }, (0, _localeContext.$l)('Table', 'add_sort'))))))); }; KanbanCustomizationSettings.displayName = 'KanbanCustomizationSettings'; var _default = (0, _mobxReactLite.observer)(KanbanCustomizationSettings); exports["default"] = _default; //# sourceMappingURL=KanbanCustomizationSettings.js.map