-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
3 changed files
with
15 additions
and
113 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,113 +1,15 @@ | ||
| // Combine Material Link with Nextjs Link | ||
| // Stolen from https://github.com/mui/material-ui/blob/a7dbc3c61013941cb331ae01fffb9620088b6cfa/examples/nextjs-with-typescript/src/Link.tsx | ||
| // Combine look of Material Link with functionality of Nextjs Link. | ||
|
|
||
| import MuiLink, { type LinkProps as MuiLinkProps } from "@mui/material/Link"; | ||
| import { styled } from "@mui/material/styles"; | ||
| import clsx from "clsx"; | ||
| import NextLink, { LinkProps as NextLinkProps } from "next/link"; | ||
| import { useRouter } from "next/router"; | ||
| import * as React from "react"; | ||
|
|
||
| // Add support for the sx prop for consistency with the other branches. | ||
| const Anchor = styled("a")({}); | ||
|
|
||
| interface NextLinkComposedProps | ||
| extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href">, | ||
| Omit<NextLinkProps, "href" | "as" | "onClick" | "onMouseEnter" | "onTouchStart"> { | ||
| to: NextLinkProps["href"]; | ||
| linkAs?: NextLinkProps["as"]; | ||
| } | ||
|
|
||
| export const NextLinkComposed = React.forwardRef<HTMLAnchorElement, NextLinkComposedProps>( | ||
| function NextLinkComposed(props, ref) { | ||
| const { to, linkAs, replace, scroll, shallow, prefetch, locale, ...other } = props; | ||
|
|
||
| return ( | ||
| <NextLink | ||
| href={to} | ||
| prefetch={prefetch} | ||
| as={linkAs} | ||
| replace={replace} | ||
| scroll={scroll} | ||
| shallow={shallow} | ||
| passHref | ||
| locale={locale} | ||
| > | ||
| <Anchor ref={ref} {...other} /> | ||
| </NextLink> | ||
| ); | ||
| } | ||
| ); | ||
|
|
||
| export type LinkProps = { | ||
| activeClassName?: string; | ||
| as?: NextLinkProps["as"]; | ||
| href: NextLinkProps["href"]; | ||
| linkAs?: NextLinkProps["as"]; // Useful when the as prop is shallow by styled(). | ||
| noLinkStyle?: boolean; | ||
| } & Omit<NextLinkComposedProps, "to" | "linkAs" | "href"> & | ||
| Omit<MuiLinkProps, "href">; | ||
|
|
||
| // A styled version of the Next.js Link component: | ||
| // https://nextjs.org/docs/api-reference/next/link | ||
| const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(function Link(props, ref) { | ||
| const { | ||
| activeClassName = "active", | ||
| as, | ||
| className: classNameProps, | ||
| href, | ||
| linkAs: linkAsProp, | ||
| locale, | ||
| noLinkStyle, | ||
| prefetch, | ||
| replace, | ||
| // role, // Link don't have roles. | ||
| scroll, | ||
| shallow, | ||
| ...other | ||
| } = props; | ||
| // Tried setting NextLink as the default component of MuiLink via MUI themeing (https://stackoverflow.com/a/74419666), | ||
| // but it would hit an infinite recursion issue without making a custom component anyways. | ||
|
|
||
| const router = useRouter(); | ||
| const pathname = typeof href === "string" ? href : href.pathname; | ||
| const className = clsx(classNameProps, { | ||
| [activeClassName]: router.pathname === pathname && activeClassName, | ||
| }); | ||
| // TODO #167: for some reason, upgrading to Next 13 caused MuiLink to throw a server-client class | ||
| // mismatch error if any decoration props are set. | ||
|
|
||
| const isExternal = | ||
| typeof href === "string" && (href.startsWith("http") || href.startsWith("mailto:")); | ||
|
|
||
| if (isExternal) { | ||
| if (noLinkStyle) { | ||
| return <Anchor className={className} href={href} ref={ref} {...other} />; | ||
| } | ||
|
|
||
| return <MuiLink className={className} href={href} ref={ref} {...other} />; | ||
| } | ||
|
|
||
| const linkAs = linkAsProp ?? as; | ||
| const nextjsProps = { | ||
| to: href, | ||
| linkAs, | ||
| replace, | ||
| scroll, | ||
| shallow, | ||
| prefetch, | ||
| locale, | ||
| }; | ||
|
|
||
| if (noLinkStyle) { | ||
| return <NextLinkComposed className={className} ref={ref} {...nextjsProps} {...other} />; | ||
| } | ||
| import MuiLink, { type LinkProps as MuiLinkProps } from "@mui/material/Link"; | ||
| import NextLink from "next/link"; | ||
| import { forwardRef } from "react"; | ||
|
|
||
| return ( | ||
| <MuiLink | ||
| component={NextLinkComposed} | ||
| className={className} | ||
| ref={ref} | ||
| {...nextjsProps} | ||
| {...other} | ||
| /> | ||
| ); | ||
| export const Link = forwardRef<HTMLAnchorElement, MuiLinkProps>(function Link(props, ref) { | ||
| return <MuiLink component={NextLink} ref={ref} {...props} />; | ||
| }); | ||
|
|
||
| export default Link; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters