// @flow
import React from 'react';
import { observable } from 'mobx';
import { observer, inject } from 'mobx-react';
import Flex from 'components/Flex';
import styled from 'styled-components';
import { color, fontWeight } from 'styles/constants';
import SidebarLink from './SidebarLink';
import DropToImport from 'components/DropToImport';
import Icon from 'components/Icon';
import CollectionMenu from 'menus/CollectionMenu';
import CollectionsStore from 'stores/CollectionsStore';
import UiStore from 'stores/UiStore';
import Document from 'models/Document';
import { type NavigationNode } from 'types';
type Props = {
history: Object,
collections: CollectionsStore,
activeDocument: ?Document,
onCreateCollection: Function,
ui: UiStore,
};
@observer class SidebarCollections extends React.PureComponent {
props: Props;
render() {
const { history, collections, activeDocument, ui } = this.props;
return (
{collections.orderedData.map(collection => (
))}
{collections.isLoaded &&
Add new collection
}
);
}
}
@observer class CollectionLink extends React.Component {
dropzoneRef;
@observable menuOpen = false;
handleImport = () => {
this.dropzoneRef.open();
};
render() {
const { history, collection, activeDocument, ui } = this.props;
return (
(this.dropzoneRef = ref)}
>
{collection.name}
(this.menuOpen = true)}
onClose={() => (this.menuOpen = false)}
onImport={this.handleImport}
open={this.menuOpen}
/>
{collection.id === ui.activeCollectionId &&
{collection.documents.map(document => (
))}
}
);
}
}
type DocumentLinkProps = {
document: NavigationNode,
history: Object,
activeDocument: ?Document,
depth: number,
};
const DocumentLink = observer((props: DocumentLinkProps) => {
const { document, activeDocument, depth } = props;
const showChildren =
activeDocument &&
(activeDocument.pathToDocument
.map(entry => entry.id)
.includes(document.id) ||
activeDocument.id === document.id);
return (
0}
expanded={showChildren}
>
{document.title}
{showChildren &&
{document.children &&
document.children.map(childDocument => (
))}
}
);
});
const CollectionAction = styled.a`
color: ${color.slate};
svg { opacity: .75; }
&:hover {
svg { opacity: 1; }
}
`;
const StyledDropToImport = styled(DropToImport)`
${CollectionAction} {
display: ${props => (props.menuOpen ? 'inline' : 'none')};
}
&:hover {
${CollectionAction} {
display: inline;
}
}
`;
const Header = styled(Flex)`
font-size: 11px;
font-weight: ${fontWeight.semiBold};
text-transform: uppercase;
color: ${color.slate};
letter-spacing: 0.04em;
`;
const Children = styled(Flex)`
margin-left: 20px;
`;
export default inject('collections', 'ui')(SidebarCollections);