choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
640 lines (603 loc) • 23.9 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _extends from "@babel/runtime/helpers/extends";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import React, { cloneElement, useCallback, useContext, useEffect, useMemo, useRef } from 'react';
import { action, observable } from 'mobx';
import { observer } from 'mobx-react-lite';
import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
import sortBy from 'lodash/sortBy';
import isNumber from 'lodash/isNumber';
import omit from 'lodash/omit';
import noop from 'lodash/noop';
import Collapse from '../../../../es/collapse';
import Tag from '../../../../es/tag';
import { warning } from 'choerodon-ui/dataset/utils';
import CollapsePanel from '../../../../es/collapse/CollapsePanel'; // import { $l } from 'choerodon-ui/pro/lib/locale-context';
import BoardContext from '../BoardContext';
import ObserverSelect from '../../select';
import Form from '../../form';
import { FieldIgnore, FieldType, SortOrder } from '../../data-set/enum';
import ObserverSelectBox from '../../select-box';
import Button from '../../button';
import Icon from '../../icon';
import { ViewField, ViewMode } from '../enum';
import { getColumnKey, getHeader } from '../../table/utils';
import Tree from './tree';
import TreeNode from './tree/TreeNode';
import { treeReduce } from '../../_util/treeUtils';
import Tooltip from '../../tooltip';
import ObserverNumberField from '../../number-field';
import ObserverTextField from '../../text-field';
import { $l } from '../../locale-context';
import { ButtonColor, FuncType } from '../../button/interface';
import DataSet from '../../data-set/DataSet';
function normalizeColumnsToTreeData(columns, displayFields, displaySort) {
return _toConsumableArray(treeReduce(columns, function (map, column, _sort, parentColumn) {
if ((!column.__tableGroup || !column.children && column.__group) && column.name) {
var key = column.__originalKey || getColumnKey(column);
var sort = displaySort ? displaySort.find(function (s) {
return s.name === key;
}) : undefined;
map.set(key, {
key: key,
parentKey: parentColumn && (parentColumn.__originalKey || getColumnKey(parentColumn)),
width: column.width,
header: column.header,
title: column.title,
hidden: !displayFields.includes(column.name),
name: column.name,
sort: isNumber(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 = useContext(BoardContext),
_useContext$onConfigC = _useContext.onConfigChange,
onConfigChange = _useContext$onConfigC === void 0 ? noop : _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 = useRef(customizedDS.current.toData());
var defaultData = tempCustomized.current;
var PanelRef = useRef(null);
var customizedLoad = getConfig('customizedLoad');
var kanbanRecord = useMemo(function () {
return new DataSet({
autoCreate: true,
fields: [{
name: ViewField.groupField,
type: FieldType.string,
options: optionDS,
defaultValue: defaultData[ViewField.groupField],
ignore: viewMode === ViewMode.card ? FieldIgnore.always : FieldIgnore.clean,
required: true
}, {
name: ViewField.viewName,
type: FieldType.string,
defaultValue: defaultData[ViewField.viewName] || '',
required: true
}, {
name: ViewField.viewHeight,
type: FieldType.number,
defaultValue: defaultData[ViewField.viewHeight] || 366,
step: 1,
required: true
}, {
name: ViewField.cardWidth,
type: FieldType.number,
defaultValue: defaultData[ViewField.cardWidth] || 6
}, {
name: ViewField.displayFields,
type: FieldType.string,
multiple: true,
defaultValue: defaultData[ViewField.displayFields] || displayFields.slice(0, 3).map(function (field) {
return field.name || field.header;
})
}, {
name: ViewField.sort,
type: FieldType.object,
defaultValue: defaultData[ViewField.sort]
}, {
name: ViewField.combineSort,
type: FieldType.object,
defaultValue: defaultData[ViewField.combineSort]
}, {
name: ViewField.showLabel,
type: FieldType["boolean"],
trueValue: 1,
falseValue: 0,
defaultValue: defaultData[ViewField.showLabel] === 0 ? 0 : 1
}]
}).current;
}, []);
var sortPrefixCls = "".concat(prefixCls, "-customization-combine-sort");
var fields = dataSet.fields,
combineSort = dataSet.props.combineSort;
var sortableFieldNames = useMemo(function () {
return displayFields.map(function (df) {
return df.sortable && df.name;
});
}, [displayFields]);
var sortFieldOptions = 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({
autoQuery: false,
autoCreate: false,
paging: false,
fields: [{
name: 'value',
type: FieldType.string
}, {
name: 'meaning',
type: FieldType.string
}],
data: sortFieldData
});
}, [fields, sortableFieldNames]);
var sortDS = 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 || SortOrder.asc
});
}
});
return new DataSet({
forceValidate: true,
autoQuery: false,
autoCreate: false,
paging: false,
fields: [{
name: 'sortName',
type: FieldType.string,
options: sortFieldOptions
}, {
name: 'order',
type: FieldType.string,
defaultValue: 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.createElement(Draggable, {
draggableId: String(key),
index: record.index
}, function (pro, snapshot) {
return /*#__PURE__*/React.createElement("span", _extends({
ref: pro.innerRef
}, pro.draggableProps, {
className: "".concat(sortPrefixCls, "-list-item").concat(snapshot.isDragging ? " ".concat(sortPrefixCls, "-list-item-dragging") : '')
}), /*#__PURE__*/React.createElement("span", _extends({}, pro.dragHandleProps, {
className: "".concat(sortPrefixCls, "-list-item-drag")
}), /*#__PURE__*/React.createElement(Icon, {
type: "baseline-drag_indicator"
})), /*#__PURE__*/React.createElement("span", {
className: "".concat(sortPrefixCls, "-list-item-index")
}, /*#__PURE__*/React.createElement(Tag, null, index + 1)), /*#__PURE__*/React.createElement(ObserverSelect, {
placeholder: $l('Table', 'please_select_column'),
className: "".concat(sortPrefixCls, "-list-item-sortName"),
record: record,
name: "sortName",
optionsFilter: optionsFilter,
notFoundContent: $l('Table', 'no_save_filter'),
clearButton: false
}), /*#__PURE__*/React.createElement(ObserverSelectBox, {
record: record,
name: "order",
className: "".concat(sortPrefixCls, "-list-item-sortOrder")
}, /*#__PURE__*/React.createElement(ObserverSelectBox.Option, {
value: SortOrder.asc
}, $l('Table', 'ascending')), /*#__PURE__*/React.createElement(ObserverSelectBox.Option, {
value: SortOrder.desc
}, $l('Table', 'descending'))), /*#__PURE__*/React.createElement(Button, {
className: "".concat(sortPrefixCls, "-list-item-delete"),
icon: 'delete_black-o',
funcType: FuncType.link,
color: ButtonColor.primary,
onClick: function onClick() {
return sortDS["delete"](record, !!record.get('sortName'));
}
}));
});
};
var onDragEnd = useCallback(function (result) {
if (result.destination) {
sortDS.move(result.source.index, result.destination.index);
kanbanRecord.set('combineSort', sortDS.toData());
}
}, [sortDS.length]);
var columnDataSet = useMemo(function () {
return new DataSet({
data: normalizeColumnsToTreeData(displayFields, kanbanRecord.get(ViewField.displayFields), kanbanRecord.get(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(ViewField.sort, sortBy(dataSet.records, [function (r) {
return r.get('sort');
}]).map(function (r) {
return {
name: r.get('name'),
sort: r.get('sort')
};
}));
}
kanbanRecord.set(ViewField.displayFields, sortBy(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 = useCallback(action(function (e) {
e.stopPropagation();
kanbanRecord.set(defaultData);
if (modal) {
modal.close();
}
}), [kanbanRecord, modal]);
var handleOk = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
var _defaultView, _customizedLoad, detailRes, res, mergeRes, defaultView, records, sortInfo, currentViewDS;
return _regeneratorRuntime.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[ViewField.id]) {
return _objectSpread(_objectSpread({}, detailRes), {}, {
objectVersionNumber: r.objectVersionNumber
});
}
return r;
});
defaultView = (_defaultView = {
code: customizedCode
}, _defineProperty(_defaultView, ViewField.viewName, '初始列表视图'), _defineProperty(_defaultView, ViewField.viewMode, ViewMode.table), _defineProperty(_defaultView, ViewField.id, '__DEFAULT__'), _defaultView);
customizedDS.loadData([].concat(_toConsumableArray(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 = 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]);
useEffect(function () {
if (modal) {
modal.update({
footer: function footer(okBtn, cancelBtn) {
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/cloneElement(cancelBtn, {
onClick: handleRestoreKanban
}), /*#__PURE__*/cloneElement(okBtn, {
onClick: handleOk
}));
}
});
}
}, [modal]);
var loadDetail = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
var res, dataJson;
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
_context2.next = 2;
return customizedLoad(customizedCode, 'Board', _defineProperty({
type: 'detail'
}, ViewField.id, defaultData[ViewField.id]));
case 2:
res = _context2.sent;
try {
dataJson = res.dataJson ? JSON.parse(res.dataJson) : {};
kanbanRecord.init(_objectSpread(_objectSpread({}, omit(res, 'dataJson')), dataJson));
sortDS.loadData(dataJson.combineSort);
} catch (error) {
warning(false, error.message);
}
case 4:
case "end":
return _context2.stop();
}
}
}, _callee2);
})), []);
useEffect(function () {
loadDetail();
}, []);
var handleDragTreeNode = useCallback(action(function (srcIndex, destIndex) {
var records = sortBy(columnDataSet.records, [function (r) {
return r.get('sort');
}]);
var _records$splice = records.splice(srcIndex, 1),
_records$splice2 = _slicedToArray(_records$splice, 1),
removed = _records$splice2[0];
records.splice(destIndex, 0, removed);
records.forEach(function (r, index) {
r.set('sort', index);
});
}), [columnDataSet]);
var handleDragEnd = 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 = useCallback(function () {
return /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-customization-panel-content")
}, /*#__PURE__*/React.createElement(DragDropContext, {
onDragEnd: handleDragEnd
}, /*#__PURE__*/React.createElement(Tree, null, sortBy(groupedTreeRecords[0].records, [function (r) {
return r.get('sort');
}]).map(function (record, index, list) {
var children = /*#__PURE__*/React.createElement(TreeNode, {
key: record.key,
record: record,
isLeaf: true,
index: index,
records: list
});
return record.get('draggable') !== false && (!record.parent || list.length > 1) ? /*#__PURE__*/React.createElement(Draggable, {
key: record.key,
draggableId: String(record.key),
index: index
}, function (provided, snapshot) {
return /*#__PURE__*/cloneElement(children, {
provided: provided,
snapshot: snapshot
});
}) : children;
}))));
}, [kanbanRecord.get(ViewField.displayFields), kanbanRecord.get(ViewField.sort), groupedTreeRecords]);
return /*#__PURE__*/React.createElement("div", {
ref: PanelRef
}, /*#__PURE__*/React.createElement(Collapse // onChange={handleCollapseChange}
, {
// onChange={handleCollapseChange}
defaultActiveKey: ['kanban', 'card', 'data'],
// expandIcon={renderIcon}
expandIconPosition: "text-right",
className: "".concat(prefixCls, "-customization"),
ghost: true
}, /*#__PURE__*/React.createElement(CollapsePanel, {
header: /*#__PURE__*/React.createElement("span", {
className: "".concat(prefixCls, "-customization-panel-title")
}, "\u663E\u793A\u8BBE\u7F6E"),
key: "kanban"
}, /*#__PURE__*/React.createElement(Form, {
className: "".concat(prefixCls, "-customization-form"),
record: kanbanRecord
}, /*#__PURE__*/React.createElement(ObserverTextField, {
name: ViewField.viewName,
label: "\u89C6\u56FE\u540D\u79F0"
}), /*#__PURE__*/React.createElement(ObserverSelect, {
name: "groupField",
label: "\u5206\u7EC4\u5B57\u6BB5",
clearButton: false,
hidden: viewMode !== ViewMode.kanban
}), /*#__PURE__*/React.createElement(ObserverNumberField, {
label: "\u89C6\u56FE\u9AD8\u5EA6",
name: ViewField.viewHeight
}))), /*#__PURE__*/React.createElement(CollapsePanel, {
header: /*#__PURE__*/React.createElement("span", {
className: "".concat(prefixCls, "-customization-panel-title")
}, "\u5361\u7247\u8BBE\u7F6E"),
key: "card"
}, /*#__PURE__*/React.createElement(Form, {
className: "".concat(prefixCls, "-customization-form"),
record: kanbanRecord
}, /*#__PURE__*/React.createElement(ObserverSelect, {
name: "cardWidth",
label: "\u5361\u7247\u5BBD\u5EA6",
key: "cardWidth",
clearButton: false
}, /*#__PURE__*/React.createElement(ObserverSelect.Option, {
value: 4
}, "\u7A84"), /*#__PURE__*/React.createElement(ObserverSelect.Option, {
value: 6
}, "\u9002\u4E2D"), /*#__PURE__*/React.createElement(ObserverSelect.Option, {
value: 8
}, "\u8F83\u5BBD"), /*#__PURE__*/React.createElement(ObserverSelect.Option, {
value: 12
}, "\u5BBD")), /*#__PURE__*/React.createElement(ObserverSelect, {
name: "displayFields",
label: "\u663E\u793A\u5B57\u6BB5",
key: "displayFields",
popupContent: renderPopupContent,
onClear: function onClear() {
return kanbanRecord.set(ViewField.displayFields, null);
},
getPopupContainer: function getPopupContainer() {
return PanelRef.current;
}
}, displayFields.map(function (field) {
if (!field.hidden) {
var header = getHeader({
name: field.name,
title: field.title,
header: field.header,
dataSet: dataSet
});
return /*#__PURE__*/React.createElement(ObserverSelect.Option, {
value: field.name,
key: "".concat(field.name, "_option")
}, header);
}
return null;
}).filter(Boolean)), /*#__PURE__*/React.createElement(ObserverSelectBox, {
name: "showLabel",
key: "showLabel",
label: "\u663E\u793A\u5B57\u6BB5\u540D\u79F0"
}, /*#__PURE__*/React.createElement(ObserverSelectBox.Option, {
style: {
paddingRight: 16
},
value: 1
}, "\u662F"), /*#__PURE__*/React.createElement(ObserverSelectBox.Option, {
value: 0
}, "\u5426")))), /*#__PURE__*/React.createElement(CollapsePanel, {
header: /*#__PURE__*/React.createElement("span", {
className: "".concat(prefixCls, "-customization-panel-title")
}, "\u6570\u636E\u8BBE\u7F6E"),
key: "data"
}, /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-customization-panel-des")
}, /*#__PURE__*/React.createElement("span", null, "\u9009\u62E9\u6B64\u89C6\u56FE\u4E0B\u7684\u8BB0\u5F55\u9ED8\u8BA4\u6392\u5E8F\u65B9\u5F0F"), /*#__PURE__*/React.createElement(Tooltip, {
title: "\u53EF\u6392\u5E8F\u7684\u524D\u63D0\u662F\u540E\u7AEF\u67E5\u8BE2\u5DF2\u652F\u6301\u6392\u5E8F"
}, /*#__PURE__*/React.createElement(Icon, {
type: 'help'
}))), /*#__PURE__*/React.createElement("div", {
className: "".concat(sortPrefixCls, "-content")
}, /*#__PURE__*/React.createElement("div", {
className: "".concat(sortPrefixCls, "-list-container")
}, /*#__PURE__*/React.createElement(DragDropContext, {
onDragEnd: onDragEnd
}, /*#__PURE__*/React.createElement(Droppable, {
droppableId: "combine-sort",
direction: "vertical"
}, function (provided) {
return /*#__PURE__*/React.createElement("div", _extends({
ref: provided.innerRef
}, provided.droppableProps, {
className: "".concat(sortPrefixCls, "-list")
}), sortDS.map(function (record, index) {
var key = record.key;
return /*#__PURE__*/React.createElement(SortDragItem, {
key: key,
record: record,
index: index
});
}), provided.placeholder);
}))), /*#__PURE__*/React.createElement("div", {
className: "".concat(sortPrefixCls, "-add-button")
}, /*#__PURE__*/React.createElement(Button, {
funcType: FuncType.link,
icon: "add",
onClick: function onClick() {
return sortDS.create();
},
color: ButtonColor.primary,
disabled: combineSort ? sortDS.length >= sortFieldOptions.length : sortDS.length > 0
}, $l('Table', 'add_sort')))))));
};
KanbanCustomizationSettings.displayName = 'KanbanCustomizationSettings';
export default observer(KanbanCustomizationSettings);
//# sourceMappingURL=KanbanCustomizationSettings.js.map