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

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

"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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

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 _Group = _interopRequireDefault(require("./Group"));

var _ItemTitle = _interopRequireDefault(require("./ItemTitle"));

var _TableContext = _interopRequireDefault(require("../../TableContext"));

var _ItemSuffix = _interopRequireDefault(require("./ItemSuffix"));

var ColumnGroups = (0, _mobxReactLite.observer)(function (props) {
  var dataSet = props.dataSet;
  var treeRecords = dataSet.treeRecords;

  var _useContext = (0, _react.useContext)(_TableContext["default"]),
      columnDraggable = _useContext.tableStore.columnDraggable,
      prefixCls = _useContext.prefixCls;

  var handleDragTree = (0, _react.useCallback)((0, _mobx.action)(function (srcIndex, destIndex) {
    var _treeRecords$splice = treeRecords.splice(srcIndex, 1),
        _treeRecords$splice2 = (0, _slicedToArray2["default"])(_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 = (0, _react.useCallback)((0, _mobx.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 = (0, _sortBy["default"])(children, [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);
        });
      }
    }
  }), [dataSet]);
  var handleDragEnd = (0, _react.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 = (0, _react.useCallback)(function (record, provided) {
    return /*#__PURE__*/_react["default"].createElement(_ItemTitle["default"], {
      record: record,
      provided: provided
    });
  }, []);
  var treeNodeSuffix = (0, _react.useCallback)(function (record) {
    return /*#__PURE__*/_react["default"].createElement(_ItemSuffix["default"], {
      records: treeRecords,
      record: record
    });
  }, [treeRecords]);
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: "".concat(prefixCls, "-combo-customization-panel-content")
  }, columnDraggable ? /*#__PURE__*/_react["default"].createElement(_reactBeautifulDnd.DragDropContext, {
    onDragEnd: handleDragEnd
  }, /*#__PURE__*/_react["default"].createElement(_Group["default"], {
    key: String(false),
    value: 'false',
    records: treeRecords,
    onDragEnd: handleDragEnd,
    treeNodeRenderer: treeNodeRenderer,
    treeNodeSuffix: treeNodeSuffix
  })) : /*#__PURE__*/_react["default"].createElement(_Group["default"], {
    key: String(false),
    value: 'false',
    records: treeRecords,
    onDragEnd: handleDragEnd,
    treeNodeRenderer: treeNodeRenderer,
    treeNodeSuffix: treeNodeSuffix
  }));
});
ColumnGroups.displayName = 'ColumnGroups';
var _default = ColumnGroups;
exports["default"] = _default;
//# sourceMappingURL=index.js.map