mirror of
https://github.com/filecoin-project/slate.git
synced 2024-09-11 22:07:08 +03:00
feat(ObjectPreviewPrimitive): replace EditChannels with EditSlates jumper
This commit is contained in:
parent
8e007d235d
commit
4b67d6caa6
@ -6,9 +6,9 @@ import * as SVG from "~/common/svg";
|
||||
import { css } from "@emotion/react";
|
||||
import { H5, P2, P3 } from "~/components/system/components/Typography";
|
||||
import { AspectRatio } from "~/components/system";
|
||||
import { motion, useAnimation } from "framer-motion";
|
||||
import { AnimatePresence, motion, useAnimation } from "framer-motion";
|
||||
import { useMounted, useMediaQuery } from "~/common/hooks";
|
||||
import { TagsButton } from "~/components/core/ObjectPreview/components";
|
||||
import { SlatesButton } from "~/components/core/ObjectPreview/components";
|
||||
import { useTagsOnboardingContext } from "~/components/core/Onboarding/Tags";
|
||||
|
||||
import ImageObjectPreview from "~/components/core/ObjectPreview/ImageObjectPreview";
|
||||
@ -27,22 +27,27 @@ const STYLES_CONTROLS_DESKTOP = css`
|
||||
function DesktopControls({ file, viewer }) {
|
||||
const onboardingContext = useTagsOnboardingContext();
|
||||
|
||||
const [isTagsJumperVisible, setTagsJumperVisibility] = React.useState(false);
|
||||
const showTagsJumper = () => setTagsJumperVisibility(true);
|
||||
const hideTagsJumper = () => setTagsJumperVisibility(false);
|
||||
const [isSlatesJumperVisible, setSlatesJumperVisibility] = React.useState(false);
|
||||
const showSlatesJumper = () => setSlatesJumperVisibility(true);
|
||||
const hideSlatesJumper = () => setSlatesJumperVisibility(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/** NOTE(amine): controls visibility handled by STYLES_WRAPPER*/}
|
||||
<motion.div id="object_preview_controls" css={STYLES_CONTROLS_DESKTOP}>
|
||||
<TagsButton onClick={() => (showTagsJumper(), onboardingContext?.goToNextStep?.call())} />
|
||||
<SlatesButton
|
||||
onClick={() => (showSlatesJumper(), onboardingContext?.goToNextStep?.call())}
|
||||
/>
|
||||
</motion.div>
|
||||
<ObjectJumpers.EditChannels
|
||||
file={file}
|
||||
viewer={viewer}
|
||||
isOpen={isTagsJumperVisible}
|
||||
onClose={() => (hideTagsJumper(), onboardingContext?.goToNextStep?.call())}
|
||||
/>
|
||||
<AnimatePresence>
|
||||
{isSlatesJumperVisible ? (
|
||||
<ObjectJumpers.EditSlates
|
||||
file={file}
|
||||
viewer={viewer}
|
||||
onClose={() => (hideSlatesJumper(), onboardingContext?.goToNextStep?.call())}
|
||||
/>
|
||||
) : null}
|
||||
</AnimatePresence>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -85,9 +90,9 @@ function MobileControls({ file, viewer }) {
|
||||
const toggleControls = () => setShowControls((prev) => !prev);
|
||||
const hideControls = () => setShowControls(false);
|
||||
|
||||
const [isTagsJumperVisible, setTagsJumperVisibility] = React.useState(false);
|
||||
const showTagsJumper = () => setTagsJumperVisibility(true);
|
||||
const hideTagsJumper = () => setTagsJumperVisibility(false);
|
||||
const [isSlatesJumperVisible, setSlatesJumperVisibility] = React.useState(false);
|
||||
const showSlatesJumper = () => setSlatesJumperVisibility(true);
|
||||
const hideSlatesJumper = () => setSlatesJumperVisibility(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -104,14 +109,21 @@ function MobileControls({ file, viewer }) {
|
||||
css={STYLES_CONTROLS_MOBILE}
|
||||
onClick={(e) => (e.stopPropagation(), toggleControls())}
|
||||
>
|
||||
<TagsButton onClick={() => (showTagsJumper(), onboardingContext?.goToNextStep?.call())} />
|
||||
<SlatesButton
|
||||
onClick={() => (showSlatesJumper(), onboardingContext?.goToNextStep?.call())}
|
||||
/>
|
||||
</motion.div>
|
||||
<ObjectJumpers.EditChannelsMobile
|
||||
file={file}
|
||||
viewer={viewer}
|
||||
isOpen={isTagsJumperVisible}
|
||||
onClose={() => (hideTagsJumper(), hideControls(), onboardingContext?.goToNextStep?.call())}
|
||||
/>
|
||||
<AnimatePresence>
|
||||
{isSlatesJumperVisible ? (
|
||||
<ObjectJumpers.EditSlatesMobile
|
||||
file={file}
|
||||
viewer={viewer}
|
||||
onClose={() => (
|
||||
hideSlatesJumper(), hideControls(), onboardingContext?.goToNextStep?.call()
|
||||
)}
|
||||
/>
|
||||
) : null}
|
||||
</AnimatePresence>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
@ -30,7 +30,7 @@ const STYLES_BUTTON = (theme) => css`
|
||||
}
|
||||
`;
|
||||
|
||||
export default function TagsButton({ onClick, ...props }) {
|
||||
export default function SlatesButton({ onClick, ...props }) {
|
||||
const handleClick = (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
@ -1,3 +1,3 @@
|
||||
export { default as LikeButton } from "~/components/core/ObjectPreview/components/LikeButton";
|
||||
export { default as SaveButton } from "~/components/core/ObjectPreview/components/SaveButton";
|
||||
export { default as TagsButton } from "~/components/core/ObjectPreview/components/TagsButton";
|
||||
export { default as SlatesButton } from "~/components/core/ObjectPreview/components/SlatesButton";
|
||||
|
Loading…
Reference in New Issue
Block a user