136 lines
3.7 KiB
TypeScript
136 lines
3.7 KiB
TypeScript
import React, { forwardRef, ReactNode, Ref } from "react";
|
|
import { CommonComponentProps, Classes } from "./common";
|
|
import styled from "styled-components";
|
|
import Icon, { IconName, IconSize } from "./Icon";
|
|
import Text, { TextType, FontWeight } from "./Text";
|
|
import TooltipComponent from "components/ads/Tooltip";
|
|
import { Position } from "@blueprintjs/core/lib/esm/common/position";
|
|
|
|
export type MenuItemProps = CommonComponentProps & {
|
|
icon?: IconName;
|
|
text: string;
|
|
label?: ReactNode;
|
|
href?: string;
|
|
type?: "warning";
|
|
ellipsize?: number;
|
|
selected?: boolean;
|
|
onSelect?: () => void;
|
|
};
|
|
|
|
const ItemRow = styled.a<{ disabled?: boolean; selected?: boolean }>`
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
text-decoration: none;
|
|
padding: 0px ${props => props.theme.spaces[6]}px;
|
|
background-color: ${props =>
|
|
props.selected ? props.theme.colors.menuItem.hoverBg : "transparent"};
|
|
.${Classes.TEXT} {
|
|
color: ${props =>
|
|
props.selected
|
|
? props.theme.colors.menuItem.hoverText
|
|
: props.theme.colors.menuItem.normalText};
|
|
}
|
|
.${Classes.ICON} {
|
|
svg {
|
|
path {
|
|
fill: ${props =>
|
|
props.selected
|
|
? props.theme.colors.menuItem.hoverIcon
|
|
: props.theme.colors.menuItem.normalIcon};
|
|
}
|
|
}
|
|
}
|
|
height: 38px;
|
|
|
|
${props =>
|
|
!props.disabled
|
|
? `
|
|
&:hover {
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
background-color: ${
|
|
props.type === "warning"
|
|
? props.theme.colors.menuItem.warning.bg
|
|
: props.theme.colors.menuItem.hoverBg
|
|
};
|
|
.${Classes.TEXT} {
|
|
color: ${
|
|
props.type === "warning"
|
|
? props.theme.colors.menuItem.warning.color
|
|
: props.theme.colors.menuItem.hoverText
|
|
};
|
|
}
|
|
.${Classes.ICON} {
|
|
path {
|
|
fill: ${
|
|
props.type === "warning"
|
|
? props.theme.colors.menuItem.warning.color
|
|
: props.theme.colors.menuItem.hoverIcon
|
|
};
|
|
}
|
|
}
|
|
}`
|
|
: `
|
|
&:hover {
|
|
text-decoration: none;
|
|
cursor: default;
|
|
}
|
|
`}
|
|
`;
|
|
|
|
const IconContainer = styled.span`
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.${Classes.ICON} {
|
|
margin-right: ${props => props.theme.spaces[5]}px;
|
|
}
|
|
`;
|
|
const MenuItem = forwardRef(
|
|
(props: MenuItemProps, ref: Ref<HTMLAnchorElement>) => {
|
|
return props.ellipsize && props.text.length > props.ellipsize ? (
|
|
<TooltipComponent position={Position.BOTTOM} content={props.text}>
|
|
<MenuItemContent ref={ref} {...props} />
|
|
</TooltipComponent>
|
|
) : (
|
|
<MenuItemContent ref={ref} {...props} />
|
|
);
|
|
},
|
|
);
|
|
const MenuItemContent = forwardRef(
|
|
(props: MenuItemProps, ref: Ref<HTMLAnchorElement>) => {
|
|
return (
|
|
<ItemRow
|
|
href={props.href}
|
|
onClick={props.onSelect}
|
|
disabled={props.disabled}
|
|
data-cy={props.cypressSelector}
|
|
type={props.type}
|
|
ref={ref}
|
|
selected={props.selected}
|
|
>
|
|
<IconContainer className={props.className}>
|
|
{props.icon ? <Icon name={props.icon} size={IconSize.LARGE} /> : null}
|
|
{props.text ? (
|
|
<Text type={TextType.H5} weight={FontWeight.NORMAL}>
|
|
{props.ellipsize
|
|
? ellipsize(props.ellipsize, props.text)
|
|
: props.text}
|
|
</Text>
|
|
) : null}
|
|
</IconContainer>
|
|
{props.label ? props.label : null}
|
|
</ItemRow>
|
|
);
|
|
},
|
|
);
|
|
MenuItemContent.displayName = "MenuItemContent";
|
|
MenuItem.displayName = "MenuItem";
|
|
|
|
function ellipsize(length: number, text: string) {
|
|
return text.length > length ? text.slice(0, length).concat(" ...") : text;
|
|
}
|
|
|
|
export default MenuItem;
|