choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
121 lines (109 loc) • 4.13 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useCallback, useContext } from 'react';
import { action } from 'mobx';
import { observer } from 'mobx-react-lite';
import { DragDropContext } from 'react-beautiful-dnd';
import sortBy from 'lodash/sortBy';
import Group from './Group';
import ItemTitle from './ItemTitle';
import TableContext from '../../TableContext';
import ItemSuffix from './ItemSuffix';
var ColumnGroups = observer(function (props) {
var dataSet = props.dataSet;
var treeRecords = dataSet.treeRecords;
var _useContext = useContext(TableContext),
columnDraggable = _useContext.tableStore.columnDraggable,
prefixCls = _useContext.prefixCls;
var handleDragTree = useCallback(action(function (srcIndex, destIndex) {
var _treeRecords$splice = treeRecords.splice(srcIndex, 1),
_treeRecords$splice2 = _slicedToArray(_treeRecords$splice, 1),
removed = _treeRecords$splice2[0];
var destRecord = treeRecords[destIndex];
var destRecordLock = destRecord.get('lock');
if (destRecordLock) {
removed.set('lock', true);
} else {
removed.set('lock', false);
}
treeRecords.splice(destIndex + treeRecords.reduce(function (sum, r) {
return sum + (r.get('draggable') === false ? 1 : 0);
}, 0), 0, removed);
treeRecords.forEach(function (r, index) {
r.init('sort', undefined);
r.set('sort', index);
});
}), [treeRecords]);
var handleDragTreeNode = useCallback(action(function (srcIndex, destIndex, parentId) {
var parent = dataSet.find(function (r) {
return String(r.key) === parentId;
});
if (parent) {
var children = parent.children;
if (children) {
var records = sortBy(children, [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);
});
}
}
}), [dataSet]);
var handleDragEnd = useCallback(function (_ref) {
var destination = _ref.destination,
_ref$source = _ref.source,
srcDroppableId = _ref$source.droppableId,
srcIndex = _ref$source.index;
if (destination) {
var destDroppableId = destination.droppableId,
destIndex = destination.index;
var dest = destDroppableId.split('__--__');
var src = srcDroppableId.split('__--__');
if (srcIndex !== destIndex || src[1] !== dest[1]) {
if (dest[0] === 'tree' && src[0] === 'tree') {
handleDragTree(srcIndex, destIndex);
} else if (dest[0] === 'treenode' && src[0] === 'treenode') {
handleDragTreeNode(srcIndex, destIndex, src[1]);
}
}
}
}, [handleDragTree, handleDragTreeNode]);
var treeNodeRenderer = useCallback(function (record, provided) {
return /*#__PURE__*/React.createElement(ItemTitle, {
record: record,
provided: provided
});
}, []);
var treeNodeSuffix = useCallback(function (record) {
return /*#__PURE__*/React.createElement(ItemSuffix, {
records: treeRecords,
record: record
});
}, [treeRecords]);
return /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-combo-customization-panel-content")
}, columnDraggable ? /*#__PURE__*/React.createElement(DragDropContext, {
onDragEnd: handleDragEnd
}, /*#__PURE__*/React.createElement(Group, {
key: String(false),
value: 'false',
records: treeRecords,
onDragEnd: handleDragEnd,
treeNodeRenderer: treeNodeRenderer,
treeNodeSuffix: treeNodeSuffix
})) : /*#__PURE__*/React.createElement(Group, {
key: String(false),
value: 'false',
records: treeRecords,
onDragEnd: handleDragEnd,
treeNodeRenderer: treeNodeRenderer,
treeNodeSuffix: treeNodeSuffix
}));
});
ColumnGroups.displayName = 'ColumnGroups';
export default ColumnGroups;
//# sourceMappingURL=index.js.map