coop-cloud-chaos-patchs/outline
coop-cloud-chaos-patchs
/
outline
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: Keyboard accessible context menus (#1768) 

- Makes menus fully accessible and keyboard driven
- Currently adds 2.8% to initial bundle size due to the inclusion of Reakit and its dependency, popperjs.
- Converts all menus to functional components
- Remove old custom menu system
- Various layout and flow improvements around the menus

closes #1766
This commit is contained in:
Tom Moor 2021-01-13 22:00:25 -08:00 committed by GitHub
parent 47369dd968
commit e8b7782f5e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
54 changed files with 1788 additions and 1881 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.flowconfig
View File

@ -32,6 +32,7 @@ module.file_ext=.json
esproposal.decorators=ignore
esproposal.class_static_fields=enable
esproposal.class_instance_fields=enable
esproposal.optional_chaining=enable
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue

5
app/components/Actions.js
View File

@ -11,11 +11,6 @@ export const Action = styled(Flex)`
font-size: 15px;
flex-shrink: 0;
a {
color: ${(props) => props.theme.text};
height: 24px;
}
&:empty {
display: none;
}

36
app/components/Breadcrumb.js
View File

@ -4,7 +4,6 @@ import {
ArchiveIcon,
EditIcon,
GoToIcon,
MoreIcon,
PadlockIcon,
ShapesIcon,
TrashIcon,
@ -14,18 +13,15 @@ import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import styled from "styled-components";
import breakpoint from "styled-components-breakpoint";
import CollectionsStore from "stores/CollectionsStore";
import Document from "models/Document";
import CollectionIcon from "components/CollectionIcon";
import Flex from "components/Flex";
import BreadcrumbMenu from "./BreadcrumbMenu";
import useStores from "hooks/useStores";
import BreadcrumbMenu from "menus/BreadcrumbMenu";
import { collectionUrl } from "utils/routeHelpers";
type Props = {
document: Document,
collections: CollectionsStore,
onlyText: boolean,
};
@ -133,7 +129,7 @@ const Breadcrumb = ({ document, onlyText }: Props) => {
</CollectionName>
{isNestedDocument && (
<>
<Slash /> <BreadcrumbMenu label={<Overflow />} path={menuPath} />
<Slash /> <BreadcrumbMenu path={menuPath} />
</>
)}
{lastPath && (
@ -148,6 +144,11 @@ const Breadcrumb = ({ document, onlyText }: Props) => {
);
};
export const Slash = styled(GoToIcon)`
flex-shrink: 0;
fill: ${(props) => props.theme.divider};
`;
const Wrapper = styled(Flex)`
display: none;
@ -168,22 +169,6 @@ const SmallSlash = styled(GoToIcon)`
opacity: 0.25;
`;
export const Slash = styled(GoToIcon)`
flex-shrink: 0;
fill: ${(props) => props.theme.divider};
`;
const Overflow = styled(MoreIcon)`
flex-shrink: 0;
transition: opacity 100ms ease-in-out;
fill: ${(props) => props.theme.divider};
&:active,
&:hover {
fill: ${(props) => props.theme.text};
}
`;
const Crumb = styled(Link)`
color: ${(props) => props.theme.text};
font-size: 15px;
@ -199,12 +184,17 @@ const Crumb = styled(Link)`
const CollectionName = styled(Link)`
display: flex;
flex-shrink: 0;
flex-shrink: 1;
color: ${(props) => props.theme.text};
font-size: 15px;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
min-width: 0;
svg {
flex-shrink: 0;
}
`;
export default observer(Breadcrumb);

22
app/components/BreadcrumbMenu.js
View File

@ -1,22 +0,0 @@
// @flow
import * as React from "react";
import { DropdownMenu } from "components/DropdownMenu";
import DropdownMenuItems from "components/DropdownMenu/DropdownMenuItems";
type Props = {
label: React.Node,
path: Array<any>,
};
export default function BreadcrumbMenu({ label, path }: Props) {
return (
<DropdownMenu label={label} position="center">
<DropdownMenuItems
items={path.map((item) => ({
title: item.title,
to: item.url,
}))}
/>
</DropdownMenu>
);
}

29
app/components/Button.js
View File

@ -22,9 +22,13 @@ const RealButton = styled.button`
cursor: pointer;
user-select: none;
svg {
fill: ${(props) => props.iconColor || props.theme.buttonText};
}
${(props) =>
!props.borderOnHover &&
`
svg {
fill: ${props.iconColor || props.theme.buttonText};
}
`}
&::-moz-focus-inner {
padding: 0;
@ -42,7 +46,7 @@ const RealButton = styled.button`
}
${(props) =>
props.neutral &&
props.$neutral &&
`
background: ${props.theme.buttonNeutralBackground};
color: ${props.theme.buttonNeutralText};
@ -52,9 +56,14 @@ const RealButton = styled.button`
: `rgba(0, 0, 0, 0.07) 0px 1px 2px, ${props.theme.buttonNeutralBorder} 0 0 0 1px inset`
};
svg {
${
props.borderOnHover
? ""
: `svg {
fill: ${props.iconColor || props.theme.buttonNeutralText};
}`
}
&:hover {
background: ${darken(0.05, props.theme.buttonNeutralBackground)};
@ -72,9 +81,9 @@ const RealButton = styled.button`
background: ${props.theme.danger};
color: ${props.theme.white};
&:hover {
background: ${darken(0.05, props.theme.danger)};
}
&:hover {
background: ${darken(0.05, props.theme.danger)};
}
`};
`;
@ -108,6 +117,7 @@ export type Props = {
children?: React.Node,
innerRef?: React.ElementRef<any>,
disclosure?: boolean,
neutral?: boolean,
fullwidth?: boolean,
borderOnHover?: boolean,
};
@ -119,13 +129,14 @@ function Button({
value,
disclosure,
innerRef,
neutral,
...rest
}: Props) {
const hasText = children !== undefined || value !== undefined;
const hasIcon = icon !== undefined;
return (
<RealButton type={type} ref={innerRef} {...rest}>
<RealButton type={type} ref={innerRef} $neutral={neutral} {...rest}>
<Inner hasIcon={hasIcon} hasText={hasText} disclosure={disclosure}>
{hasIcon && icon}
{hasText && <Label hasIcon={hasIcon}>{children || value}</Label>}

13
app/components/ContextMenu/Header.js Normal file
View File

@ -0,0 +1,13 @@
// @flow
import styled from "styled-components";
const Header = styled.h3`
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
color: ${(props) => props.theme.sidebarText};
letter-spacing: 0.04em;
margin: 1em 12px 0.5em;
`;
export default Header;

38
app/components/DropdownMenu/DropdownMenuItem.js → app/components/ContextMenu/MenuItem.js
View File

@ -1,6 +1,7 @@
// @flow
import { CheckmarkIcon } from "outline-icons";
import * as React from "react";
import { MenuItem as BaseMenuItem } from "reakit/Menu";
import styled from "styled-components";
type Props = {
@ -8,31 +9,35 @@ type Props = {
children?: React.Node,
selected?: boolean,
disabled?: boolean,
as?: string | React.ComponentType<*>,
};
const DropdownMenuItem = ({
const MenuItem = ({
onClick,
children,
selected,
disabled,
as,
...rest
}: Props) => {
return (
<MenuItem
<BaseMenuItem
onClick={disabled ? undefined : onClick}
disabled={disabled}
role="menuitem"
tabIndex="-1"
{...rest}
>
{selected !== undefined && (
<>
{selected ? <CheckmarkIcon /> : <Spacer />}
&nbsp;
</>
{(props) => (
<MenuAnchor as={onClick ? "button" : as} {...props}>
{selected !== undefined && (
<>
{selected ? <CheckmarkIcon /> : <Spacer />}
&nbsp;
</>
)}
{children}
</MenuAnchor>
)}
{children}
</MenuItem>
</BaseMenuItem>
);
};
@ -41,13 +46,14 @@ const Spacer = styled.div`
height: 24px;
`;
const MenuItem = styled.a`
export const MenuAnchor = styled.a`
display: flex;
margin: 0;
border: 0;
padding: 6px 12px;
width: 100%;
min-height: 32px;
background: none;
color: ${(props) =>
props.disabled ? props.theme.textTertiary : props.theme.textSecondary};
justify-content: left;
@ -61,6 +67,7 @@ const MenuItem = styled.a`
}
svg {
flex-shrink: 0;
opacity: ${(props) => (props.disabled ? ".5" : 1)};
}
@ -69,7 +76,8 @@ const MenuItem = styled.a`
? "pointer-events: none;"
: `
&:hover {
&:hover,
&.focus-visible {
color: ${props.theme.white};
background: ${props.theme.primary};
box-shadow: none;
@ -87,4 +95,4 @@ const MenuItem = styled.a`
`};
`;
export default DropdownMenuItem;
export default MenuItem;

21
app/components/ContextMenu/OverflowMenuButton.js Normal file
View File

@ -0,0 +1,21 @@
// @flow
import { MoreIcon } from "outline-icons";
import * as React from "react";
import { MenuButton } from "reakit/Menu";
import NudeButton from "components/NudeButton";
export default function OverflowMenuButton({
iconColor,
className,
...rest
}: any) {
return (
<MenuButton {...rest}>
{(props) => (
<NudeButton className={className} {...props}>
<MoreIcon color={iconColor} />
</NudeButton>
)}
</MenuButton>
);
}

16
app/components/ContextMenu/Separator.js Normal file
View File

@ -0,0 +1,16 @@
// @flow
import * as React from "react";
import { MenuSeparator } from "reakit/Menu";
import styled from "styled-components";
export default function Separator(rest: {}) {
return (
<MenuSeparator {...rest}>
{(props) => <HorizontalRule {...props} />}
</MenuSeparator>
);
}
const HorizontalRule = styled.hr`
margin: 0.5em 12px;
`;

81
app/components/DropdownMenu/DropdownMenuItems.js → app/components/ContextMenu/Template.js
View File

@ -1,13 +1,19 @@
// @flow
import { ExpandedIcon } from "outline-icons";
import * as React from "react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import {
useMenuState,
MenuButton,
MenuItem as BaseMenuItem,
} from "reakit/Menu";
import styled from "styled-components";
import Flex from "components/Flex";
import DropdownMenu from "./DropdownMenu";
import DropdownMenuItem from "./DropdownMenuItem";
import MenuItem, { MenuAnchor } from "./MenuItem";
import Separator from "./Separator";
import ContextMenu from ".";
type MenuItem =
type TMenuItem =
| {|
title: React.Node,
to: string,
@ -35,7 +41,7 @@ type MenuItem =
disabled?: boolean,
style?: Object,
hover?: boolean,
items: MenuItem[],
items: TMenuItem[],
|}
| {|
type: "separator",
@ -48,14 +54,35 @@ type MenuItem =
|};
type Props = {|
items: MenuItem[],
items: TMenuItem[],
|};
const Disclosure = styled(ExpandedIcon)`
transform: rotate(270deg);
justify-self: flex-end;
`;
export default function DropdownMenuItems({ items }: Props): React.Node {
const Submenu = React.forwardRef(({ templateItems, title, ...rest }, ref) => {
const { t } = useTranslation();
const menu = useMenuState({ modal: true });
return (
<>
<MenuButton ref={ref} {...menu} {...rest}>
{(props) => (
<MenuAnchor {...props}>
{title} <Disclosure color="currentColor" />
</MenuAnchor>
)}
</MenuButton>
<ContextMenu {...menu} aria-label={t("Submenu")}>
<Template {...menu} items={templateItems} />
</ContextMenu>
</>
);
});
function Template({ items, ...menu }: Props): React.Node {
let filtered = items.filter((item) => item.visible !== false);
// this block literally just trims unneccessary separators
@ -76,69 +103,67 @@ export default function DropdownMenuItems({ items }: Props): React.Node {
return filtered.map((item, index) => {
if (item.to) {
return (
<DropdownMenuItem
<MenuItem
as={Link}
to={item.to}
key={index}
disabled={item.disabled}
selected={item.selected}
{...menu}
>
{item.title}
</DropdownMenuItem>
</MenuItem>
);
}
if (item.href) {
return (
<DropdownMenuItem
<MenuItem
href={item.href}
key={index}
disabled={item.disabled}
selected={item.selected}
target="_blank"
{...menu}
>
{item.title}
</DropdownMenuItem>
</MenuItem>
);
}
if (item.onClick) {
return (
<DropdownMenuItem
<MenuItem
as="button"
onClick={item.onClick}
disabled={item.disabled}
selected={item.selected}
key={index}
{...menu}
>
{item.title}
</DropdownMenuItem>
</MenuItem>
);
}
if (item.items) {
return (
<DropdownMenu
style={item.style}
label={
<DropdownMenuItem disabled={item.disabled}>
<Flex justify="space-between" align="center" auto>
{item.title}
<Disclosure color="currentColor" />
</Flex>
</DropdownMenuItem>
}
hover={item.hover}
<BaseMenuItem
key={index}
>
<DropdownMenuItems items={item.items} />
</DropdownMenu>
as={Submenu}
templateItems={item.items}
title={item.title}
{...menu}
/>
);
}
if (item.type === "separator") {
return <hr key={index} />;
return <Separator key={index} />;
}
return null;
});
}
export default React.memo<Props>(Template);

77
app/components/ContextMenu/index.js Normal file
View File

@ -0,0 +1,77 @@
// @flow
import { rgba } from "polished";
import * as React from "react";
import { Menu } from "reakit/Menu";
import styled from "styled-components";
import { fadeAndScaleIn } from "shared/styles/animations";
import usePrevious from "hooks/usePrevious";
type Props = {|
"aria-label": string,
visible?: boolean,
animating?: boolean,
children: React.Node,
onOpen?: () => void,
onClose?: () => void,
|};
export default function ContextMenu({
children,
onOpen,
onClose,
...rest
}: Props) {
const previousVisible = usePrevious(rest.visible);
React.useEffect(() => {
if (rest.visible && !previousVisible) {
if (onOpen) {
onOpen();
}
}
if (!rest.visible && previousVisible) {
if (onClose) {
onClose();
}
}
}, [onOpen, onClose, previousVisible, rest.visible]);
return (
<Menu {...rest}>
{(props) => (
<Position {...props}>
<Background>
{rest.visible || rest.animating ? children : null}
</Background>
</Position>
)}
</Menu>
);
}
const Position = styled.div`
position: absolute;
z-index: ${(props) => props.theme.depths.menu};
`;
const Background = styled.div`
animation: ${fadeAndScaleIn} 200ms ease;
transform-origin: ${(props) => (props.left !== undefined ? "25%" : "75%")} 0;
background: ${(props) => rgba(props.theme.menuBackground, 0.95)};
border: ${(props) =>
props.theme.menuBorder ? `1px solid ${props.theme.menuBorder}` : "none"};
border-radius: 2px;
padding: 0.5em 0;
min-width: 180px;
overflow: hidden;
overflow-y: auto;
max-height: 75vh;
max-width: 276px;
box-shadow: ${(props) => props.theme.menuShadow};
pointer-events: all;
font-weight: normal;
@media print {
display: none;
}
`;

5
app/components/DocumentHistory/components/Revision.js
View File

@ -1,6 +1,5 @@
// @flow
import format from "date-fns/format";
import { MoreIcon } from "outline-icons";
import * as React from "react";
import { NavLink } from "react-router-dom";
import styled, { withTheme } from "styled-components";
@ -45,9 +44,7 @@ class RevisionListItem extends React.Component<Props> {
<StyledRevisionMenu
document={document}
revision={revision}
label={
<MoreIcon color={selected ? theme.white : theme.textTertiary} />
}
iconColor={selected ? theme.white : theme.textTertiary}
/>
)}
</StyledNavLink>

168
app/components/DocumentListItem.js
View File

@ -3,8 +3,9 @@ import { observer } from "mobx-react";
import { PlusIcon } from "outline-icons";
import * as React from "react";
import { useTranslation } from "react-i18next";
import { Link, useHistory } from "react-router-dom";
import { Link } from "react-router-dom";
import styled, { css } from "styled-components";
import breakpoint from "styled-components-breakpoint";
import Document from "models/Document";
import Badge from "components/Badge";
import Button from "components/Button";
@ -18,7 +19,7 @@ import useCurrentUser from "hooks/useCurrentUser";
import DocumentMenu from "menus/DocumentMenu";
import { newDocumentUrl } from "utils/routeHelpers";
type Props = {
type Props = {|
document: Document,
highlight?: ?string,
context?: ?string,
@ -27,7 +28,7 @@ type Props = {
showPin?: boolean,
showDraft?: boolean,
showTemplate?: boolean,
};
|};
const SEARCH_RESULT_REGEX = /<b\b[^>]*>(.*?)<\/b>/gi;
@ -40,7 +41,6 @@ function replaceResultMarks(tag: string) {
function DocumentListItem(props: Props) {
const { t } = useTranslation();
const currentUser = useCurrentUser();
const history = useHistory();
const [menuOpen, setMenuOpen] = React.useState(false);
const {
document,
@ -53,23 +53,11 @@ function DocumentListItem(props: Props) {
context,
} = props;
const handleNewFromTemplate = React.useCallback(
(ev: SyntheticEvent<>) => {
ev.preventDefault();
ev.stopPropagation();
history.push(
newDocumentUrl(document.collectionId, {
templateId: document.id,
})
);
},
[history, document]
);
const queryIsInTitle =
!!highlight &&
!!document.title.toLowerCase().includes(highlight.toLowerCase());
const canStar =
!document.isDraft && !document.isArchived && !document.isTemplate;
return (
<DocumentLink
@ -80,83 +68,102 @@ function DocumentListItem(props: Props) {
state: { title: document.titleWithDefault },
}}
>
<Heading>
<Title text={document.titleWithDefault} highlight={highlight} />
{document.isNew && document.createdBy.id !== currentUser.id && (
<Badge yellow>{t("New")}</Badge>
<Content>
<Heading>
<Title text={document.titleWithDefault} highlight={highlight} />
{document.isNew && document.createdBy.id !== currentUser.id && (
<Badge yellow>{t("New")}</Badge>
)}
{canStar && (
<StarPositioner>
<StarButton document={document} />
</StarPositioner>
)}
{document.isDraft && showDraft && (
<Tooltip
tooltip={t("Only visible to you")}
delay={500}
placement="top"
>
<Badge>{t("Draft")}</Badge>
</Tooltip>
)}
{document.isTemplate && showTemplate && (
<Badge primary>{t("Template")}</Badge>
)}
</Heading>
{!queryIsInTitle && (
<ResultContext
text={context}
highlight={highlight ? SEARCH_RESULT_REGEX : undefined}
processResult={replaceResultMarks}
/>
)}
{!document.isDraft && !document.isArchived && !document.isTemplate && (
<Actions>
<StarButton document={document} />
</Actions>
)}
{document.isDraft && showDraft && (
<Tooltip
tooltip={t("Only visible to you")}
delay={500}
placement="top"
>
<Badge>{t("Draft")}</Badge>
</Tooltip>
)}
{document.isTemplate && showTemplate && (
<Badge primary>{t("Template")}</Badge>
)}
<SecondaryActions>
{document.isTemplate && !document.isArchived && !document.isDeleted && (
<Button onClick={handleNewFromTemplate} icon={<PlusIcon />} neutral>
<DocumentMeta
document={document}
showCollection={showCollection}
showPublished={showPublished}
showLastViewed
/>
</Content>
<Actions>
{document.isTemplate && !document.isArchived && !document.isDeleted && (
<>
<Button
as={Link}
to={newDocumentUrl(document.collectionId, {
templateId: document.id,
})}
icon={<PlusIcon />}
neutral
>
{t("New doc")}
</Button>
)}
&nbsp;
<EventBoundary>
<DocumentMenu
document={document}
showPin={showPin}
onOpen={() => setMenuOpen(true)}
onClose={() => setMenuOpen(false)}
/>
</EventBoundary>
</SecondaryActions>
</Heading>
{!queryIsInTitle && (
<ResultContext
text={context}
highlight={highlight ? SEARCH_RESULT_REGEX : undefined}
processResult={replaceResultMarks}
&nbsp;
</>
)}
<DocumentMenu
document={document}
showPin={showPin}
onOpen={() => setMenuOpen(true)}
onClose={() => setMenuOpen(false)}
modal={false}
/>
)}
<DocumentMeta
document={document}
showCollection={showCollection}
showPublished={showPublished}
showLastViewed
/>
</Actions>
</DocumentLink>
);
}
const SecondaryActions = styled(Flex)`
const Content = styled.div`
flex-grow: 1;
flex-shrink: 1;
min-width: 0;
`;
const Actions = styled(EventBoundary)`
display: none;
align-items: center;
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
margin: 8px;
flex-shrink: 0;
flex-grow: 0;
${breakpoint("tablet")`
display: flex;
`};
`;
const DocumentLink = styled(Link)`
display: block;
display: flex;
align-items: center;
margin: 10px -8px;
padding: 6px 8px;
border-radius: 8px;
max-height: 50vh;
min-width: 100%;
max-width: calc(100vw - 40px);
overflow: hidden;
position: relative;
${SecondaryActions} {
${Actions} {
opacity: 0;
}
@ -166,10 +173,11 @@ const DocumentLink = styled(Link)`
&:hover,
&:active,
&:focus {
&:focus,
&:focus-within {
background: ${(props) => props.theme.listItemHoverBackground};
${SecondaryActions} {
${Actions} {
opacity: 1;
}
@ -187,7 +195,7 @@ const DocumentLink = styled(Link)`
css`
background: ${(props) => props.theme.listItemHoverBackground};
${SecondaryActions} {
${Actions} {
opacity: 1;
}
@ -210,7 +218,7 @@ const Heading = styled.h3`
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
`;
const Actions = styled(Flex)`
const StarPositioner = styled(Flex)`
margin-left: 4px;
align-items: center;
`;

1
app/components/DocumentMeta.js
View File

@ -15,6 +15,7 @@ const Container = styled(Flex)`
font-size: 13px;
white-space: nowrap;
overflow: hidden;
min-width: 0;
`;
const Modified = styled.span`

289
app/components/DropdownMenu/DropdownMenu.js
View File

@ -1,289 +0,0 @@
// @flow
import invariant from "invariant";
import { observable } from "mobx";
import { observer } from "mobx-react";
import { MoreIcon } from "outline-icons";
import { rgba } from "polished";
import * as React from "react";
import { withTranslation, type TFunction } from "react-i18next";
import { PortalWithState } from "react-portal";
import styled from "styled-components";
import { fadeAndScaleIn } from "shared/styles/animations";
import Flex from "components/Flex";
import NudeButton from "components/NudeButton";
let previousClosePortal;
let counter = 0;
type Children =
| React.Node
| ((options: { closePortal: () => void }) => React.Node);
type Props = {|
label?: React.Node,
onOpen?: () => void,
onClose?: () => void,
children?: Children,
className?: string,
hover?: boolean,
style?: Object,
position?: "left" | "right" | "center",
t: TFunction,
|};
@observer
class DropdownMenu extends React.Component<Props> {
id: string = `menu${counter++}`;
closeTimeout: TimeoutID;
@observable top: ?number;
@observable bottom: ?number;
@observable right: ?number;
@observable left: ?number;
@observable position: "left" | "right" | "center";
@observable fixed: ?boolean;
@observable bodyRect: ClientRect;
@observable labelRect: ClientRect;
@observable dropdownRef: { current: null | HTMLElement } = React.createRef();
@observable menuRef: { current: null | HTMLElement } = React.createRef();
handleOpen = (
openPortal: (SyntheticEvent<>) => void,
closePortal: () => void
) => {
return (ev: SyntheticMouseEvent<HTMLElement>) => {
ev.preventDefault();
const currentTarget = ev.currentTarget;
invariant(document.body, "why you not here");
if (currentTarget instanceof HTMLDivElement) {
this.bodyRect = document.body.getBoundingClientRect();
this.labelRect = currentTarget.getBoundingClientRect();
this.top = this.labelRect.bottom - this.bodyRect.top;
this.bottom = undefined;
this.position = this.props.position || "left";
if (currentTarget.parentElement) {
const triggerParentStyle = getComputedStyle(
currentTarget.parentElement
);
if (triggerParentStyle.position === "static") {
this.fixed = true;
this.top = this.labelRect.bottom;
}
}
this.initPosition();
// attempt to keep only one flyout menu open at once
if (previousClosePortal && !this.props.hover) {
previousClosePortal();
}
previousClosePortal = closePortal;
openPortal(ev);
}
};
};
initPosition() {
if (this.position === "left") {
this.right =
this.bodyRect.width - this.labelRect.left - this.labelRect.width;
} else if (this.position === "center") {
this.left = this.labelRect.left + this.labelRect.width / 2;
} else {
this.left = this.labelRect.left;
}
}
onOpen = () => {
if (typeof this.props.onOpen === "function") {
this.props.onOpen();
}
this.fitOnTheScreen();
};
fitOnTheScreen() {
if (!this.dropdownRef || !this.dropdownRef.current) return;
const el = this.dropdownRef.current;
const sticksOutPastBottomEdge =
el.clientHeight + this.top > window.innerHeight;
if (sticksOutPastBottomEdge) {
this.top = undefined;
this.bottom = this.fixed ? 0 : -1 * window.pageYOffset;
} else {
this.bottom = undefined;
}
if (this.position === "left" || this.position === "right") {
const totalWidth =
Math.sign(this.position === "left" ? -1 : 1) * el.offsetLeft +
el.scrollWidth;
const isVisible = totalWidth < window.innerWidth;
if (!isVisible) {
if (this.position === "right") {
this.position = "left";
this.left = undefined;
} else if (this.position === "left") {
this.position = "right";
this.right = undefined;
}
}
}
this.initPosition();
this.forceUpdate();
}
closeAfterTimeout = (closePortal: () => void) => () => {
if (this.closeTimeout) {
clearTimeout(this.closeTimeout);
}
this.closeTimeout = setTimeout(closePortal, 500);
};
clearCloseTimeout = () => {
if (this.closeTimeout) {
clearTimeout(this.closeTimeout);
}
};
render() {
const { className, hover, label, children, t } = this.props;
return (
<div className={className}>
<PortalWithState
onOpen={this.onOpen}
onClose={this.props.onClose}
closeOnOutsideClick
closeOnEsc
>
{({ closePortal, openPortal, isOpen, portal }) => (
<>
<Label
onMouseMove={hover ? this.clearCloseTimeout : undefined}
onMouseOut={
hover ? this.closeAfterTimeout(closePortal) : undefined
}
onMouseEnter={
hover ? this.handleOpen(openPortal, closePortal) : undefined
}
onClick={
hover ? undefined : this.handleOpen(openPortal, closePortal)
}
>
{label || (
<NudeButton
id={`${this.id}button`}
aria-label={t("More options")}
aria-haspopup="true"
aria-expanded={isOpen ? "true" : "false"}
aria-controls={this.id}
>
<MoreIcon />
</NudeButton>
)}
</Label>
{portal(
<Position
ref={this.dropdownRef}
position={this.position}
fixed={this.fixed}
top={this.top}
bottom={this.bottom}
left={this.left}
right={this.right}
>
<Menu
ref={this.menuRef}
onMouseMove={hover ? this.clearCloseTimeout : undefined}
onMouseOut={
hover ? this.closeAfterTimeout(closePortal) : undefined
}
onClick={
typeof children === "function"
? undefined
: (ev) => {
ev.stopPropagation();
closePortal();
}
}
style={this.props.style}
id={this.id}
aria-labelledby={`${this.id}button`}
role="menu"
>
{typeof children === "function"
? children({ closePortal })
: children}
</Menu>
</Position>
)}
</>
)}
</PortalWithState>
</div>
);
}
}
const Label = styled(Flex).attrs({
justify: "center",
align: "center",
})`
z-index: ${(props) => props.theme.depths.menu};
cursor: pointer;
`;
const Position = styled.div`
position: ${({ fixed }) => (fixed ? "fixed" : "absolute")};
display: flex;
${({ left }) => (left !== undefined ? `left: ${left}px` : "")};
${({ right }) => (right !== undefined ? `right: ${right}px` : "")};
${({ top }) => (top !== undefined ? `top: ${top}px` : "")};
${({ bottom }) => (bottom !== undefined ? `bottom: ${bottom}px` : "")};
max-height: 75%;
z-index: ${(props) => props.theme.depths.menu};
transform: ${(props) =>
props.position === "center" ? "translateX(-50%)" : "initial"};
pointer-events: none;
`;
const Menu = styled.div`
animation: ${fadeAndScaleIn} 200ms ease;
transform-origin: ${(props) => (props.left !== undefined ? "25%" : "75%")} 0;
backdrop-filter: blur(10px);
background: ${(props) => rgba(props.theme.menuBackground, 0.8)};
border: ${(props) =>
props.theme.menuBorder ? `1px solid ${props.theme.menuBorder}` : "none"};
border-radius: 2px;
padding: 0.5em 0;
min-width: 180px;
overflow: hidden;
overflow-y: auto;
box-shadow: ${(props) => props.theme.menuShadow};
pointer-events: all;
hr {
margin: 0.5em 12px;
}
@media print {
display: none;
}
`;
export const Header = styled.h3`
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
color: ${(props) => props.theme.sidebarText};
letter-spacing: 0.04em;
margin: 1em 12px 0.5em;
`;
export default withTranslation()<DropdownMenu>(DropdownMenu);

3
app/components/DropdownMenu/index.js
View File

@ -1,3 +0,0 @@
// @flow
export { default as DropdownMenu, Header } from "./DropdownMenu";
export { default as DropdownMenuItem } from "./DropdownMenuItem";

9
app/components/EventBoundary.js
View File

@ -4,13 +4,18 @@ import * as React from "react";
type Props = {
children: React.Node,
className?: string,
};
export default function EventBoundary({ children }: Props) {
export default function EventBoundary({ children, className }: Props) {
const handleClick = React.useCallback((event: SyntheticEvent<>) => {
event.preventDefault();
event.stopPropagation();
}, []);
return <span onClick={handleClick}>{children}</span>;
return (
<span onClick={handleClick} className={className}>
{children}
</span>
);
}

157
app/components/IconPicker.js
View File

@ -1,6 +1,4 @@
// @flow
import { observable } from "mobx";
import { observer } from "mobx-react";
import {
CollectionIcon,
CoinsIcon,
@ -22,14 +20,17 @@ import {
VehicleIcon,
} from "outline-icons";
import * as React from "react";
import { withTranslation, type TFunction } from "react-i18next";
import { useTranslation } from "react-i18next";
import { useMenuState, MenuButton, MenuItem } from "reakit/Menu";
import styled from "styled-components";
import { DropdownMenu } from "components/DropdownMenu";
import ContextMenu from "components/ContextMenu";
import Flex from "components/Flex";
import HelpText from "components/HelpText";
import { LabelText } from "components/Input";
import NudeButton from "components/NudeButton";
const style = { width: 30, height: 30 };
const TwitterPicker = React.lazy(() =>
import("react-color/lib/components/twitter/Twitter")
);
@ -122,107 +123,77 @@ const colors = [
"#2F362F",
];
type Props = {
type Props = {|
onOpen?: () => void,
onChange: (color: string, icon: string) => void,
icon: string,
color: string,
t: TFunction,
};
|};
function preventEventBubble(event) {
event.stopPropagation();
function IconPicker({ onOpen, icon, color, onChange }: Props) {
const { t } = useTranslation();
const menu = useMenuState({
modal: true,
placement: "bottom-end",
});
const Component = icons[icon || "collection"].component;
return (
<Wrapper>
<Label>
<LabelText>{t("Icon")}</LabelText>
</Label>
<MenuButton {...menu}>
{(props) => (
<Button {...props}>
<Component role="button" color={color} size={30} />
</Button>
)}
</MenuButton>
<ContextMenu {...menu} onOpen={onOpen} aria-label={t("Choose icon")}>
<Icons>
{Object.keys(icons).map((name) => {
const Component = icons[name].component;
return (
<MenuItem
key={name}
onClick={() => onChange(color, name)}
{...menu}
>
{(props) => (
<IconButton style={style} {...props}>
<Component color={color} size={30} />
</IconButton>
)}
</MenuItem>
);
})}
</Icons>
<Flex>
<React.Suspense fallback={<Loading>{t("Loading")}…</Loading>}>
<ColorPicker
color={color}
onChange={(color) => onChange(color.hex, icon)}
colors={colors}
triangle="hide"
/>
</React.Suspense>
</Flex>
</ContextMenu>
</Wrapper>
);
}
@observer
class IconPicker extends React.Component<Props> {
@observable isOpen: boolean = false;
node: ?HTMLElement;
componentDidMount() {
window.addEventListener("click", this.handleClickOutside);
}
componentWillUnmount() {
window.removeEventListener("click", this.handleClickOutside);
}
handleClose = () => {
this.isOpen = false;
};
handleOpen = () => {
this.isOpen = true;
if (this.props.onOpen) {
this.props.onOpen();
}
};
handleClickOutside = (ev: SyntheticMouseEvent<>) => {
// $FlowFixMe
if (ev.target && this.node && this.node.contains(ev.target)) {
return;
}
this.handleClose();
};
render() {
const { t } = this.props;
const Component = icons[this.props.icon || "collection"].component;
return (
<Wrapper ref={(ref) => (this.node = ref)}>
<label>
<LabelText>{t("Icon")}</LabelText>
</label>
<DropdownMenu
onOpen={this.handleOpen}
label={
<LabelButton>
<Component role="button" color={this.props.color} size={30} />
</LabelButton>
}
>
<Icons onClick={preventEventBubble}>
{Object.keys(icons).map((name) => {
const Component = icons[name].component;
return (
<IconButton
key={name}
onClick={() => this.props.onChange(this.props.color, name)}
style={{ width: 30, height: 30 }}
>
<Component color={this.props.color} size={30} />
</IconButton>
);
})}
</Icons>
<Flex onClick={preventEventBubble}>
<React.Suspense fallback={<Loading>{t("Loading")}…</Loading>}>
<ColorPicker
color={this.props.color}
onChange={(color) =>
this.props.onChange(color.hex, this.props.icon)
}
colors={colors}
triangle="hide"
/>
</React.Suspense>
</Flex>
</DropdownMenu>
</Wrapper>
);
}
}
const Label = styled.label`
display: block;
`;
const Icons = styled.div`
padding: 15px 9px 9px 15px;
width: 276px;
`;
const LabelButton = styled(NudeButton)`
const Button = styled(NudeButton)`
border: 1px solid ${(props) => props.theme.inputBorder};
width: 32px;
height: 32px;
@ -249,4 +220,4 @@ const Wrapper = styled("div")`
position: relative;
`;
export default withTranslation()<IconPicker>(IconPicker);
export default IconPicker;

9
app/components/Sidebar/Main.js
View File

@ -75,16 +75,17 @@ class MainSidebar extends React.Component<Props> {
return (
<Sidebar>
<AccountMenu
label={
<AccountMenu>
{(props) => (
<HeaderBlock
{...props}
subheading={user.name}
teamName={team.name}
logoUrl={team.avatarUrl}
showDisclosure
/>
}
/>
)}
</AccountMenu>
<Flex auto column>
<Scrollable shadow>
<Section>

2
app/components/Sidebar/components/CollectionLink.js
View File

@ -100,14 +100,12 @@ function CollectionLink({
<>
{can.update && (
<CollectionSortMenuWithMargin
position="right"
collection={collection}
onOpen={() => setMenuOpen(true)}
onClose={() => setMenuOpen(false)}
/>
)}
<CollectionMenu
position="right"
collection={collection}
onOpen={() => setMenuOpen(true)}
onClose={() => setMenuOpen(false)}

1
app/components/Sidebar/components/DocumentLink.js
View File

@ -242,7 +242,6 @@ function DocumentLink({
document && !isMoving ? (
<Fade>
<DocumentMenu
position="right"
document={document}
onOpen={() => setMenuOpen(true)}
onClose={() => setMenuOpen(false)}

36
app/components/Sidebar/components/HeaderBlock.js
View File

@ -12,26 +12,22 @@ type Props = {
logoUrl: string,
};
function HeaderBlock({
showDisclosure,
teamName,
subheading,
logoUrl,
...rest
}: Props) {
return (
<Header justify="flex-start" align="center" {...rest}>
<TeamLogo alt={`${teamName} logo`} src={logoUrl} size="38px" />
<Flex align="flex-start" column>
<TeamName showDisclosure>
{teamName}{" "}
{showDisclosure && <StyledExpandedIcon color="currentColor" />}
</TeamName>
<Subheading>{subheading}</Subheading>
</Flex>
</Header>
);
}
const HeaderBlock = React.forwardRef<Props, any>(
({ showDisclosure, teamName, subheading, logoUrl, ...rest }: Props, ref) => {
return (
<Header justify="flex-start" align="center" ref={ref} {...rest}>
<TeamLogo alt={`${teamName} logo`} src={logoUrl} size="38px" />
<Flex align="flex-start" column>
<TeamName showDisclosure>
{teamName}{" "}
{showDisclosure && <StyledExpandedIcon color="currentColor" />}
</TeamName>
<Subheading>{subheading}</Subheading>
</Flex>
</Header>
);
}
);
const StyledExpandedIcon = styled(ExpandedIcon)`
position: absolute;

22
app/components/Sidebar/components/SidebarLink.js
View File

@ -1,7 +1,13 @@
// @flow
import * as React from "react";
import { withRouter, NavLink } from "react-router-dom";
import {
withRouter,
NavLink,
type RouterHistory,
type Match,
} from "react-router-dom";
import styled, { withTheme } from "styled-components";
import EventBoundary from "components/EventBoundary";
import { type Theme } from "types";
type Props = {
@ -10,6 +16,7 @@ type Props = {
innerRef?: (?HTMLElement) => void,
onClick?: (SyntheticEvent<>) => void,
onMouseEnter?: (SyntheticEvent<>) => void,
className?: string,
children?: React.Node,
icon?: React.Node,
label?: React.Node,
@ -18,6 +25,8 @@ type Props = {
iconColor?: string,
active?: boolean,
isActiveDrop?: boolean,
history: RouterHistory,
match: Match,
theme: Theme,
exact?: boolean,
depth?: number,
@ -39,7 +48,9 @@ function SidebarLink({
href,
innerRef,
depth,
...rest
history,
match,
className,
}: Props) {
const style = React.useMemo(() => {
return {
@ -70,7 +81,7 @@ function SidebarLink({
as={to ? undefined : href ? "a" : "div"}
href={href}
ref={innerRef}
{...rest}
className={className}
>
{icon && <IconWrapper>{icon}</IconWrapper>}
<Label>{label}</Label>
@ -84,9 +95,10 @@ const IconWrapper = styled.span`
margin-left: -4px;
margin-right: 4px;
height: 24px;
overflow: hidden;
`;
const Actions = styled.span`
const Actions = styled(EventBoundary)`
display: ${(props) => (props.showActions ? "inline-flex" : "none")};
position: absolute;
top: 4px;
@ -110,7 +122,6 @@ const Actions = styled.span`
const StyledNavLink = styled(NavLink)`
display: flex;
position: relative;
overflow: hidden;
text-overflow: ellipsis;
padding: 4px 16px;
border-radius: 4px;
@ -121,6 +132,7 @@ const StyledNavLink = styled(NavLink)`
props.$isActiveDrop ? props.theme.white : props.theme.sidebarText};
font-size: 15px;
cursor: pointer;
overflow: hidden;
svg {
${(props) => (props.$isActiveDrop ? `fill: ${props.theme.white};` : "")}

2
app/components/Toasts/components/Toast.js
View File

@ -8,7 +8,7 @@ import type { Toast as TToast } from "types";
type Props = {
onRequestClose: () => void,
closeAfterMs: number,
closeAfterMs?: number,
toast: TToast,
};

218
app/menus/AccountMenu.js
View File

@ -1,134 +1,128 @@
// @flow
import { observable } from "mobx";
import { inject, observer } from "mobx-react";
import { observer } from "mobx-react";
import { SunIcon, MoonIcon } from "outline-icons";
import * as React from "react";
import { withTranslation, type TFunction } from "react-i18next";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import { useMenuState, MenuButton } from "reakit/Menu";
import styled from "styled-components";
import AuthStore from "stores/AuthStore";
import UiStore from "stores/UiStore";
import KeyboardShortcuts from "scenes/KeyboardShortcuts";
import { DropdownMenu, DropdownMenuItem } from "components/DropdownMenu";
import Flex from "components/Flex";
import Modal from "components/Modal";
import {
developers,
changelog,
githubIssuesUrl,
mailToUrl,
settings,
} from "../../shared/utils/routeHelpers";
} from "shared/utils/routeHelpers";
import KeyboardShortcuts from "scenes/KeyboardShortcuts";
import ContextMenu from "components/ContextMenu";
import MenuItem, { MenuAnchor } from "components/ContextMenu/MenuItem";
import Separator from "components/ContextMenu/Separator";
import Flex from "components/Flex";
import Modal from "components/Modal";
import useStores from "hooks/useStores";
type Props = {
label: React.Node,
ui: UiStore,
auth: AuthStore,
t: TFunction,
};
type Props = {|
children: (props: any) => React.Node,
|};
@observer
class AccountMenu extends React.Component<Props> {
@observable keyboardShortcutsOpen: boolean = false;
const AppearanceMenu = React.forwardRef((props, ref) => {
const { ui } = useStores();
const { t } = useTranslation();
const menu = useMenuState();
handleLogout = () => {
this.props.auth.logout();
};
handleOpenKeyboardShortcuts = () => {
this.keyboardShortcutsOpen = true;
};
handleCloseKeyboardShortcuts = () => {
this.keyboardShortcutsOpen = false;
};
render() {
const { ui, t } = this.props;
return (
<>
<Modal
isOpen={this.keyboardShortcutsOpen}
onRequestClose={this.handleCloseKeyboardShortcuts}
title={t("Keyboard shortcuts")}
return (
<>
<MenuButton ref={ref} {...menu} {...props}>
{(props) => (
<MenuAnchor {...props}>
<ChangeTheme justify="space-between">
{t("Appearance")}
{ui.resolvedTheme === "light" ? <SunIcon /> : <MoonIcon />}
</ChangeTheme>
</MenuAnchor>
)}
</MenuButton>
<ContextMenu {...menu} aria-label={t("Appearance")}>
<MenuItem
{...menu}
onClick={() => ui.setTheme("system")}
selected={ui.theme === "system"}
>
<KeyboardShortcuts />
</Modal>
<DropdownMenu
style={{ marginRight: 10, marginTop: -10 }}
label={this.props.label}
{t("System")}
</MenuItem>
<MenuItem
{...menu}
onClick={() => ui.setTheme("light")}
selected={ui.theme === "light"}
>
<DropdownMenuItem as={Link} to={settings()}>
{t("Settings")}
</DropdownMenuItem>
<DropdownMenuItem onClick={this.handleOpenKeyboardShortcuts}>
{t("Keyboard shortcuts")}
</DropdownMenuItem>
<DropdownMenuItem href={developers()} target="_blank">
{t("API documentation")}
</DropdownMenuItem>
<hr />
<DropdownMenuItem href={changelog()} target="_blank">
{t("Changelog")}
</DropdownMenuItem>
<DropdownMenuItem href={mailToUrl()} target="_blank">
{t("Send us feedback")}
</DropdownMenuItem>
<DropdownMenuItem href={githubIssuesUrl()} target="_blank">
{t("Report a bug")}
</DropdownMenuItem>
<hr />
<DropdownMenu
position="right"
style={{
left: 170,
position: "relative",
top: -40,
}}
label={
<DropdownMenuItem>
<ChangeTheme justify="space-between">
{t("Appearance")}
{ui.resolvedTheme === "light" ? <SunIcon /> : <MoonIcon />}
</ChangeTheme>
</DropdownMenuItem>
}
hover
>
<DropdownMenuItem
onClick={() => ui.setTheme("system")}
selected={ui.theme === "system"}
>
{t("System")}
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => ui.setTheme("light")}
selected={ui.theme === "light"}
>
{t("Light")}
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => ui.setTheme("dark")}
selected={ui.theme === "dark"}
>
{t("Dark")}
</DropdownMenuItem>
</DropdownMenu>
<hr />
<DropdownMenuItem onClick={this.handleLogout}>
{t("Log out")}
</DropdownMenuItem>
</DropdownMenu>
</>
);
}
{t("Light")}
</MenuItem>
<MenuItem
{...menu}
onClick={() => ui.setTheme("dark")}
selected={ui.theme === "dark"}
>
{t("Dark")}
</MenuItem>
</ContextMenu>
</>
);
});
function AccountMenu(props: Props) {
const menu = useMenuState({
placement: "bottom-start",
modal: true,
});
const { auth } = useStores();
const { t } = useTranslation();
const [keyboardShortcutsOpen, setKeyboardShortcutsOpen] = React.useState(
false
);
return (
<>
<Modal
isOpen={keyboardShortcutsOpen}
onRequestClose={() => setKeyboardShortcutsOpen(false)}
title={t("Keyboard shortcuts")}
>
<KeyboardShortcuts />
</Modal>
<MenuButton {...menu}>{props.children}</MenuButton>
<ContextMenu {...menu} aria-label={t("Account")}>
<MenuItem {...menu} as={Link} to={settings()}>
{t("Settings")}
</MenuItem>
<MenuItem {...menu} onClick={() => setKeyboardShortcutsOpen(true)}>
{t("Keyboard shortcuts")}
</MenuItem>
<MenuItem {...menu} href={developers()} target="_blank">
{t("API documentation")}
</MenuItem>
<Separator {...menu} />
<MenuItem {...menu} href={changelog()} target="_blank">
{t("Changelog")}
</MenuItem>
<MenuItem {...menu} href={mailToUrl()} target="_blank">
{t("Send us feedback")}
</MenuItem>
<MenuItem {...menu} href={githubIssuesUrl()} target="_blank">
{t("Report a bug")}
</MenuItem>
<Separator {...menu} />
<MenuItem {...menu} as={AppearanceMenu} />
<Separator {...menu} />
<MenuItem {...menu} onClick={auth.logout}>
{t("Log out")}
</MenuItem>
</ContextMenu>
</>
);
}
const ChangeTheme = styled(Flex)`
width: 100%;
`;
export default withTranslation()<AccountMenu>(
inject("ui", "auth")(AccountMenu)
);
export default observer(AccountMenu);

34
app/menus/BreadcrumbMenu.js Normal file
View File

@ -0,0 +1,34 @@
// @flow
import * as React from "react";
import { useTranslation } from "react-i18next";
import { useMenuState } from "reakit/Menu";
import ContextMenu from "components/ContextMenu";
import OverflowMenuButton from "components/ContextMenu/OverflowMenuButton";
import Template from "components/ContextMenu/Template";
type Props = {
path: Array<any>,
};
export default function BreadcrumbMenu({ path }: Props) {
const { t } = useTranslation();
const menu = useMenuState({
modal: true,
placement: "bottom",
});
return (
<>
<OverflowMenuButton {...menu} />
<ContextMenu {...menu} aria-label={t("Path to document")}>
<Template
{...menu}
items={path.map((item) => ({
title: item.title,
to: item.url,
}))}
/>
</ContextMenu>
</>
);
}

44
app/menus/CollectionGroupMemberMenu.js Normal file
View File

@ -0,0 +1,44 @@
// @flow
import { observer } from "mobx-react";
import * as React from "react";
import { useTranslation } from "react-i18next";
import { useMenuState } from "reakit/Menu";
import ContextMenu from "components/ContextMenu";
import OverflowMenuButton from "components/ContextMenu/OverflowMenuButton";
import Template from "components/ContextMenu/Template";
type Props = {|
onMembers: () => void,
onRemove: () => void,
|};
function CollectionGroupMemberMenu({ onMembers, onRemove }: Props) {
const { t } = useTranslation();
const menu = useMenuState({ modal: true });
return (
<>
<OverflowMenuButton {...menu} />
<ContextMenu {...menu} aria-label={t("Group member options")}>
<Template
{...menu}
items={[
{
title: t("Members"),
onClick: onMembers,
},
{
type: "separator",
},
{
title: t("Remove"),
onClick: onRemove,
},
]}
/>
</ContextMenu>
</>
);
}
export default observer(CollectionGroupMemberMenu);

394
app/menus/CollectionMenu.js
View File

@ -1,229 +1,221 @@
// @flow
import { observable } from "mobx";
import { inject, observer } from "mobx-react";
import { observer } from "mobx-react";
import * as React from "react";
import { withTranslation, type TFunction } from "react-i18next";
import { withRouter, type RouterHistory } from "react-router-dom";
import DocumentsStore from "stores/DocumentsStore";
import PoliciesStore from "stores/PoliciesStore";
import UiStore from "stores/UiStore";
import { useTranslation } from "react-i18next";
import { useHistory } from "react-router-dom";
import { useMenuState, MenuButton } from "reakit/Menu";
import Collection from "models/Collection";
import CollectionDelete from "scenes/CollectionDelete";
import CollectionEdit from "scenes/CollectionEdit";
import CollectionExport from "scenes/CollectionExport";
import CollectionMembers from "scenes/CollectionMembers";
import { DropdownMenu } from "components/DropdownMenu";
import DropdownMenuItems from "components/DropdownMenu/DropdownMenuItems";
import ContextMenu from "components/ContextMenu";
import OverflowMenuButton from "components/ContextMenu/OverflowMenuButton";
import Template from "components/ContextMenu/Template";
import Modal from "components/Modal";
import VisuallyHidden from "components/VisuallyHidden";
import useStores from "hooks/useStores";
import getDataTransferFiles from "utils/getDataTransferFiles";
import { newDocumentUrl } from "utils/routeHelpers";
type Props = {
position?: "left" | "right" | "center",
ui: UiStore,
policies: PoliciesStore,
documents: DocumentsStore,
type Props = {|
collection: Collection,
history: RouterHistory,
placement?: string,
modal?: boolean,
label?: (any) => React.Node,
onOpen?: () => void,
onClose?: () => void,
t: TFunction,
};
|};
@observer
class CollectionMenu extends React.Component<Props> {
file: ?HTMLInputElement;
@observable showCollectionMembers = false;
@observable showCollectionEdit = false;
@observable showCollectionDelete = false;
@observable showCollectionExport = false;
function CollectionMenu({
collection,
label,
modal = true,
placement,
onOpen,
onClose,
}: Props) {
const menu = useMenuState({ modal, placement });
const [renderModals, setRenderModals] = React.useState(false);
const { ui, documents, policies } = useStores();
const { t } = useTranslation();
const history = useHistory();
onNewDocument = (ev: SyntheticEvent<>) => {
ev.preventDefault();
const { collection } = this.props;
this.props.history.push(newDocumentUrl(collection.id));
};
const file = React.useRef<?HTMLInputElement>();
const [showCollectionMembers, setShowCollectionMembers] = React.useState(
false
);
const [showCollectionEdit, setShowCollectionEdit] = React.useState(false);
const [showCollectionDelete, setShowCollectionDelete] = React.useState(false);
const [showCollectionExport, setShowCollectionExport] = React.useState(false);
onImportDocument = (ev: SyntheticEvent<>) => {
ev.preventDefault();
ev.stopPropagation();
// simulate a click on the file upload input element
if (this.file) this.file.click();
};
onFilePicked = async (ev: SyntheticEvent<>) => {
const files = getDataTransferFiles(ev);
try {
const file = files[0];
const document = await this.props.documents.import(
file,
null,
this.props.collection.id,
{ publish: true }
);
this.props.history.push(document.url);
} catch (err) {
this.props.ui.showToast(err.message, {
type: "error",
});
const handleOpen = React.useCallback(() => {
setRenderModals(true);
if (onOpen) {
onOpen();
}
};
}, [onOpen]);
handleEditCollectionOpen = (ev: SyntheticEvent<>) => {
ev.preventDefault();
this.showCollectionEdit = true;
};
const handleNewDocument = React.useCallback(
(ev: SyntheticEvent<>) => {
ev.preventDefault();
history.push(newDocumentUrl(collection.id));
},
[history, collection.id]
);
handleEditCollectionClose = () => {
this.showCollectionEdit = false;
};
const handleImportDocument = React.useCallback(
(ev: SyntheticEvent<>) => {
ev.preventDefault();
ev.stopPropagation();
handleDeleteCollectionOpen = (ev: SyntheticEvent<>) => {
ev.preventDefault();
this.showCollectionDelete = true;
};
// simulate a click on the file upload input element
if (file.current) {
file.current.click();
}
},
[file]
);
handleDeleteCollectionClose = () => {
this.showCollectionDelete = false;
};
const handleFilePicked = React.useCallback(
async (ev: SyntheticEvent<>) => {
const files = getDataTransferFiles(ev);
handleExportCollectionOpen = (ev: SyntheticEvent<>) => {
ev.preventDefault();
this.showCollectionExport = true;
};
try {
const file = files[0];
const document = await documents.import(
file,
null,
this.props.collection.id,
{ publish: true }
);
history.push(document.url);
} catch (err) {
ui.showToast(err.message, {
type: "error",
});
}
},
[history, ui, documents]
);
handleExportCollectionClose = () => {
this.showCollectionExport = false;
};
const can = policies.abilities(collection.id);
handleMembersModalOpen = (ev: SyntheticEvent<>) => {
ev.preventDefault();
this.showCollectionMembers = true;
};
handleMembersModalClose = () => {
this.showCollectionMembers = false;
};
render() {
const {
policies,
documents,
collection,
position,
onOpen,
onClose,
t,
} = this.props;
const can = policies.abilities(collection.id);
return (
<>
<VisuallyHidden>
<input
type="file"
ref={(ref) => (this.file = ref)}
onChange={this.onFilePicked}
onClick={(ev) => ev.stopPropagation()}
accept={documents.importFileTypes.join(", ")}
/>
</VisuallyHidden>
<Modal
title={t("Collection permissions")}
onRequestClose={this.handleMembersModalClose}
isOpen={this.showCollectionMembers}
>
<CollectionMembers
collection={collection}
onSubmit={this.handleMembersModalClose}
handleEditCollectionOpen={this.handleEditCollectionOpen}
onEdit={this.handleEditCollectionOpen}
/>
</Modal>
<DropdownMenu onOpen={onOpen} onClose={onClose} position={position}>
<DropdownMenuItems
items={[
{
title: t("New document"),
visible: can.update,
onClick: this.onNewDocument,
},
{
title: t("Import document"),
visible: can.update,
onClick: this.onImportDocument,
},
{
type: "separator",
},
{
title: `${t("Edit")}…`,
visible: can.update,
onClick: this.handleEditCollectionOpen,
},
{
title: `${t("Permissions")}…`,
visible: can.update,
onClick: this.handleMembersModalOpen,
},
{
title: `${t("Export")}…`,
visible: !!(collection && can.export),
onClick: this.handleExportCollectionOpen,
},
{
type: "separator",
},
{
type: "separator",
},
{
title: `${t("Delete")}…`,
visible: !!(collection && can.delete),
onClick: this.handleDeleteCollectionOpen,
},
]}
/>
</DropdownMenu>
<Modal
title={t("Edit collection")}
isOpen={this.showCollectionEdit}
onRequestClose={this.handleEditCollectionClose}
>
<CollectionEdit
onSubmit={this.handleEditCollectionClose}
collection={collection}
/>
</Modal>
<Modal
title={t("Delete collection")}
isOpen={this.showCollectionDelete}
onRequestClose={this.handleDeleteCollectionClose}
>
<CollectionDelete
onSubmit={this.handleDeleteCollectionClose}
collection={collection}
/>
</Modal>
<Modal
title={t("Export collection")}
isOpen={this.showCollectionExport}
onRequestClose={this.handleExportCollectionClose}
>
<CollectionExport
onSubmit={this.handleExportCollectionClose}
collection={collection}
/>
</Modal>
</>
);
}
return (
<>
<VisuallyHidden>
<input
type="file"
ref={file}
onChange={handleFilePicked}
onClick={(ev) => ev.stopPropagation()}
accept={documents.importFileTypes.join(", ")}
tabIndex="-1"
/>
</VisuallyHidden>
{label ? (
<MenuButton {...menu}>{label}</MenuButton>
) : (
<OverflowMenuButton {...menu} />
)}
<ContextMenu
{...menu}
onOpen={handleOpen}
onClose={onClose}
aria-label={t("Collection")}
>
<Template
{...menu}
items={[
{
title: t("New document"),
visible: can.update,
onClick: handleNewDocument,
},
{
title: t("Import document"),
visible: can.update,
onClick: handleImportDocument,
},
{
type: "separator",
},
{
title: `${t("Edit")}…`,
visible: can.update,
onClick: () => setShowCollectionEdit(true),
},
{
title: `${t("Permissions")}…`,
visible: can.update,
onClick: () => setShowCollectionMembers(true),
},
{
title: `${t("Export")}…`,
visible: !!(collection && can.export),
onClick: () => setShowCollectionExport(true),
},
{
type: "separator",
},
{
type: "separator",
},
{
title: `${t("Delete")}…`,
visible: !!(collection && can.delete),
onClick: () => setShowCollectionDelete(true),
},
]}
/>
</ContextMenu>
{renderModals && (
<>
<Modal
title={t("Collection permissions")}
onRequestClose={() => setShowCollectionMembers(false)}
isOpen={showCollectionMembers}
>
<CollectionMembers
collection={collection}
onSubmit={() => setShowCollectionMembers(false)}
onEdit={() => setShowCollectionEdit(true)}
/>
</Modal>
<Modal
title={t("Edit collection")}
isOpen={showCollectionEdit}
onRequestClose={() => setShowCollectionEdit(false)}
>
<CollectionEdit
onSubmit={() => setShowCollectionEdit(false)}
collection={collection}
/>
</Modal>
<Modal
title={t("Delete collection")}
isOpen={showCollectionDelete}
onRequestClose={() => setShowCollectionDelete(false)}
>
<CollectionDelete
onSubmit={() => setShowCollectionDelete(false)}
collection={collection}
/>
</Modal>
<Modal
title={t("Export collection")}
isOpen={showCollectionExport}
onRequestClose={() => setShowCollectionExport(false)}
>
<CollectionExport
onSubmit={() => setShowCollectionExport(false)}
collection={collection}
/>
</Modal>
</>
)}
</>
);
}
export default withTranslation()<CollectionMenu>(
inject("ui", "documents", "policies")(withRouter(CollectionMenu))
);
export default observer(CollectionMenu);

79
app/menus/CollectionSortMenu.js
View File

@ -3,29 +3,25 @@ import { observer } from "mobx-react";
import { AlphabeticalSortIcon, ManualSortIcon } from "outline-icons";
import * as React from "react";
import { useTranslation } from "react-i18next";
import { useMenuState, MenuButton } from "reakit/Menu";
import Collection from "models/Collection";
import { DropdownMenu } from "components/DropdownMenu";
import DropdownMenuItems from "components/DropdownMenu/DropdownMenuItems";
import ContextMenu from "components/ContextMenu";
import Template from "components/ContextMenu/Template";
import NudeButton from "components/NudeButton";
type Props = {
position?: "left" | "right" | "center",
type Props = {|
collection: Collection,
onOpen?: () => void,
onClose?: () => void,
};
|};
function CollectionSortMenu({
collection,
position,
onOpen,
onClose,
...rest
}: Props) {
function CollectionSortMenu({ collection, onOpen, onClose, ...rest }: Props) {
const { t } = useTranslation();
const menu = useMenuState({ modal: true });
const handleChangeSort = React.useCallback(
(field: string) => {
menu.hide();
return collection.save({
sort: {
field,
@ -33,38 +29,43 @@ function CollectionSortMenu({
},
});
},
[collection]
[collection, menu]
);
const alphabeticalSort = collection.sort.field === "title";
return (
<DropdownMenu
onOpen={onOpen}
onClose={onClose}
label={
<NudeButton aria-label={t("Sort in sidebar")} aria-haspopup="true">
{alphabeticalSort ? <AlphabeticalSortIcon /> : <ManualSortIcon />}
</NudeButton>
}
position={position}
{...rest}
>
<DropdownMenuItems
items={[
{
title: t("Alphabetical sort"),
onClick: () => handleChangeSort("title"),
selected: alphabeticalSort,
},
{
title: t("Manual sort"),
onClick: () => handleChangeSort("index"),
selected: !alphabeticalSort,
},
]}
/>
</DropdownMenu>
<>
<MenuButton {...menu}>
{(props) => (
<NudeButton {...props}>
{alphabeticalSort ? <AlphabeticalSortIcon /> : <ManualSortIcon />}
</NudeButton>
)}
</MenuButton>
<ContextMenu
{...menu}
onOpen={onOpen}
onClose={onClose}
aria-label={t("Sort in sidebar")}
>
<Template
{...menu}
items={[
{
title: t("Alphabetical sort"),
onClick: () => handleChangeSort("title"),
selected: alphabeticalSort,
},
{
title: t("Manual sort"),
onClick: () => handleChangeSort("index"),
selected: !alphabeticalSort,
},
]}
/>
</ContextMenu>
</>
);
}

627
app/menus/DocumentMenu.js
View File

@ -1,21 +1,21 @@
// @flow
import { observable } from "mobx";
import { inject, observer } from "mobx-react";
import { observer } from "mobx-react";
import * as React from "react";
import { withTranslation, type TFunction } from "react-i18next";
import { Redirect } from "react-router-dom";
import AuthStore from "stores/AuthStore";
import CollectionStore from "stores/CollectionsStore";
import PoliciesStore from "stores/PoliciesStore";
import UiStore from "stores/UiStore";
import { useTranslation } from "react-i18next";
import { useHistory } from "react-router-dom";
import { useMenuState, MenuButton } from "reakit/Menu";
import styled from "styled-components";
import Document from "models/Document";
import DocumentDelete from "scenes/DocumentDelete";
import DocumentShare from "scenes/DocumentShare";
import DocumentTemplatize from "scenes/DocumentTemplatize";
import CollectionIcon from "components/CollectionIcon";
import { DropdownMenu } from "components/DropdownMenu";
import DropdownMenuItems from "components/DropdownMenu/DropdownMenuItems";
import ContextMenu from "components/ContextMenu";
import OverflowMenuButton from "components/ContextMenu/OverflowMenuButton";
import Template from "components/ContextMenu/Template";
import Flex from "components/Flex";
import Modal from "components/Modal";
import useStores from "hooks/useStores";
import {
documentHistoryUrl,
documentMoveUrl,
@ -24,348 +24,319 @@ import {
newDocumentUrl,
} from "utils/routeHelpers";
type Props = {
ui: UiStore,
auth: AuthStore,
position?: "left" | "right" | "center",
type Props = {|
document: Document,
collections: CollectionStore,
policies: PoliciesStore,
className: string,
isRevision?: boolean,
showPrint?: boolean,
modal?: boolean,
showToggleEmbeds?: boolean,
showPin?: boolean,
label?: React.Node,
label?: (any) => React.Node,
onOpen?: () => void,
onClose?: () => void,
t: TFunction,
};
|};
@observer
class DocumentMenu extends React.Component<Props> {
@observable redirectTo: ?string;
@observable showDeleteModal = false;
@observable showTemplateModal = false;
@observable showShareModal = false;
function DocumentMenu({
document,
isRevision,
className,
modal = true,
showToggleEmbeds,
showPrint,
showPin,
label,
onOpen,
onClose,
}: Props) {
const { policies, collections, auth, ui } = useStores();
const menu = useMenuState({ modal });
const history = useHistory();
const { t } = useTranslation();
const [renderModals, setRenderModals] = React.useState(false);
const [showDeleteModal, setShowDeleteModal] = React.useState(false);
const [showTemplateModal, setShowTemplateModal] = React.useState(false);
const [showShareModal, setShowShareModal] = React.useState(false);
componentDidUpdate() {
this.redirectTo = undefined;
}
handleNewChild = (ev: SyntheticEvent<>) => {
const { document } = this.props;
this.redirectTo = newDocumentUrl(document.collectionId, {
parentDocumentId: document.id,
});
};
handleDelete = (ev: SyntheticEvent<>) => {
this.showDeleteModal = true;
};
handleDocumentHistory = () => {
if (this.props.isRevision) {
this.redirectTo = documentUrl(this.props.document);
} else {
this.redirectTo = documentHistoryUrl(this.props.document);
const handleOpen = React.useCallback(() => {
setRenderModals(true);
if (onOpen) {
onOpen();
}
};
}, [onOpen]);
handleMove = (ev: SyntheticEvent<>) => {
this.redirectTo = documentMoveUrl(this.props.document);
};
const handleDuplicate = React.useCallback(
async (ev: SyntheticEvent<>) => {
const duped = await document.duplicate();
handleEdit = (ev: SyntheticEvent<>) => {
this.redirectTo = editDocumentUrl(this.props.document);
};
// when duplicating, go straight to the duplicated document content
history.push(duped.url);
ui.showToast(t("Document duplicated"), { type: "success" });
},
[ui, t, history, document]
);
handleDuplicate = async (ev: SyntheticEvent<>) => {
const duped = await this.props.document.duplicate();
const handleArchive = React.useCallback(
async (ev: SyntheticEvent<>) => {
await document.archive();
ui.showToast(t("Document archived"), { type: "success" });
},
[ui, t, document]
);
// when duplicating, go straight to the duplicated document content
this.redirectTo = duped.url;
const { t } = this.props;
this.props.ui.showToast(t("Document duplicated"), { type: "success" });
};
const handleRestore = React.useCallback(
async (ev: SyntheticEvent<>, options?: { collectionId: string }) => {
await document.restore(options);
ui.showToast(t("Document restored"), { type: "success" });
},
[ui, t, document]
);
handleOpenTemplateModal = () => {
this.showTemplateModal = true;
};
const handleUnpublish = React.useCallback(
async (ev: SyntheticEvent<>) => {
await document.unpublish();
ui.showToast(t("Document unpublished"), { type: "success" });
},
[ui, t, document]
);
handleCloseTemplateModal = () => {
this.showTemplateModal = false;
};
const handlePrint = React.useCallback((ev: SyntheticEvent<>) => {
window.print();
}, []);
handleCloseDeleteModal = () => {
this.showDeleteModal = false;
};
const handleStar = React.useCallback(
(ev: SyntheticEvent<>) => {
ev.stopPropagation();
document.star();
},
[document]
);
handleArchive = async (ev: SyntheticEvent<>) => {
await this.props.document.archive();
const { t } = this.props;
this.props.ui.showToast(t("Document archived"), { type: "success" });
};
const handleUnstar = React.useCallback(
(ev: SyntheticEvent<>) => {
ev.stopPropagation();
document.unstar();
},
[document]
);
handleRestore = async (
ev: SyntheticEvent<>,
options?: { collectionId: string }
) => {
await this.props.document.restore(options);
const { t } = this.props;
this.props.ui.showToast(t("Document restored"), { type: "success" });
};
const handleShareLink = React.useCallback(
async (ev: SyntheticEvent<>) => {
await document.share();
setShowShareModal(true);
},
[document]
);
handleUnpublish = async (ev: SyntheticEvent<>) => {
await this.props.document.unpublish();
const { t } = this.props;
this.props.ui.showToast(t("Document unpublished"), { type: "success" });
};
const can = policies.abilities(document.id);
const canShareDocuments = !!(can.share && auth.team && auth.team.sharing);
const canViewHistory = can.read && !can.restore;
const collection = collections.get(document.collectionId);
handlePin = (ev: SyntheticEvent<>) => {
this.props.document.pin();
};
handleUnpin = (ev: SyntheticEvent<>) => {
this.props.document.unpin();
};
handleStar = (ev: SyntheticEvent<>) => {
ev.stopPropagation();
this.props.document.star();
};
handleUnstar = (ev: SyntheticEvent<>) => {
ev.stopPropagation();
this.props.document.unstar();
};
handleExport = (ev: SyntheticEvent<>) => {
this.props.document.download();
};
handleShareLink = async (ev: SyntheticEvent<>) => {
const { document } = this.props;
await document.share();
this.showShareModal = true;
};
handleCloseShareModal = () => {
this.showShareModal = false;
};
render() {
if (this.redirectTo) return <Redirect to={this.redirectTo} push />;
const {
policies,
document,
position,
className,
showToggleEmbeds,
showPrint,
showPin,
auth,
collections,
label,
onOpen,
onClose,
t,
} = this.props;
const can = policies.abilities(document.id);
const canShareDocuments = !!(can.share && auth.team && auth.team.sharing);
const canViewHistory = can.read && !can.restore;
const collection = collections.get(document.collectionId);
return (
<>
<DropdownMenu
className={className}
position={position}
onOpen={onOpen}
onClose={onClose}
label={label}
>
<DropdownMenuItems
items={[
{
title: t("Restore"),
visible: !!can.unarchive,
onClick: this.handleRestore,
return (
<>
{label ? (
<MenuButton {...menu}>{label}</MenuButton>
) : (
<OverflowMenuButton className={className} {...menu} />
)}
<ContextMenu
{...menu}
aria-label={t("Document options")}
onOpen={handleOpen}
onClose={onClose}
>
<Template
{...menu}
items={[
{
title: t("Restore"),
visible: !!can.unarchive,
onClick: handleRestore,
},
{
title: t("Restore"),
visible: !!(collection && can.restore),
onClick: handleRestore,
},
{
title: t("Restore"),
visible: !collection && !!can.restore,
style: {
left: -170,
position: "relative",
top: -40,
},
{
title: t("Restore"),
visible: !!(collection && can.restore),
onClick: this.handleRestore,
},
{
title: t("Restore"),
visible: !collection && !!can.restore,
style: {
left: -170,
position: "relative",
top: -40,
hover: true,
items: [
{
type: "heading",
title: t("Choose a collection"),
},
hover: true,
items: [
{
type: "heading",
title: t("Choose a collection"),
},
...collections.orderedData.map((collection) => {
const can = policies.abilities(collection.id);
...collections.orderedData.map((collection) => {
const can = policies.abilities(collection.id);
return {
title: (
<>
<CollectionIcon collection={collection} />
&nbsp;{collection.name}
</>
),
onClick: (ev) =>
this.handleRestore(ev, { collectionId: collection.id }),
disabled: !can.update,
};
}),
],
},
{
title: t("Unpin"),
onClick: this.handleUnpin,
visible: !!(showPin && document.pinned && can.unpin),
},
{
title: t("Pin to collection"),
onClick: this.handlePin,
visible: !!(showPin && !document.pinned && can.pin),
},
{
title: t("Unstar"),
onClick: this.handleUnstar,
visible: document.isStarred && !!can.unstar,
},
{
title: t("Star"),
onClick: this.handleStar,
visible: !document.isStarred && !!can.star,
},
{
title: `${t("Share link")}…`,
onClick: this.handleShareLink,
visible: canShareDocuments,
},
{
title: t("Enable embeds"),
onClick: document.enableEmbeds,
visible: !!showToggleEmbeds && document.embedsDisabled,
},
{
title: t("Disable embeds"),
onClick: document.disableEmbeds,
visible: !!showToggleEmbeds && !document.embedsDisabled,
},
{
type: "separator",
},
{
title: t("New nested document"),
onClick: this.handleNewChild,
visible: !!can.createChildDocument,
},
{
title: `${t("Create template")}…`,
onClick: this.handleOpenTemplateModal,
visible: !!can.update && !document.isTemplate,
},
{
title: t("Edit"),
onClick: this.handleEdit,
visible: !!can.update,
},
{
title: t("Duplicate"),
onClick: this.handleDuplicate,
visible: !!can.update,
},
{
title: t("Unpublish"),
onClick: this.handleUnpublish,
visible: !!can.unpublish,
},
{
title: t("Archive"),
onClick: this.handleArchive,
visible: !!can.archive,
},
{
title: `${t("Delete")}…`,
onClick: this.handleDelete,
visible: !!can.delete,
},
{
title: `${t("Move")}…`,
onClick: this.handleMove,
visible: !!can.move,
},
{
type: "separator",
},
{
title: t("History"),
onClick: this.handleDocumentHistory,
visible: canViewHistory,
},
{
title: t("Download"),
onClick: this.handleExport,
visible: !!can.download,
},
{
title: t("Print"),
onClick: window.print,
visible: !!showPrint,
},
]}
/>
</DropdownMenu>
<Modal
title={t("Delete {{ documentName }}", {
documentName: this.props.document.noun,
})}
onRequestClose={this.handleCloseDeleteModal}
isOpen={this.showDeleteModal}
>
<DocumentDelete
document={this.props.document}
onSubmit={this.handleCloseDeleteModal}
/>
</Modal>
<Modal
title={t("Create template")}
onRequestClose={this.handleCloseTemplateModal}
isOpen={this.showTemplateModal}
>
<DocumentTemplatize
document={this.props.document}
onSubmit={this.handleCloseTemplateModal}
/>
</Modal>
<Modal
title={t("Share document")}
onRequestClose={this.handleCloseShareModal}
isOpen={this.showShareModal}
>
<DocumentShare
document={this.props.document}
onSubmit={this.handleCloseShareModal}
/>
</Modal>
</>
);
}
return {
title: (
<Flex align="center">
<CollectionIcon collection={collection} />
<CollectionName>{collection.name}</CollectionName>
</Flex>
),
onClick: (ev) =>
handleRestore(ev, { collectionId: collection.id }),
disabled: !can.update,
};
}),
],
},
{
title: t("Unpin"),
onClick: document.unpin,
visible: !!(showPin && document.pinned && can.unpin),
},
{
title: t("Pin to collection"),
onClick: document.pin,
visible: !!(showPin && !document.pinned && can.pin),
},
{
title: t("Unstar"),
onClick: handleUnstar,
visible: document.isStarred && !!can.unstar,
},
{
title: t("Star"),
onClick: handleStar,
visible: !document.isStarred && !!can.star,
},
{
title: `${t("Share link")}…`,
onClick: handleShareLink,
visible: canShareDocuments,
},
{
title: t("Enable embeds"),
onClick: document.enableEmbeds,
visible: !!showToggleEmbeds && document.embedsDisabled,
},
{
title: t("Disable embeds"),
onClick: document.disableEmbeds,
visible: !!showToggleEmbeds && !document.embedsDisabled,
},
{
type: "separator",
},
{
title: t("New nested document"),
to: newDocumentUrl(document.collectionId, {
parentDocumentId: document.id,
}),
visible: !!can.createChildDocument,
},
{
title: `${t("Create template")}…`,
onClick: () => setShowTemplateModal(true),
visible: !!can.update && !document.isTemplate,
},
{
title: t("Edit"),
to: editDocumentUrl(document),
visible: !!can.update,
},
{
title: t("Duplicate"),
onClick: handleDuplicate,
visible: !!can.update,
},
{
title: t("Unpublish"),
onClick: handleUnpublish,
visible: !!can.unpublish,
},
{
title: t("Archive"),
onClick: handleArchive,
visible: !!can.archive,
},
{
title: `${t("Delete")}…`,
onClick: () => setShowDeleteModal(true),
visible: !!can.delete,
},
{
title: `${t("Move")}…`,
to: documentMoveUrl(document),
visible: !!can.move,
},
{
type: "separator",
},
{
title: t("History"),
to: isRevision
? documentUrl(document)
: documentHistoryUrl(document),
visible: canViewHistory,
},
{
title: t("Download"),
onClick: document.download,
visible: !!can.download,
},
{
title: t("Print"),
onClick: handlePrint,
visible: !!showPrint,
},
]}
/>
</ContextMenu>
{renderModals && (
<>
<Modal
title={t("Delete {{ documentName }}", {
documentName: document.noun,
})}
onRequestClose={() => setShowDeleteModal(false)}
isOpen={showDeleteModal}
>
<DocumentDelete
document={document}
onSubmit={() => setShowDeleteModal(false)}
/>
</Modal>
<Modal
title={t("Create template")}
onRequestClose={() => setShowTemplateModal(false)}
isOpen={showTemplateModal}
>
<DocumentTemplatize
document={document}
onSubmit={() => setShowTemplateModal(false)}
/>
</Modal>
<Modal
title={t("Share document")}
onRequestClose={() => setShowShareModal(false)}
isOpen={showShareModal}
>
<DocumentShare
document={document}
onSubmit={() => setShowShareModal(false)}
/>
</Modal>
</>
)}
</>
);
}
export default withTranslation()<DocumentMenu>(
inject("ui", "auth", "collections", "policies")(DocumentMenu)
);
const CollectionName = styled.div`
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
`;
export default observer(DocumentMenu);

36
app/menus/GroupMemberMenu.js Normal file
View File

@ -0,0 +1,36 @@
// @flow
import { observer } from "mobx-react";
import * as React from "react";
import { useTranslation } from "react-i18next";
import { useMenuState } from "reakit/Menu";
import ContextMenu from "components/ContextMenu";
import OverflowMenuButton from "components/ContextMenu/OverflowMenuButton";
import Template from "components/ContextMenu/Template";
type Props = {|
onRemove: () => void,
|};
function GroupMemberMenu({ onRemove }: Props) {
const { t } = useTranslation();
const menu = useMenuState({ modal: true });
return (
<>
<OverflowMenuButton {...menu} />
<ContextMenu {...menu} aria-label={t("Group member options")}>
<Template
{...menu}
items={[
{
title: t("Remove"),
onClick: onRemove,
},
]}
/>
</ContextMenu>
</>
);
}
export default observer(GroupMemberMenu);

156
app/menus/GroupMenu.js
View File

@ -1,108 +1,74 @@
// @flow
import { observable } from "mobx";
import { inject, observer } from "mobx-react";
import { observer } from "mobx-react";
import * as React from "react";
import { withTranslation, type TFunction } from "react-i18next";
import { withRouter, type RouterHistory } from "react-router-dom";
import PoliciesStore from "stores/PoliciesStore";
import UiStore from "stores/UiStore";
import { useTranslation } from "react-i18next";
import { useMenuState } from "reakit/Menu";
import Group from "models/Group";
import GroupDelete from "scenes/GroupDelete";
import GroupEdit from "scenes/GroupEdit";
import { DropdownMenu } from "components/DropdownMenu";
import DropdownMenuItems from "components/DropdownMenu/DropdownMenuItems";
import ContextMenu from "components/ContextMenu";
import OverflowMenuButton from "components/ContextMenu/OverflowMenuButton";
import Template from "components/ContextMenu/Template";
import Modal from "components/Modal";
import useStores from "hooks/useStores";
type Props = {
ui: UiStore,
policies: PoliciesStore,
type Props = {|
group: Group,
history: RouterHistory,
onMembers: () => void,
onOpen?: () => void,
onClose?: () => void,
t: TFunction,
};
|};
@observer
class GroupMenu extends React.Component<Props> {
@observable editModalOpen: boolean = false;
@observable deleteModalOpen: boolean = false;
function GroupMenu({ group, onMembers }: Props) {
const { t } = useTranslation();
const { policies } = useStores();
const menu = useMenuState({ modal: true });
const [editModalOpen, setEditModalOpen] = React.useState(false);
const [deleteModalOpen, setDeleteModalOpen] = React.useState(false);
const can = policies.abilities(group.id);
onEdit = (ev: SyntheticEvent<>) => {
ev.preventDefault();
this.editModalOpen = true;
};
onDelete = (ev: SyntheticEvent<>) => {
ev.preventDefault();
this.deleteModalOpen = true;
};
handleEditModalClose = () => {
this.editModalOpen = false;
};
handleDeleteModalClose = () => {
this.deleteModalOpen = false;
};
render() {
const { policies, group, onOpen, onClose, t } = this.props;
const can = policies.abilities(group.id);
return (
<>
<Modal
title={t("Edit group")}
onRequestClose={this.handleEditModalClose}
isOpen={this.editModalOpen}
>
<GroupEdit
group={this.props.group}
onSubmit={this.handleEditModalClose}
/>
</Modal>
<Modal
title={t("Delete group")}
onRequestClose={this.handleDeleteModalClose}
isOpen={this.deleteModalOpen}
>
<GroupDelete
group={this.props.group}
onSubmit={this.handleDeleteModalClose}
/>
</Modal>
<DropdownMenu onOpen={onOpen} onClose={onClose}>
<DropdownMenuItems
items={[
{
title: `${t("Members")}…`,
onClick: this.props.onMembers,
visible: !!(group && can.read),
},
{
type: "separator",
},
{
title: `${t("Edit")}…`,
onClick: this.onEdit,
visible: !!(group && can.update),
},
{
title: `${t("Delete")}…`,
onClick: this.onDelete,
visible: !!(group && can.delete),
},
]}
/>
</DropdownMenu>
</>
);
}
return (
<>
<Modal
title={t("Edit group")}
onRequestClose={() => setEditModalOpen(false)}
isOpen={editModalOpen}
>
<GroupEdit group={group} onSubmit={() => setEditModalOpen(false)} />
</Modal>
<Modal
title={t("Delete group")}
onRequestClose={() => setDeleteModalOpen(false)}
isOpen={deleteModalOpen}
>
<GroupDelete group={group} onSubmit={() => setDeleteModalOpen(false)} />
</Modal>
<OverflowMenuButton {...menu} />
<ContextMenu {...menu} aria-label={t("Group options")}>
<Template
{...menu}
items={[
{
title: `${t("Members")}…`,
onClick: onMembers,
visible: !!(group && can.read),
},
{
type: "separator",
},
{
title: `${t("Edit")}…`,
onClick: () => setEditModalOpen(true),
visible: !!(group && can.update),
},
{
title: `${t("Delete")}…`,
onClick: () => setDeleteModalOpen(true),
visible: !!(group && can.delete),
},
]}
/>
</ContextMenu>
</>
);
}
export default withTranslation()<GroupMenu>(
inject("policies")(withRouter(GroupMenu))
);
export default observer(GroupMenu);

36
app/menus/MemberMenu.js Normal file
View File

@ -0,0 +1,36 @@
// @flow
import { observer } from "mobx-react";
import * as React from "react";
import { useTranslation } from "react-i18next";
import { useMenuState } from "reakit/Menu";
import ContextMenu from "components/ContextMenu";
import OverflowMenuButton from "components/ContextMenu/OverflowMenuButton";
import Template from "components/ContextMenu/Template";
type Props = {|
onRemove: () => void,
|};
function MemberMenu({ onRemove }: Props) {
const { t } = useTranslation();
const menu = useMenuState({ modal: true });
return (
<>
<OverflowMenuButton {...menu} />
<ContextMenu {...menu} aria-label={t("Member options")}>
<Template
{...menu}
items={[
{
title: t("Remove"),
onClick: onRemove,
},
]}
/>
</ContextMenu>
</>
);
}
export default observer(MemberMenu);

75
app/menus/NewChildDocumentMenu.js
View File

@ -1,53 +1,32 @@
// @flow
import { observable } from "mobx";
import { observer, inject } from "mobx-react";
import { observer } from "mobx-react";
import * as React from "react";
import { Trans, withTranslation, type TFunction } from "react-i18next";
import { Redirect } from "react-router-dom";
import CollectionsStore from "stores/CollectionsStore";
import { useTranslation, Trans } from "react-i18next";
import { useMenuState, MenuButton } from "reakit/Menu";
import Document from "models/Document";
import { DropdownMenu } from "components/DropdownMenu";
import DropdownMenuItems from "components/DropdownMenu/DropdownMenuItems";
import ContextMenu from "components/ContextMenu";
import Template from "components/ContextMenu/Template";
import useStores from "hooks/useStores";
import { newDocumentUrl } from "utils/routeHelpers";
type Props = {
label?: React.Node,
label?: (any) => React.Node,
document: Document,
collections: CollectionsStore,
t: TFunction,
};
@observer
class NewChildDocumentMenu extends React.Component<Props> {
@observable redirectTo: ?string;
function NewChildDocumentMenu({ document, label }: Props) {
const menu = useMenuState({ modal: true });
const { collections } = useStores();
const { t } = useTranslation();
const collection = collections.get(document.collectionId);
const collectionName = collection ? collection.name : t("collection");
componentDidUpdate() {
this.redirectTo = undefined;
}
handleNewDocument = () => {
const { document } = this.props;
this.redirectTo = newDocumentUrl(document.collectionId);
};
handleNewChild = () => {
const { document } = this.props;
this.redirectTo = newDocumentUrl(document.collectionId, {
parentDocumentId: document.id,
});
};
render() {
if (this.redirectTo) return <Redirect to={this.redirectTo} push />;
const { label, document, collections, t } = this.props;
const collection = collections.get(document.collectionId);
const collectionName = collection ? collection.name : t("collection");
return (
<DropdownMenu label={label}>
<DropdownMenuItems
return (
<>
<MenuButton {...menu}>{label}</MenuButton>
<ContextMenu {...menu} aria-label={t("New child document")}>
<Template
{...menu}
items={[
{
title: (
@ -57,19 +36,19 @@ class NewChildDocumentMenu extends React.Component<Props> {
</Trans>
</span>
),
onClick: this.handleNewDocument,
to: newDocumentUrl(document.collectionId),
},
{
title: t("New nested document"),
onClick: this.handleNewChild,
to: newDocumentUrl(document.collectionId, {
parentDocumentId: document.id,
}),
},
]}
/>
</DropdownMenu>
);
}
</ContextMenu>
</>
);
}
export default withTranslation()<NewChildDocumentMenu>(
inject("collections")(NewChildDocumentMenu)
);
export default observer(NewChildDocumentMenu);

124
app/menus/NewDocumentMenu.js
View File

@ -1,92 +1,72 @@
// @flow
import { observable } from "mobx";
import { inject, observer } from "mobx-react";
import { observer } from "mobx-react";
import { PlusIcon } from "outline-icons";
import * as React from "react";
import { withTranslation, type TFunction } from "react-i18next";
import { Redirect } from "react-router-dom";
import CollectionsStore from "stores/CollectionsStore";
import DocumentsStore from "stores/DocumentsStore";
import PoliciesStore from "stores/PoliciesStore";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import { MenuButton, useMenuState } from "reakit/Menu";
import styled from "styled-components";
import Button from "components/Button";
import CollectionIcon from "components/CollectionIcon";
import { DropdownMenu, Header } from "components/DropdownMenu";
import DropdownMenuItems from "components/DropdownMenu/DropdownMenuItems";
import ContextMenu from "components/ContextMenu";
import Header from "components/ContextMenu/Header";
import Template from "components/ContextMenu/Template";
import Flex from "components/Flex";
import useStores from "hooks/useStores";
import { newDocumentUrl } from "utils/routeHelpers";
type Props = {
label?: React.Node,
documents: DocumentsStore,
collections: CollectionsStore,
policies: PoliciesStore,
t: TFunction,
};
function NewDocumentMenu() {
const menu = useMenuState();
const { t } = useTranslation();
const { collections, policies } = useStores();
const singleCollection = collections.orderedData.length === 1;
@observer
class NewDocumentMenu extends React.Component<Props> {
@observable redirectTo: ?string;
componentDidUpdate() {
this.redirectTo = undefined;
if (singleCollection) {
return (
<Button
as={Link}
to={newDocumentUrl(collections.orderedData[0].id)}
icon={<PlusIcon />}
small
>
{t("New doc")}
</Button>
);
}
handleNewDocument = (
collectionId: string,
options?: {
parentDocumentId?: string,
template?: boolean,
templateId?: string,
}
) => {
this.redirectTo = newDocumentUrl(collectionId, options);
};
onOpen = () => {
const { collections } = this.props;
if (collections.orderedData.length === 1) {
this.handleNewDocument(collections.orderedData[0].id);
}
};
render() {
if (this.redirectTo) return <Redirect to={this.redirectTo} push />;
const { collections, documents, policies, label, t, ...rest } = this.props;
const singleCollection = collections.orderedData.length === 1;
return (
<DropdownMenu
label={
label || (
<Button icon={<PlusIcon />} small>
{t("New doc")}
{singleCollection ? "" : "…"}
</Button>
)
}
onOpen={this.onOpen}
{...rest}
>
return (
<>
<MenuButton {...menu}>
{(props) => (
<Button icon={<PlusIcon />} {...props} small>
{`${t("New doc")}…`}
</Button>
)}
</MenuButton>
<ContextMenu {...menu} aria-label={t("New document")}>
<Header>{t("Choose a collection")}</Header>
<DropdownMenuItems
<Template
{...menu}
items={collections.orderedData.map((collection) => ({
onClick: () => this.handleNewDocument(collection.id),
to: newDocumentUrl(collection.id),
disabled: !policies.abilities(collection.id).update,
title: (
<>
<Flex align="center">
<CollectionIcon collection={collection} />
&nbsp;{collection.name}
</>
<CollectionName>{collection.name}</CollectionName>
</Flex>
),
}))}
/>
</DropdownMenu>
);
}
</ContextMenu>
</>
);
}
export default withTranslation()<NewDocumentMenu>(
inject("collections", "documents", "policies")(NewDocumentMenu)
);
const CollectionName = styled.div`
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
`;
export default observer(NewDocumentMenu);

97
app/menus/NewTemplateMenu.js
View File

@ -1,74 +1,59 @@
// @flow
import { observable } from "mobx";
import { inject, observer } from "mobx-react";
import { observer } from "mobx-react";
import { PlusIcon } from "outline-icons";
import * as React from "react";
import { withTranslation, type TFunction } from "react-i18next";
import { Redirect } from "react-router-dom";
import CollectionsStore from "stores/CollectionsStore";
import PoliciesStore from "stores/PoliciesStore";
import { useTranslation } from "react-i18next";
import { useMenuState, MenuButton } from "reakit/Menu";
import styled from "styled-components";
import Button from "components/Button";
import CollectionIcon from "components/CollectionIcon";
import { DropdownMenu, Header } from "components/DropdownMenu";
import DropdownMenuItems from "components/DropdownMenu/DropdownMenuItems";
import ContextMenu from "components/ContextMenu";
import Header from "components/ContextMenu/Header";
import Template from "components/ContextMenu/Template";
import Flex from "components/Flex";
import useStores from "hooks/useStores";
import { newDocumentUrl } from "utils/routeHelpers";
type Props = {
label?: React.Node,
collections: CollectionsStore,
policies: PoliciesStore,
t: TFunction,
};
function NewTemplateMenu() {
const menu = useMenuState();
const { t } = useTranslation();
const { collections, policies } = useStores();
@observer
class NewTemplateMenu extends React.Component<Props> {
@observable redirectTo: ?string;
componentDidUpdate() {
this.redirectTo = undefined;
}
handleNewDocument = (collectionId: string) => {
this.redirectTo = newDocumentUrl(collectionId, {
template: true,
});
};
render() {
if (this.redirectTo) return <Redirect to={this.redirectTo} push />;
const { collections, policies, label, t, ...rest } = this.props;
return (
<DropdownMenu
label={
label || (
<Button icon={<PlusIcon />} small>
{t("New template")}…
</Button>
)
}
{...rest}
>
return (
<>
<MenuButton {...menu}>
{(props) => (
<Button icon={<PlusIcon />} {...props} small>
{t("New template")}…
</Button>
)}
</MenuButton>
<ContextMenu aria-label={t("New template")} {...menu}>
<Header>{t("Choose a collection")}</Header>
<DropdownMenuItems
<Template
{...menu}
items={collections.orderedData.map((collection) => ({
onClick: () => this.handleNewDocument(collection.id),
to: newDocumentUrl(collection.id, {
template: true,
}),
disabled: !policies.abilities(collection.id).update,
title: (
<>
<Flex align="center">
<CollectionIcon collection={collection} />
&nbsp;{collection.name}
</>
<CollectionName>{collection.name}</CollectionName>
</Flex>
),
}))}
/>
</DropdownMenu>
);
}
</ContextMenu>
</>
);
}
export default withTranslation()<NewTemplateMenu>(
inject("collections", "policies")(NewTemplateMenu)
);
const CollectionName = styled.div`
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
`;
export default observer(NewTemplateMenu);

99
app/menus/RevisionMenu.js
View File

@ -1,68 +1,69 @@
// @flow
import { inject } from "mobx-react";
import { observer } from "mobx-react";
import * as React from "react";
import { withTranslation, type TFunction } from "react-i18next";
import { withRouter, type RouterHistory } from "react-router-dom";
import UiStore from "stores/UiStore";
import { useTranslation } from "react-i18next";
import { useHistory } from "react-router-dom";
import { useMenuState } from "reakit/Menu";
import Document from "models/Document";
import Revision from "models/Revision";
import ContextMenu from "components/ContextMenu";
import MenuItem from "components/ContextMenu/MenuItem";
import OverflowMenuButton from "components/ContextMenu/OverflowMenuButton";
import Separator from "components/ContextMenu/Separator";
import CopyToClipboard from "components/CopyToClipboard";
import { DropdownMenu, DropdownMenuItem } from "components/DropdownMenu";
import useStores from "hooks/useStores";
import { documentHistoryUrl } from "utils/routeHelpers";
type Props = {
onOpen?: () => void,
onClose: () => void,
history: RouterHistory,
type Props = {|
document: Document,
revision: Revision,
iconColor?: string,
className?: string,
label: React.Node,
ui: UiStore,
t: TFunction,
};
|};
class RevisionMenu extends React.Component<Props> {
handleRestore = async (ev: SyntheticEvent<>) => {
ev.preventDefault();
await this.props.document.restore({ revisionId: this.props.revision.id });
const { t } = this.props;
this.props.ui.showToast(t("Document restored"), { type: "success" });
this.props.history.push(this.props.document.url);
};
function RevisionMenu({ document, revision, className, iconColor }: Props) {
const { ui } = useStores();
const menu = useMenuState({ modal: true });
const { t } = useTranslation();
const history = useHistory();
handleCopy = () => {
const { t } = this.props;
this.props.ui.showToast(t("Link copied"), { type: "info" });
};
const handleRestore = React.useCallback(
async (ev: SyntheticEvent<>) => {
ev.preventDefault();
await document.restore({ revisionId: revision.id });
ui.showToast(t("Document restored"), { type: "success" });
history.push(document.url);
},
[history, ui, t, document, revision]
);
render() {
const { className, label, onOpen, onClose, t } = this.props;
const url = `${window.location.origin}${documentHistoryUrl(
this.props.document,
this.props.revision.id
)}`;
const handleCopy = React.useCallback(() => {
ui.showToast(t("Link copied"), { type: "info" });
}, [ui, t]);
return (
<DropdownMenu
onOpen={onOpen}
onClose={onClose}
const url = `${window.location.origin}${documentHistoryUrl(
document,
revision.id
)}`;
return (
<>
<OverflowMenuButton
className={className}
label={label}
>
<DropdownMenuItem onClick={this.handleRestore}>
iconColor={iconColor}
{...menu}
/>
<ContextMenu {...menu} aria-label={t("Revision options")}>
<MenuItem {...menu} onClick={handleRestore}>
{t("Restore version")}
</DropdownMenuItem>
<hr />
<CopyToClipboard text={url} onCopy={this.handleCopy}>
<DropdownMenuItem>{t("Copy link")}</DropdownMenuItem>
</MenuItem>
<Separator />
<CopyToClipboard text={url} onCopy={handleCopy}>
<MenuItem {...menu}>{t("Copy link")}</MenuItem>
</CopyToClipboard>
</DropdownMenu>
);
}
</ContextMenu>
</>
);
}
export default withTranslation()<RevisionMenu>(
withRouter(inject("ui")(RevisionMenu))
);
export default observer(RevisionMenu);

104
app/menus/ShareMenu.js
View File

@ -1,75 +1,69 @@
// @flow
import { observable } from "mobx";
import { inject, observer } from "mobx-react";
import { observer } from "mobx-react";
import * as React from "react";
import { withTranslation, type TFunction } from "react-i18next";
import { Redirect } from "react-router-dom";
import SharesStore from "stores/SharesStore";
import UiStore from "stores/UiStore";
import { useTranslation } from "react-i18next";
import { useHistory } from "react-router-dom";
import { useMenuState } from "reakit/Menu";
import Share from "models/Share";
import ContextMenu from "components/ContextMenu";
import MenuItem from "components/ContextMenu/MenuItem";
import OverflowMenuButton from "components/ContextMenu/OverflowMenuButton";
import CopyToClipboard from "components/CopyToClipboard";
import { DropdownMenu, DropdownMenuItem } from "components/DropdownMenu";
import useStores from "hooks/useStores";
type Props = {
onOpen?: () => void,
onClose: () => void,
shares: SharesStore,
ui: UiStore,
share: Share,
t: TFunction,
};
@observer
class ShareMenu extends React.Component<Props> {
@observable redirectTo: ?string;
function ShareMenu({ share }: Props) {
const menu = useMenuState({ modal: true });
const { ui, shares } = useStores();
const { t } = useTranslation();
const history = useHistory();
componentDidUpdate() {
this.redirectTo = undefined;
}
const handleGoToDocument = React.useCallback(
(ev: SyntheticEvent<>) => {
ev.preventDefault();
history.push(share.documentUrl);
},
[history, share]
);
handleGoToDocument = (ev: SyntheticEvent<>) => {
ev.preventDefault();
this.redirectTo = this.props.share.documentUrl;
};
const handleRevoke = React.useCallback(
async (ev: SyntheticEvent<>) => {
ev.preventDefault();
handleRevoke = async (ev: SyntheticEvent<>) => {
ev.preventDefault();
try {
await shares.revoke(share);
ui.showToast(t("Share link revoked"), { type: "info" });
} catch (err) {
ui.showToast(err.message, { type: "error" });
}
},
[t, shares, share, ui]
);
try {
await this.props.shares.revoke(this.props.share);
const { t } = this.props;
this.props.ui.showToast(t("Share link revoked"), { type: "info" });
} catch (err) {
this.props.ui.showToast(err.message, { type: "error" });
}
};
const handleCopy = React.useCallback(() => {
ui.showToast(t("Share link copied"), { type: "info" });
}, [t, ui]);
handleCopy = () => {
const { t } = this.props;
this.props.ui.showToast(t("Share link copied"), { type: "info" });
};
render() {
if (this.redirectTo) return <Redirect to={this.redirectTo} push />;
const { share, onOpen, onClose, t } = this.props;
return (
<DropdownMenu onOpen={onOpen} onClose={onClose}>
<CopyToClipboard text={share.url} onCopy={this.handleCopy}>
<DropdownMenuItem>{t("Copy link")}</DropdownMenuItem>
return (
<>
<OverflowMenuButton {...menu} />
<ContextMenu {...menu} aria-label={t("Share options")}>
<CopyToClipboard text={share.url} onCopy={handleCopy}>
<MenuItem {...menu}>{t("Copy link")}</MenuItem>
</CopyToClipboard>
<DropdownMenuItem onClick={this.handleGoToDocument}>
<MenuItem {...menu} onClick={handleGoToDocument}>
{t("Go to document")}
</DropdownMenuItem>
</MenuItem>
<hr />
<DropdownMenuItem onClick={this.handleRevoke}>
<MenuItem {...menu} onClick={handleRevoke}>
{t("Revoke link")}
</DropdownMenuItem>
</DropdownMenu>
);
}
</MenuItem>
</ContextMenu>
</>
);
}
export default withTranslation()<ShareMenu>(inject("shares", "ui")(ShareMenu));
export default observer(ShareMenu);

62
app/menus/TemplatesMenu.js
View File

@ -1,42 +1,42 @@
// @flow
import { observer, inject } from "mobx-react";
import { observer } from "mobx-react";
import { DocumentIcon } from "outline-icons";
import * as React from "react";
import { withTranslation, type TFunction } from "react-i18next";
import { useTranslation } from "react-i18next";
import { MenuButton, useMenuState } from "reakit/Menu";
import styled from "styled-components";
import DocumentsStore from "stores/DocumentsStore";
import Document from "models/Document";
import Button from "components/Button";
import { DropdownMenu, DropdownMenuItem } from "components/DropdownMenu";
import ContextMenu from "components/ContextMenu";
import MenuItem from "components/ContextMenu/MenuItem";
import useStores from "hooks/useStores";
type Props = {
type Props = {|
document: Document,
documents: DocumentsStore,
t: TFunction,
};
|};
@observer
class TemplatesMenu extends React.Component<Props> {
render() {
const { documents, document, t, ...rest } = this.props;
const templates = documents.templatesInCollection(document.collectionId);
function TemplatesMenu({ document }: Props) {
const menu = useMenuState({ modal: true });
const { documents } = useStores();
const { t } = useTranslation();
const templates = documents.templatesInCollection(document.collectionId);
if (!templates.length) {
return null;
}
if (!templates.length) {
return null;
}
return (
<DropdownMenu
position="left"
label={
<Button disclosure neutral>
return (
<>
<MenuButton {...menu}>
{(props) => (
<Button {...props} disclosure neutral>
{t("Templates")}
</Button>
}
{...rest}
>
)}
</MenuButton>
<ContextMenu {...menu} aria-label={t("Templates")}>
{templates.map((template) => (
<DropdownMenuItem
<MenuItem
key={template.id}
onClick={() => document.updateFromTemplate(template)}
>
@ -48,17 +48,15 @@ class TemplatesMenu extends React.Component<Props> {
{t("By {{ author }}", { author: template.createdBy.name })}
</Author>
</div>
</DropdownMenuItem>
</MenuItem>
))}
</DropdownMenu>
);
}
</ContextMenu>
</>
);
}
const Author = styled.div`
font-size: 13px;
`;
export default withTranslation()<TemplatesMenu>(
inject("documents")(TemplatesMenu)
);
export default observer(TemplatesMenu);

168
app/menus/UserMenu.js
View File

@ -1,98 +1,110 @@
// @flow
import { inject, observer } from "mobx-react";
import { observer } from "mobx-react";
import * as React from "react";
import { withTranslation, type TFunction } from "react-i18next";
import UsersStore from "stores/UsersStore";
import { useTranslation } from "react-i18next";
import { useMenuState } from "reakit/Menu";
import User from "models/User";
import { DropdownMenu } from "components/DropdownMenu";
import DropdownMenuItems from "components/DropdownMenu/DropdownMenuItems";
import ContextMenu from "components/ContextMenu";
import OverflowMenuButton from "components/ContextMenu/OverflowMenuButton";
import Template from "components/ContextMenu/Template";
import useStores from "hooks/useStores";
type Props = {
type Props = {|
user: User,
users: UsersStore,
t: TFunction,
};
|};
@observer
class UserMenu extends React.Component<Props> {
handlePromote = (ev: SyntheticEvent<>) => {
ev.preventDefault();
const { user, users, t } = this.props;
if (
!window.confirm(
t(
"Are you sure you want to make {{ userName }} an admin? Admins can modify team and billing information.",
{ userName: user.name }
function UserMenu({ user }: Props) {
const { users } = useStores();
const { t } = useTranslation();
const menu = useMenuState({ modal: true });
const handlePromote = React.useCallback(
(ev: SyntheticEvent<>) => {
ev.preventDefault();
if (
!window.confirm(
t(
"Are you sure you want to make {{ userName }} an admin? Admins can modify team and billing information.",
{ userName: user.name }
)
)
)
) {
return;
}
users.promote(user);
};
) {
return;
}
users.promote(user);
},
[users, user, t]
);
handleDemote = (ev: SyntheticEvent<>) => {
ev.preventDefault();
const { user, users, t } = this.props;
if (
!window.confirm(
t("Are you sure you want to make {{ userName }} a member?", {
userName: user.name,
})
)
) {
return;
}
users.demote(user);
};
handleSuspend = (ev: SyntheticEvent<>) => {
ev.preventDefault();
const { user, users, t } = this.props;
if (
!window.confirm(
t(
"Are you sure you want to suspend this account? Suspended users will be prevented from logging in."
const handleDemote = React.useCallback(
(ev: SyntheticEvent<>) => {
ev.preventDefault();
if (
!window.confirm(
t("Are you sure you want to make {{ userName }} a member?", {
userName: user.name,
})
)
)
) {
return;
}
users.suspend(user);
};
) {
return;
}
users.demote(user);
},
[users, user, t]
);
handleRevoke = (ev: SyntheticEvent<>) => {
ev.preventDefault();
const { user, users } = this.props;
users.delete(user, { confirmation: true });
};
const handleSuspend = React.useCallback(
(ev: SyntheticEvent<>) => {
ev.preventDefault();
if (
!window.confirm(
t(
"Are you sure you want to suspend this account? Suspended users will be prevented from logging in."
)
)
) {
return;
}
users.suspend(user);
},
[users, user, t]
);
handleActivate = (ev: SyntheticEvent<>) => {
ev.preventDefault();
const { user, users } = this.props;
users.activate(user);
};
const handleRevoke = React.useCallback(
(ev: SyntheticEvent<>) => {
ev.preventDefault();
users.delete(user, { confirmation: true });
},
[users, user]
);
render() {
const { user, t } = this.props;
const handleActivate = React.useCallback(
(ev: SyntheticEvent<>) => {
ev.preventDefault();
users.activate(user);
},
[users, user]
);
return (
<DropdownMenu>
<DropdownMenuItems
return (
<>
<OverflowMenuButton {...menu} />
<ContextMenu {...menu} aria-label={t("User options")}>
<Template
{...menu}
items={[
{
title: t("Make {{ userName }} a member…", {
userName: user.name,
}),
onClick: this.handleDemote,
onClick: handleDemote,
visible: user.isAdmin,
},
{
title: t("Make {{ userName }} an admin…", {
userName: user.name,
}),
onClick: this.handlePromote,
onClick: handlePromote,
visible: !user.isAdmin && !user.isSuspended,
},
{
@ -100,24 +112,24 @@ class UserMenu extends React.Component<Props> {
},
{
title: `${t("Revoke invite")}…`,
onClick: this.handleRevoke,
onClick: handleRevoke,
visible: user.isInvited,
},
{
title: t("Activate account"),
onClick: this.handleActivate,
onClick: handleActivate,
visible: !user.isInvited && user.isSuspended,
},
{
title: `${t("Suspend account")}…`,
onClick: this.handleSuspend,
onClick: handleSuspend,
visible: !user.isInvited && !user.isSuspended,
},
]}
/>
</DropdownMenu>
);
}
</ContextMenu>
</>
);
}
export default withTranslation()<UserMenu>(inject("users")(UserMenu));
export default observer(UserMenu);

17
app/scenes/Collection.js
View File

@ -2,7 +2,7 @@
import { observable } from "mobx";
import { observer, inject } from "mobx-react";
import { NewDocumentIcon, PlusIcon, PinIcon } from "outline-icons";
import { NewDocumentIcon, PlusIcon, PinIcon, MoreIcon } from "outline-icons";
import * as React from "react";
import { withTranslation, Trans, type TFunction } from "react-i18next";
import { Redirect, Link, Switch, Route, type Match } from "react-router-dom";
@ -164,7 +164,20 @@ class CollectionScene extends React.Component<Props> {
</>
)}
<Action>
<CollectionMenu collection={this.collection} />
<CollectionMenu
collection={this.collection}
placement="bottom-end"
modal={false}
label={(props) => (
<Button
icon={<MoreIcon />}
{...props}
borderOnHover
neutral
small
/>
)}
/>
</Action>
</Actions>
);

15
app/scenes/CollectionMembers/components/CollectionGroupMemberListItem.js
View File

@ -4,9 +4,9 @@ import { useTranslation } from "react-i18next";
import styled from "styled-components";
import CollectionGroupMembership from "models/CollectionGroupMembership";
import Group from "models/Group";
import { DropdownMenu, DropdownMenuItem } from "components/DropdownMenu";
import GroupListItem from "components/GroupListItem";
import InputSelect from "components/InputSelect";
import CollectionGroupMemberMenu from "menus/CollectionGroupMemberMenu";
type Props = {
group: Group,
@ -50,15 +50,10 @@ const MemberListItem = ({
labelHidden
/>
<ButtonWrap>
<DropdownMenu>
<DropdownMenuItem onClick={openMembersModal}>
{t("Members")}…
</DropdownMenuItem>
<hr />
<DropdownMenuItem onClick={onRemove}>
{t("Remove")}
</DropdownMenuItem>
</DropdownMenu>
<CollectionGroupMemberMenu
onMembers={openMembersModal}
onRemove={onRemove}
/>
</ButtonWrap>
</>
)}

10
app/scenes/CollectionMembers/components/MemberListItem.js
View File

@ -7,11 +7,11 @@ import User from "models/User";
import Avatar from "components/Avatar";
import Badge from "components/Badge";
import Button from "components/Button";
import { DropdownMenu, DropdownMenuItem } from "components/DropdownMenu";
import Flex from "components/Flex";
import InputSelect from "components/InputSelect";
import ListItem from "components/List/Item";
import Time from "components/Time";
import MemberMenu from "menus/MemberMenu";
type Props = {
user: User,
@ -69,13 +69,7 @@ const MemberListItem = ({
/>
)}
&nbsp;&nbsp;
{canEdit && onRemove && (
<DropdownMenu>
<DropdownMenuItem onClick={onRemove}>
{t("Remove")}
</DropdownMenuItem>
</DropdownMenu>
)}
{canEdit && onRemove && <MemberMenu onRemove={onRemove} />}
{canEdit && onAdd && (
<Button onClick={onAdd} neutral>
{t("Add")}

11
app/scenes/Document/components/Header.js
View File

@ -290,18 +290,18 @@ class Header extends React.Component<Props> {
<Action>
<NewChildDocumentMenu
document={document}
label={
label={(props) => (
<Tooltip
tooltip={t("New document")}
shortcut="n"
delay={500}
placement="bottom"
>
<Button icon={<PlusIcon />} neutral>
<Button icon={<PlusIcon />} {...props} neutral>
{t("New doc")}
</Button>
</Tooltip>
}
)}
/>
</Action>
)}
@ -343,15 +343,16 @@ class Header extends React.Component<Props> {
<DocumentMenu
document={document}
isRevision={isRevision}
label={
label={(props) => (
<Button
icon={<MoreIcon />}
iconColor="currentColor"
{...props}
borderOnHover
neutral
small
/>
}
)}
showToggleEmbeds={canToggleEmbeds}
showPrint
/>

1
app/scenes/GroupMembers/AddPeopleToGroup.js
View File

@ -112,7 +112,6 @@ class AddPeopleToGroup extends React.Component<Props> {
key={item.id}
user={item}
onAdd={() => this.handleAddUser(item)}
canEdit
/>
)}
/>

1
app/scenes/GroupMembers/GroupMembers.js
View File

@ -103,7 +103,6 @@ class GroupMembers extends React.Component<Props> {
<GroupMemberListItem
key={item.id}
user={item}
membership={groupMemberships.get(`${item.id}-${group.id}`)}
onRemove={
can.update ? () => this.handleRemoveUser(item) : undefined
}

21
app/scenes/GroupMembers/components/GroupMemberListItem.js
View File

@ -1,28 +1,21 @@
// @flow
import * as React from "react";
import GroupMembership from "models/GroupMembership";
import User from "models/User";
import Avatar from "components/Avatar";
import Badge from "components/Badge";
import Button from "components/Button";
import { DropdownMenu, DropdownMenuItem } from "components/DropdownMenu";
import Flex from "components/Flex";
import ListItem from "components/List/Item";
import Time from "components/Time";
import GroupMemberMenu from "menus/GroupMemberMenu";
type Props = {
type Props = {|
user: User,
groupMembership?: ?GroupMembership,
onAdd?: () => Promise<void>,
onRemove?: () => Promise<void>,
};
|};
const GroupMemberListItem = ({
user,
groupMembership,
onRemove,
onAdd,
}: Props) => {
const GroupMemberListItem = ({ user, onRemove, onAdd }: Props) => {
return (
<ListItem
title={user.name}
@ -42,11 +35,7 @@ const GroupMemberListItem = ({
image={<Avatar src={user.avatarUrl} size={40} />}
actions={
<Flex align="center">
{onRemove && (
<DropdownMenu>
<DropdownMenuItem onClick={onRemove}>Remove</DropdownMenuItem>
</DropdownMenu>
)}
{onRemove && <GroupMemberMenu onRemove={onRemove} />}
{onAdd && (
<Button onClick={onAdd} neutral>
Add

1
app/scenes/Search/Search.js
View File

@ -361,6 +361,7 @@ class Search extends React.Component<Props> {
highlight={this.query}
context={result.context}
showCollection
showTemplate
/>
);
})}

48
app/scenes/Search/components/FilterOption.js
View File

@ -1,45 +1,61 @@
// @flow
import { CheckmarkIcon } from "outline-icons";
import * as React from "react";
import { MenuItem } from "reakit/Menu";
import styled from "styled-components";
import Flex from "components/Flex";
import HelpText from "components/HelpText";
type Props = {
type Props = {|
label: string,
note?: string,
onSelect: () => void,
active: boolean,
};
|};
const FilterOption = ({ label, note, onSelect, active }: Props) => {
const FilterOption = ({ label, note, onSelect, active, ...rest }: Props) => {
return (
<ListItem active={active}>
<Anchor onClick={active ? undefined : onSelect}>
<Flex align="center" justify="space-between">
<span>
{label}
{note && <HelpText small>{note}</HelpText>}
</span>
{active && <Checkmark />}
</Flex>
</Anchor>
</ListItem>
<MenuItem onClick={active ? undefined : onSelect} {...rest}>
{(props) => (
<ListItem>
<Button active={active} {...props}>
<Flex align="center" justify="space-between">
<span>
{label}
{note && <Description small>{note}</Description>}
</span>
{active && <Checkmark />}
</Flex>
</Button>
</ListItem>
)}
</MenuItem>
);
};
const Description = styled(HelpText)`
margin-bottom: 0;
`;
const Checkmark = styled(CheckmarkIcon)`
flex-shrink: 0;
padding-left: 4px;
fill: ${(props) => props.theme.text};
`;
const Anchor = styled("a")`
const Button = styled.button`
display: flex;
flex-direction: column;
font-size: 15px;
padding: 4px 8px;
margin: 0;
border: 0;
background: none;
color: ${(props) => props.theme.text};
text-align: left;
font-weight: ${(props) => (props.active ? "600" : "normal")};
justify-content: center;
width: 100%;
min-height: 32px;
${HelpText} {
@ -54,7 +70,7 @@ const Anchor = styled("a")`
const ListItem = styled("li")`
list-style: none;
font-weight: ${(props) => (props.active ? "600" : "normal")};
max-width: 250px;
`;
export default FilterOption;

77
app/scenes/Search/components/FilterOptions.js
View File

@ -1,63 +1,74 @@
// @flow
import { find } from "lodash";
import * as React from "react";
import { useMenuState, MenuButton } from "reakit/Menu";
import styled from "styled-components";
import Button, { Inner } from "components/Button";
import { DropdownMenu } from "components/DropdownMenu";
import ContextMenu from "components/ContextMenu";
import FilterOption from "./FilterOption";
type Props = {
options: {
key: string,
label: string,
note?: string,
}[],
type TFilterOption = {|
key: string,
label: string,
note?: string,
|};
type Props = {|
options: TFilterOption[],
activeKey: ?string,
defaultLabel?: string,
selectedPrefix?: string,
className?: string,
onSelect: (key: ?string) => void,
};
|};
const FilterOptions = ({
options,
activeKey = "",
defaultLabel,
selectedPrefix = "",
className,
onSelect,
}: Props) => {
const menu = useMenuState();
const selected = find(options, { key: activeKey }) || options[0];
const selectedLabel = selected ? `${selectedPrefix} ${selected.label}` : "";
return (
<DropdownButton label={activeKey ? selectedLabel : defaultLabel}>
{({ closeMenu }) => (
<SearchFilter>
<MenuButton {...menu}>
{(props) => (
<StyledButton
{...props}
className={className}
neutral
disclosure
small
>
{activeKey ? selectedLabel : defaultLabel}
</StyledButton>
)}
</MenuButton>
<ContextMenu aria-label={defaultLabel} {...menu}>
<List>
{options.map((option) => (
<FilterOption
key={option.key}
onSelect={() => {
onSelect(option.key);
closeMenu();
menu.hide();
}}
active={option.key === activeKey}
{...option}
{...menu}
/>
))}
</List>
)}
</DropdownButton>
</ContextMenu>
</SearchFilter>
);
};
const Content = styled("div")`
padding: 0 8px;
width: 250px;
p {
margin-bottom: 0;
}
`;
const StyledButton = styled(Button)`
box-shadow: none;
text-transform: none;
@ -73,32 +84,14 @@ const StyledButton = styled(Button)`
}
`;
const SearchFilter = (props) => {
return (
<DropdownMenu
className={props.className}
label={
<StyledButton neutral disclosure small>
{props.label}
</StyledButton>
}
position="right"
>
{({ closePortal }) => (
<Content>{props.children({ closeMenu: closePortal })}</Content>
)}
</DropdownMenu>
);
};
const DropdownButton = styled(SearchFilter)`
const SearchFilter = styled.div`
margin-right: 8px;
`;
const List = styled("ol")`
list-style: none;
margin: 0;
padding: 0;
padding: 0 8px;
`;
export default FilterOptions;

2
app/utils/compressImage.js
View File

@ -1,7 +1,7 @@
// @flow
import Compressor from "compressorjs";
type Options = Omit<Compressor.Options, "success" | "error">;
type Options = { maxWidth?: number, maxHeight?: number };
export const compressImage = async (
file: File | Blob,

1
package.json
View File

@ -152,6 +152,7 @@
"react-virtualized-auto-sizer": "^1.0.2",
"react-waypoint": "^9.0.2",
"react-window": "^1.8.6",
"reakit": "^1.3.4",
"rich-markdown-editor": "^11.0.11",
"semver": "^7.3.2",
"sequelize": "^6.3.4",

28
shared/i18n/locales/en_US/translation.json
View File

@ -8,6 +8,7 @@
"Drafts": "Drafts",
"Templates": "Templates",
"Deleted Collection": "Deleted Collection",
"Submenu": "Submenu",
"New": "New",
"Only visible to you": "Only visible to you",
"Draft": "Draft",
@ -22,7 +23,6 @@
"Never viewed": "Never viewed",
"Viewed": "Viewed",
"in": "in",
"More options": "More options",
"Insert column after": "Insert column after",
"Insert column before": "Insert column before",
"Insert row after": "Insert row after",
@ -76,6 +76,7 @@
"Warning": "Warning",
"Warning notice": "Warning notice",
"Icon": "Icon",
"Choose icon": "Choose icon",
"Loading": "Loading",
"Search": "Search",
"Outline is available in your language {{optionLabel}}, would you like to change?": "Outline is available in your language {{optionLabel}}, would you like to change?",
@ -104,23 +105,29 @@
"Export Data": "Export Data",
"Integrations": "Integrations",
"Installation": "Installation",
"Appearance": "Appearance",
"System": "System",
"Light": "Light",
"Dark": "Dark",
"Account": "Account",
"Settings": "Settings",
"API documentation": "API documentation",
"Changelog": "Changelog",
"Send us feedback": "Send us feedback",
"Report a bug": "Report a bug",
"Appearance": "Appearance",
"System": "System",
"Light": "Light",
"Dark": "Dark",
"Log out": "Log out",
"Collection permissions": "Collection permissions",
"Path to document": "Path to document",
"Group member options": "Group member options",
"Members": "Members",
"Remove": "Remove",
"Collection": "Collection",
"New document": "New document",
"Import document": "Import document",
"Edit": "Edit",
"Permissions": "Permissions",
"Export": "Export",
"Delete": "Delete",
"Collection permissions": "Collection permissions",
"Edit collection": "Edit collection",
"Delete collection": "Delete collection",
"Export collection": "Export collection",
@ -131,6 +138,7 @@
"Document archived": "Document archived",
"Document restored": "Document restored",
"Document unpublished": "Document unpublished",
"Document options": "Document options",
"Restore": "Restore",
"Choose a collection": "Choose a collection",
"Unpin": "Unpin",
@ -152,21 +160,26 @@
"Share document": "Share document",
"Edit group": "Edit group",
"Delete group": "Delete group",
"Members": "Members",
"Group options": "Group options",
"Member options": "Member options",
"collection": "collection",
"New child document": "New child document",
"New document in <1>{{collectionName}}</1>": "New document in <1>{{collectionName}}</1>",
"New template": "New template",
"Link copied": "Link copied",
"Revision options": "Revision options",
"Restore version": "Restore version",
"Copy link": "Copy link",
"Share link revoked": "Share link revoked",
"Share link copied": "Share link copied",
"Share options": "Share options",
"Go to document": "Go to document",
"Revoke link": "Revoke link",
"By {{ author }}": "By {{ author }}",
"Are you sure you want to make {{ userName }} an admin? Admins can modify team and billing information.": "Are you sure you want to make {{ userName }} an admin? Admins can modify team and billing information.",
"Are you sure you want to make {{ userName }} a member?": "Are you sure you want to make {{ userName }} a member?",
"Are you sure you want to suspend this account? Suspended users will be prevented from logging in.": "Are you sure you want to suspend this account? Suspended users will be prevented from logging in.",
"User options": "User options",
"Make {{ userName }} a member…": "Make {{ userName }} a member…",
"Make {{ userName }} an admin…": "Make {{ userName }} an admin…",
"Revoke invite": "Revoke invite",
@ -212,7 +225,6 @@
"No people left to add": "No people left to add",
"Read only": "Read only",
"Read & Edit": "Read & Edit",
"Remove": "Remove",
"Active <1></1> ago": "Active <1></1> ago",
"Never signed in": "Never signed in",
"Invited": "Invited",

40
yarn.lock
View File

@ -1365,6 +1365,11 @@
dependencies:
"@types/node" ">= 8"
"@popperjs/core@^2.5.4":
version "2.6.0"
resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.6.0.tgz#f022195afdfc942e088ee2101285a1d31c7d727f"
integrity sha512-cPqjjzuFWNK3BSKLm0abspP0sp/IGOli4p5I5fKFAzdS8fvjdOwDCfZqAaIiXd9lPkOWi3SUUfZof3hEb7J/uw==
"@react-dnd/asap@^4.0.0":
version "4.0.0"
resolved "https://registry.yarnpkg.com/@react-dnd/asap/-/asap-4.0.0.tgz#b300eeed83e9801f51bd66b0337c9a6f04548651"
@ -2604,6 +2609,11 @@ bn.js@^5.0.0, bn.js@^5.1.1:
resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.1.3.tgz#beca005408f642ebebea80b042b4d18d2ac0ee6b"
integrity sha512-GkTiFpjFtUzU9CbMeJ5iazkCzGL3jrhzerzZIuqLABjbwRaFt33I9tUdSNryIptM+RxDet6OKm2WnLXzW51KsQ==
body-scroll-lock@^3.1.5:
version "3.1.5"
resolved "https://registry.yarnpkg.com/body-scroll-lock/-/body-scroll-lock-3.1.5.tgz#c1392d9217ed2c3e237fee1e910f6cdd80b7aaec"
integrity sha512-Yi1Xaml0EvNA0OYWxXiYNqY24AfWkbA6w5vxE7GWxtKfzIbZM+Qw+aSmkgsbWzbHiy/RCSkUZBplVxTA+E4jJg==
boolbase@~1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
@ -10078,6 +10088,36 @@ readdirp@~3.5.0:
dependencies:
picomatch "^2.2.1"
reakit-system@^0.15.1:
version "0.15.1"
resolved "https://registry.yarnpkg.com/reakit-system/-/reakit-system-0.15.1.tgz#bf5cc7a03f60a817373bc9cbb4a689c1f4100547"
integrity sha512-PkqfAyEohtcEu/gUvKriCv42NywDtUgvocEN3147BI45dOFAB89nrT7wRIbIcKJiUT598F+JlPXAZZVLWhc1Kg==
dependencies:
reakit-utils "^0.15.1"
reakit-utils@^0.15.1:
version "0.15.1"
resolved "https://registry.yarnpkg.com/reakit-utils/-/reakit-utils-0.15.1.tgz#797f0a43f6a1dbc22d161224d5d2272e287dbfe3"
integrity sha512-6cZgKGvOkAMQgkwU9jdYbHfkuIN1Pr+vwcB19plLvcTfVN0Or10JhIuj9X+JaPZyI7ydqTDFaKNdUcDP69o/+Q==
reakit-warning@^0.6.1:
version "0.6.1"
resolved "https://registry.yarnpkg.com/reakit-warning/-/reakit-warning-0.6.1.tgz#dba33bb8866aebe30e67ac433ead707d16d38a36"
integrity sha512-poFUV0EyxB+CcV9uTNBAFmcgsnR2DzAbOTkld4Ul+QOKSeEHZB3b3+MoZQgcYHmbvG19Na1uWaM7ES+/Eyr8tQ==
dependencies:
reakit-utils "^0.15.1"
reakit@^1.3.4:
version "1.3.4"
resolved "https://registry.yarnpkg.com/reakit/-/reakit-1.3.4.tgz#1c83614130fbcee624ba510547db79c90b3435a4"
integrity sha512-aLR0GBOc9vELTk4PKK/zndBbIs4RSw4B7GSGY6yoMHQ/vna0iLNd5BMhjtXspD/B7hhkYERlT6di8pIyD3HSPw==
dependencies:
"@popperjs/core" "^2.5.4"
body-scroll-lock "^3.1.5"
reakit-system "^0.15.1"
reakit-utils "^0.15.1"
reakit-warning "^0.6.1"
rechoir@^0.6.2:
version "0.6.2"
resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.6.2.tgz#85204b54dba82d5742e28c96756ef43af50e3384"