Skip to content
2 changes: 1 addition & 1 deletion docs/examples/overflow.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}` });
}

Expand Down
44 changes: 44 additions & 0 deletions src/TabNavList/ExtraContent.tsx
Original file line number Diff line number Diff line change
@@ -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;
Loading