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

acg react 组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof3 = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _classnames = _interopRequireDefault(require("classnames"));
var _KeyCode = _interopRequireDefault(require("rc-util/lib/KeyCode"));
var _popover = _interopRequireDefault(require("../../../popover"));
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
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 = (0, _react.useState)(false),
    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
    isEditNav = _useState2[0],
    setEditNav = _useState2[1];
  var _useState3 = (0, _react.useState)(),
    _useState4 = (0, _slicedToArray2["default"])(_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 && (0, _typeof2["default"])(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);
    }
  }
  (0, _react.useEffect)(function () {
    if ((0, _typeof2["default"])(tab) !== 'object') {
      setEditTab(tab.toString());
    }
  }, [tab]);
  (0, _react.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["default"], {
    content: tab,
    overlayStyle: {
      display: max && tab.toString().length > max ? '' : 'none'
    },
    placement: "topLeft"
  }, /*#__PURE__*/React.createElement("div", {
    key: key,
    ref: ref,
    className: (0, _classnames["default"])(tabPrefix, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, "".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["default"].SPACE, _KeyCode["default"].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;
}
var _default = exports["default"] = /*#__PURE__*/React.forwardRef(TabNode);