You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
InternshipProject/node_modules/rc-tabs/es/TabNavList/OperationNode.js

201 lines
6.1 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import * as React from 'react';
import classNames from 'classnames';
import { useState, useEffect } from 'react';
import KeyCode from "rc-util/es/KeyCode";
import Menu, { MenuItem } from 'rc-menu';
import Dropdown from 'rc-dropdown';
import AddButton from './AddButton';
function OperationNode(_ref, ref) {
var prefixCls = _ref.prefixCls,
id = _ref.id,
tabs = _ref.tabs,
locale = _ref.locale,
mobile = _ref.mobile,
_ref$moreIcon = _ref.moreIcon,
moreIcon = _ref$moreIcon === void 0 ? 'More' : _ref$moreIcon,
moreTransitionName = _ref.moreTransitionName,
style = _ref.style,
className = _ref.className,
editable = _ref.editable,
tabBarGutter = _ref.tabBarGutter,
rtl = _ref.rtl,
removeAriaLabel = _ref.removeAriaLabel,
onTabClick = _ref.onTabClick;
// ======================== Dropdown ========================
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
open = _useState2[0],
setOpen = _useState2[1];
var _useState3 = useState(null),
_useState4 = _slicedToArray(_useState3, 2),
selectedKey = _useState4[0],
setSelectedKey = _useState4[1];
var popupId = "".concat(id, "-more-popup");
var dropdownPrefix = "".concat(prefixCls, "-dropdown");
var selectedItemId = selectedKey !== null ? "".concat(popupId, "-").concat(selectedKey) : null;
var dropdownAriaLabel = locale === null || locale === void 0 ? void 0 : locale.dropdownAriaLabel;
function onRemoveTab(event, key) {
event.preventDefault();
event.stopPropagation();
editable.onEdit('remove', {
key: key,
event: event
});
}
var menu = /*#__PURE__*/React.createElement(Menu, {
onClick: function onClick(_ref2) {
var key = _ref2.key,
domEvent = _ref2.domEvent;
onTabClick(key, domEvent);
setOpen(false);
},
id: popupId,
tabIndex: -1,
role: "listbox",
"aria-activedescendant": selectedItemId,
selectedKeys: [selectedKey],
"aria-label": dropdownAriaLabel !== undefined ? dropdownAriaLabel : 'expanded dropdown'
}, tabs.map(function (tab) {
var removable = editable && tab.closable !== false && !tab.disabled;
return /*#__PURE__*/React.createElement(MenuItem, {
key: tab.key,
id: "".concat(popupId, "-").concat(tab.key),
role: "option",
"aria-controls": id && "".concat(id, "-panel-").concat(tab.key),
disabled: tab.disabled
}, /*#__PURE__*/React.createElement("span", null, tab.tab), removable && /*#__PURE__*/React.createElement("button", {
type: "button",
"aria-label": removeAriaLabel || 'remove',
tabIndex: 0,
className: "".concat(dropdownPrefix, "-menu-item-remove"),
onClick: function onClick(e) {
e.stopPropagation();
onRemoveTab(e, tab.key);
}
}, tab.closeIcon || editable.removeIcon || '×'));
}));
function selectOffset(offset) {
var enabledTabs = tabs.filter(function (tab) {
return !tab.disabled;
});
var selectedIndex = enabledTabs.findIndex(function (tab) {
return tab.key === selectedKey;
}) || 0;
var len = enabledTabs.length;
for (var i = 0; i < len; i += 1) {
selectedIndex = (selectedIndex + offset + len) % len;
var tab = enabledTabs[selectedIndex];
if (!tab.disabled) {
setSelectedKey(tab.key);
return;
}
}
}
function onKeyDown(e) {
var which = e.which;
if (!open) {
if ([KeyCode.DOWN, KeyCode.SPACE, KeyCode.ENTER].includes(which)) {
setOpen(true);
e.preventDefault();
}
return;
}
switch (which) {
case KeyCode.UP:
selectOffset(-1);
e.preventDefault();
break;
case KeyCode.DOWN:
selectOffset(1);
e.preventDefault();
break;
case KeyCode.ESC:
setOpen(false);
break;
case KeyCode.SPACE:
case KeyCode.ENTER:
if (selectedKey !== null) onTabClick(selectedKey, e);
break;
}
} // ========================= Effect =========================
useEffect(function () {
// We use query element here to avoid React strict warning
var ele = document.getElementById(selectedItemId);
if (ele && ele.scrollIntoView) {
ele.scrollIntoView(false);
}
}, [selectedKey]);
useEffect(function () {
if (!open) {
setSelectedKey(null);
}
}, [open]); // ========================= Render =========================
var moreStyle = _defineProperty({}, rtl ? 'marginRight' : 'marginLeft', tabBarGutter);
if (!tabs.length) {
moreStyle.visibility = 'hidden';
moreStyle.order = 1;
}
var overlayClassName = classNames(_defineProperty({}, "".concat(dropdownPrefix, "-rtl"), rtl));
var moreNode = mobile ? null : /*#__PURE__*/React.createElement(Dropdown, {
prefixCls: dropdownPrefix,
overlay: menu,
trigger: ['hover'],
visible: open,
transitionName: moreTransitionName,
onVisibleChange: setOpen,
overlayClassName: overlayClassName,
mouseEnterDelay: 0.1,
mouseLeaveDelay: 0.1
}, /*#__PURE__*/React.createElement("button", {
type: "button",
className: "".concat(prefixCls, "-nav-more"),
style: moreStyle,
tabIndex: -1,
"aria-hidden": "true",
"aria-haspopup": "listbox",
"aria-controls": popupId,
id: "".concat(id, "-more"),
"aria-expanded": open,
onKeyDown: onKeyDown
}, moreIcon));
return /*#__PURE__*/React.createElement("div", {
className: classNames("".concat(prefixCls, "-nav-operations"), className),
style: style,
ref: ref
}, moreNode, /*#__PURE__*/React.createElement(AddButton, {
prefixCls: prefixCls,
locale: locale,
editable: editable
}));
}
export default /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(OperationNode), function (_, next) {
return (// https://github.com/ant-design/ant-design/issues/32544
// We'd better remove syntactic sugar in `rc-menu` since this has perf issue
next.tabMoving
);
});