index.js 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. var _typeof = require("@babel/runtime/helpers/typeof");
  4. Object.defineProperty(exports, "__esModule", {
  5. value: true
  6. });
  7. exports.default = void 0;
  8. var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
  9. var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
  10. var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
  11. var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
  12. var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
  13. var _classnames = _interopRequireDefault(require("classnames"));
  14. var _rcResizeObserver = _interopRequireDefault(require("rc-resize-observer"));
  15. var _useEvent = _interopRequireDefault(require("rc-util/lib/hooks/useEvent"));
  16. var _ref3 = require("rc-util/lib/ref");
  17. var _react = _interopRequireWildcard(require("react"));
  18. var React = _react;
  19. var _TabContext = _interopRequireDefault(require("../TabContext"));
  20. var _useIndicator2 = _interopRequireDefault(require("../hooks/useIndicator"));
  21. var _useOffsets = _interopRequireDefault(require("../hooks/useOffsets"));
  22. var _useSyncState5 = _interopRequireDefault(require("../hooks/useSyncState"));
  23. var _useTouchMove = _interopRequireDefault(require("../hooks/useTouchMove"));
  24. var _useUpdate = _interopRequireWildcard(require("../hooks/useUpdate"));
  25. var _useVisibleRange3 = _interopRequireDefault(require("../hooks/useVisibleRange"));
  26. var _util = require("../util");
  27. var _AddButton = _interopRequireDefault(require("./AddButton"));
  28. var _ExtraContent = _interopRequireDefault(require("./ExtraContent"));
  29. var _OperationNode = _interopRequireDefault(require("./OperationNode"));
  30. var _TabNode = _interopRequireDefault(require("./TabNode"));
  31. function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
  32. function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
  33. /* eslint-disable react-hooks/exhaustive-deps */
  34. var getTabSize = function getTabSize(tab, containerRect) {
  35. // tabListRef
  36. var offsetWidth = tab.offsetWidth,
  37. offsetHeight = tab.offsetHeight,
  38. offsetTop = tab.offsetTop,
  39. offsetLeft = tab.offsetLeft;
  40. var _tab$getBoundingClien = tab.getBoundingClientRect(),
  41. width = _tab$getBoundingClien.width,
  42. height = _tab$getBoundingClien.height,
  43. left = _tab$getBoundingClien.left,
  44. top = _tab$getBoundingClien.top;
  45. // Use getBoundingClientRect to avoid decimal inaccuracy
  46. if (Math.abs(width - offsetWidth) < 1) {
  47. return [width, height, left - containerRect.left, top - containerRect.top];
  48. }
  49. return [offsetWidth, offsetHeight, offsetLeft, offsetTop];
  50. };
  51. var getSize = function getSize(refObj) {
  52. var _ref = refObj.current || {},
  53. _ref$offsetWidth = _ref.offsetWidth,
  54. offsetWidth = _ref$offsetWidth === void 0 ? 0 : _ref$offsetWidth,
  55. _ref$offsetHeight = _ref.offsetHeight,
  56. offsetHeight = _ref$offsetHeight === void 0 ? 0 : _ref$offsetHeight;
  57. // Use getBoundingClientRect to avoid decimal inaccuracy
  58. if (refObj.current) {
  59. var _refObj$current$getBo = refObj.current.getBoundingClientRect(),
  60. width = _refObj$current$getBo.width,
  61. height = _refObj$current$getBo.height;
  62. if (Math.abs(width - offsetWidth) < 1) {
  63. return [width, height];
  64. }
  65. }
  66. return [offsetWidth, offsetHeight];
  67. };
  68. /**
  69. * Convert `SizeInfo` to unit value. Such as [123, 456] with `top` position get `123`
  70. */
  71. var getUnitValue = function getUnitValue(size, tabPositionTopOrBottom) {
  72. return size[tabPositionTopOrBottom ? 0 : 1];
  73. };
  74. var TabNavList = /*#__PURE__*/React.forwardRef(function (props, ref) {
  75. var className = props.className,
  76. style = props.style,
  77. id = props.id,
  78. animated = props.animated,
  79. activeKey = props.activeKey,
  80. rtl = props.rtl,
  81. extra = props.extra,
  82. editable = props.editable,
  83. locale = props.locale,
  84. tabPosition = props.tabPosition,
  85. tabBarGutter = props.tabBarGutter,
  86. children = props.children,
  87. onTabClick = props.onTabClick,
  88. onTabScroll = props.onTabScroll,
  89. indicator = props.indicator;
  90. var _React$useContext = React.useContext(_TabContext.default),
  91. prefixCls = _React$useContext.prefixCls,
  92. tabs = _React$useContext.tabs;
  93. var containerRef = (0, _react.useRef)(null);
  94. var extraLeftRef = (0, _react.useRef)(null);
  95. var extraRightRef = (0, _react.useRef)(null);
  96. var tabsWrapperRef = (0, _react.useRef)(null);
  97. var tabListRef = (0, _react.useRef)(null);
  98. var operationsRef = (0, _react.useRef)(null);
  99. var innerAddButtonRef = (0, _react.useRef)(null);
  100. var tabPositionTopOrBottom = tabPosition === 'top' || tabPosition === 'bottom';
  101. var _useSyncState = (0, _useSyncState5.default)(0, function (next, prev) {
  102. if (tabPositionTopOrBottom && onTabScroll) {
  103. onTabScroll({
  104. direction: next > prev ? 'left' : 'right'
  105. });
  106. }
  107. }),
  108. _useSyncState2 = (0, _slicedToArray2.default)(_useSyncState, 2),
  109. transformLeft = _useSyncState2[0],
  110. setTransformLeft = _useSyncState2[1];
  111. var _useSyncState3 = (0, _useSyncState5.default)(0, function (next, prev) {
  112. if (!tabPositionTopOrBottom && onTabScroll) {
  113. onTabScroll({
  114. direction: next > prev ? 'top' : 'bottom'
  115. });
  116. }
  117. }),
  118. _useSyncState4 = (0, _slicedToArray2.default)(_useSyncState3, 2),
  119. transformTop = _useSyncState4[0],
  120. setTransformTop = _useSyncState4[1];
  121. var _useState = (0, _react.useState)([0, 0]),
  122. _useState2 = (0, _slicedToArray2.default)(_useState, 2),
  123. containerExcludeExtraSize = _useState2[0],
  124. setContainerExcludeExtraSize = _useState2[1];
  125. var _useState3 = (0, _react.useState)([0, 0]),
  126. _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
  127. tabContentSize = _useState4[0],
  128. setTabContentSize = _useState4[1];
  129. var _useState5 = (0, _react.useState)([0, 0]),
  130. _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
  131. addSize = _useState6[0],
  132. setAddSize = _useState6[1];
  133. var _useState7 = (0, _react.useState)([0, 0]),
  134. _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
  135. operationSize = _useState8[0],
  136. setOperationSize = _useState8[1];
  137. var _useUpdateState = (0, _useUpdate.useUpdateState)(new Map()),
  138. _useUpdateState2 = (0, _slicedToArray2.default)(_useUpdateState, 2),
  139. tabSizes = _useUpdateState2[0],
  140. setTabSizes = _useUpdateState2[1];
  141. var tabOffsets = (0, _useOffsets.default)(tabs, tabSizes, tabContentSize[0]);
  142. // ========================== Unit =========================
  143. var containerExcludeExtraSizeValue = getUnitValue(containerExcludeExtraSize, tabPositionTopOrBottom);
  144. var tabContentSizeValue = getUnitValue(tabContentSize, tabPositionTopOrBottom);
  145. var addSizeValue = getUnitValue(addSize, tabPositionTopOrBottom);
  146. var operationSizeValue = getUnitValue(operationSize, tabPositionTopOrBottom);
  147. var needScroll = Math.floor(containerExcludeExtraSizeValue) < Math.floor(tabContentSizeValue + addSizeValue);
  148. var visibleTabContentValue = needScroll ? containerExcludeExtraSizeValue - operationSizeValue : containerExcludeExtraSizeValue - addSizeValue;
  149. // ========================== Util =========================
  150. var operationsHiddenClassName = "".concat(prefixCls, "-nav-operations-hidden");
  151. var transformMin = 0;
  152. var transformMax = 0;
  153. if (!tabPositionTopOrBottom) {
  154. transformMin = Math.min(0, visibleTabContentValue - tabContentSizeValue);
  155. transformMax = 0;
  156. } else if (rtl) {
  157. transformMin = 0;
  158. transformMax = Math.max(0, tabContentSizeValue - visibleTabContentValue);
  159. } else {
  160. transformMin = Math.min(0, visibleTabContentValue - tabContentSizeValue);
  161. transformMax = 0;
  162. }
  163. function alignInRange(value) {
  164. if (value < transformMin) {
  165. return transformMin;
  166. }
  167. if (value > transformMax) {
  168. return transformMax;
  169. }
  170. return value;
  171. }
  172. // ========================= Mobile ========================
  173. var touchMovingRef = (0, _react.useRef)(null);
  174. var _useState9 = (0, _react.useState)(),
  175. _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
  176. lockAnimation = _useState10[0],
  177. setLockAnimation = _useState10[1];
  178. function doLockAnimation() {
  179. setLockAnimation(Date.now());
  180. }
  181. function clearTouchMoving() {
  182. if (touchMovingRef.current) {
  183. clearTimeout(touchMovingRef.current);
  184. }
  185. }
  186. (0, _useTouchMove.default)(tabsWrapperRef, function (offsetX, offsetY) {
  187. function doMove(setState, offset) {
  188. setState(function (value) {
  189. var newValue = alignInRange(value + offset);
  190. return newValue;
  191. });
  192. }
  193. // Skip scroll if place is enough
  194. if (!needScroll) {
  195. return false;
  196. }
  197. if (tabPositionTopOrBottom) {
  198. doMove(setTransformLeft, offsetX);
  199. } else {
  200. doMove(setTransformTop, offsetY);
  201. }
  202. clearTouchMoving();
  203. doLockAnimation();
  204. return true;
  205. });
  206. (0, _react.useEffect)(function () {
  207. clearTouchMoving();
  208. if (lockAnimation) {
  209. touchMovingRef.current = setTimeout(function () {
  210. setLockAnimation(0);
  211. }, 100);
  212. }
  213. return clearTouchMoving;
  214. }, [lockAnimation]);
  215. // ===================== Visible Range =====================
  216. // Render tab node & collect tab offset
  217. var _useVisibleRange = (0, _useVisibleRange3.default)(tabOffsets,
  218. // Container
  219. visibleTabContentValue,
  220. // Transform
  221. tabPositionTopOrBottom ? transformLeft : transformTop,
  222. // Tabs
  223. tabContentSizeValue,
  224. // Add
  225. addSizeValue,
  226. // Operation
  227. operationSizeValue, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
  228. tabs: tabs
  229. })),
  230. _useVisibleRange2 = (0, _slicedToArray2.default)(_useVisibleRange, 2),
  231. visibleStart = _useVisibleRange2[0],
  232. visibleEnd = _useVisibleRange2[1];
  233. // ========================= Scroll ========================
  234. var scrollToTab = (0, _useEvent.default)(function () {
  235. var key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : activeKey;
  236. var tabOffset = tabOffsets.get(key) || {
  237. width: 0,
  238. height: 0,
  239. left: 0,
  240. right: 0,
  241. top: 0
  242. };
  243. if (tabPositionTopOrBottom) {
  244. // ============ Align with top & bottom ============
  245. var newTransform = transformLeft;
  246. // RTL
  247. if (rtl) {
  248. if (tabOffset.right < transformLeft) {
  249. newTransform = tabOffset.right;
  250. } else if (tabOffset.right + tabOffset.width > transformLeft + visibleTabContentValue) {
  251. newTransform = tabOffset.right + tabOffset.width - visibleTabContentValue;
  252. }
  253. }
  254. // LTR
  255. else if (tabOffset.left < -transformLeft) {
  256. newTransform = -tabOffset.left;
  257. } else if (tabOffset.left + tabOffset.width > -transformLeft + visibleTabContentValue) {
  258. newTransform = -(tabOffset.left + tabOffset.width - visibleTabContentValue);
  259. }
  260. setTransformTop(0);
  261. setTransformLeft(alignInRange(newTransform));
  262. } else {
  263. // ============ Align with left & right ============
  264. var _newTransform = transformTop;
  265. if (tabOffset.top < -transformTop) {
  266. _newTransform = -tabOffset.top;
  267. } else if (tabOffset.top + tabOffset.height > -transformTop + visibleTabContentValue) {
  268. _newTransform = -(tabOffset.top + tabOffset.height - visibleTabContentValue);
  269. }
  270. setTransformLeft(0);
  271. setTransformTop(alignInRange(_newTransform));
  272. }
  273. });
  274. // ========================= Focus =========================
  275. var _useState11 = (0, _react.useState)(),
  276. _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
  277. focusKey = _useState12[0],
  278. setFocusKey = _useState12[1];
  279. var _useState13 = (0, _react.useState)(false),
  280. _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
  281. isMouse = _useState14[0],
  282. setIsMouse = _useState14[1];
  283. var enabledTabs = tabs.filter(function (tab) {
  284. return !tab.disabled;
  285. }).map(function (tab) {
  286. return tab.key;
  287. });
  288. var onOffset = function onOffset(offset) {
  289. var currentIndex = enabledTabs.indexOf(focusKey || activeKey);
  290. var len = enabledTabs.length;
  291. var nextIndex = (currentIndex + offset + len) % len;
  292. var newKey = enabledTabs[nextIndex];
  293. setFocusKey(newKey);
  294. };
  295. var handleRemoveTab = function handleRemoveTab(removalTabKey, e) {
  296. var removeIndex = enabledTabs.indexOf(removalTabKey);
  297. var removeTab = tabs.find(function (tab) {
  298. return tab.key === removalTabKey;
  299. });
  300. var removable = (0, _util.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);
  301. if (removable) {
  302. e.preventDefault();
  303. e.stopPropagation();
  304. editable.onEdit('remove', {
  305. key: removalTabKey,
  306. event: e
  307. });
  308. // when remove last tab, focus previous tab
  309. if (removeIndex === enabledTabs.length - 1) {
  310. onOffset(-1);
  311. } else {
  312. onOffset(1);
  313. }
  314. }
  315. };
  316. var handleMouseDown = function handleMouseDown(key, e) {
  317. setIsMouse(true);
  318. // Middle mouse button
  319. if (e.button === 1) {
  320. handleRemoveTab(key, e);
  321. }
  322. };
  323. var handleKeyDown = function handleKeyDown(e) {
  324. var code = e.code;
  325. var isRTL = rtl && tabPositionTopOrBottom;
  326. var firstEnabledTab = enabledTabs[0];
  327. var lastEnabledTab = enabledTabs[enabledTabs.length - 1];
  328. switch (code) {
  329. // LEFT
  330. case 'ArrowLeft':
  331. {
  332. if (tabPositionTopOrBottom) {
  333. onOffset(isRTL ? 1 : -1);
  334. }
  335. break;
  336. }
  337. // RIGHT
  338. case 'ArrowRight':
  339. {
  340. if (tabPositionTopOrBottom) {
  341. onOffset(isRTL ? -1 : 1);
  342. }
  343. break;
  344. }
  345. // UP
  346. case 'ArrowUp':
  347. {
  348. e.preventDefault();
  349. if (!tabPositionTopOrBottom) {
  350. onOffset(-1);
  351. }
  352. break;
  353. }
  354. // DOWN
  355. case 'ArrowDown':
  356. {
  357. e.preventDefault();
  358. if (!tabPositionTopOrBottom) {
  359. onOffset(1);
  360. }
  361. break;
  362. }
  363. // HOME
  364. case 'Home':
  365. {
  366. e.preventDefault();
  367. setFocusKey(firstEnabledTab);
  368. break;
  369. }
  370. // END
  371. case 'End':
  372. {
  373. e.preventDefault();
  374. setFocusKey(lastEnabledTab);
  375. break;
  376. }
  377. // Enter & Space
  378. case 'Enter':
  379. case 'Space':
  380. {
  381. e.preventDefault();
  382. onTabClick(focusKey !== null && focusKey !== void 0 ? focusKey : activeKey, e);
  383. break;
  384. }
  385. // Backspace
  386. case 'Backspace':
  387. case 'Delete':
  388. {
  389. handleRemoveTab(focusKey, e);
  390. break;
  391. }
  392. }
  393. };
  394. // ========================== Tab ==========================
  395. var tabNodeStyle = {};
  396. if (tabPositionTopOrBottom) {
  397. tabNodeStyle[rtl ? 'marginRight' : 'marginLeft'] = tabBarGutter;
  398. } else {
  399. tabNodeStyle.marginTop = tabBarGutter;
  400. }
  401. var tabNodes = tabs.map(function (tab, i) {
  402. var key = tab.key;
  403. return /*#__PURE__*/React.createElement(_TabNode.default, {
  404. id: id,
  405. prefixCls: prefixCls,
  406. key: key,
  407. tab: tab
  408. /* first node should not have margin left */,
  409. style: i === 0 ? undefined : tabNodeStyle,
  410. closable: tab.closable,
  411. editable: editable,
  412. active: key === activeKey,
  413. focus: key === focusKey,
  414. renderWrapper: children,
  415. removeAriaLabel: locale === null || locale === void 0 ? void 0 : locale.removeAriaLabel,
  416. tabCount: enabledTabs.length,
  417. currentPosition: i + 1,
  418. onClick: function onClick(e) {
  419. onTabClick(key, e);
  420. },
  421. onKeyDown: handleKeyDown,
  422. onFocus: function onFocus() {
  423. if (!isMouse) {
  424. setFocusKey(key);
  425. }
  426. scrollToTab(key);
  427. doLockAnimation();
  428. if (!tabsWrapperRef.current) {
  429. return;
  430. }
  431. // Focus element will make scrollLeft change which we should reset back
  432. if (!rtl) {
  433. tabsWrapperRef.current.scrollLeft = 0;
  434. }
  435. tabsWrapperRef.current.scrollTop = 0;
  436. },
  437. onBlur: function onBlur() {
  438. setFocusKey(undefined);
  439. },
  440. onMouseDown: function onMouseDown(e) {
  441. return handleMouseDown(key, e);
  442. },
  443. onMouseUp: function onMouseUp() {
  444. setIsMouse(false);
  445. }
  446. });
  447. });
  448. // Update buttons records
  449. var updateTabSizes = function updateTabSizes() {
  450. return setTabSizes(function () {
  451. var _tabListRef$current;
  452. var newSizes = new Map();
  453. var listRect = (_tabListRef$current = tabListRef.current) === null || _tabListRef$current === void 0 ? void 0 : _tabListRef$current.getBoundingClientRect();
  454. tabs.forEach(function (_ref2) {
  455. var _tabListRef$current2;
  456. var key = _ref2.key;
  457. var btnNode = (_tabListRef$current2 = tabListRef.current) === null || _tabListRef$current2 === void 0 ? void 0 : _tabListRef$current2.querySelector("[data-node-key=\"".concat((0, _util.genDataNodeKey)(key), "\"]"));
  458. if (btnNode) {
  459. var _getTabSize = getTabSize(btnNode, listRect),
  460. _getTabSize2 = (0, _slicedToArray2.default)(_getTabSize, 4),
  461. width = _getTabSize2[0],
  462. height = _getTabSize2[1],
  463. left = _getTabSize2[2],
  464. top = _getTabSize2[3];
  465. newSizes.set(key, {
  466. width: width,
  467. height: height,
  468. left: left,
  469. top: top
  470. });
  471. }
  472. });
  473. return newSizes;
  474. });
  475. };
  476. (0, _react.useEffect)(function () {
  477. updateTabSizes();
  478. }, [tabs.map(function (tab) {
  479. return tab.key;
  480. }).join('_')]);
  481. var onListHolderResize = (0, _useUpdate.default)(function () {
  482. // Update wrapper records
  483. var containerSize = getSize(containerRef);
  484. var extraLeftSize = getSize(extraLeftRef);
  485. var extraRightSize = getSize(extraRightRef);
  486. setContainerExcludeExtraSize([containerSize[0] - extraLeftSize[0] - extraRightSize[0], containerSize[1] - extraLeftSize[1] - extraRightSize[1]]);
  487. var newAddSize = getSize(innerAddButtonRef);
  488. setAddSize(newAddSize);
  489. var newOperationSize = getSize(operationsRef);
  490. setOperationSize(newOperationSize);
  491. // Which includes add button size
  492. var tabContentFullSize = getSize(tabListRef);
  493. setTabContentSize([tabContentFullSize[0] - newAddSize[0], tabContentFullSize[1] - newAddSize[1]]);
  494. // Update buttons records
  495. updateTabSizes();
  496. });
  497. // ======================== Dropdown =======================
  498. var startHiddenTabs = tabs.slice(0, visibleStart);
  499. var endHiddenTabs = tabs.slice(visibleEnd + 1);
  500. var hiddenTabs = [].concat((0, _toConsumableArray2.default)(startHiddenTabs), (0, _toConsumableArray2.default)(endHiddenTabs));
  501. // =================== Link & Operations ===================
  502. var activeTabOffset = tabOffsets.get(activeKey);
  503. var _useIndicator = (0, _useIndicator2.default)({
  504. activeTabOffset: activeTabOffset,
  505. horizontal: tabPositionTopOrBottom,
  506. indicator: indicator,
  507. rtl: rtl
  508. }),
  509. indicatorStyle = _useIndicator.style;
  510. // ========================= Effect ========================
  511. (0, _react.useEffect)(function () {
  512. scrollToTab();
  513. }, [activeKey, transformMin, transformMax, (0, _util.stringify)(activeTabOffset), (0, _util.stringify)(tabOffsets), tabPositionTopOrBottom]);
  514. // Should recalculate when rtl changed
  515. (0, _react.useEffect)(function () {
  516. onListHolderResize();
  517. // eslint-disable-next-line
  518. }, [rtl]);
  519. // ========================= Render ========================
  520. var hasDropdown = !!hiddenTabs.length;
  521. var wrapPrefix = "".concat(prefixCls, "-nav-wrap");
  522. var pingLeft;
  523. var pingRight;
  524. var pingTop;
  525. var pingBottom;
  526. if (tabPositionTopOrBottom) {
  527. if (rtl) {
  528. pingRight = transformLeft > 0;
  529. pingLeft = transformLeft !== transformMax;
  530. } else {
  531. pingLeft = transformLeft < 0;
  532. pingRight = transformLeft !== transformMin;
  533. }
  534. } else {
  535. pingTop = transformTop < 0;
  536. pingBottom = transformTop !== transformMin;
  537. }
  538. return /*#__PURE__*/React.createElement(_rcResizeObserver.default, {
  539. onResize: onListHolderResize
  540. }, /*#__PURE__*/React.createElement("div", {
  541. ref: (0, _ref3.useComposeRef)(ref, containerRef),
  542. role: "tablist",
  543. "aria-orientation": tabPositionTopOrBottom ? 'horizontal' : 'vertical',
  544. className: (0, _classnames.default)("".concat(prefixCls, "-nav"), className),
  545. style: style,
  546. onKeyDown: function onKeyDown() {
  547. // No need animation when use keyboard
  548. doLockAnimation();
  549. }
  550. }, /*#__PURE__*/React.createElement(_ExtraContent.default, {
  551. ref: extraLeftRef,
  552. position: "left",
  553. extra: extra,
  554. prefixCls: prefixCls
  555. }), /*#__PURE__*/React.createElement(_rcResizeObserver.default, {
  556. onResize: onListHolderResize
  557. }, /*#__PURE__*/React.createElement("div", {
  558. className: (0, _classnames.default)(wrapPrefix, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(wrapPrefix, "-ping-left"), pingLeft), "".concat(wrapPrefix, "-ping-right"), pingRight), "".concat(wrapPrefix, "-ping-top"), pingTop), "".concat(wrapPrefix, "-ping-bottom"), pingBottom)),
  559. ref: tabsWrapperRef
  560. }, /*#__PURE__*/React.createElement(_rcResizeObserver.default, {
  561. onResize: onListHolderResize
  562. }, /*#__PURE__*/React.createElement("div", {
  563. ref: tabListRef,
  564. className: "".concat(prefixCls, "-nav-list"),
  565. style: {
  566. transform: "translate(".concat(transformLeft, "px, ").concat(transformTop, "px)"),
  567. transition: lockAnimation ? 'none' : undefined
  568. }
  569. }, tabNodes, /*#__PURE__*/React.createElement(_AddButton.default, {
  570. ref: innerAddButtonRef,
  571. prefixCls: prefixCls,
  572. locale: locale,
  573. editable: editable,
  574. style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, tabNodes.length === 0 ? undefined : tabNodeStyle), {}, {
  575. visibility: hasDropdown ? 'hidden' : null
  576. })
  577. }), /*#__PURE__*/React.createElement("div", {
  578. className: (0, _classnames.default)("".concat(prefixCls, "-ink-bar"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-ink-bar-animated"), animated.inkBar)),
  579. style: indicatorStyle
  580. }))))), /*#__PURE__*/React.createElement(_OperationNode.default, (0, _extends2.default)({}, props, {
  581. removeAriaLabel: locale === null || locale === void 0 ? void 0 : locale.removeAriaLabel,
  582. ref: operationsRef,
  583. prefixCls: prefixCls,
  584. tabs: hiddenTabs,
  585. className: !hasDropdown && operationsHiddenClassName,
  586. tabMoving: !!lockAnimation
  587. })), /*#__PURE__*/React.createElement(_ExtraContent.default, {
  588. ref: extraRightRef,
  589. position: "right",
  590. extra: extra,
  591. prefixCls: prefixCls
  592. })));
  593. /* eslint-enable */
  594. });
  595. var _default = exports.default = TabNavList;