Skip to content

Commit

Permalink
[docs] Push the fixes on Next.js's Link to the examples
Browse files Browse the repository at this point in the history 
Use:

- #27936
-
  • Loading branch information
@oliviertassinari
oliviertassinari committed Sep 5, 2021
1 parent 8179654 commit 40615fc
Show file tree
Hide file tree
Showing 4 changed files with 43 additions and 26 deletions.
25 changes: 18 additions & 7 deletions docs/src/modules/components/Link.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,19 @@ import * as React from 'react';
import clsx from 'clsx';
import { useRouter } from 'next/router';
import NextLink, { LinkProps as NextLinkProps } from 'next/link';
import { styled } from '@mui/material/styles';
import MuiLink, { LinkProps as MuiLinkProps } from '@mui/material/Link';
import { styled } from '@mui/material/styles';
import { useUserLanguage } from 'docs/src/modules/utils/i18n';

/**
* File to keep in sync with:
*
* - /docs/src/modules/components/Link.tsx
* - /examples/nextjs/src/Link.tsx
* - /examples/nextjs-with-typescript/src/Link.tsx
* - /examples/nextjs-with-styled-components-typescript/src/Link.tsx
*/

interface NextLinkComposedProps
extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>,
Omit<NextLinkProps, 'href' | 'as' | 'passHref'> {
Expand All @@ -14,8 +23,6 @@ interface NextLinkComposedProps
href?: NextLinkProps['href'];
}

const Anchor = styled('a')({ cursor: 'pointer' });

const NextLinkComposed = React.forwardRef<HTMLAnchorElement, NextLinkComposedProps>(
function NextLinkComposed(props, ref) {
const { to, linkAs, href, replace, scroll, shallow, prefetch, locale, ...other } = props;
Expand All @@ -31,12 +38,16 @@ const NextLinkComposed = React.forwardRef<HTMLAnchorElement, NextLinkComposedPro
passHref
locale={locale}
>
<Anchor ref={ref} {...other} />
{/* eslint-disable-next-line jsx-a11y/anchor-has-content */}
<a ref={ref} {...other} />
</NextLink>
);
},
);

// Add support for the sx prop for consistency with the other branches.
const Anchor = styled('a')({});

export type LinkProps = {
activeClassName?: string;
as?: NextLinkProps['as'];
Expand Down Expand Up @@ -70,14 +81,14 @@ const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(function Link(props,

if (isExternal) {
if (noLinkStyle) {
return <Anchor className={className} href={href as string} ref={ref as any} {...other} />;
return <Anchor className={className} href={href} ref={ref} {...other} />;
}

return <MuiLink className={className} href={href as string} ref={ref} {...other} />;
return <MuiLink className={className} href={href} ref={ref} {...other} />;
}

if (noLinkStyle) {
return <NextLinkComposed className={className} ref={ref as any} to={href} {...other} />;
return <NextLinkComposed className={className} ref={ref} to={href} {...other} />;
}

let linkAs = linkAsProp || (href as string);
Expand Down
16 changes: 9 additions & 7 deletions examples/nextjs-with-styled-components-typescript/src/Link.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
/* eslint-disable jsx-a11y/anchor-has-content */
import * as React from 'react';
import clsx from 'clsx';
import { useRouter } from 'next/router';
import NextLink, { LinkProps as NextLinkProps } from 'next/link';
import MuiLink, { LinkProps as MuiLinkProps } from '@mui/material/Link';
import { styled } from '@mui/material/styles';

interface NextLinkComposedProps
extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>,
Expand All @@ -15,8 +15,7 @@ interface NextLinkComposedProps

export const NextLinkComposed = React.forwardRef<HTMLAnchorElement, NextLinkComposedProps>(
function NextLinkComposed(props, ref) {
const { to, linkAs, href, replace, scroll, passHref, shallow, prefetch, locale, ...other } =
props;
const { to, linkAs, href, replace, scroll, shallow, prefetch, locale, ...other } = props;

return (
<NextLink
Expand All @@ -26,15 +25,18 @@ export const NextLinkComposed = React.forwardRef<HTMLAnchorElement, NextLinkComp
replace={replace}
scroll={scroll}
shallow={shallow}
passHref={passHref}
locale={locale}
>
{/* eslint-disable-next-line jsx-a11y/anchor-has-content */}
<a ref={ref} {...other} />
</NextLink>
);
},
);

// Add support for the sx prop for consistency with the other branches.
const Anchor = styled('a')({});

export type LinkProps = {
activeClassName?: string;
as?: NextLinkProps['as'];
Expand Down Expand Up @@ -67,14 +69,14 @@ const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(function Link(props,

if (isExternal) {
if (noLinkStyle) {
return <a className={className} href={href as string} ref={ref as any} {...other} />;
return <Anchor className={className} href={href} ref={ref} {...other} />;
}

return <MuiLink className={className} href={href as string} ref={ref} {...other} />;
return <MuiLink className={className} href={href} ref={ref} {...other} />;
}

if (noLinkStyle) {
return <NextLinkComposed className={className} ref={ref as any} to={href} {...other} />;
return <NextLinkComposed className={className} ref={ref} to={href} {...other} />;
}

return (
Expand Down
16 changes: 9 additions & 7 deletions examples/nextjs-with-typescript/src/Link.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
/* eslint-disable jsx-a11y/anchor-has-content */
import * as React from 'react';
import clsx from 'clsx';
import { useRouter } from 'next/router';
import NextLink, { LinkProps as NextLinkProps } from 'next/link';
import MuiLink, { LinkProps as MuiLinkProps } from '@mui/material/Link';
import { styled } from '@mui/material/styles';

interface NextLinkComposedProps
extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>,
Expand All @@ -15,8 +15,7 @@ interface NextLinkComposedProps

export const NextLinkComposed = React.forwardRef<HTMLAnchorElement, NextLinkComposedProps>(
function NextLinkComposed(props, ref) {
const { to, linkAs, href, replace, scroll, passHref, shallow, prefetch, locale, ...other } =
props;
const { to, linkAs, href, replace, scroll, shallow, prefetch, locale, ...other } = props;

return (
<NextLink
Expand All @@ -26,15 +25,18 @@ export const NextLinkComposed = React.forwardRef<HTMLAnchorElement, NextLinkComp
replace={replace}
scroll={scroll}
shallow={shallow}
passHref={passHref}
locale={locale}
>
{/* eslint-disable-next-line jsx-a11y/anchor-has-content */}
<a ref={ref} {...other} />
</NextLink>
);
},
);

// Add support for the sx prop for consistency with the other branches.
const Anchor = styled('a')({});

export type LinkProps = {
activeClassName?: string;
as?: NextLinkProps['as'];
Expand Down Expand Up @@ -67,14 +69,14 @@ const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(function Link(props,

if (isExternal) {
if (noLinkStyle) {
return <a className={className} href={href as string} ref={ref as any} {...other} />;
return <Anchor className={className} href={href} ref={ref} {...other} />;
}

return <MuiLink className={className} href={href as string} ref={ref} {...other} />;
return <MuiLink className={className} href={href} ref={ref} {...other} />;
}

if (noLinkStyle) {
return <NextLinkComposed className={className} ref={ref as any} to={href} {...other} />;
return <NextLinkComposed className={className} ref={ref} to={href} {...other} />;
}

return (
Expand Down
12 changes: 7 additions & 5 deletions examples/nextjs/src/Link.js
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
/* eslint-disable jsx-a11y/anchor-has-content */
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { useRouter } from 'next/router';
import NextLink from 'next/link';
import MuiLink from '@mui/material/Link';
import { styled } from '@mui/material/styles';

export const NextLinkComposed = React.forwardRef(function NextLinkComposed(props, ref) {
const { to, linkAs, href, replace, scroll, passHref, shallow, prefetch, locale, ...other } =
props;
const { to, linkAs, href, replace, scroll, shallow, prefetch, locale, ...other } = props;

return (
<NextLink
Expand All @@ -18,9 +17,9 @@ export const NextLinkComposed = React.forwardRef(function NextLinkComposed(props
replace={replace}
scroll={scroll}
shallow={shallow}
passHref={passHref}
locale={locale}
>
{/* eslint-disable-next-line jsx-a11y/anchor-has-content */}
<a ref={ref} {...other} />
</NextLink>
);
Expand All @@ -38,6 +37,9 @@ NextLinkComposed.propTypes = {
to: PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired,
};

// Add support for the sx prop for consistency with the other branches.
const Anchor = styled('a')({});

// A styled version of the Next.js Link component:
// https://nextjs.org/docs/#with-link
const Link = React.forwardRef(function Link(props, ref) {
Expand All @@ -62,7 +64,7 @@ const Link = React.forwardRef(function Link(props, ref) {

if (isExternal) {
if (noLinkStyle) {
return <a className={className} href={href} ref={ref} {...other} />;
return <Anchor className={className} href={href} ref={ref} {...other} />;
}

return <MuiLink className={className} href={href} ref={ref} {...other} />;
Expand Down

0 comments on commit 40615fc

Please sign in to comment.