11a990d197
* Disable hover effect when TableRow is not clickable * Replace TableRow with TableRowLink * Update snapshots
55 lines
1.2 KiB
TypeScript
55 lines
1.2 KiB
TypeScript
import { TableRow, TableRowTypeMap } from "@material-ui/core";
|
|
import { makeStyles } from "@saleor/macaw-ui";
|
|
import { isExternalURL } from "@saleor/utils/urls";
|
|
import clsx from "classnames";
|
|
import React from "react";
|
|
import { Link } from "react-router-dom";
|
|
|
|
type MaterialTableRowPropsType = TableRowTypeMap["props"];
|
|
|
|
export interface TableRowLinkProps extends MaterialTableRowPropsType {
|
|
children: React.ReactNode;
|
|
href?: string;
|
|
className?: string;
|
|
linkClassName?: string;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
const useStyles = makeStyles(
|
|
{
|
|
link: {
|
|
all: "inherit",
|
|
display: "contents",
|
|
},
|
|
},
|
|
{ name: "TableRowLink" },
|
|
);
|
|
|
|
const TableRowLink = ({
|
|
href,
|
|
children,
|
|
linkClassName,
|
|
onClick,
|
|
...props
|
|
}: TableRowLinkProps) => {
|
|
const classes = useStyles();
|
|
|
|
if (!href || isExternalURL(href)) {
|
|
return (
|
|
<TableRow hover={!!onClick} onClick={onClick} {...props}>
|
|
{children}
|
|
</TableRow>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<TableRow hover={true} onClick={onClick} {...props}>
|
|
<Link className={clsx(classes.link, linkClassName)} to={href}>
|
|
{children}
|
|
</Link>
|
|
</TableRow>
|
|
);
|
|
};
|
|
|
|
TableRowLink.displayName = "TableRowLink";
|
|
export default TableRowLink;
|