choerodon-ui/es/tabs/customization-settings/tab-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 ItemSuffix from './ItemSuffix';
import TabsContext from '../../TabsContext';

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

  var _useContext = useContext(TabsContext),
      prefixCls = _useContext.prefixCls,
      groupedPanelsMap = _useContext.groupedPanelsMap;

  var handleDragItem = useCallback(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 = sortBy(group.records, [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) {
        return r.set('sort', index);
      });
    }
  }), [dataSet, groupedTreeRecords]);
  var handleDragEnd = 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 = useCallback(function (record, index, records) {
    return /*#__PURE__*/React.createElement(ItemSuffix, {
      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.createElement(DragDropContext, {
      key: String(value),
      onDragEnd: handleDragEnd
    }, /*#__PURE__*/React.createElement(Group, {
      value: value,
      header: getGroupHeader(value),
      records: records,
      nodeSuffix: treeNodeSuffix,
      defaultKey: defaultKey
    }));
  });
  return /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-customization-panel-content")
  }, groups);
};

TabGroups.displayName = 'TabGroups';
export default observer(TabGroups);
//# sourceMappingURL=index.js.map