choerodon-ui/pro/lib/performance-table/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 _localeContext = require("../../../locale-context");

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

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

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

var ColumnGroups = function ColumnGroups(props) {
  var dataSet = props.dataSet;
  var groupedTreeRecords = dataSet.groupedTreeRecords;

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

  var groups = (0, _react.useMemo)(function () {
    var array = [{
      value: 'left',
      records: []
    }, {
      value: 'right',
      records: []
    }, {
      value: false,
      records: []
    }];
    return array.map(function (group) {
      var value = group.value;
      var found = groupedTreeRecords.find(function (item) {
        return value === item.value;
      });

      if (found) {
        group.records = _mobx.observable.array((0, _sortBy["default"])(found.records, [function (r) {
          return r.get('sort');
        }]));
      } else {
        group.records = _mobx.observable.array();
      }

      return group;
    });
  }, [groupedTreeRecords]);
  var handleDragTree = (0, _react.useCallback)((0, _mobx.action)(function (srcIndex, destIndex, srcLock, destLock) {
    var srcGroup = groups.find(function (group) {
      return String(group.value) === srcLock;
    });

    if (srcGroup) {
      var records = srcGroup.records;

      var _records$splice = records.splice(srcIndex, 1),
          _records$splice2 = (0, _slicedToArray2["default"])(_records$splice, 1),
          removed = _records$splice2[0];

      if (srcLock === destLock) {
        records.splice(destIndex, 0, removed);
        records.forEach(function (r, index) {
          r.set('sort', index);
        });
      } else {
        removed.set('fixed', destLock === 'false' ? false : destLock);
        var destGroup = groups.find(function (group) {
          return String(group.value) === destLock;
        });

        if (destGroup) {
          var destRecords = destGroup.records;

          if (destRecords.length) {
            destRecords.splice(destIndex, 0, removed);
          } else {
            destRecords.push(removed);
          }

          records.forEach(function (r, index) {
            r.set('sort', index);
          });
          destRecords.forEach(function (r, index) {
            r.set('sort', index);
          });
        }
      }
    }
  }), [groups]);
  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$splice3 = records.splice(srcIndex, 1),
            _records$splice4 = (0, _slicedToArray2["default"])(_records$splice3, 1),
            removed = _records$splice4[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, src[1], dest[1]);
        } 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, index, records) {
    return /*#__PURE__*/_react["default"].createElement(_ItemSuffix["default"], {
      record: record,
      index: index,
      records: records,
      groups: groups
    });
  }, [groups]);

  function getGroupHeader(lock) {
    switch (lock) {
      case 'left':
        return (0, _localeContext.$l)('Table', 'left_lock');

      case 'right':
        return (0, _localeContext.$l)('Table', 'right_lock');

      default:
        return (0, _localeContext.$l)('Table', 'unlocked');
    }
  }

  var groupNodes = groups.map(function (_ref2) {
    var value = _ref2.value,
        records = _ref2.records;
    return /*#__PURE__*/_react["default"].createElement(_Group["default"], {
      key: String(value),
      value: value,
      header: getGroupHeader(value),
      records: records,
      onDragEnd: handleDragEnd,
      treeNodeRenderer: treeNodeRenderer,
      treeNodeSuffix: treeNodeSuffix
    });
  });
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: "".concat(prefixCls, "-customization-panel-content")
  }, columnDraggable ? /*#__PURE__*/_react["default"].createElement(_reactBeautifulDnd.DragDropContext, {
    onDragEnd: handleDragEnd
  }, groupNodes) : groupNodes);
};

ColumnGroups.displayName = 'ColumnGroups';

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

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