2023-04-13 18:13:13 +08:00
|
|
|
import type { MouseEvent } from 'react';
|
|
|
|
import React, { forwardRef, startTransition } from 'react';
|
|
|
|
import { useNavigate } from 'dumi';
|
|
|
|
|
|
|
|
export type LinkProps = {
|
|
|
|
to?: string;
|
|
|
|
children?: React.ReactNode;
|
2023-04-18 15:29:34 +08:00
|
|
|
className?: string;
|
2023-04-13 18:13:13 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
|
2023-04-18 15:29:34 +08:00
|
|
|
const { to, children, ...rest } = props;
|
2023-04-13 18:13:13 +08:00
|
|
|
const navigate = useNavigate();
|
|
|
|
|
|
|
|
const handleClick = (e: MouseEvent<HTMLAnchorElement>) => {
|
|
|
|
if (!to.startsWith('http')) {
|
2023-07-06 13:45:40 +08:00
|
|
|
// Should support open in new tab
|
|
|
|
if (!e.metaKey && !e.ctrlKey && !e.shiftKey) {
|
|
|
|
e.preventDefault();
|
|
|
|
startTransition(() => {
|
|
|
|
navigate(to);
|
|
|
|
});
|
|
|
|
}
|
2023-04-13 18:13:13 +08:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
2023-04-18 15:29:34 +08:00
|
|
|
<a ref={ref} href={to} onClick={handleClick} {...rest}>
|
2023-04-13 18:13:13 +08:00
|
|
|
{children}
|
|
|
|
</a>
|
|
|
|
);
|
|
|
|
});
|
|
|
|
|
|
|
|
export default Link;
|