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 = observer(function ItemSuffix(props) {
  var record = props.record,
      defaultKey = props.defaultKey,
      onDefaultKeyChange = props.onDefaultKeyChange;

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

  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 React.createElement(Icon, {
        type: "check",
        style: {
          "float": 'right'
        }
      });
    }
  };

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

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

    menus.push(React.createElement(Item, {
      key: "rename"
    }, $l('Tabs', 'rename')), React.createElement(SubMenu, {
      key: "show_count",
      title: $l('Tabs', 'show_count')
    }, React.createElement(Item, {
      key: "show_count_yes"
    }, React.createElement("span", null, $l('Tabs', 'yes')), renderCheckOption(true)), React.createElement(Item, {
      key: "show_count_no"
    }, React.createElement("span", null, $l('Tabs', 'no')), renderCheckOption(false))));
    return React.createElement(Menu, {
      prefixCls: "".concat(prefixCls, "-dropdown-menu"),
      onClick: handleMenuClick,
      mode: "vertical"
    }, menus);
  };

  var menu = getTreeNodesMenus();
  return menu ? React.createElement(Dropdown, {
    overlay: menu,
    placement: Placements.bottomRight
  }, 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 ItemSuffix;
//# sourceMappingURL=ItemSuffix.js.map