133 lines
3.4 KiB
JavaScript
133 lines
3.4 KiB
JavaScript
import React from 'react';
|
|
import { Link } from 'react-router';
|
|
import { observer } from 'mobx-react';
|
|
|
|
import store from './DocumentSceneStore';
|
|
|
|
import Layout, { HeaderAction } from 'components/Layout';
|
|
import AtlasPreviewLoading from 'components/AtlasPreviewLoading';
|
|
import CenteredContent from 'components/CenteredContent';
|
|
import Document from 'components/Document';
|
|
import DropdownMenu, { MenuItem } from 'components/DropdownMenu';
|
|
import Flex from 'components/Flex';
|
|
import Tree from 'components/Tree';
|
|
|
|
import styles from './DocumentScene.scss';
|
|
import classNames from 'classnames/bind';
|
|
const cx = classNames.bind(styles);
|
|
|
|
import treeStyles from 'components/Tree/Tree.scss';
|
|
|
|
@observer
|
|
class DocumentScene extends React.Component {
|
|
state = {
|
|
didScroll: false,
|
|
}
|
|
|
|
componentDidMount = () => {
|
|
const { id } = this.props.routeParams;
|
|
store.fetchDocument(id);
|
|
}
|
|
|
|
componentWillReceiveProps = (nextProps) => {
|
|
// Scroll to anchor after loading, and only once
|
|
const { hash } = this.props.location;
|
|
|
|
if (nextProps.doc && hash && !this.state.didScroll) {
|
|
const name = hash.split('#')[1];
|
|
setTimeout(() => {
|
|
this.setState({ didScroll: true });
|
|
const element = doc.getElementsByName(name)[0];
|
|
if (element) element.scrollIntoView()
|
|
}, 0);
|
|
}
|
|
}
|
|
|
|
onDelete = () => {
|
|
if (confirm("Are you sure you want to delete this document?")) {
|
|
store.deleteDocument();
|
|
};
|
|
}
|
|
|
|
renderNode = (node) => {
|
|
return (
|
|
<span className={ treeStyles.nodeLabel } onClick={this.onClickNode.bind(null, node)}>
|
|
{node.module.name}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
// onClickNode = (node) => {
|
|
// this.setState({
|
|
// active: node
|
|
// });
|
|
// }
|
|
|
|
// handleChange = (tree) => {
|
|
// this.setState({
|
|
// tree: tree
|
|
// });
|
|
// }
|
|
|
|
render() {
|
|
const doc = store.document;
|
|
let title;
|
|
let titleText;
|
|
let actions;
|
|
if (doc) {
|
|
actions = (
|
|
<div className={ styles.actions }>
|
|
<HeaderAction>
|
|
<Link to={ `/documents/${doc.id}/edit` }>Edit</Link>
|
|
</HeaderAction>
|
|
<DropdownMenu label="More">
|
|
<MenuItem onClick={ this.onDelete }>Delete</MenuItem>
|
|
</DropdownMenu>
|
|
</div>
|
|
);
|
|
title = (
|
|
<span>
|
|
<Link to={ `/atlas/${doc.atlas.id}` }>{doc.atlas.name}</Link>
|
|
{ ` / ${doc.title}` }
|
|
</span>
|
|
);
|
|
titleText = `${doc.atlas.name} - ${doc.title}`;
|
|
}
|
|
|
|
return (
|
|
<Layout
|
|
title={ title }
|
|
titleText={ titleText }
|
|
actions={ actions }
|
|
>
|
|
{ store.isFetching ? (
|
|
<CenteredContent>
|
|
<AtlasPreviewLoading />
|
|
</CenteredContent>
|
|
) : (
|
|
<Flex flex={ true }>
|
|
{ doc.atlas.type === 'atlas' ? (
|
|
<div className={ styles.sidebar }>
|
|
<Tree
|
|
paddingLeft={20}
|
|
tree={ doc.atlas.structure }
|
|
onChange={this.handleChange}
|
|
isNodeCollapsed={this.isNodeCollapsed}
|
|
renderNode={this.renderNode}
|
|
/>
|
|
</div>
|
|
) : null }
|
|
<Flex flex={ true } justify={ 'center' }>
|
|
<CenteredContent>
|
|
<Document document={ doc } />
|
|
</CenteredContent>
|
|
</Flex>
|
|
</Flex>
|
|
) }
|
|
</Layout>
|
|
);
|
|
}
|
|
};
|
|
|
|
export default DocumentScene;
|