2020-07-17 04:26:23 +00:00
|
|
|
// @flow
|
|
|
|
import { inject, observer } from "mobx-react";
|
2020-08-09 05:53:59 +00:00
|
|
|
import * as React from "react";
|
2020-07-17 04:26:23 +00:00
|
|
|
import { Link } from "react-router-dom";
|
|
|
|
import styled from "styled-components";
|
2020-09-13 06:23:40 +00:00
|
|
|
import parseDocumentSlug from "shared/utils/parseDocumentSlug";
|
2020-07-17 04:26:23 +00:00
|
|
|
import DocumentsStore from "stores/DocumentsStore";
|
2020-08-12 04:01:03 +00:00
|
|
|
import DocumentMetaWithViews from "components/DocumentMetaWithViews";
|
2020-08-09 05:53:59 +00:00
|
|
|
import Editor from "components/Editor";
|
2020-07-17 04:26:23 +00:00
|
|
|
|
|
|
|
type Props = {
|
|
|
|
url: string,
|
|
|
|
documents: DocumentsStore,
|
2020-08-09 01:53:11 +00:00
|
|
|
children: (React.Node) => React.Node,
|
2020-07-17 04:26:23 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
function HoverPreviewDocument({ url, documents, children }: Props) {
|
2020-09-13 06:23:40 +00:00
|
|
|
const slug = parseDocumentSlug(url);
|
2020-07-17 04:26:23 +00:00
|
|
|
|
|
|
|
documents.prefetchDocument(slug, {
|
|
|
|
prefetch: true,
|
|
|
|
});
|
|
|
|
|
|
|
|
const document = slug ? documents.getByUrl(slug) : undefined;
|
|
|
|
if (!document) return null;
|
|
|
|
|
|
|
|
return children(
|
|
|
|
<Content to={document.url}>
|
2020-08-08 22:18:37 +00:00
|
|
|
<Heading>{document.titleWithDefault}</Heading>
|
2020-08-12 04:01:03 +00:00
|
|
|
<DocumentMetaWithViews isDraft={document.isDraft} document={document} />
|
2020-07-17 04:26:23 +00:00
|
|
|
|
2020-08-15 00:23:58 +00:00
|
|
|
<React.Suspense fallback={<div />}>
|
|
|
|
<Editor
|
|
|
|
key={document.id}
|
|
|
|
defaultValue={document.getSummary()}
|
|
|
|
disableEmbeds
|
|
|
|
readOnly
|
|
|
|
/>
|
|
|
|
</React.Suspense>
|
2020-07-17 04:26:23 +00:00
|
|
|
</Content>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
const Content = styled(Link)`
|
|
|
|
cursor: pointer;
|
|
|
|
`;
|
|
|
|
|
|
|
|
const Heading = styled.h2`
|
|
|
|
margin: 0 0 0.75em;
|
2020-08-09 01:53:11 +00:00
|
|
|
color: ${(props) => props.theme.text};
|
2020-07-17 04:26:23 +00:00
|
|
|
`;
|
|
|
|
|
|
|
|
export default inject("documents")(observer(HoverPreviewDocument));
|