slate/components/core/FilePreviewBubble.js
2021-04-17 17:36:28 -07:00

66 lines
1.6 KiB
JavaScript

import * as React from "react";
import * as Constants from "~/common/constants";
import * as Validations from "~/common/validations";
import * as Strings from "~/common/strings";
import { css, keyframes } from "@emotion/react";
import { useState } from "react";
const fadeIn = keyframes`
0%{
opacity: 0;
}
100%{
opacity: 1;
}
`;
const STYLES_FILE_PREVIEW_BUBBLE = css`
z-index: ${Constants.zindex.tooltip};
border-radius: 4px;
background-color: ${Constants.system.black};
animation: ${fadeIn} 200ms ease-out 1;
width: 200px;
position: absolute;
border: 1px solid black;
overflow: hidden;
`;
const STYLES_FILE_PREVIEW = css`
display: block;
width: 100%;
height: 100%;
`;
const STYLES_BUBBLE_ANCHOR = css`
display: inline-flex;
align-item: center;
justify-content: center;
cursor: pointer;
`;
//Jim: the parent of this element needs to be position: relative or this bubble will fly off its position
export const FilePreviewBubble = (props) => {
const [onHover, setHover] = useState(false);
const showPreview = props.type && Validations.isPreviewableImage(props.type) && onHover;
return (
<React.Fragment>
<div
css={STYLES_BUBBLE_ANCHOR}
onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}
>
{props.children}
</div>
{showPreview && (
<div css={STYLES_FILE_PREVIEW_BUBBLE}>
<img css={STYLES_FILE_PREVIEW} src={Strings.getURLfromCID(props.cid)} />
</div>
)}
</React.Fragment>
);
};
export default FilePreviewBubble;