36 lines
874 B
TypeScript
36 lines
874 B
TypeScript
import { Box, Tab, Tabs } from "@mui/material";
|
|
|
|
export interface TabWidgetOption<E> {
|
|
label: string;
|
|
value: E;
|
|
visible: boolean;
|
|
color?: string;
|
|
}
|
|
|
|
export function TabsWidget<E>(p: {
|
|
currTab: E;
|
|
options: TabWidgetOption<E>[];
|
|
onTabChange: (v: E) => void;
|
|
}): React.ReactElement {
|
|
const activeOptions = p.options.filter((v) => v.visible);
|
|
|
|
const currTabIndex = activeOptions.findIndex((v) => v.value === p.currTab);
|
|
|
|
const updateActiveTab = (index: number) => {
|
|
p.onTabChange(activeOptions[index].value);
|
|
};
|
|
|
|
return (
|
|
<Box sx={{ borderBottom: 1, borderColor: "divider" }}>
|
|
<Tabs
|
|
value={currTabIndex}
|
|
onChange={(_ev, newVal) => updateActiveTab(newVal)}
|
|
>
|
|
{activeOptions.map((o, index) => (
|
|
<Tab key={index} label={o.label} style={{ color: o.color }} />
|
|
))}
|
|
</Tabs>
|
|
</Box>
|
|
);
|
|
}
|