Allow toggling sidebar links
This commit is contained in:
parent
4b6e8f5fb8
commit
28fa5f2e35
|
@ -9,6 +9,7 @@ export type Props = {
|
|||
primary?: boolean,
|
||||
color?: string,
|
||||
size?: number,
|
||||
onClick?: Function,
|
||||
};
|
||||
|
||||
type BaseProps = {
|
||||
|
@ -18,6 +19,7 @@ type BaseProps = {
|
|||
export default function Icon({
|
||||
children,
|
||||
className,
|
||||
onClick,
|
||||
...rest
|
||||
}: Props & BaseProps) {
|
||||
const size = rest.size ? rest.size + 'px' : '24px';
|
||||
|
@ -36,6 +38,7 @@ export default function Icon({
|
|||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={className}
|
||||
onClick={onClick}
|
||||
>
|
||||
{children}
|
||||
</svg>
|
||||
|
|
|
@ -182,27 +182,27 @@ const DocumentLink = observer(
|
|||
>
|
||||
<SidebarLink
|
||||
to={document.url}
|
||||
hasChildren={document.children.length > 0}
|
||||
expanded={showChildren}
|
||||
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>
|
||||
|
||||
{showChildren &&
|
||||
<Children column>
|
||||
{document.children &&
|
||||
document.children.map(childDocument => (
|
||||
<DocumentLink
|
||||
key={childDocument.id}
|
||||
history={history}
|
||||
document={childDocument}
|
||||
activeDocument={activeDocument}
|
||||
prefetchDocument={prefetchDocument}
|
||||
depth={depth + 1}
|
||||
/>
|
||||
))}
|
||||
</Children>}
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,5 +1,7 @@
|
|||
// @flow
|
||||
import React from 'react';
|
||||
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 'styles/constants';
|
||||
import styled from 'styled-components';
|
||||
|
@ -54,22 +56,54 @@ type Props = {
|
|||
onClick?: SyntheticEvent => *,
|
||||
children?: React$Element<*>,
|
||||
icon?: React$Element<*>,
|
||||
hasChildren?: boolean,
|
||||
expanded?: boolean,
|
||||
expand?: boolean,
|
||||
expandedContent?: React$Element<*>,
|
||||
};
|
||||
|
||||
function SidebarLink({ icon, children, expanded, ...rest }: Props) {
|
||||
const Component = styleComponent(rest.to ? NavLink : StyleableDiv);
|
||||
@observer class SidebarLink extends Component {
|
||||
props: Props;
|
||||
|
||||
return (
|
||||
<Flex>
|
||||
<Component exact activeStyle={activeStyle} {...rest}>
|
||||
{icon && <IconWrapper>{icon}</IconWrapper>}
|
||||
{rest.hasChildren && <StyledGoTo expanded={expanded} />}
|
||||
<Content>{children}</Content>
|
||||
</Component>
|
||||
</Flex>
|
||||
);
|
||||
componentDidMount() {
|
||||
if (this.props.expand) this.handleExpand();
|
||||
}
|
||||
|
||||
componentDidReceiveProps(nextProps: Props) {
|
||||
if (nextProps.expand) this.handleExpand();
|
||||
}
|
||||
|
||||
@observable expanded: boolean = false;
|
||||
|
||||
@action handleClick = (event: SyntheticEvent) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
this.expanded = !this.expanded;
|
||||
};
|
||||
|
||||
@action handleExpand = () => {
|
||||
this.expanded = true;
|
||||
};
|
||||
|
||||
render() {
|
||||
const { icon, children, expandedContent, ...rest } = this.props;
|
||||
const Component = styleComponent(rest.to ? NavLink : StyleableDiv);
|
||||
|
||||
return (
|
||||
<Flex column>
|
||||
<Component
|
||||
exact
|
||||
activeStyle={activeStyle}
|
||||
hasChildren={expandedContent}
|
||||
{...rest}
|
||||
>
|
||||
{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`
|
||||
|
|
Reference in New Issue