Adding new doc menu to sidebar items

2018-05-05 22:45:10 -07:00
parent d55a8ad02d
commit 79c9582020
6 changed files with 238 additions and 212 deletions
--- a/app/components/Sidebar/components/DocumentLink.js
+++ b/app/components/Sidebar/components/DocumentLink.js
@@ -0,0 +1,99 @@
+// @flow
+import * as React from 'react';
+import { observer } from 'mobx-react';
+import styled from 'styled-components';
+import Document from 'models/Document';
+import DocumentMenu from 'menus/DocumentMenu';
+import SidebarLink from './SidebarLink';
+import DropToImport from 'components/DropToImport';
+import Flex from 'shared/components/Flex';
+import { type NavigationNode } from 'types';
+
+type Props = {
+  document: NavigationNode,
+  history: Object,
+  activeDocument: ?Document,
+  activeDocumentRef?: HTMLElement => void,
+  prefetchDocument: (documentId: string) => Promise<void>,
+  depth: number,
+};
+
+@observer
+class DocumentLink extends React.Component<Props> {
+  handleMouseEnter = (ev: SyntheticEvent<*>) => {
+    const { document, prefetchDocument } = this.props;
+
+    ev.stopPropagation();
+    ev.preventDefault();
+    prefetchDocument(document.id);
+  };
+
+  render() {
+    const {
+      document,
+      activeDocument,
+      activeDocumentRef,
+      prefetchDocument,
+      depth,
+      history,
+    } = this.props;
+
+    const isActiveDocument =
+      activeDocument && activeDocument.id === document.id;
+    const showChildren = !!(
+      activeDocument &&
+      (activeDocument.pathToDocument
+        .map(entry => entry.id)
+        .includes(document.id) ||
+        isActiveDocument)
+    );
+
+    return (
+      <Flex
+        column
+        key={document.id}
+        innerRef={isActiveDocument ? activeDocumentRef : undefined}
+        onMouseEnter={this.handleMouseEnter}
+      >
+        <DropToImport
+          history={history}
+          documentId={document.id}
+          activeClassName="activeDropZone"
+        >
+          <SidebarLink
+            to={document.url}
+            expand={showChildren}
+            expandedContent={
+              document.children.length ? (
+                <DocumentChildren column>
+                  {document.children.map(childDocument => (
+                    <DocumentLink
+                      key={childDocument.id}
+                      history={history}
+                      document={childDocument}
+                      activeDocument={activeDocument}
+                      prefetchDocument={prefetchDocument}
+                      depth={depth + 1}
+                    />
+                  ))}
+                </DocumentChildren>
+              ) : (
+                undefined
+              )
+            }
+            menu={<DocumentMenu document={document} />}
+          >
+            {document.title}
+          </SidebarLink>
+        </DropToImport>
+      </Flex>
+    );
+  }
+}
+
+const DocumentChildren = styled(Flex)`
+  margin-top: -4px;
+  margin-left: 12px;
+`;
+
+export default DocumentLink;