refactor TOCCollapsible

facebook · Apr 29, 2022 · 4f79ac4 · 4f79ac4
1 parent 34ba054
commit 4f79ac4
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 36 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme-classic.d.ts b/packages/docusaurus-theme-classic/src/theme-classic.d.ts
@@ -1114,6 +1114,18 @@ declare module '@theme/TOCCollapsible' {
   export default function TOCCollapsible(props: Props): JSX.Element;
 }
 
+declare module '@theme/TOCCollapsible/CollapseButton' {
+  import type {ComponentProps} from 'react';
+
+  export interface Props extends ComponentProps<'button'> {
+    collapsed: boolean;
+  }
+
+  export default function TOCCollapsibleCollapseButton(
+    props: Props,
+  ): JSX.Element;
+}
+
 declare module '@theme/ColorModeToggle' {
   import type {ColorMode} from '@docusaurus/theme-common';
 

diff --git a/...rc/theme/TOCCollapsible/styles.module.css → .../TOCCollapsible/CollapseButton.module.css b/...rc/theme/TOCCollapsible/styles.module.css → .../TOCCollapsible/CollapseButton.module.css
@@ -5,12 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-.tocCollapsible {
-  background-color: var(--ifm-menu-color-background-active);
-  border-radius: var(--ifm-global-radius);
-  margin: 1rem 0;
-}
-
 .tocCollapsibleButton {
   font-size: inherit;
   display: flex;
@@ -30,21 +24,6 @@
   transition: transform var(--ifm-transition-fast);
 }
 
-.tocCollapsibleContent > ul {
-  border-left: none;
-  border-top: 1px solid var(--ifm-color-emphasis-300);
-  padding: 0.2rem 0;
-  font-size: 15px;
-}
-
-.tocCollapsibleContent ul li {
-  margin: 0.4rem 0.8rem;
-}
-
-.tocCollapsibleContent a {
-  display: block;
-}
-
-.tocCollapsibleExpanded .tocCollapsibleButton::after {
+.tocCollapsibleButtonExpanded::after {
   transform: none;
 }
diff --git a/packages/docusaurus-theme-classic/src/theme/TOCCollapsible/CollapseButton.tsx b/packages/docusaurus-theme-classic/src/theme/TOCCollapsible/CollapseButton.tsx
@@ -0,0 +1,35 @@
+/**
+ * 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 Translate from '@docusaurus/Translate';
+import styles from './CollapseButton.module.css';
+import type {Props} from '@theme/TOCCollapsible/CollapseButton';
+
+export default function TOCCollapsibleCollapseButton({
+  collapsed,
+  ...props
+}: Props): JSX.Element {
+  return (
+    <button
+      type="button"
+      {...props}
+      className={clsx(
+        'clean-btn',
+        styles.tocCollapsibleButton,
+        !collapsed && styles.tocCollapsibleButtonExpanded,
+        props.className,
+      )}>
+      <Translate
+        id="theme.TOCCollapsible.toggleButtonLabel"
+        description="The label used by the button on the collapsible TOC component">
+        On this page
+      </Translate>
+    </button>
+  );
+}
diff --git a/packages/docusaurus-theme-classic/src/theme/TOCCollapsible/index.module.css b/packages/docusaurus-theme-classic/src/theme/TOCCollapsible/index.module.css
@@ -0,0 +1,31 @@
+/**
+ * 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.
+ */
+
+.tocCollapsible {
+  background-color: var(--ifm-menu-color-background-active);
+  border-radius: var(--ifm-global-radius);
+  margin: 1rem 0;
+}
+
+.tocCollapsibleContent > ul {
+  border-left: none;
+  border-top: 1px solid var(--ifm-color-emphasis-300);
+  padding: 0.2rem 0;
+  font-size: 15px;
+}
+
+.tocCollapsibleContent ul li {
+  margin: 0.4rem 0.8rem;
+}
+
+.tocCollapsibleContent a {
+  display: block;
+}
+
+.tocCollapsibleExpanded {
+  transform: none;
+}
diff --git a/packages/docusaurus-theme-classic/src/theme/TOCCollapsible/index.tsx b/packages/docusaurus-theme-classic/src/theme/TOCCollapsible/index.tsx
@@ -7,11 +7,11 @@
 
 import React from 'react';
 import clsx from 'clsx';
-import Translate from '@docusaurus/Translate';
 import {useCollapsible, Collapsible} from '@docusaurus/theme-common';
-import styles from './styles.module.css';
+import styles from './index.module.css';
 import TOCItems from '@theme/TOCItems';
 import type {Props} from '@theme/TOCCollapsible';
+import CollapseButton from '@theme/TOCCollapsible/CollapseButton';
 
 export default function TOCCollapsible({
   toc,
@@ -22,25 +22,14 @@ export default function TOCCollapsible({
   const {collapsed, toggleCollapsed} = useCollapsible({
     initialState: true,
   });
-
   return (
     <div
       className={clsx(
         styles.tocCollapsible,
         !collapsed && styles.tocCollapsibleExpanded,
         className,
       )}>
-      <button
-        type="button"
-        className={clsx('clean-btn', styles.tocCollapsibleButton)}
-        onClick={toggleCollapsed}>
-        <Translate
-          id="theme.TOCCollapsible.toggleButtonLabel"
-          description="The label used by the button on the collapsible TOC component">
-          On this page
-        </Translate>
-      </button>
-
+      <CollapseButton collapsed={collapsed} onClick={toggleCollapsed} />
       <Collapsible
         lazy
         className={styles.tocCollapsibleContent}