preact-arco-design/es/Tabs/tab-header/tab-title.js

Arco Design React UI Library.

var __assign = this && this.__assign || function () {
  __assign = Object.assign || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];

      for (var p in s) {
        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
      }
    }

    return t;
  };

  return __assign.apply(this, arguments);
};

import React from "preact/compat";
import IconClose from "../../../icon/react-icon/IconClose";
import cs from "../../_util/classNames";
import IconHover from "../../_class/icon-hover";
import { isFunction } from "../../_util/is";
import { getKeyDownEvent } from "../utils";
import { Enter } from "../../_util/keycode";

var TabHeaderTitle = function TabHeaderTitle(_a, ref) {
  var _b;

  var prefixCls = _a.prefixCls,
      onDeleteTab = _a.onDeleteTab,
      tabKey = _a.tabKey,
      isActive = _a.isActive,
      onClickTab = _a.onClickTab,
      _c = _a.disabled,
      disabled = _c === void 0 ? false : _c,
      title = _a.title,
      editable = _a.editable,
      renderTitle = _a.renderTitle,
      deleteIcon = _a.deleteIcon,
      deleteButton = _a.deleteButton,
      getIdPrefix = _a.getIdPrefix,
      index = _a.index;
  var render = isFunction(renderTitle) ? renderTitle : function (node) {
    return node;
  };

  var handleDeleteTab = function handleDeleteTab(e) {
    e.stopPropagation();
    if (disabled) return;
    onDeleteTab();
  };

  var handleTabClick = function handleTabClick(e) {
    if (disabled) return;
    onClickTab(e);
  };

  return render(React.createElement("div", {
    ref: ref,
    key: tabKey,
    className: cs("".concat(prefixCls, "-header-title"), (_b = {}, _b["".concat(prefixCls, "-header-title-active")] = isActive, _b["".concat(prefixCls, "-header-title-editable")] = editable, _b["".concat(prefixCls, "-header-title-disabled")] = disabled, _b)),
    role: "tab",
    "aria-selected": isActive,
    tabIndex: disabled ? -1 : 0,
    "aria-disabled": disabled || undefined,
    id: getIdPrefix(index).tab,
    "aria-controls": getIdPrefix(index).tabpane,
    onClick: handleTabClick,
    onKeyDown: function onKeyDown(event) {
      var keyCode = event.keyCode || event.which;

      if (keyCode === Enter.code) {
        handleTabClick(event);
      }
    }
  }, React.createElement("span", {
    className: "".concat(prefixCls, "-header-title-text")
  }, title), editable && React.createElement("span", __assign({
    role: "button",
    "aria-label": "remove tab",
    "aria-disabled": disabled || undefined,
    tabIndex: disabled ? -1 : 0,
    className: "".concat(prefixCls, "-close-icon")
  }, getKeyDownEvent({
    onPressEnter: handleDeleteTab
  }), {
    onClick: handleDeleteTab
  }), deleteButton || React.createElement(IconHover, {
    prefix: prefixCls
  }, deleteIcon || React.createElement(IconClose, null)))), {
    key: tabKey,
    isActive: isActive,
    disabled: disabled,
    editable: editable
  });
};

export default React.forwardRef(TabHeaderTitle);