UNPKG

choerodon-ui

Version:

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

121 lines (109 loc) 4.13 kB
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