fix: Tabs position calculation (#595)

* chore: init

* fix: active switch

* chore: refactor

* fix: Calculation logic

* chore: unique logic

* refactor: Move into arr

* chore: sync container size

* refactor: outer get value

* refactor: Replace with value

* refactor: RM size code

* chore: move scroll

* chore: clean up

* chore: code back

* test: fix test case

* test: back of all test case

* chore: clean up

Author: zombieJ

docs/examples/overflow.tsx

@@ -5,7 +5,7 @@ import '../../assets/index.less';
 
 const items: TabsProps['items'] = [];
 
-for (let i = 0; i < 200; i += 1) {
+for (let i = 0; i < 12; i += 1) {
   items.push({ key: String(i), label: `Tab ${i}`, children: `Content of ${i}` });
 }
 

src/TabNavList/ExtraContent.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import type { TabBarExtraPosition, TabBarExtraContent, TabBarExtraMap } from '../interface';
+
+interface ExtraContentProps {
+  position: TabBarExtraPosition;
+  prefixCls: string;
+  extra?: TabBarExtraContent;
+}
+
+const ExtraContent = React.forwardRef<HTMLDivElement, ExtraContentProps>(
+  ({ position, prefixCls, extra }, ref) => {
+    if (!extra) return null;
+
+    let content: React.ReactNode;
+
+    // Parse extra
+    let assertExtra: TabBarExtraMap = {};
+    if (typeof extra === 'object' && !React.isValidElement(extra)) {
+      assertExtra = extra as TabBarExtraMap;
+    } else {
+      assertExtra.right = extra;
+    }
+
+    if (position === 'right') {
+      content = assertExtra.right;
+    }
+
+    if (position === 'left') {
+      content = assertExtra.left;
+    }
+
+    return content ? (
+      <div className={`${prefixCls}-extra-content`} ref={ref}>
+        {content}
+      </div>
+    ) : null;
+  },
+);
+
+if (process.env.NODE_ENV !== 'production') {
+  ExtraContent.displayName = 'ExtraContent';
+}
+
+export default ExtraContent;