This commit is contained in:
Tom Moor
2017-10-15 11:42:03 -07:00
parent 4dacef7f1e
commit e81ca4dde1
4 changed files with 87 additions and 56 deletions

View File

@ -35,16 +35,12 @@ type Props = {
title?: ?React.Element<any>, title?: ?React.Element<any>,
auth: AuthStore, auth: AuthStore,
ui: UiStore, ui: UiStore,
search: ?boolean,
notifications?: React.Element<any>, notifications?: React.Element<any>,
}; };
@observer class Layout extends React.Component { @observer class Layout extends React.Component {
props: Props; props: Props;
scrollable: ?HTMLDivElement;
static defaultProps = {
search: true,
};
@keydown(['/', 't']) @keydown(['/', 't'])
goToSearch(ev) { goToSearch(ev) {
@ -81,6 +77,20 @@ type Props = {
this.props.ui.setActiveModal('collection-edit'); this.props.ui.setActiveModal('collection-edit');
}; };
setScrollableRef = ref => {
this.scrollable = ref;
};
scrollToActiveDocument = ref => {
const scrollable = this.scrollable;
if (!ref || !scrollable) return;
const container = scrollable.getBoundingClientRect();
const bounds = ref.getBoundingClientRect();
const scrollTop = bounds.top + container.top;
scrollable.scrollTop = scrollTop;
};
render() { render() {
const { auth, documents, ui } = this.props; const { auth, documents, ui } = this.props;
const { user, team } = auth; const { user, team } = auth;
@ -115,7 +125,7 @@ type Props = {
/> />
<Flex auto column> <Flex auto column>
<Scrollable> <Scrollable innerRef={this.setScrollableRef}>
<LinkSection> <LinkSection>
<SidebarLink to="/dashboard"> <SidebarLink to="/dashboard">
<Icon type="Home" /> Home <Icon type="Home" /> Home
@ -132,6 +142,7 @@ type Props = {
history={this.props.history} history={this.props.history}
activeDocument={documents.active} activeDocument={documents.active}
onCreateCollection={this.handleCreateCollection} onCreateCollection={this.handleCreateCollection}
activeDocumentRef={this.scrollToActiveDocument}
/> />
</LinkSection> </LinkSection>
</Scrollable> </Scrollable>

View File

@ -20,7 +20,8 @@ type Props = {
history: Object, history: Object,
collections: CollectionsStore, collections: CollectionsStore,
activeDocument: ?Document, activeDocument: ?Document,
onCreateCollection: Function, onCreateCollection: () => void,
activeDocumentRef: HTMLElement => void,
ui: UiStore, ui: UiStore,
}; };
@ -28,7 +29,13 @@ type Props = {
props: Props; props: Props;
render() { render() {
const { history, collections, activeDocument, ui } = this.props; const {
history,
collections,
activeDocument,
ui,
activeDocumentRef,
} = this.props;
return ( return (
<Flex column> <Flex column>
@ -39,6 +46,7 @@ type Props = {
history={history} history={history}
collection={collection} collection={collection}
activeDocument={activeDocument} activeDocument={activeDocument}
activeDocumentRef={activeDocumentRef}
ui={ui} ui={ui}
/> />
))} ))}
@ -62,7 +70,13 @@ type Props = {
}; };
render() { render() {
const { history, collection, activeDocument, ui } = this.props; const {
history,
collection,
activeDocument,
ui,
activeDocumentRef,
} = this.props;
return ( return (
<StyledDropToImport <StyledDropToImport
@ -94,6 +108,7 @@ type Props = {
{collection.documents.map(document => ( {collection.documents.map(document => (
<DocumentLink <DocumentLink
key={document.id} key={document.id}
activeDocumentRef={activeDocumentRef}
history={history} history={history}
document={document} document={document}
activeDocument={activeDocument} activeDocument={activeDocument}
@ -111,21 +126,32 @@ type DocumentLinkProps = {
document: NavigationNode, document: NavigationNode,
history: Object, history: Object,
activeDocument: ?Document, activeDocument: ?Document,
activeDocumentRef: HTMLElement => void,
depth: number, depth: number,
}; };
const DocumentLink = observer((props: DocumentLinkProps) => { const DocumentLink = observer(
const { document, activeDocument, depth } = props; ({
document,
activeDocument,
activeDocumentRef,
depth,
}: DocumentLinkProps) => {
const isActiveDocument =
activeDocument && activeDocument.id === document.id;
const showChildren = const showChildren =
activeDocument && activeDocument &&
(activeDocument.pathToDocument (activeDocument.pathToDocument
.map(entry => entry.id) .map(entry => entry.id)
.includes(document.id) || .includes(document.id) ||
activeDocument.id === document.id); isActiveDocument);
return ( return (
<Flex column key={document.id}> <Flex
column
key={document.id}
innerRef={isActiveDocument ? activeDocumentRef : undefined}
>
<DropToImport <DropToImport
history={history} history={history}
documentId={document.id} documentId={document.id}
@ -155,7 +181,8 @@ const DocumentLink = observer((props: DocumentLinkProps) => {
</Children>} </Children>}
</Flex> </Flex>
); );
}); }
);
const CollectionAction = styled.a` const CollectionAction = styled.a`
color: ${color.slate}; color: ${color.slate};

View File

@ -20,7 +20,7 @@ const styleComponent = component => styled(component)`
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
margin: 5px 0; padding: 5px 0;
margin-left: ${({ hasChildren }) => (hasChildren ? '-20px;' : '0')}; margin-left: ${({ hasChildren }) => (hasChildren ? '-20px;' : '0')};
color: ${color.slateDark}; color: ${color.slateDark};
font-size: 15px; font-size: 15px;

View File

@ -1,18 +1,11 @@
// @flow // @flow
import React, { Component } from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
const Scroll = styled.div` const Scrollable = styled.div`
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
`; `;
class Scrollable extends Component {
render() {
return <Scroll {...this.props} />;
}
}
export default Scrollable; export default Scrollable;