67 lines
1.8 KiB
TypeScript
67 lines
1.8 KiB
TypeScript
import * as React from 'react';
|
|
import { useMatch } from 'react-router-dom';
|
|
import ListItem from '@mui/material/ListItemButton';
|
|
import ListItemIcon from '@mui/material/ListItemIcon';
|
|
import ListItemText from '@mui/material/ListItemText';
|
|
import { Link, LinkProps } from 'react-router-dom';
|
|
|
|
type ListItemLinkProps = {
|
|
icon: React.ReactNode;
|
|
primary: string;
|
|
to: string;
|
|
target?: '_blank';
|
|
onClick?: (event: React.SyntheticEvent) => void;
|
|
'data-test'?: string;
|
|
};
|
|
|
|
export default function ListItemLink(
|
|
props: ListItemLinkProps
|
|
): React.ReactElement {
|
|
const { icon, primary, to, onClick, 'data-test': dataTest, target } = props;
|
|
const selected = useMatch({ path: to, end: true });
|
|
|
|
const CustomLink = React.useMemo(
|
|
() =>
|
|
React.forwardRef<HTMLAnchorElement, Omit<LinkProps, 'to'>>(
|
|
function InLineLink(linkProps, ref) {
|
|
try {
|
|
// challenge the link to check if it's absolute URL
|
|
new URL(to); // should throw an error if it's not an absolute URL
|
|
|
|
return (
|
|
<a
|
|
{...linkProps}
|
|
ref={ref}
|
|
href={to}
|
|
target={target}
|
|
rel="noopener noreferrer"
|
|
/>
|
|
);
|
|
} catch {
|
|
return <Link ref={ref} {...linkProps} to={to} />;
|
|
}
|
|
}
|
|
),
|
|
[to]
|
|
);
|
|
|
|
return (
|
|
<li>
|
|
<ListItem
|
|
component={CustomLink}
|
|
sx={{ pl: { xs: 2, sm: 3 } }}
|
|
selected={!!selected}
|
|
onClick={onClick}
|
|
data-test={dataTest}
|
|
target={target}
|
|
>
|
|
<ListItemIcon sx={{ minWidth: 52 }}>{icon}</ListItemIcon>
|
|
<ListItemText
|
|
primary={primary}
|
|
primaryTypographyProps={{ variant: 'body1' }}
|
|
/>
|
|
</ListItem>
|
|
</li>
|
|
);
|
|
}
|