choerodon-ui/pro/es/table/combo-customization-settings/column-groups/index.js

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

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