3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-22 21:47:01 +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;
}
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' {
import type {PropSidebarItem} from '@docusaurus/plugin-content-docs';
@ -523,6 +511,18 @@ declare module '@theme/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' {
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 Link from '@docusaurus/Link';
import Translate, {translate} from '@docusaurus/Translate';
import PaginatorNavLink from '@theme/PaginatorNavLink';
import type {Props} from '@theme/BlogListPaginator';
function BlogListPaginator(props: Props): JSX.Element {
@ -24,30 +24,30 @@ function BlogListPaginator(props: Props): JSX.Element {
})}>
<div className="pagination-nav__item">
{previousPage && (
<Link className="pagination-nav__link" to={previousPage}>
<div className="pagination-nav__label">
&laquo;{' '}
<PaginatorNavLink
permalink={previousPage}
title={
<Translate
id="theme.blog.paginator.newerEntries"
description="The label used to navigate to the newer blog posts page (previous page)">
Newer Entries
</Translate>
</div>
</Link>
}
/>
)}
</div>
<div className="pagination-nav__item pagination-nav__item--next">
{nextPage && (
<Link className="pagination-nav__link" to={nextPage}>
<div className="pagination-nav__label">
<PaginatorNavLink
permalink={nextPage}
title={
<Translate
id="theme.blog.paginator.olderEntries"
description="The label used to navigate to the older blog posts page (next page)">
Older Entries
</Translate>{' '}
&raquo;
</div>
</Link>
</Translate>
}
/>
)}
</div>
</nav>

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

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

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

@ -6,8 +6,8 @@
*/
import React from 'react';
import {translate} from '@docusaurus/Translate';
import DocPaginatorNavLink from '@theme/DocPaginatorNavLink';
import Translate, {translate} from '@docusaurus/Translate';
import PaginatorNavLink from '@theme/PaginatorNavLink';
import type {Props} from '@theme/DocPaginator';
function DocPaginator(props: Props): JSX.Element {
@ -22,10 +22,32 @@ function DocPaginator(props: Props): JSX.Element {
description: 'The ARIA label for the docs pagination',
})}>
<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 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>
</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;