3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-23 05:57:05 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor(theme-classic): extract common PaginatorNavLink component (#6213)

Browse source
This commit is contained in:
Joshua Chen 2021-12-29 19:44:08 +08:00 • committed by GitHub
parent 0fa091a0c2
commit ae9f43fbc0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 83 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

24
packages/docusaurus-theme-classic/src/theme-classic.d.ts vendored
View file

@ -129,18 +129,6 @@ declare module '@theme/DocPaginator' {
export default function DocPaginator(props: Props): JSX.Element; export default function DocPaginator(props: Props): JSX.Element;
} }
declare module '@theme/DocPaginatorNavLink' {
import type {PropNavigationLink} from '@docusaurus/plugin-content-docs';
// May be simpler to provide a {navigation: PropNavigation} prop?
export interface Props {
navLink: PropNavigationLink;
next?: boolean;
}
export default function DocPaginatorNavLink(props: Props): JSX.Element;
}
declare module '@theme/DocSidebar' { declare module '@theme/DocSidebar' {
import type {PropSidebarItem} from '@docusaurus/plugin-content-docs'; import type {PropSidebarItem} from '@docusaurus/plugin-content-docs';
@ -523,6 +511,18 @@ declare module '@theme/NavbarItem' {
export default NavbarItem; export default NavbarItem;
} }
declare module '@theme/PaginatorNavLink' {
import type {ReactNode} from 'react';
import type {PropNavigationLink} from '@docusaurus/plugin-content-docs';
export interface Props extends Omit<PropNavigationLink, 'title'> {
readonly title: ReactNode;
readonly subLabel?: JSX.Element;
}
export default function PaginatorNavLink(props: Props): JSX.Element;
}
declare module '@theme/SearchBar' { declare module '@theme/SearchBar' {
export default function SearchBar(): JSX.Element; export default function SearchBar(): JSX.Element;
} }

24
packages/docusaurus-theme-classic/src/theme/BlogListPaginator/index.tsx
View file

@ -6,8 +6,8 @@
*/ */
import React from 'react'; import React from 'react';
import Link from '@docusaurus/Link';
import Translate, {translate} from '@docusaurus/Translate'; import Translate, {translate} from '@docusaurus/Translate';
import PaginatorNavLink from '@theme/PaginatorNavLink';
import type {Props} from '@theme/BlogListPaginator'; import type {Props} from '@theme/BlogListPaginator';
function BlogListPaginator(props: Props): JSX.Element { function BlogListPaginator(props: Props): JSX.Element {
@ -24,30 +24,30 @@ function BlogListPaginator(props: Props): JSX.Element {
})}> })}>
<div className="pagination-nav__item"> <div className="pagination-nav__item">
{previousPage && ( {previousPage && (
<Link className="pagination-nav__link" to={previousPage}> <PaginatorNavLink
<div className="pagination-nav__label"> permalink={previousPage}
&laquo;{' '} title={
<Translate <Translate
id="theme.blog.paginator.newerEntries" id="theme.blog.paginator.newerEntries"
description="The label used to navigate to the newer blog posts page (previous page)"> description="The label used to navigate to the newer blog posts page (previous page)">
Newer Entries Newer Entries
</Translate> </Translate>
</div> }
</Link> />
)} )}
</div> </div>
<div className="pagination-nav__item pagination-nav__item--next"> <div className="pagination-nav__item pagination-nav__item--next">
{nextPage && ( {nextPage && (
<Link className="pagination-nav__link" to={nextPage}> <PaginatorNavLink
<div className="pagination-nav__label"> permalink={nextPage}
title={
<Translate <Translate
id="theme.blog.paginator.olderEntries" id="theme.blog.paginator.olderEntries"
description="The label used to navigate to the older blog posts page (next page)"> description="The label used to navigate to the older blog posts page (next page)">
Older Entries Older Entries
</Translate>{' '} </Translate>
&raquo; }
</div> />
</Link>
)} )}
</div> </div>
</nav> </nav>

26
packages/docusaurus-theme-classic/src/theme/BlogPostPaginator/index.tsx
View file

@ -7,7 +7,7 @@
import React from 'react'; import React from 'react';
import Translate, {translate} from '@docusaurus/Translate'; import Translate, {translate} from '@docusaurus/Translate';
import Link from '@docusaurus/Link'; import PaginatorNavLink from '@theme/PaginatorNavLink';
import type {Props} from '@theme/BlogPostPaginator'; import type {Props} from '@theme/BlogPostPaginator';
function BlogPostPaginator(props: Props): JSX.Element { function BlogPostPaginator(props: Props): JSX.Element {
@ -23,34 +23,30 @@ function BlogPostPaginator(props: Props): JSX.Element {
})}> })}>
<div className="pagination-nav__item"> <div className="pagination-nav__item">
{prevItem && ( {prevItem && (
<Link className="pagination-nav__link" to={prevItem.permalink}> <PaginatorNavLink
<div className="pagination-nav__sublabel"> {...prevItem}
subLabel={
<Translate <Translate
id="theme.blog.post.paginator.newerPost" id="theme.blog.post.paginator.newerPost"
description="The blog post button label to navigate to the newer/previous post"> description="The blog post button label to navigate to the newer/previous post">
Newer Post Newer Post
</Translate> </Translate>
</div> }
<div className="pagination-nav__label"> />
&laquo; {prevItem.title}
</div>
</Link>
)} )}
</div> </div>
<div className="pagination-nav__item pagination-nav__item--next"> <div className="pagination-nav__item pagination-nav__item--next">
{nextItem && ( {nextItem && (
<Link className="pagination-nav__link" to={nextItem.permalink}> <PaginatorNavLink
<div className="pagination-nav__sublabel"> {...nextItem}
subLabel={
<Translate <Translate
id="theme.blog.post.paginator.olderPost" id="theme.blog.post.paginator.olderPost"
description="The blog post button label to navigate to the older/next post"> description="The blog post button label to navigate to the older/next post">
Older Post Older Post
</Translate> </Translate>
</div> }
<div className="pagination-nav__label"> />
{nextItem.title} &raquo;
</div>
</Link>
)} )}
</div> </div>
</nav> </nav>

30
packages/docusaurus-theme-classic/src/theme/DocPaginator/index.tsx
View file

@ -6,8 +6,8 @@
*/ */
import React from 'react'; import React from 'react';
import {translate} from '@docusaurus/Translate'; import Translate, {translate} from '@docusaurus/Translate';
import DocPaginatorNavLink from '@theme/DocPaginatorNavLink'; import PaginatorNavLink from '@theme/PaginatorNavLink';
import type {Props} from '@theme/DocPaginator'; import type {Props} from '@theme/DocPaginator';
function DocPaginator(props: Props): JSX.Element { function DocPaginator(props: Props): JSX.Element {
@ -22,10 +22,32 @@ function DocPaginator(props: Props): JSX.Element {
description: 'The ARIA label for the docs pagination', description: 'The ARIA label for the docs pagination',
})}> })}>
<div className="pagination-nav__item"> <div className="pagination-nav__item">
{previous && <DocPaginatorNavLink navLink={previous} />} {previous && (
<PaginatorNavLink
{...previous}
subLabel={
<Translate
id="theme.docs.paginator.previous"
description="The label used to navigate to the previous doc">
Previous
</Translate>
}
/>
)}
</div> </div>
<div className="pagination-nav__item pagination-nav__item--next"> <div className="pagination-nav__item pagination-nav__item--next">
{next && <DocPaginatorNavLink navLink={next} next />} {next && (
<PaginatorNavLink
{...next}
subLabel={
<Translate
id="theme.docs.paginator.next"
description="The label used to navigate to the next doc">
Next
</Translate>
}
/>
)}
</div> </div>
</nav> </nav>
); );

38
packages/docusaurus-theme-classic/src/theme/DocPaginatorNavLink/index.tsx
View file

@ -1,38 +0,0 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import clsx from 'clsx';
import Link from '@docusaurus/Link';
import Translate from '@docusaurus/Translate';
import type {Props} from '@theme/DocPaginatorNavLink';
function DocPaginatorNavLink(props: Props): JSX.Element {
const {navLink, next} = props;
return (
<Link className={clsx('pagination-nav__link')} to={navLink.permalink}>
<div className="pagination-nav__sublabel">
{next ? (
<Translate
id="theme.docs.paginator.next"
description="The label used to navigate to the next doc">
Next
</Translate>
) : (
<Translate
id="theme.docs.paginator.previous"
description="The label used to navigate to the previous doc">
Previous
</Translate>
)}
</div>
<div className="pagination-nav__label">{navLink.title}</div>
</Link>
);
}
export default DocPaginatorNavLink;

22
packages/docusaurus-theme-classic/src/theme/PaginatorNavLink/index.tsx Normal file
View file

@ -0,0 +1,22 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import Link from '@docusaurus/Link';
import type {Props} from '@theme/PaginatorNavLink';
function PaginatorNavLink(props: Props): JSX.Element {
const {permalink, title, subLabel} = props;
return (
<Link className="pagination-nav__link" to={permalink}>
{subLabel && <div className="pagination-nav__sublabel">{subLabel}</div>}
<div className="pagination-nav__label">{title}</div>
</Link>
);
}
export default PaginatorNavLink;