choerodon-ui/pro/es/performance-table/customization-settings/column-groups/ItemSuffix.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 Button from '../../../button/Button';
import { FuncType } from '../../../button/enum';
import { Size } from '../../../core/enum';
import Dropdown from '../../../dropdown/Dropdown';
import Menu from '../../../menu';
import Switch from '../../../switch/Switch';
import TableContext from '../../TableContext';
import { Placements } from '../../../dropdown/enum';
import { $l } from '../../../locale-context';
var Item = Menu.Item;

function findRecords(record, groups) {
  var parent = record.parent;

  if (parent) {
    return parent.children || [];
  }

  var fixed = record.get('fixed');
  var group = groups.find(function (_ref) {
    var value = _ref.value;
    return value === fixed;
  });

  if (group) {
    return group.records;
  }

  return [];
}

var ItemSuffix = function ItemSuffix(props) {
  var record = props.record,
      index = props.index,
      records = props.records,
      groups = props.groups;

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

  var changeFixed = useCallback(function (fixed) {
    var oldFixed = record.get('fixed');
    var group = groups.find(function (_ref2) {
      var value = _ref2.value;
      return value === fixed;
    });

    if (group) {
      record.set('sort', group.records.length);
    }

    record.set('fixed', fixed);
    var oldGroup = groups.find(function (_ref3) {
      var value = _ref3.value;
      return value === oldFixed;
    });

    if (oldGroup) {
      oldGroup.records.filter(function (r) {
        return r !== record;
      }).forEach(function (r, sort) {
        return r.set('sort', sort);
      });
    }
  }, [record, groups]);
  var changeIndex = useCallback(function (newIndex) {
    var oldSort = record.get('sort');
    var list = findRecords(record, groups);

    var _list$splice = list.splice(oldSort, 1),
        _list$splice2 = _slicedToArray(_list$splice, 1),
        removed = _list$splice2[0];

    if (removed) {
      list.splice(newIndex, 0, removed);
    }

    list.forEach(function (r, sort) {
      return r.set('sort', sort);
    });
  }, [record, groups]);
  var handleMenuClick = useCallback(action(function (arg) {
    var key = arg.key;

    switch (key) {
      case 'rename':
        record.setState('editing', true);
        break;

      case 'unfixed':
        changeFixed(false);
        break;

      case 'left':
        changeFixed('left');
        break;

      case 'right':
        changeFixed('right');
        break;

      case 'top':
        changeIndex(0);
        break;

      case 'up':
        changeIndex(index - 1);
        break;

      case 'down':
        changeIndex(index + 1);
        break;

      default:
    }
  }), [record, index, changeFixed, changeIndex]);
  var getTreeNodesMenus = useCallback(function () {
    var fixed = record.get('fixed');
    var menus = [];

    if (columnTitleEditable && record.get('titleEditable') !== false) {
      menus.push( /*#__PURE__*/React.createElement(Item, {
        key: "rename"
      }, $l('Table', 'rename')));
    }

    if (columnDraggable) {
      if (!record.parent) {
        if (fixed) {
          menus.push( /*#__PURE__*/React.createElement(Item, {
            key: "unfixed"
          }, $l('Table', 'unlock')));
        } else {
          menus.push( /*#__PURE__*/React.createElement(Item, {
            key: "left"
          }, $l('Table', 'left_lock')), /*#__PURE__*/React.createElement(Item, {
            key: "right"
          }, $l('Table', 'right_lock')));
        }
      }

      if (index > 1) {
        menus.push( /*#__PURE__*/React.createElement(Item, {
          key: 'top'
        }, $l('Table', 'top')));
      }

      if (index > 0) {
        menus.push( /*#__PURE__*/React.createElement(Item, {
          key: "up"
        }, $l('Table', 'up')));
      }

      if (index < records.length - 1) {
        menus.push( /*#__PURE__*/React.createElement(Item, {
          key: "down"
        }, $l('Table', 'down')));
      }
    }

    if (menus.length) {
      return /*#__PURE__*/React.createElement(Menu, {
        prefixCls: "".concat(prefixCls, "-dropdown-menu"),
        onClick: handleMenuClick
      }, menus);
    }
  }, [record, index, records, columnTitleEditable, columnDraggable, handleMenuClick]);
  var menu = getTreeNodesMenus();
  return /*#__PURE__*/React.createElement(React.Fragment, null, menu && /*#__PURE__*/React.createElement(Dropdown, {
    overlay: menu,
    placement: Placements.bottomRight
  }, /*#__PURE__*/React.createElement(Button, {
    funcType: FuncType.flat,
    size: Size.small,
    icon: "more_horiz",
    className: "".concat(prefixCls, "-customization-tree-treenode-hover-button")
  })), /*#__PURE__*/React.createElement(Switch, {
    record: record,
    disabled: !columnHideable || record.get('hideable') === false || record.parent && record.parent.get('hidden'),
    name: "hidden",
    value: false,
    unCheckedValue: true
  }));
};

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