extract DocPaginatorNavLink

facebook · Dec 21, 2021 · 13b645f · 13b645f
1 parent 3003001
commit 13b645f
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 32 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme-classic.d.ts b/packages/docusaurus-theme-classic/src/theme-classic.d.ts
@@ -109,13 +109,22 @@ declare module '@theme/CodeBlock' {
 declare module '@theme/DocPaginator' {
   import type {PropNavigation} from '@docusaurus/plugin-content-docs';
 
-  type PageInfo = {readonly permalink: string; readonly title: string};
-
   // May be simpler to provide a {navigation: PropNavigation} prop?
   export interface Props extends PropNavigation {}
 
-  const DocPaginator: (props: Props) => JSX.Element;
-  export default 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' {

diff --git a/packages/docusaurus-theme-classic/src/theme/DocPaginator/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocPaginator/index.tsx
@@ -6,11 +6,11 @@
  */
 
 import React from 'react';
-import Link from '@docusaurus/Link';
-import Translate, {translate} from '@docusaurus/Translate';
-import type {PropNavigation} from '@docusaurus/plugin-content-docs';
+import {translate} from '@docusaurus/Translate';
+import DocPaginatorNavLink from '@theme/DocPaginatorNavLink';
+import type {Props} from '@theme/DocPaginator';
 
-function DocPaginator(props: PropNavigation): JSX.Element {
+function DocPaginator(props: Props): JSX.Element {
   const {previous, next} = props;
 
   return (
@@ -22,32 +22,10 @@ function DocPaginator(props: PropNavigation): JSX.Element {
         description: 'The ARIA label for the docs pagination',
       })}>
       <div className="pagination-nav__item">
-        {previous && (
-          <Link className="pagination-nav__link" to={previous.permalink}>
-            <div className="pagination-nav__sublabel">
-              <Translate
-                id="theme.docs.paginator.previous"
-                description="The label used to navigate to the previous doc">
-                Previous
-              </Translate>
-            </div>
-            <div className="pagination-nav__label">{previous.title}</div>
-          </Link>
-        )}
+        {previous && <DocPaginatorNavLink navLink={previous} />}
       </div>
       <div className="pagination-nav__item pagination-nav__item--next">
-        {next && (
-          <Link className="pagination-nav__link" to={next.permalink}>
-            <div className="pagination-nav__sublabel">
-              <Translate
-                id="theme.docs.paginator.next"
-                description="The label used to navigate to the next doc">
-                Next
-              </Translate>
-            </div>
-            <div className="pagination-nav__label">{next.title}</div>
-          </Link>
-        )}
+        {next && <DocPaginatorNavLink navLink={next} next />}
       </div>
     </nav>
   );

diff --git a/packages/docusaurus-theme-classic/src/theme/DocPaginatorNavLink/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocPaginatorNavLink/index.tsx
@@ -0,0 +1,38 @@
+/**
+ * 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;