slate/components/core/FilePreviewBubble.js
2020-10-20 15:25:50 -07:00

63 lines
1.4 KiB
JavaScript

import * as React from "react";
import * as Constants from "~/common/constants";
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};
padding: 8px;
border-radius: 4px;
background-color: ${Constants.system.black};
animation: ${fadeIn} 200ms ease-out 1;
width: 200px;
position: absolute;
`;
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 && props.type.startsWith("image/") && 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={`${Constants.gateways.ipfs}/${props.url}`} />
</div>
)}
</React.Fragment>
);
};
export default FilePreviewBubble;