first commit
This commit is contained in:
rayd1o
613
frontend/node_modules/rc-tabs/es/TabNavList/index.js
generated
vendored
Normal file
613
frontend/node_modules/rc-tabs/es/TabNavList/index.js
generated
vendored
Normal file
@@ -0,0 +1,613 @@
|
||||
import _extends from "@babel/runtime/helpers/esm/extends";
|
||||
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
||||
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
|
||||
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
||||
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
import classNames from 'classnames';
|
||||
import ResizeObserver from 'rc-resize-observer';
|
||||
import useEvent from "rc-util/es/hooks/useEvent";
|
||||
import { useComposeRef } from "rc-util/es/ref";
|
||||
import * as React from 'react';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import TabContext from "../TabContext";
|
||||
import useIndicator from "../hooks/useIndicator";
|
||||
import useOffsets from "../hooks/useOffsets";
|
||||
import useSyncState from "../hooks/useSyncState";
|
||||
import useTouchMove from "../hooks/useTouchMove";
|
||||
import useUpdate, { useUpdateState } from "../hooks/useUpdate";
|
||||
import useVisibleRange from "../hooks/useVisibleRange";
|
||||
import { genDataNodeKey, getRemovable, stringify } from "../util";
|
||||
import AddButton from "./AddButton";
|
||||
import ExtraContent from "./ExtraContent";
|
||||
import OperationNode from "./OperationNode";
|
||||
import TabNode from "./TabNode";
|
||||
var getTabSize = function getTabSize(tab, containerRect) {
|
||||
// tabListRef
|
||||
var offsetWidth = tab.offsetWidth,
|
||||
offsetHeight = tab.offsetHeight,
|
||||
offsetTop = tab.offsetTop,
|
||||
offsetLeft = tab.offsetLeft;
|
||||
var _tab$getBoundingClien = tab.getBoundingClientRect(),
|
||||
width = _tab$getBoundingClien.width,
|
||||
height = _tab$getBoundingClien.height,
|
||||
left = _tab$getBoundingClien.left,
|
||||
top = _tab$getBoundingClien.top;
|
||||
|
||||
// Use getBoundingClientRect to avoid decimal inaccuracy
|
||||
if (Math.abs(width - offsetWidth) < 1) {
|
||||
return [width, height, left - containerRect.left, top - containerRect.top];
|
||||
}
|
||||
return [offsetWidth, offsetHeight, offsetLeft, offsetTop];
|
||||
};
|
||||
var getSize = function getSize(refObj) {
|
||||
var _ref = refObj.current || {},
|
||||
_ref$offsetWidth = _ref.offsetWidth,
|
||||
offsetWidth = _ref$offsetWidth === void 0 ? 0 : _ref$offsetWidth,
|
||||
_ref$offsetHeight = _ref.offsetHeight,
|
||||
offsetHeight = _ref$offsetHeight === void 0 ? 0 : _ref$offsetHeight;
|
||||
|
||||
// Use getBoundingClientRect to avoid decimal inaccuracy
|
||||
if (refObj.current) {
|
||||
var _refObj$current$getBo = refObj.current.getBoundingClientRect(),
|
||||
width = _refObj$current$getBo.width,
|
||||
height = _refObj$current$getBo.height;
|
||||
if (Math.abs(width - offsetWidth) < 1) {
|
||||
return [width, height];
|
||||
}
|
||||
}
|
||||
return [offsetWidth, offsetHeight];
|
||||
};
|
||||
|
||||
/**
|
||||
* Convert `SizeInfo` to unit value. Such as [123, 456] with `top` position get `123`
|
||||
*/
|
||||
var getUnitValue = function getUnitValue(size, tabPositionTopOrBottom) {
|
||||
return size[tabPositionTopOrBottom ? 0 : 1];
|
||||
};
|
||||
var TabNavList = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
||||
var className = props.className,
|
||||
style = props.style,
|
||||
id = props.id,
|
||||
animated = props.animated,
|
||||
activeKey = props.activeKey,
|
||||
rtl = props.rtl,
|
||||
extra = props.extra,
|
||||
editable = props.editable,
|
||||
locale = props.locale,
|
||||
tabPosition = props.tabPosition,
|
||||
tabBarGutter = props.tabBarGutter,
|
||||
children = props.children,
|
||||
onTabClick = props.onTabClick,
|
||||
onTabScroll = props.onTabScroll,
|
||||
indicator = props.indicator;
|
||||
var _React$useContext = React.useContext(TabContext),
|
||||
prefixCls = _React$useContext.prefixCls,
|
||||
tabs = _React$useContext.tabs;
|
||||
var containerRef = useRef(null);
|
||||
var extraLeftRef = useRef(null);
|
||||
var extraRightRef = useRef(null);
|
||||
var tabsWrapperRef = useRef(null);
|
||||
var tabListRef = useRef(null);
|
||||
var operationsRef = useRef(null);
|
||||
var innerAddButtonRef = useRef(null);
|
||||
var tabPositionTopOrBottom = tabPosition === 'top' || tabPosition === 'bottom';
|
||||
var _useSyncState = useSyncState(0, function (next, prev) {
|
||||
if (tabPositionTopOrBottom && onTabScroll) {
|
||||
onTabScroll({
|
||||
direction: next > prev ? 'left' : 'right'
|
||||
});
|
||||
}
|
||||
}),
|
||||
_useSyncState2 = _slicedToArray(_useSyncState, 2),
|
||||
transformLeft = _useSyncState2[0],
|
||||
setTransformLeft = _useSyncState2[1];
|
||||
var _useSyncState3 = useSyncState(0, function (next, prev) {
|
||||
if (!tabPositionTopOrBottom && onTabScroll) {
|
||||
onTabScroll({
|
||||
direction: next > prev ? 'top' : 'bottom'
|
||||
});
|
||||
}
|
||||
}),
|
||||
_useSyncState4 = _slicedToArray(_useSyncState3, 2),
|
||||
transformTop = _useSyncState4[0],
|
||||
setTransformTop = _useSyncState4[1];
|
||||
var _useState = useState([0, 0]),
|
||||
_useState2 = _slicedToArray(_useState, 2),
|
||||
containerExcludeExtraSize = _useState2[0],
|
||||
setContainerExcludeExtraSize = _useState2[1];
|
||||
var _useState3 = useState([0, 0]),
|
||||
_useState4 = _slicedToArray(_useState3, 2),
|
||||
tabContentSize = _useState4[0],
|
||||
setTabContentSize = _useState4[1];
|
||||
var _useState5 = useState([0, 0]),
|
||||
_useState6 = _slicedToArray(_useState5, 2),
|
||||
addSize = _useState6[0],
|
||||
setAddSize = _useState6[1];
|
||||
var _useState7 = useState([0, 0]),
|
||||
_useState8 = _slicedToArray(_useState7, 2),
|
||||
operationSize = _useState8[0],
|
||||
setOperationSize = _useState8[1];
|
||||
var _useUpdateState = useUpdateState(new Map()),
|
||||
_useUpdateState2 = _slicedToArray(_useUpdateState, 2),
|
||||
tabSizes = _useUpdateState2[0],
|
||||
setTabSizes = _useUpdateState2[1];
|
||||
var tabOffsets = useOffsets(tabs, tabSizes, tabContentSize[0]);
|
||||
|
||||
// ========================== Unit =========================
|
||||
var containerExcludeExtraSizeValue = getUnitValue(containerExcludeExtraSize, tabPositionTopOrBottom);
|
||||
var tabContentSizeValue = getUnitValue(tabContentSize, tabPositionTopOrBottom);
|
||||
var addSizeValue = getUnitValue(addSize, tabPositionTopOrBottom);
|
||||
var operationSizeValue = getUnitValue(operationSize, tabPositionTopOrBottom);
|
||||
var needScroll = Math.floor(containerExcludeExtraSizeValue) < Math.floor(tabContentSizeValue + addSizeValue);
|
||||
var visibleTabContentValue = needScroll ? containerExcludeExtraSizeValue - operationSizeValue : containerExcludeExtraSizeValue - addSizeValue;
|
||||
|
||||
// ========================== Util =========================
|
||||
var operationsHiddenClassName = "".concat(prefixCls, "-nav-operations-hidden");
|
||||
var transformMin = 0;
|
||||
var transformMax = 0;
|
||||
if (!tabPositionTopOrBottom) {
|
||||
transformMin = Math.min(0, visibleTabContentValue - tabContentSizeValue);
|
||||
transformMax = 0;
|
||||
} else if (rtl) {
|
||||
transformMin = 0;
|
||||
transformMax = Math.max(0, tabContentSizeValue - visibleTabContentValue);
|
||||
} else {
|
||||
transformMin = Math.min(0, visibleTabContentValue - tabContentSizeValue);
|
||||
transformMax = 0;
|
||||
}
|
||||
function alignInRange(value) {
|
||||
if (value < transformMin) {
|
||||
return transformMin;
|
||||
}
|
||||
if (value > transformMax) {
|
||||
return transformMax;
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
// ========================= Mobile ========================
|
||||
var touchMovingRef = useRef(null);
|
||||
var _useState9 = useState(),
|
||||
_useState10 = _slicedToArray(_useState9, 2),
|
||||
lockAnimation = _useState10[0],
|
||||
setLockAnimation = _useState10[1];
|
||||
function doLockAnimation() {
|
||||
setLockAnimation(Date.now());
|
||||
}
|
||||
function clearTouchMoving() {
|
||||
if (touchMovingRef.current) {
|
||||
clearTimeout(touchMovingRef.current);
|
||||
}
|
||||
}
|
||||
useTouchMove(tabsWrapperRef, function (offsetX, offsetY) {
|
||||
function doMove(setState, offset) {
|
||||
setState(function (value) {
|
||||
var newValue = alignInRange(value + offset);
|
||||
return newValue;
|
||||
});
|
||||
}
|
||||
|
||||
// Skip scroll if place is enough
|
||||
if (!needScroll) {
|
||||
return false;
|
||||
}
|
||||
if (tabPositionTopOrBottom) {
|
||||
doMove(setTransformLeft, offsetX);
|
||||
} else {
|
||||
doMove(setTransformTop, offsetY);
|
||||
}
|
||||
clearTouchMoving();
|
||||
doLockAnimation();
|
||||
return true;
|
||||
});
|
||||
useEffect(function () {
|
||||
clearTouchMoving();
|
||||
if (lockAnimation) {
|
||||
touchMovingRef.current = setTimeout(function () {
|
||||
setLockAnimation(0);
|
||||
}, 100);
|
||||
}
|
||||
return clearTouchMoving;
|
||||
}, [lockAnimation]);
|
||||
|
||||
// ===================== Visible Range =====================
|
||||
// Render tab node & collect tab offset
|
||||
var _useVisibleRange = useVisibleRange(tabOffsets,
|
||||
// Container
|
||||
visibleTabContentValue,
|
||||
// Transform
|
||||
tabPositionTopOrBottom ? transformLeft : transformTop,
|
||||
// Tabs
|
||||
tabContentSizeValue,
|
||||
// Add
|
||||
addSizeValue,
|
||||
// Operation
|
||||
operationSizeValue, _objectSpread(_objectSpread({}, props), {}, {
|
||||
tabs: tabs
|
||||
})),
|
||||
_useVisibleRange2 = _slicedToArray(_useVisibleRange, 2),
|
||||
visibleStart = _useVisibleRange2[0],
|
||||
visibleEnd = _useVisibleRange2[1];
|
||||
|
||||
// ========================= Scroll ========================
|
||||
var scrollToTab = useEvent(function () {
|
||||
var key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : activeKey;
|
||||
var tabOffset = tabOffsets.get(key) || {
|
||||
width: 0,
|
||||
height: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0
|
||||
};
|
||||
if (tabPositionTopOrBottom) {
|
||||
// ============ Align with top & bottom ============
|
||||
var newTransform = transformLeft;
|
||||
|
||||
// RTL
|
||||
if (rtl) {
|
||||
if (tabOffset.right < transformLeft) {
|
||||
newTransform = tabOffset.right;
|
||||
} else if (tabOffset.right + tabOffset.width > transformLeft + visibleTabContentValue) {
|
||||
newTransform = tabOffset.right + tabOffset.width - visibleTabContentValue;
|
||||
}
|
||||
}
|
||||
// LTR
|
||||
else if (tabOffset.left < -transformLeft) {
|
||||
newTransform = -tabOffset.left;
|
||||
} else if (tabOffset.left + tabOffset.width > -transformLeft + visibleTabContentValue) {
|
||||
newTransform = -(tabOffset.left + tabOffset.width - visibleTabContentValue);
|
||||
}
|
||||
setTransformTop(0);
|
||||
setTransformLeft(alignInRange(newTransform));
|
||||
} else {
|
||||
// ============ Align with left & right ============
|
||||
var _newTransform = transformTop;
|
||||
if (tabOffset.top < -transformTop) {
|
||||
_newTransform = -tabOffset.top;
|
||||
} else if (tabOffset.top + tabOffset.height > -transformTop + visibleTabContentValue) {
|
||||
_newTransform = -(tabOffset.top + tabOffset.height - visibleTabContentValue);
|
||||
}
|
||||
setTransformLeft(0);
|
||||
setTransformTop(alignInRange(_newTransform));
|
||||
}
|
||||
});
|
||||
|
||||
// ========================= Focus =========================
|
||||
var _useState11 = useState(),
|
||||
_useState12 = _slicedToArray(_useState11, 2),
|
||||
focusKey = _useState12[0],
|
||||
setFocusKey = _useState12[1];
|
||||
var _useState13 = useState(false),
|
||||
_useState14 = _slicedToArray(_useState13, 2),
|
||||
isMouse = _useState14[0],
|
||||
setIsMouse = _useState14[1];
|
||||
var enabledTabs = tabs.filter(function (tab) {
|
||||
return !tab.disabled;
|
||||
}).map(function (tab) {
|
||||
return tab.key;
|
||||
});
|
||||
var onOffset = function onOffset(offset) {
|
||||
var currentIndex = enabledTabs.indexOf(focusKey || activeKey);
|
||||
var len = enabledTabs.length;
|
||||
var nextIndex = (currentIndex + offset + len) % len;
|
||||
var newKey = enabledTabs[nextIndex];
|
||||
setFocusKey(newKey);
|
||||
};
|
||||
var handleRemoveTab = function handleRemoveTab(removalTabKey, e) {
|
||||
var removeIndex = enabledTabs.indexOf(removalTabKey);
|
||||
var removeTab = tabs.find(function (tab) {
|
||||
return tab.key === removalTabKey;
|
||||
});
|
||||
var removable = getRemovable(removeTab === null || removeTab === void 0 ? void 0 : removeTab.closable, removeTab === null || removeTab === void 0 ? void 0 : removeTab.closeIcon, editable, removeTab === null || removeTab === void 0 ? void 0 : removeTab.disabled);
|
||||
if (removable) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
editable.onEdit('remove', {
|
||||
key: removalTabKey,
|
||||
event: e
|
||||
});
|
||||
|
||||
// when remove last tab, focus previous tab
|
||||
if (removeIndex === enabledTabs.length - 1) {
|
||||
onOffset(-1);
|
||||
} else {
|
||||
onOffset(1);
|
||||
}
|
||||
}
|
||||
};
|
||||
var handleMouseDown = function handleMouseDown(key, e) {
|
||||
setIsMouse(true);
|
||||
// Middle mouse button
|
||||
if (e.button === 1) {
|
||||
handleRemoveTab(key, e);
|
||||
}
|
||||
};
|
||||
var handleKeyDown = function handleKeyDown(e) {
|
||||
var code = e.code;
|
||||
var isRTL = rtl && tabPositionTopOrBottom;
|
||||
var firstEnabledTab = enabledTabs[0];
|
||||
var lastEnabledTab = enabledTabs[enabledTabs.length - 1];
|
||||
switch (code) {
|
||||
// LEFT
|
||||
case 'ArrowLeft':
|
||||
{
|
||||
if (tabPositionTopOrBottom) {
|
||||
onOffset(isRTL ? 1 : -1);
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
// RIGHT
|
||||
case 'ArrowRight':
|
||||
{
|
||||
if (tabPositionTopOrBottom) {
|
||||
onOffset(isRTL ? -1 : 1);
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
// UP
|
||||
case 'ArrowUp':
|
||||
{
|
||||
e.preventDefault();
|
||||
if (!tabPositionTopOrBottom) {
|
||||
onOffset(-1);
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
// DOWN
|
||||
case 'ArrowDown':
|
||||
{
|
||||
e.preventDefault();
|
||||
if (!tabPositionTopOrBottom) {
|
||||
onOffset(1);
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
// HOME
|
||||
case 'Home':
|
||||
{
|
||||
e.preventDefault();
|
||||
setFocusKey(firstEnabledTab);
|
||||
break;
|
||||
}
|
||||
|
||||
// END
|
||||
case 'End':
|
||||
{
|
||||
e.preventDefault();
|
||||
setFocusKey(lastEnabledTab);
|
||||
break;
|
||||
}
|
||||
|
||||
// Enter & Space
|
||||
case 'Enter':
|
||||
case 'Space':
|
||||
{
|
||||
e.preventDefault();
|
||||
onTabClick(focusKey !== null && focusKey !== void 0 ? focusKey : activeKey, e);
|
||||
break;
|
||||
}
|
||||
// Backspace
|
||||
case 'Backspace':
|
||||
case 'Delete':
|
||||
{
|
||||
handleRemoveTab(focusKey, e);
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// ========================== Tab ==========================
|
||||
var tabNodeStyle = {};
|
||||
if (tabPositionTopOrBottom) {
|
||||
tabNodeStyle[rtl ? 'marginRight' : 'marginLeft'] = tabBarGutter;
|
||||
} else {
|
||||
tabNodeStyle.marginTop = tabBarGutter;
|
||||
}
|
||||
var tabNodes = tabs.map(function (tab, i) {
|
||||
var key = tab.key;
|
||||
return /*#__PURE__*/React.createElement(TabNode, {
|
||||
id: id,
|
||||
prefixCls: prefixCls,
|
||||
key: key,
|
||||
tab: tab
|
||||
/* first node should not have margin left */,
|
||||
style: i === 0 ? undefined : tabNodeStyle,
|
||||
closable: tab.closable,
|
||||
editable: editable,
|
||||
active: key === activeKey,
|
||||
focus: key === focusKey,
|
||||
renderWrapper: children,
|
||||
removeAriaLabel: locale === null || locale === void 0 ? void 0 : locale.removeAriaLabel,
|
||||
tabCount: enabledTabs.length,
|
||||
currentPosition: i + 1,
|
||||
onClick: function onClick(e) {
|
||||
onTabClick(key, e);
|
||||
},
|
||||
onKeyDown: handleKeyDown,
|
||||
onFocus: function onFocus() {
|
||||
if (!isMouse) {
|
||||
setFocusKey(key);
|
||||
}
|
||||
scrollToTab(key);
|
||||
doLockAnimation();
|
||||
if (!tabsWrapperRef.current) {
|
||||
return;
|
||||
}
|
||||
// Focus element will make scrollLeft change which we should reset back
|
||||
if (!rtl) {
|
||||
tabsWrapperRef.current.scrollLeft = 0;
|
||||
}
|
||||
tabsWrapperRef.current.scrollTop = 0;
|
||||
},
|
||||
onBlur: function onBlur() {
|
||||
setFocusKey(undefined);
|
||||
},
|
||||
onMouseDown: function onMouseDown(e) {
|
||||
return handleMouseDown(key, e);
|
||||
},
|
||||
onMouseUp: function onMouseUp() {
|
||||
setIsMouse(false);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Update buttons records
|
||||
var updateTabSizes = function updateTabSizes() {
|
||||
return setTabSizes(function () {
|
||||
var _tabListRef$current;
|
||||
var newSizes = new Map();
|
||||
var listRect = (_tabListRef$current = tabListRef.current) === null || _tabListRef$current === void 0 ? void 0 : _tabListRef$current.getBoundingClientRect();
|
||||
tabs.forEach(function (_ref2) {
|
||||
var _tabListRef$current2;
|
||||
var key = _ref2.key;
|
||||
var btnNode = (_tabListRef$current2 = tabListRef.current) === null || _tabListRef$current2 === void 0 ? void 0 : _tabListRef$current2.querySelector("[data-node-key=\"".concat(genDataNodeKey(key), "\"]"));
|
||||
if (btnNode) {
|
||||
var _getTabSize = getTabSize(btnNode, listRect),
|
||||
_getTabSize2 = _slicedToArray(_getTabSize, 4),
|
||||
width = _getTabSize2[0],
|
||||
height = _getTabSize2[1],
|
||||
left = _getTabSize2[2],
|
||||
top = _getTabSize2[3];
|
||||
newSizes.set(key, {
|
||||
width: width,
|
||||
height: height,
|
||||
left: left,
|
||||
top: top
|
||||
});
|
||||
}
|
||||
});
|
||||
return newSizes;
|
||||
});
|
||||
};
|
||||
useEffect(function () {
|
||||
updateTabSizes();
|
||||
}, [tabs.map(function (tab) {
|
||||
return tab.key;
|
||||
}).join('_')]);
|
||||
var onListHolderResize = useUpdate(function () {
|
||||
// Update wrapper records
|
||||
var containerSize = getSize(containerRef);
|
||||
var extraLeftSize = getSize(extraLeftRef);
|
||||
var extraRightSize = getSize(extraRightRef);
|
||||
setContainerExcludeExtraSize([containerSize[0] - extraLeftSize[0] - extraRightSize[0], containerSize[1] - extraLeftSize[1] - extraRightSize[1]]);
|
||||
var newAddSize = getSize(innerAddButtonRef);
|
||||
setAddSize(newAddSize);
|
||||
var newOperationSize = getSize(operationsRef);
|
||||
setOperationSize(newOperationSize);
|
||||
|
||||
// Which includes add button size
|
||||
var tabContentFullSize = getSize(tabListRef);
|
||||
setTabContentSize([tabContentFullSize[0] - newAddSize[0], tabContentFullSize[1] - newAddSize[1]]);
|
||||
|
||||
// Update buttons records
|
||||
updateTabSizes();
|
||||
});
|
||||
|
||||
// ======================== Dropdown =======================
|
||||
var startHiddenTabs = tabs.slice(0, visibleStart);
|
||||
var endHiddenTabs = tabs.slice(visibleEnd + 1);
|
||||
var hiddenTabs = [].concat(_toConsumableArray(startHiddenTabs), _toConsumableArray(endHiddenTabs));
|
||||
|
||||
// =================== Link & Operations ===================
|
||||
var activeTabOffset = tabOffsets.get(activeKey);
|
||||
var _useIndicator = useIndicator({
|
||||
activeTabOffset: activeTabOffset,
|
||||
horizontal: tabPositionTopOrBottom,
|
||||
indicator: indicator,
|
||||
rtl: rtl
|
||||
}),
|
||||
indicatorStyle = _useIndicator.style;
|
||||
|
||||
// ========================= Effect ========================
|
||||
useEffect(function () {
|
||||
scrollToTab();
|
||||
}, [activeKey, transformMin, transformMax, stringify(activeTabOffset), stringify(tabOffsets), tabPositionTopOrBottom]);
|
||||
|
||||
// Should recalculate when rtl changed
|
||||
useEffect(function () {
|
||||
onListHolderResize();
|
||||
// eslint-disable-next-line
|
||||
}, [rtl]);
|
||||
|
||||
// ========================= Render ========================
|
||||
var hasDropdown = !!hiddenTabs.length;
|
||||
var wrapPrefix = "".concat(prefixCls, "-nav-wrap");
|
||||
var pingLeft;
|
||||
var pingRight;
|
||||
var pingTop;
|
||||
var pingBottom;
|
||||
if (tabPositionTopOrBottom) {
|
||||
if (rtl) {
|
||||
pingRight = transformLeft > 0;
|
||||
pingLeft = transformLeft !== transformMax;
|
||||
} else {
|
||||
pingLeft = transformLeft < 0;
|
||||
pingRight = transformLeft !== transformMin;
|
||||
}
|
||||
} else {
|
||||
pingTop = transformTop < 0;
|
||||
pingBottom = transformTop !== transformMin;
|
||||
}
|
||||
return /*#__PURE__*/React.createElement(ResizeObserver, {
|
||||
onResize: onListHolderResize
|
||||
}, /*#__PURE__*/React.createElement("div", {
|
||||
ref: useComposeRef(ref, containerRef),
|
||||
role: "tablist",
|
||||
"aria-orientation": tabPositionTopOrBottom ? 'horizontal' : 'vertical',
|
||||
className: classNames("".concat(prefixCls, "-nav"), className),
|
||||
style: style,
|
||||
onKeyDown: function onKeyDown() {
|
||||
// No need animation when use keyboard
|
||||
doLockAnimation();
|
||||
}
|
||||
}, /*#__PURE__*/React.createElement(ExtraContent, {
|
||||
ref: extraLeftRef,
|
||||
position: "left",
|
||||
extra: extra,
|
||||
prefixCls: prefixCls
|
||||
}), /*#__PURE__*/React.createElement(ResizeObserver, {
|
||||
onResize: onListHolderResize
|
||||
}, /*#__PURE__*/React.createElement("div", {
|
||||
className: classNames(wrapPrefix, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(wrapPrefix, "-ping-left"), pingLeft), "".concat(wrapPrefix, "-ping-right"), pingRight), "".concat(wrapPrefix, "-ping-top"), pingTop), "".concat(wrapPrefix, "-ping-bottom"), pingBottom)),
|
||||
ref: tabsWrapperRef
|
||||
}, /*#__PURE__*/React.createElement(ResizeObserver, {
|
||||
onResize: onListHolderResize
|
||||
}, /*#__PURE__*/React.createElement("div", {
|
||||
ref: tabListRef,
|
||||
className: "".concat(prefixCls, "-nav-list"),
|
||||
style: {
|
||||
transform: "translate(".concat(transformLeft, "px, ").concat(transformTop, "px)"),
|
||||
transition: lockAnimation ? 'none' : undefined
|
||||
}
|
||||
}, tabNodes, /*#__PURE__*/React.createElement(AddButton, {
|
||||
ref: innerAddButtonRef,
|
||||
prefixCls: prefixCls,
|
||||
locale: locale,
|
||||
editable: editable,
|
||||
style: _objectSpread(_objectSpread({}, tabNodes.length === 0 ? undefined : tabNodeStyle), {}, {
|
||||
visibility: hasDropdown ? 'hidden' : null
|
||||
})
|
||||
}), /*#__PURE__*/React.createElement("div", {
|
||||
className: classNames("".concat(prefixCls, "-ink-bar"), _defineProperty({}, "".concat(prefixCls, "-ink-bar-animated"), animated.inkBar)),
|
||||
style: indicatorStyle
|
||||
}))))), /*#__PURE__*/React.createElement(OperationNode, _extends({}, props, {
|
||||
removeAriaLabel: locale === null || locale === void 0 ? void 0 : locale.removeAriaLabel,
|
||||
ref: operationsRef,
|
||||
prefixCls: prefixCls,
|
||||
tabs: hiddenTabs,
|
||||
className: !hasDropdown && operationsHiddenClassName,
|
||||
tabMoving: !!lockAnimation
|
||||
})), /*#__PURE__*/React.createElement(ExtraContent, {
|
||||
ref: extraRightRef,
|
||||
position: "right",
|
||||
extra: extra,
|
||||
prefixCls: prefixCls
|
||||
})));
|
||||
/* eslint-enable */
|
||||
});
|
||||
export default TabNavList;
|
||||
Reference in New Issue
Block a user