choerodon-ui/lib/tabs/customization-settings/tab-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 _ItemSuffix = _interopRequireDefault(require("./ItemSuffix"));

var _TabsContext = _interopRequireDefault(require("../../TabsContext"));

var TabGroups = function TabGroups(props) {
  var dataSet = props.dataSet,
      defaultKey = props.defaultKey,
      onDefaultKeyChange = props.onDefaultKeyChange;
  var groupedTreeRecords = dataSet.groupedTreeRecords;

  var _useContext = (0, _react.useContext)(_TabsContext["default"]),
      prefixCls = _useContext.prefixCls,
      groupedPanelsMap = _useContext.groupedPanelsMap;

  var handleDragItem = (0, _react.useCallback)((0, _mobx.action)(function (srcIndex, destIndex, groupKey) {
    var group = groupedTreeRecords.find(function (_ref) {
      var _ref$value = _ref.value,
          value = _ref$value === void 0 ? 'default' : _ref$value;
      return value === groupKey;
    });

    if (group) {
      var records = (0, _sortBy["default"])(group.records, [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) {
        return r.set('sort', index);
      });
    }
  }), [dataSet, groupedTreeRecords]);
  var handleDragEnd = (0, _react.useCallback)(function (_ref2) {
    var destination = _ref2.destination,
        _ref2$source = _ref2.source,
        srcDroppableId = _ref2$source.droppableId,
        srcIndex = _ref2$source.index;

    if (destination) {
      var destIndex = destination.index;

      if (srcIndex !== destIndex) {
        handleDragItem(srcIndex, destIndex, srcDroppableId);
      }
    }
  }, [handleDragItem]);
  var treeNodeSuffix = (0, _react.useCallback)(function (record, index, records) {
    return /*#__PURE__*/_react["default"].createElement(_ItemSuffix["default"], {
      record: record,
      index: index,
      records: records,
      groups: groupedTreeRecords,
      defaultKey: defaultKey,
      onDefaultKeyChange: onDefaultKeyChange
    });
  }, [groupedTreeRecords, defaultKey]);

  function getGroupHeader(groupKey) {
    var groupPaneMap = groupedPanelsMap.get(groupKey);

    if (groupPaneMap) {
      return groupPaneMap.group.tab;
    }
  }

  var groups = groupedTreeRecords.map(function (_ref3) {
    var _ref3$value = _ref3.value,
        value = _ref3$value === void 0 ? 'default' : _ref3$value,
        records = _ref3.records;
    return /*#__PURE__*/_react["default"].createElement(_reactBeautifulDnd.DragDropContext, {
      key: String(value),
      onDragEnd: handleDragEnd
    }, /*#__PURE__*/_react["default"].createElement(_Group["default"], {
      value: value,
      header: getGroupHeader(value),
      records: records,
      nodeSuffix: treeNodeSuffix,
      defaultKey: defaultKey
    }));
  });
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: "".concat(prefixCls, "-customization-panel-content")
  }, groups);
};

TabGroups.displayName = 'TabGroups';

var _default = (0, _mobxReactLite.observer)(TabGroups);

exports["default"] = _default;
//# sourceMappingURL=index.js.map