// @flow
import React, { Component } from 'react';
import { observable } from 'mobx';
import { observer, inject } from 'mobx-react';
import type { Location } from 'react-router-dom';
import Flex from 'shared/components/Flex';
import styled from 'styled-components';
import { color } from 'shared/styles/constants';
import { PlusIcon, CollectionIcon } from 'outline-icons';
import Header from './Header';
import SidebarLink from './SidebarLink';
import DropToImport from 'components/DropToImport';
import CollectionMenu from 'menus/CollectionMenu';
import CollectionsStore from 'stores/CollectionsStore';
import UiStore from 'stores/UiStore';
import Document from 'models/Document';
import Collection from 'models/Collection';
import DocumentsStore from 'stores/DocumentsStore';
import { type NavigationNode } from 'types';
type Props = {
history: Object,
location: Location,
collections: CollectionsStore,
documents: DocumentsStore,
onCreateCollection: () => void,
ui: UiStore,
};
@observer
class Collections extends Component {
props: Props;
render() {
const { history, location, collections, ui, documents } = this.props;
return (
{collections.orderedData.map(collection => (
))}
{collections.isLoaded && (
}
>
New collection…
)}
);
}
}
type CollectionLinkProps = {
history: Object,
collection: Collection,
ui: UiStore,
activeDocument: ?Document,
prefetchDocument: (id: string) => Promise,
};
@observer
class CollectionLink extends Component {
props: CollectionLinkProps;
@observable menuOpen = false;
renderDocuments() {
const {
history,
collection,
activeDocument,
prefetchDocument,
} = this.props;
return (
{collection.documents.map(document => (
))}
);
}
render() {
const { history, collection, ui } = this.props;
const expanded = collection.id === ui.activeCollectionId;
return (
}
iconColor={collection.color}
expandedContent={this.renderDocuments()}
hideExpandToggle
expand={expanded}
>
{collection.name}
(this.menuOpen = true)}
onClose={() => (this.menuOpen = false)}
/>
);
}
}
type DocumentLinkProps = {
document: NavigationNode,
history: Object,
activeDocument: ?Document,
activeDocumentRef: HTMLElement => void,
prefetchDocument: (documentId: string) => void,
depth: number,
};
const DocumentLink = observer(
({
document,
activeDocument,
activeDocumentRef,
prefetchDocument,
depth,
history,
}: DocumentLinkProps) => {
const isActiveDocument =
activeDocument && activeDocument.id === document.id;
const showChildren = !!(
activeDocument &&
(activeDocument.pathToDocument
.map(entry => entry.id)
.includes(document.id) ||
isActiveDocument)
);
const handleMouseEnter = (event: SyntheticEvent) => {
event.stopPropagation();
event.preventDefault();
prefetchDocument(document.id);
};
return (
{document.children.map(childDocument => (
))}
) : (
undefined
)
}
>
{document.title}
);
}
);
const CollectionName = styled(Flex)`
padding: 0 0 4px;
`;
const CollectionAction = styled.span`
position: absolute;
right: 0;
top: 0;
color: ${color.slate};
svg {
opacity: 0.75;
}
&:hover {
svg {
opacity: 1;
}
}
`;
const StyledDropToImport = styled(DropToImport)`
position: relative;
${CollectionAction} {
display: ${props => (props.menuOpen ? 'inline' : 'none')};
}
&:hover {
${CollectionAction} {
display: inline;
}
}
`;
const CollectionChildren = styled(Flex)`
margin-top: -4px;
margin-left: 36px;
padding-bottom: 4px;
`;
const DocumentChildren = styled(Flex)`
margin-top: -4px;
margin-left: 12px;
`;
export default inject('collections', 'ui', 'documents')(Collections);