51 lines
1.1 KiB
TypeScript
51 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import { formatMessage } from 'umi-plugin-locale';
|
|
|
|
import styles from './style.less';
|
|
|
|
export interface TabItemModel {
|
|
key: string;
|
|
name: string;
|
|
icon?: string;
|
|
iconSelected?: string;
|
|
}
|
|
|
|
export type TabItemModels = TabItemModel[];
|
|
|
|
export interface TabProps {
|
|
items: TabItemModels;
|
|
selectedKey?: string;
|
|
onChange?: (key: string) => void;
|
|
}
|
|
|
|
const Tab: React.FC<TabProps> = ({
|
|
items,
|
|
selectedKey,
|
|
onChange,
|
|
}) => {
|
|
const onItemClick = (key: string) => {
|
|
if (onChange) {
|
|
onChange(key);
|
|
}
|
|
};
|
|
|
|
const itemWidth = { width: `${100 / (items.length || 1)}%` };
|
|
return (
|
|
<div className={styles.tab}>
|
|
{items.map(item => (
|
|
<div
|
|
onClick={() => onItemClick(item.key)}
|
|
style={itemWidth}
|
|
className={`${styles.item} ${item.key === selectedKey ? styles.active : ''}`}
|
|
key={item.key}
|
|
>
|
|
{item.icon && item.iconSelected && <img src={item.key === selectedKey ? item.iconSelected : item.icon} />}
|
|
<span>{formatMessage({ id: item.name })}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
};
|
|
|
|
export default Tab;
|