choerodon-ui/es/tabs/customization-settings/tab-groups/ItemSuffix.js

An enterprise-class UI design language and React-based implementation

import React, { useCallback, useContext } from 'react';
import { observer } from 'mobx-react';
import Button from '../../../../pro/es/button/Button';
import { FuncType } from '../../../../pro/es/button/enum';
import Dropdown from '../../../../pro/es/dropdown/Dropdown';
import { Placements } from '../../../../pro/es/dropdown/enum';
import { $l } from '../../../../pro/es/locale-context';
import Tooltip from '../../../../pro/es/tooltip/Tooltip';
import Menu from '../../../menu';
import { Size } from '../../../_util/enum';
import TabsContext from '../../TabsContext';
import Icon from '../../../icon';
var Item = Menu.Item,
    SubMenu = Menu.SubMenu;

var ItemSuffix = function ItemSuffix(props) {
  var record = props.record,
      defaultKey = props.defaultKey,
      onDefaultKeyChange = props.onDefaultKeyChange;

  var _useContext = useContext(TabsContext),
      prefixCls = _useContext.prefixCls,
      tabCountHideable = _useContext.tabCountHideable,
      defaultChangeable = _useContext.defaultChangeable,
      tabTitleEditable = _useContext.tabTitleEditable;

  var itemKey = record.get('key');
  var showCount = record.get('showCount');
  var handleMenuClick = useCallback(function (arg) {
    switch (arg.key) {
      case 'set_default':
        onDefaultKeyChange(itemKey);
        break;

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

      case 'show_count_yes':
        record.set('showCount', true);
        break;

      case 'show_count_no':
        record.set('showCount', false);
        break;

      default:
    }
  }, [record, onDefaultKeyChange, itemKey]);

  var renderCheckOption = function renderCheckOption(bool) {
    if (showCount === bool) {
      return /*#__PURE__*/React.createElement(Icon, {
        type: "check",
        style: {
          "float": 'right'
        }
      });
    }
  };

  var getTreeNodesMenus = function getTreeNodesMenus() {
    var menus = [];

    if (defaultChangeable && itemKey !== defaultKey) {
      menus.push( /*#__PURE__*/React.createElement(Item, {
        key: "set_default"
      }, /*#__PURE__*/React.createElement("span", null, $l('Tabs', 'set_default')), /*#__PURE__*/React.createElement(Tooltip, {
        title: $l('Tabs', 'set_default_tip')
      }, /*#__PURE__*/React.createElement(Icon, {
        type: "help",
        className: "".concat(prefixCls, "-tip")
      }))));
    }

    if (tabTitleEditable) {
      menus.push( /*#__PURE__*/React.createElement(Item, {
        key: "rename"
      }, $l('Tabs', 'rename')));
    }

    if (tabCountHideable) {
      menus.push( /*#__PURE__*/React.createElement(SubMenu, {
        key: "show_count",
        title: $l('Tabs', 'show_count')
      }, /*#__PURE__*/React.createElement(Item, {
        key: "show_count_yes"
      }, /*#__PURE__*/React.createElement("span", null, $l('Tabs', 'yes')), renderCheckOption(true)), /*#__PURE__*/React.createElement(Item, {
        key: "show_count_no"
      }, /*#__PURE__*/React.createElement("span", null, $l('Tabs', 'no')), renderCheckOption(false))));
    }

    if (menus.length) {
      return /*#__PURE__*/React.createElement(Menu, {
        prefixCls: "".concat(prefixCls, "-dropdown-menu"),
        onClick: handleMenuClick,
        mode: "vertical"
      }, menus);
    }
  };

  var menu = getTreeNodesMenus();
  return 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-group-item-hover-button")
  })) : null;
};

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