fix: Add access to document TOC on mobile (#2279)

* Add TOC button for mobile * Undo NewDocumentMenu changes * Place the toc button in the correct position. * Pass menu props to menuitem * Update app/menus/TableOfContentsMenu.js Co-authored-by: Tom Moor <tom.moor@gmail.com> * Update app/menus/TableOfContentsMenu.js Co-authored-by: Tom Moor <tom.moor@gmail.com> * Use the existing prop type * Write menu inside actions prop * Prevent blank webpage behaviour for toc * Use href instead of level to determine target * Update app/scenes/Document/components/Header.js Co-authored-by: Tom Moor <tom.moor@gmail.com> * Add heading to menu items * Use existing Heading component Co-authored-by: Tom Moor <tom.moor@gmail.com>
2021-07-09 17:20:27 +05:30
parent 056f89fcfd
commit 7d5fbeb7b0
6 changed files with 91 additions and 2 deletions
--- a/app/menus/TableOfContentsMenu.js
+++ b/app/menus/TableOfContentsMenu.js
@@ -0,0 +1,66 @@
+// @flow
+import { observer } from "mobx-react";
+import { TableOfContentsIcon } from "outline-icons";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { MenuButton, useMenuState } from "reakit/Menu";
+import Button from "components/Button";
+import ContextMenu from "components/ContextMenu";
+import Template from "components/ContextMenu/Template";
+
+type Props = {|
+  headings: { title: string, level: number, id: string }[],
+|};
+
+function TableOfContentsMenu({ headings }: Props) {
+  const menu = useMenuState({
+    modal: true,
+    unstable_preventOverflow: true,
+    unstable_fixed: true,
+    unstable_flip: true,
+  });
+
+  const { t } = useTranslation();
+
+  const minHeading = headings.reduce(
+    (memo, heading) => (heading.level < memo ? heading.level : memo),
+    Infinity
+  );
+
+  return (
+    <>
+      <MenuButton {...menu}>
+        {(props) => (
+          <Button
+            {...props}
+            icon={<TableOfContentsIcon />}
+            iconColor="currentColor"
+            borderOnHover
+            neutral
+          />
+        )}
+      </MenuButton>
+      <ContextMenu {...menu} aria-label={t("Table of contents")}>
+        <Template
+          {...menu}
+          items={[
+            {
+              type: "heading",
+              visible: true,
+              title: t("Contents"),
+            },
+            ...headings.map((heading) => {
+              return {
+                href: `#${heading.id}`,
+                title: t(heading.title),
+                level: heading.level - minHeading,
+              };
+            }),
+          ]}
+        />
+      </ContextMenu>
+    </>
+  );
+}
+
+export default observer(TableOfContentsMenu);