66 lines
1.3 KiB
TypeScript
66 lines
1.3 KiB
TypeScript
|
import {
|
||
|
|
createStyles,
|
||
|
|
Theme,
|
||
|
|
withStyles,
|
||
|
|
WithStyles
|
||
|
|
} from "@material-ui/core/styles";
|
||
|
|
import Typography, { TypographyProps } from "@material-ui/core/Typography";
|
||
|
|
import * as classNames from "classnames";
|
||
|
|
import * as React from "react";
|
||
|
|
|
||
|
|
const styles = (theme: Theme) =>
|
||
|
|
createStyles({
|
||
|
|
primary: {
|
||
|
|
color: theme.palette.primary.main
|
||
|
|
},
|
||
|
|
root: {
|
||
|
|
cursor: "pointer",
|
||
|
|
display: "inline"
|
||
|
|
},
|
||
|
|
secondary: {
|
||
|
|
color: theme.palette.primary.main
|
||
|
|
},
|
||
|
|
underline: {
|
||
|
|
textDecoration: "underline"
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
interface LinkProps
|
||
|
|
extends React.AnchorHTMLAttributes<HTMLAnchorElement>,
|
||
|
|
WithStyles<typeof styles> {
|
||
|
|
color?: "primary" | "secondary";
|
||
|
|
underline?: boolean;
|
||
|
|
typographyProps?: TypographyProps;
|
||
|
|
onClick: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
const Link = withStyles(styles, { name: "Link" })(
|
||
|
|
({
|
||
|
|
classes,
|
||
|
|
className,
|
||
|
|
children,
|
||
|
|
color = "primary",
|
||
|
|
underline = false,
|
||
|
|
onClick,
|
||
|
|
...linkProps
|
||
|
|
}: LinkProps) => (
|
||
|
|
<Typography
|
||
|
|
component="a"
|
||
|
|
className={classNames({
|
||
|
|
[classes.root]: true,
|
||
|
|
[classes[color]]: true,
|
||
|
|
[classes.underline]: underline
|
||
|
|
})}
|
||
|
|
onClick={event => {
|
||
|
|
event.preventDefault();
|
||
|
|
onClick();
|
||
|
|
}}
|
||
|
|
{...linkProps}
|
||
|
|
>
|
||
|
|
{children}
|
||
|
|
</Typography>
|
||
|
|
)
|
||
|
|
);
|
||
|
|
Link.displayName = "Link";
|
||
|
|
export default Link;
|