fix: Deeply nested document breadcrumb menu
This commit is contained in:
parent
5f8956e5c6
commit
f0de382367
|
@ -21,7 +21,7 @@ type Props = {
|
|||
children?: Children,
|
||||
className?: string,
|
||||
style?: Object,
|
||||
leftAlign?: boolean,
|
||||
position?: 'left' | 'right' | 'center',
|
||||
};
|
||||
|
||||
@observer
|
||||
|
@ -44,8 +44,10 @@ class DropdownMenu extends React.Component<Props> {
|
|||
const targetRect = currentTarget.getBoundingClientRect();
|
||||
this.top = targetRect.bottom - bodyRect.top;
|
||||
|
||||
if (this.props.leftAlign) {
|
||||
if (this.props.position === 'left') {
|
||||
this.left = targetRect.left;
|
||||
} else if (this.props.position === 'center') {
|
||||
this.left = targetRect.left + targetRect.width / 2;
|
||||
} else {
|
||||
this.right = bodyRect.width - targetRect.left - targetRect.width;
|
||||
}
|
||||
|
@ -61,7 +63,7 @@ class DropdownMenu extends React.Component<Props> {
|
|||
};
|
||||
|
||||
render() {
|
||||
const { className, label, children } = this.props;
|
||||
const { className, label, position, children } = this.props;
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
|
@ -77,24 +79,28 @@ class DropdownMenu extends React.Component<Props> {
|
|||
{label}
|
||||
</Label>
|
||||
{portal(
|
||||
<Menu
|
||||
onClick={
|
||||
typeof children === 'function'
|
||||
? undefined
|
||||
: ev => {
|
||||
ev.stopPropagation();
|
||||
closePortal();
|
||||
}
|
||||
}
|
||||
style={this.props.style}
|
||||
<Position
|
||||
position={position}
|
||||
top={this.top}
|
||||
left={this.left}
|
||||
right={this.right}
|
||||
>
|
||||
{typeof children === 'function'
|
||||
? children({ closePortal })
|
||||
: children}
|
||||
</Menu>
|
||||
<Menu
|
||||
onClick={
|
||||
typeof children === 'function'
|
||||
? undefined
|
||||
: ev => {
|
||||
ev.stopPropagation();
|
||||
closePortal();
|
||||
}
|
||||
}
|
||||
style={this.props.style}
|
||||
>
|
||||
{typeof children === 'function'
|
||||
? children({ closePortal })
|
||||
: children}
|
||||
</Menu>
|
||||
</Position>
|
||||
)}
|
||||
</React.Fragment>
|
||||
)}
|
||||
|
@ -112,16 +118,19 @@ const Label = styled(Flex).attrs({
|
|||
cursor: pointer;
|
||||
`;
|
||||
|
||||
const Menu = styled.div`
|
||||
animation: ${fadeAndScaleIn} 200ms ease;
|
||||
transform-origin: ${({ left }) => (left !== undefined ? '25%' : '75%')} 0;
|
||||
|
||||
const Position = styled.div`
|
||||
position: absolute;
|
||||
${({ left }) => (left !== undefined ? `left: ${left}px` : '')};
|
||||
${({ right }) => (right !== undefined ? `right: ${right}px` : '')};
|
||||
top: ${({ top }) => top}px;
|
||||
z-index: 1000;
|
||||
transform: ${props =>
|
||||
props.position === 'center' ? 'translateX(-50%)' : 'initial'};
|
||||
`;
|
||||
|
||||
const Menu = styled.div`
|
||||
animation: ${fadeAndScaleIn} 200ms ease;
|
||||
transform-origin: ${props => (props.left !== undefined ? '25%' : '75%')} 0;
|
||||
background: ${props => props.theme.menuBackground};
|
||||
border-radius: 2px;
|
||||
padding: 0.5em 0;
|
||||
|
|
|
@ -79,7 +79,7 @@ const SearchFilter = props => {
|
|||
{props.label}
|
||||
</StyledButton>
|
||||
}
|
||||
leftAlign
|
||||
position="left"
|
||||
>
|
||||
{({ closePortal }) => (
|
||||
<MaxHeightScrollable>
|
||||
|
|
|
@ -4,12 +4,18 @@ import { observer, inject } from 'mobx-react';
|
|||
import breakpoint from 'styled-components-breakpoint';
|
||||
import styled from 'styled-components';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { CollectionIcon, PrivateCollectionIcon, GoToIcon } from 'outline-icons';
|
||||
import {
|
||||
CollectionIcon,
|
||||
PrivateCollectionIcon,
|
||||
GoToIcon,
|
||||
MoreIcon,
|
||||
} from 'outline-icons';
|
||||
|
||||
import Document from 'models/Document';
|
||||
import CollectionsStore from 'stores/CollectionsStore';
|
||||
import { collectionUrl } from 'utils/routeHelpers';
|
||||
import Flex from 'shared/components/Flex';
|
||||
import BreadcrumbMenu from './BreadcrumbMenu';
|
||||
|
||||
type Props = {
|
||||
document: Document,
|
||||
|
@ -37,6 +43,10 @@ const Breadcrumb = observer(({ document, collections, onlyText }: Props) => {
|
|||
);
|
||||
}
|
||||
|
||||
const isNestedDocument = path.length > 1;
|
||||
const lastPath = path.length ? path[path.length - 1] : undefined;
|
||||
const menuPath = isNestedDocument ? path.slice(0, -1) : [];
|
||||
|
||||
return (
|
||||
<Wrapper justify="flex-start" align="center">
|
||||
<CollectionName to={collectionUrl(collection.id)}>
|
||||
|
@ -47,14 +57,19 @@ const Breadcrumb = observer(({ document, collections, onlyText }: Props) => {
|
|||
)}{' '}
|
||||
<span>{collection.name}</span>
|
||||
</CollectionName>
|
||||
{path.map(n => (
|
||||
<React.Fragment key={n.id}>
|
||||
{isNestedDocument && (
|
||||
<React.Fragment>
|
||||
<Slash /> <BreadcrumbMenu label={<Overflow />} path={menuPath} />
|
||||
</React.Fragment>
|
||||
)}
|
||||
{lastPath && (
|
||||
<React.Fragment>
|
||||
<Slash />{' '}
|
||||
<Crumb to={n.url} title={n.title}>
|
||||
{n.title}
|
||||
<Crumb to={lastPath.url} title={lastPath.title}>
|
||||
{lastPath.title}
|
||||
</Crumb>
|
||||
</React.Fragment>
|
||||
))}
|
||||
)}
|
||||
</Wrapper>
|
||||
);
|
||||
});
|
||||
|
@ -80,6 +95,17 @@ const Slash = styled(GoToIcon)`
|
|||
opacity: 0.25;
|
||||
`;
|
||||
|
||||
const Overflow = styled(MoreIcon)`
|
||||
flex-shrink: 0;
|
||||
opacity: 0.25;
|
||||
transition: opacity 100ms ease-in-out;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
opacity: 1;
|
||||
}
|
||||
`;
|
||||
|
||||
const Crumb = styled(Link)`
|
||||
color: ${props => props.theme.text};
|
||||
font-size: 15px;
|
||||
|
|
|
@ -0,0 +1,25 @@
|
|||
// @flow
|
||||
import * as React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu';
|
||||
|
||||
type Props = {
|
||||
label: React.Node,
|
||||
path: Array<any>,
|
||||
};
|
||||
|
||||
export default class BreadcrumbMenu extends React.Component<Props> {
|
||||
render() {
|
||||
const { path } = this.props;
|
||||
|
||||
return (
|
||||
<DropdownMenu label={this.props.label} position="center">
|
||||
{path.map(item => (
|
||||
<DropdownMenuItem as={Link} to={item.url} key={item.id}>
|
||||
{item.title}
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenu>
|
||||
);
|
||||
}
|
||||
}
|
Reference in New Issue