Separate Layout component
This commit is contained in:
Tom Moor
277
app/components/Sidebar/components/Collections.js
Normal file
277
app/components/Sidebar/components/Collections.js
Normal file
@@ -0,0 +1,277 @@
|
||||
// @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, fontWeight } from 'shared/styles/constants';
|
||||
|
||||
import SidebarLink from './SidebarLink';
|
||||
import DropToImport from 'components/DropToImport';
|
||||
import PlusIcon from 'components/Icon/PlusIcon';
|
||||
import CollectionIcon from 'components/Icon/CollectionIcon';
|
||||
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,
|
||||
activeDocumentRef: HTMLElement => void,
|
||||
ui: UiStore,
|
||||
};
|
||||
|
||||
@observer
|
||||
class Collections extends Component {
|
||||
props: Props;
|
||||
|
||||
render() {
|
||||
const {
|
||||
history,
|
||||
location,
|
||||
collections,
|
||||
ui,
|
||||
activeDocumentRef,
|
||||
documents,
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<Flex column>
|
||||
<Header>Collections</Header>
|
||||
{collections.orderedData.map(collection => (
|
||||
<CollectionLink
|
||||
key={collection.id}
|
||||
history={history}
|
||||
location={location}
|
||||
collection={collection}
|
||||
activeDocument={documents.active}
|
||||
activeDocumentRef={activeDocumentRef}
|
||||
prefetchDocument={documents.prefetchDocument}
|
||||
ui={ui}
|
||||
/>
|
||||
))}
|
||||
|
||||
{collections.isLoaded && (
|
||||
<SidebarLink
|
||||
onClick={this.props.onCreateCollection}
|
||||
icon={<PlusIcon />}
|
||||
>
|
||||
New collection…
|
||||
</SidebarLink>
|
||||
)}
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
type CollectionLinkProps = {
|
||||
history: Object,
|
||||
collection: Collection,
|
||||
ui: UiStore,
|
||||
activeDocument: ?Document,
|
||||
activeDocumentRef: HTMLElement => void,
|
||||
prefetchDocument: (id: string) => Promise<void>,
|
||||
};
|
||||
|
||||
@observer
|
||||
class CollectionLink extends Component {
|
||||
props: CollectionLinkProps;
|
||||
dropzoneRef;
|
||||
|
||||
@observable menuOpen = false;
|
||||
|
||||
handleImport = () => {
|
||||
this.dropzoneRef.open();
|
||||
};
|
||||
|
||||
render() {
|
||||
const {
|
||||
history,
|
||||
collection,
|
||||
activeDocument,
|
||||
ui,
|
||||
activeDocumentRef,
|
||||
prefetchDocument,
|
||||
} = this.props;
|
||||
const expanded = collection.id === ui.activeCollectionId;
|
||||
|
||||
return (
|
||||
<StyledDropToImport
|
||||
key={collection.id}
|
||||
history={history}
|
||||
collectionId={collection.id}
|
||||
activeClassName="activeDropZone"
|
||||
menuOpen={this.menuOpen}
|
||||
dropzoneRef={ref => (this.dropzoneRef = ref)}
|
||||
>
|
||||
<SidebarLink
|
||||
key={collection.id}
|
||||
to={collection.url}
|
||||
icon={<CollectionIcon expanded={expanded} color={collection.color} />}
|
||||
iconColor={collection.color}
|
||||
>
|
||||
<CollectionName justify="space-between">
|
||||
{collection.name}
|
||||
|
||||
<CollectionAction>
|
||||
<CollectionMenu
|
||||
history={history}
|
||||
collection={collection}
|
||||
onOpen={() => (this.menuOpen = true)}
|
||||
onClose={() => (this.menuOpen = false)}
|
||||
onImport={this.handleImport}
|
||||
open={this.menuOpen}
|
||||
/>
|
||||
</CollectionAction>
|
||||
</CollectionName>
|
||||
|
||||
{expanded && (
|
||||
<Children column>
|
||||
{collection.documents.map(document => (
|
||||
<DocumentLink
|
||||
key={document.id}
|
||||
activeDocumentRef={activeDocumentRef}
|
||||
history={history}
|
||||
document={document}
|
||||
activeDocument={activeDocument}
|
||||
prefetchDocument={prefetchDocument}
|
||||
depth={0}
|
||||
/>
|
||||
))}
|
||||
</Children>
|
||||
)}
|
||||
</SidebarLink>
|
||||
</StyledDropToImport>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
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,
|
||||
}: 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 (
|
||||
<Flex
|
||||
column
|
||||
key={document.id}
|
||||
innerRef={isActiveDocument ? activeDocumentRef : undefined}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
>
|
||||
<DropToImport
|
||||
history={history}
|
||||
documentId={document.id}
|
||||
activeClassName="activeDropZone"
|
||||
>
|
||||
<SidebarLink
|
||||
to={document.url}
|
||||
expand={showChildren}
|
||||
expandedContent={
|
||||
document.children.length ? (
|
||||
<Children column>
|
||||
{document.children.map(childDocument => (
|
||||
<DocumentLink
|
||||
key={childDocument.id}
|
||||
history={history}
|
||||
document={childDocument}
|
||||
activeDocument={activeDocument}
|
||||
prefetchDocument={prefetchDocument}
|
||||
depth={depth + 1}
|
||||
/>
|
||||
))}
|
||||
</Children>
|
||||
) : (
|
||||
undefined
|
||||
)
|
||||
}
|
||||
>
|
||||
{document.title}
|
||||
</SidebarLink>
|
||||
</DropToImport>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
const CollectionName = styled(Flex)`
|
||||
padding: 0 0 4px;
|
||||
`;
|
||||
|
||||
const CollectionAction = styled.a`
|
||||
position: absolute;
|
||||
right: 0;
|
||||
color: ${color.slate};
|
||||
svg {
|
||||
opacity: 0.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: 12px;
|
||||
font-weight: ${fontWeight.semiBold};
|
||||
text-transform: uppercase;
|
||||
color: ${color.slate};
|
||||
letter-spacing: 0.04em;
|
||||
margin-bottom: 4px;
|
||||
`;
|
||||
|
||||
const Children = styled(Flex)`
|
||||
margin-left: 12px;
|
||||
`;
|
||||
|
||||
export default inject('collections', 'ui', 'documents')(Collections);
|
||||
60
app/components/Sidebar/components/HeaderBlock.js
Normal file
60
app/components/Sidebar/components/HeaderBlock.js
Normal file
@@ -0,0 +1,60 @@
|
||||
// @flow
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { color } from 'shared/styles/constants';
|
||||
import type { User, Team } from 'types';
|
||||
import Flex from 'shared/components/Flex';
|
||||
|
||||
type Props = {
|
||||
user: User,
|
||||
team: Team,
|
||||
children?: React$Element<any>,
|
||||
};
|
||||
|
||||
function HeaderBlock({ user, team, children }: Props) {
|
||||
return (
|
||||
<Header justify="space-between" align="center">
|
||||
<Flex align="flex-start" column>
|
||||
<TeamName>{team.name}</TeamName>
|
||||
<UserName>{user.name}</UserName>
|
||||
</Flex>
|
||||
{children}
|
||||
</Header>
|
||||
);
|
||||
}
|
||||
|
||||
const UserName = styled.div`
|
||||
font-size: 13px;
|
||||
`;
|
||||
|
||||
const TeamName = styled.div`
|
||||
font-weight: bold;
|
||||
color: ${color.text};
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
`;
|
||||
|
||||
const Header = styled(Flex)`
|
||||
flex-shrink: 0;
|
||||
padding: 16px 24px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
|
||||
&:active,
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
left: 24px;
|
||||
right: 24px;
|
||||
background: rgba(0, 0, 0, 0.075);
|
||||
height: 1px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
export default HeaderBlock;
|
||||
112
app/components/Sidebar/components/SidebarLink.js
Normal file
112
app/components/Sidebar/components/SidebarLink.js
Normal file
@@ -0,0 +1,112 @@
|
||||
// @flow
|
||||
import React, { Component } from 'react';
|
||||
import { observable, action } from 'mobx';
|
||||
import { observer } from 'mobx-react';
|
||||
import { NavLink } from 'react-router-dom';
|
||||
import { color, fontWeight } from 'shared/styles/constants';
|
||||
import styled from 'styled-components';
|
||||
import Flex from 'shared/components/Flex';
|
||||
import CollapsedIcon from 'components/Icon/CollapsedIcon';
|
||||
|
||||
const activeStyle = {
|
||||
color: color.black,
|
||||
fontWeight: fontWeight.medium,
|
||||
};
|
||||
|
||||
const StyledGoTo = styled(CollapsedIcon)`
|
||||
margin-bottom: -4px;
|
||||
margin-left: 1px;
|
||||
margin-right: -3px;
|
||||
${({ expanded }) => !expanded && 'transform: rotate(-90deg);'};
|
||||
`;
|
||||
|
||||
const IconWrapper = styled.span`
|
||||
margin-left: -4px;
|
||||
margin-right: 4px;
|
||||
height: 24px;
|
||||
`;
|
||||
|
||||
const StyledNavLink = styled(NavLink)`
|
||||
display: flex;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding: 4px 0;
|
||||
margin-left: ${({ hasChildren }) => (hasChildren ? '-20px;' : '0')};
|
||||
color: ${color.slateDark};
|
||||
font-size: 15px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: ${color.text};
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledDiv = StyledNavLink.withComponent('div');
|
||||
|
||||
type Props = {
|
||||
to?: string,
|
||||
onClick?: SyntheticEvent => *,
|
||||
children?: React$Element<*>,
|
||||
icon?: React$Element<*>,
|
||||
expand?: boolean,
|
||||
expandedContent?: React$Element<*>,
|
||||
iconColor?: string,
|
||||
};
|
||||
|
||||
@observer
|
||||
class SidebarLink extends Component {
|
||||
props: Props;
|
||||
@observable expanded: boolean = false;
|
||||
|
||||
componentDidMount() {
|
||||
if (this.props.expand) this.handleExpand();
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps: Props) {
|
||||
if (nextProps.expand) this.handleExpand();
|
||||
}
|
||||
|
||||
@action
|
||||
handleClick = (event: SyntheticEvent) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
this.expanded = !this.expanded;
|
||||
};
|
||||
|
||||
@action
|
||||
handleExpand = () => {
|
||||
this.expanded = true;
|
||||
};
|
||||
|
||||
render() {
|
||||
const { icon, children, onClick, to, expandedContent } = this.props;
|
||||
const Component = to ? StyledNavLink : StyledDiv;
|
||||
|
||||
return (
|
||||
<Flex column>
|
||||
<Component
|
||||
activeStyle={activeStyle}
|
||||
hasChildren={expandedContent}
|
||||
onClick={onClick}
|
||||
to={to}
|
||||
exact
|
||||
>
|
||||
{icon && <IconWrapper>{icon}</IconWrapper>}
|
||||
{expandedContent && (
|
||||
<StyledGoTo expanded={this.expanded} onClick={this.handleClick} />
|
||||
)}
|
||||
<Content onClick={this.handleExpand}>{children}</Content>
|
||||
</Component>
|
||||
{this.expanded && expandedContent}
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const Content = styled.div`
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
export default SidebarLink;
|
||||
Reference in New Issue
Block a user