filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-12-24 17:44:50 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat(ObjectPreview): disable like and save buttons

Browse Source
This commit is contained in:
Aminejv 2021-07-27 13:02:21 +01:00
parent bc62564031
commit ef3b0bab78
1 changed files with 25 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
components/core/ObjectPreview/ObjectPreviewPrimitive.js
View File

@ -3,9 +3,9 @@ import * as React from "react";
import { css } from "@emotion/react"; import { css } from "@emotion/react";
import { H5, P3 } from "~/components/system/components/Typography"; import { H5, P3 } from "~/components/system/components/Typography";
import { AspectRatio } from "~/components/system"; import { AspectRatio } from "~/components/system";
import { LikeButton, SaveButton } from "./components"; // import { LikeButton, SaveButton } from "./components";
import { useLikeHandler, useSaveHandler } from "~/common/hooks"; // import { useLikeHandler, useSaveHandler } from "~/common/hooks";
import { motion, AnimatePresence } from "framer-motion"; import { motion } from "framer-motion";
import ImageObjectPreview from "./ImageObjectPreview"; import ImageObjectPreview from "./ImageObjectPreview";
@ -47,15 +47,15 @@ const STYLES_SELECTED_RING = (theme) => css`
box-shadow: 0 0 0 2px ${theme.system.blue}; box-shadow: 0 0 0 2px ${theme.system.blue};
`; `;
const STYLES_CONTROLS = css` // const STYLES_CONTROLS = css`
position: absolute; // position: absolute;
z-index: 1; // z-index: 1;
right: 16px; // right: 16px;
top: 16px; // top: 16px;
& > * + * { // & > * + * {
margin-top: 8px !important; // margin-top: 8px !important;
} // }
`; // `;
const STYLES_UPPERCASE = css` const STYLES_UPPERCASE = css`
text-transform: uppercase; text-transform: uppercase;
@ -66,19 +66,19 @@ export default function ObjectPreviewPrimitive({
tag = "FILE", tag = "FILE",
file, file,
isSelected, isSelected,
viewer, // viewer,
owner, owner,
// NOTE(amine): internal prop used to display // NOTE(amine): internal prop used to display
isImage, isImage,
onAction, onAction,
}) { }) {
const { like, isLiked, likeCount } = useLikeHandler({ file, viewer }); // const { like, isLiked, likeCount } = useLikeHandler({ file, viewer });
const { save, isSaved, saveCount } = useSaveHandler({ file, viewer }); // const { save, isSaved, saveCount } = useSaveHandler({ file, viewer });
const showSaveButton = viewer?.id !== file?.ownerId; // const showSaveButton = viewer?.id !== file?.ownerId;
const [areControlsVisible, setShowControls] = React.useState(false); // const [areControlsVisible, setShowControls] = React.useState(false);
const showControls = () => setShowControls(true); // const showControls = () => setShowControls(true);
const hideControls = () => setShowControls(false); // const hideControls = () => setShowControls(false);
const [isBodyVisible, setShowBody] = React.useState(false); const [isBodyVisible, setShowBody] = React.useState(false);
const showBody = () => setShowBody(true); const showBody = () => setShowBody(true);
@ -101,8 +101,11 @@ export default function ObjectPreviewPrimitive({
return ( return (
<div css={[STYLES_WRAPPER, isSelected && STYLES_SELECTED_RING]}> <div css={[STYLES_WRAPPER, isSelected && STYLES_SELECTED_RING]}>
<div css={STYLES_PREVIEW} onMouseEnter={showControls} onMouseLeave={hideControls}> <div
<AnimatePresence> css={STYLES_PREVIEW}
// onMouseEnter={showControls} onMouseLeave={hideControls}
>
{/* <AnimatePresence>
{areControlsVisible && ( {areControlsVisible && (
<motion.div <motion.div
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
@ -116,7 +119,7 @@ export default function ObjectPreviewPrimitive({
)} )}
</motion.div> </motion.div>
)} )}
</AnimatePresence> </AnimatePresence> */}
<AspectRatio ratio={248 / 248}> <AspectRatio ratio={248 / 248}>
<div>{children}</div> <div>{children}</div>
</AspectRatio> </AspectRatio>