choerodon-ui/pro/es/performance-table/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, useMemo } from 'react';
import { action, observable } from 'mobx';
import { observer } from 'mobx-react-lite';
import { DragDropContext } from 'react-beautiful-dnd';
import sortBy from 'lodash/sortBy';
import Group from './Group';
import { $l } from '../../../locale-context';
import ItemTitle from './ItemTitle';
import TableContext from '../../TableContext';
import ItemSuffix from './ItemSuffix';

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

  var _useContext = useContext(TableContext),
      _useContext$tableStor = _useContext.tableStore,
      columnDraggable = _useContext$tableStor.columnDraggable,
      prefixCls = _useContext$tableStor.proPrefixCls;

  var groups = 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 = observable.array(sortBy(found.records, [function (r) {
          return r.get('sort');
        }]));
      } else {
        group.records = observable.array();
      }

      return group;
    });
  }, [groupedTreeRecords]);
  var handleDragTree = useCallback(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 = _slicedToArray(_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 = 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$splice3 = records.splice(srcIndex, 1),
            _records$splice4 = _slicedToArray(_records$splice3, 1),
            removed = _records$splice4[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, src[1], dest[1]);
        } 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, index, records) {
    return /*#__PURE__*/React.createElement(ItemSuffix, {
      record: record,
      index: index,
      records: records,
      groups: groups
    });
  }, [groups]);

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

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

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

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

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