// @flow
import { observer } from "mobx-react";
import { PlusIcon } from "outline-icons";
import * as React from "react";
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 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";
function NewDocumentMenu() {
const menu = useMenuState();
const { t } = useTranslation();
const { collections, policies } = useStores();
const singleCollection = collections.orderedData.length === 1;
if (singleCollection) {
return (
}
>
{t("New doc")}
);
}
return (
<>
{(props) => (
} {...props} small>
{`${t("New doc")}…`}
)}
{t("Choose a collection")}
({
to: newDocumentUrl(collection.id),
disabled: !policies.abilities(collection.id).update,
title: (
{collection.name}
),
}))}
/>
>
);
}
const CollectionName = styled.div`
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
`;
export default observer(NewDocumentMenu);