acud/es/tabs/src/TabNavList/TabNode.js

acg react 组件库

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _typeof from "@babel/runtime/helpers/esm/typeof";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import * as React from 'react';
import { useState, useEffect } from 'react';
import classNames from 'classnames';
import KeyCode from "rc-util/es/KeyCode";
import Popover from '../../../popover';
function TabNode(_ref, ref) {
  var prefixCls = _ref.prefixCls,
    id = _ref.id,
    active = _ref.active,
    rtl = _ref.rtl,
    _ref$tab = _ref.tab,
    key = _ref$tab.key,
    tab = _ref$tab.tab,
    disabled = _ref$tab.disabled,
    closeIcon = _ref$tab.closeIcon,
    max = _ref$tab.max,
    tabBarGutter = _ref.tabBarGutter,
    tabPosition = _ref.tabPosition,
    closable = _ref.closable,
    renderWrapper = _ref.renderWrapper,
    removeAriaLabel = _ref.removeAriaLabel,
    editable = _ref.editable,
    onClick = _ref.onClick,
    onRemove = _ref.onRemove,
    onFocus = _ref.onFocus,
    onEditTabNav = _ref.onEditTabNav;
  var tabPrefix = "".concat(prefixCls, "-tab");
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    isEditNav = _useState2[0],
    setEditNav = _useState2[1];
  var _useState3 = useState(),
    _useState4 = _slicedToArray(_useState3, 2),
    editTab = _useState4[0],
    setEditTab = _useState4[1];
  React.useEffect(function () {
    return onRemove;
  }, []);
  var nodeStyle = {};
  if (tabPosition === 'top' || tabPosition === 'bottom') {
    nodeStyle[rtl ? 'marginRight' : 'marginLeft'] = tabBarGutter;
  } else {
    nodeStyle.marginTop = tabBarGutter;
  }
  var removable = editable && closable !== false && !disabled;
  function getLenPx(str) {
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    context.font = '400 12px arial';
    var result = context.measureText(str);
    return result.width;
  }
  ;
  function onInternalClick(e) {
    if (disabled) return;
    onClick(e);
  }
  function onRemoveTab(event) {
    event.preventDefault();
    event.stopPropagation();
    editable.onEdit('remove', {
      key: key,
      event: event
    });
  }
  function onDoubleClick() {
    if (editable && editable.showEdit && _typeof(tab) !== 'object') {
      setEditNav(true);
    }
  }
  function onChange(e) {
    setEditTab(e.target.value);
  }
  function onBlur() {
    onEditTabNav && onEditTabNav(editTab || tab.toString());
    setEditNav(false);
  }
  function onKeyDown(e) {
    var keyCode = null;
    if (e.which) {
      keyCode = e.which;
    } else if (e.keyCode) {
      keyCode = e.keyCode;
    }
    if (keyCode === 13) {
      onEditTabNav && onEditTabNav(editTab || tab.toString());
      setEditNav(false);
    }
  }
  useEffect(function () {
    if (_typeof(tab) !== 'object') {
      setEditTab(tab.toString());
    }
  }, [tab]);
  useEffect(function () {
    if (isEditNav) {
      var tabNode = document.getElementsByClassName("".concat(tabPrefix, "-btn"))[0];
      var width = tabNode.clientWidth;
      var contentWidth = getLenPx(editTab);
      var inputNode = document.getElementsByClassName("".concat(tabPrefix, "-btn-edit"))[0];
      if (inputNode && inputNode instanceof HTMLElement) {
        if (width) {
          inputNode.style.width = "".concat(width, "px");
          inputNode.scrollLeft = contentWidth - width > 0 ? contentWidth - width : 0;
        }
        inputNode.focus();
      }
    }
  }, [isEditNav]);
  var node = /*#__PURE__*/React.createElement(Popover, {
    content: tab,
    overlayStyle: {
      display: max && tab.toString().length > max ? '' : 'none'
    },
    placement: "topLeft"
  }, /*#__PURE__*/React.createElement("div", {
    key: key,
    ref: ref,
    className: classNames(tabPrefix, _defineProperty(_defineProperty(_defineProperty({}, "".concat(tabPrefix, "-with-remove"), removable), "".concat(tabPrefix, "-active"), active), "".concat(tabPrefix, "-disabled"), disabled)),
    style: nodeStyle,
    onClick: onInternalClick,
    onDoubleClick: onDoubleClick
  }, /*#__PURE__*/React.createElement("div", {
    role: "tab",
    "aria-selected": active,
    id: id && "".concat(id, "-tab-").concat(key),
    className: "".concat(tabPrefix, "-btn"),
    "aria-controls": id && "".concat(id, "-panel-").concat(key),
    "aria-disabled": disabled,
    tabIndex: disabled ? null : 0,
    onClick: function onClick(e) {
      e.stopPropagation();
      onInternalClick(e);
    },
    onKeyDown: function onKeyDown(e) {
      if ([KeyCode.SPACE, KeyCode.ENTER].includes(e.which)) {
        e.preventDefault();
        onInternalClick(e);
      }
    },
    onFocus: onFocus
  }, !isEditNav && (max && tab.toString().length > max ? tab.toString().substring(0, max) + '...' : tab), isEditNav && /*#__PURE__*/React.createElement("input", {
    className: "".concat(tabPrefix, "-btn-edit"),
    value: editTab,
    onChange: onChange,
    onBlur: onBlur,
    onKeyDown: onKeyDown
  })), removable && !isEditNav && /*#__PURE__*/React.createElement("button", {
    type: "button",
    "aria-label": removeAriaLabel || 'remove',
    tabIndex: 0,
    className: "".concat(tabPrefix, "-remove"),
    onClick: function onClick(e) {
      e.stopPropagation();
      onRemoveTab(e);
    }
  }, closeIcon || editable.removeIcon || '×')));
  if (renderWrapper) {
    node = renderWrapper(node);
  }
  return node;
}
export default /*#__PURE__*/React.forwardRef(TabNode);