88 lines
2.1 KiB
TypeScript
88 lines
2.1 KiB
TypeScript
import { Avatar, ButtonBase, Theme, Tooltip } from "@mui/material";
|
|
import { Tune as PresetsIcon, ViewList as ComponentsIcon } from "@mui/icons-material";
|
|
import { makeStyles } from "@mui/styles";
|
|
import { useThemeType } from "../hooks/useThemeType";
|
|
import classnames from "classnames";
|
|
import { capitalize } from "lodash";
|
|
import React from "react";
|
|
import { ProductTab } from "./DeviceProduct";
|
|
|
|
const useStyles = makeStyles((theme: Theme) => {
|
|
const themeType = useThemeType();
|
|
const activeBG = theme.palette.secondary.main;
|
|
return ({
|
|
avatar: {
|
|
color: themeType === "light" ? theme.palette.common.black : theme.palette.common.white,
|
|
backgroundColor: "transparent",
|
|
width: theme.spacing(5),
|
|
height: theme.spacing(5),
|
|
border: "1px solid",
|
|
borderColor: theme.palette.divider
|
|
},
|
|
active: {
|
|
color: theme.palette.getContrastText(activeBG),
|
|
backgroundColor: activeBG,
|
|
border: 0
|
|
},
|
|
customIcon: {
|
|
padding: theme.spacing(0.5)
|
|
}
|
|
});
|
|
});
|
|
|
|
interface Props {
|
|
tab: ProductTab;
|
|
onClick: (selected: ProductTab) => void;
|
|
active?: boolean;
|
|
}
|
|
|
|
export default function ProductTabChip(props: Props) {
|
|
const classes = useStyles();
|
|
const { tab, active, onClick } = props;
|
|
|
|
const name = () => {
|
|
return capitalize(tab);
|
|
};
|
|
|
|
const hasCustomIcon = () => {
|
|
switch (tab) {
|
|
default:
|
|
return false;
|
|
}
|
|
};
|
|
|
|
const customIconSrc = () => {
|
|
switch (tab) {
|
|
default:
|
|
return undefined;
|
|
}
|
|
};
|
|
|
|
const icon = () => {
|
|
switch (tab) {
|
|
case "presets":
|
|
return <PresetsIcon fontSize="small" />;
|
|
case "components":
|
|
return <ComponentsIcon fontSize="small" />;
|
|
default:
|
|
return <React.Fragment />;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Tooltip title={name()}>
|
|
<Avatar
|
|
alt={name()}
|
|
src={hasCustomIcon() ? customIconSrc() : undefined}
|
|
className={classnames(
|
|
classes.avatar,
|
|
active && classes.active,
|
|
hasCustomIcon() && classes.customIcon
|
|
)}
|
|
component={ButtonBase}
|
|
onClick={() => onClick(tab)}>
|
|
{!hasCustomIcon() && icon()}
|
|
</Avatar>
|
|
</Tooltip>
|
|
);
|
|
}
|