54 lines
1.3 KiB
JavaScript
54 lines
1.3 KiB
JavaScript
// @flow
|
|
import { observer } from "mobx-react";
|
|
import * as React from "react";
|
|
import { Link } from "react-router-dom";
|
|
import styled from "styled-components";
|
|
import parseDocumentSlug from "shared/utils/parseDocumentSlug";
|
|
import DocumentMetaWithViews from "components/DocumentMetaWithViews";
|
|
import Editor from "components/Editor";
|
|
import useStores from "hooks/useStores";
|
|
|
|
type Props = {
|
|
url: string,
|
|
children: (React.Node) => React.Node,
|
|
};
|
|
|
|
function HoverPreviewDocument({ url, children }: Props) {
|
|
const { documents } = useStores();
|
|
const slug = parseDocumentSlug(url);
|
|
|
|
documents.prefetchDocument(slug, {
|
|
prefetch: true,
|
|
});
|
|
|
|
const document = slug ? documents.getByUrl(slug) : undefined;
|
|
if (!document) return null;
|
|
|
|
return children(
|
|
<Content to={document.url}>
|
|
<Heading>{document.titleWithDefault}</Heading>
|
|
<DocumentMetaWithViews isDraft={document.isDraft} document={document} />
|
|
|
|
<React.Suspense fallback={<div />}>
|
|
<Editor
|
|
key={document.id}
|
|
defaultValue={document.getSummary()}
|
|
disableEmbeds
|
|
readOnly
|
|
/>
|
|
</React.Suspense>
|
|
</Content>
|
|
);
|
|
}
|
|
|
|
const Content = styled(Link)`
|
|
cursor: pointer;
|
|
`;
|
|
|
|
const Heading = styled.h2`
|
|
margin: 0 0 0.75em;
|
|
color: ${(props) => props.theme.text};
|
|
`;
|
|
|
|
export default observer(HoverPreviewDocument);
|