mirror of
https://github.com/filecoin-project/slate.git
synced 2024-09-19 18:28:03 +03:00
feat(CollectionSharingModal): remove Share modal
This commit is contained in:
Aminejv
parent
81b80b7495
commit
2bc7c10030
@ -51,7 +51,6 @@ import CTATransition from "~/components/core/CTATransition";
|
||||
import { GlobalModal } from "~/components/system/components/GlobalModal";
|
||||
import { OnboardingModal } from "~/components/core/OnboardingModal";
|
||||
import { SearchModal } from "~/components/core/SearchModal";
|
||||
import { CollectionSharingModal } from "~/components/core/ShareModals/CollectionSharingModal";
|
||||
import { Alert } from "~/components/core/Alert";
|
||||
import { announcements } from "~/components/core/OnboardingModal";
|
||||
import { Logo } from "~/common/logo";
|
||||
@ -519,7 +518,6 @@ export default class ApplicationPage extends React.Component {
|
||||
onAction={this._handleAction}
|
||||
isMobile={this.props.isMobile}
|
||||
/>
|
||||
<CollectionSharingModal />
|
||||
<CTATransition onAction={this._handleAction} />
|
||||
{/* {!this.state.loaded ? (
|
||||
<div
|
||||
|
||||
@ -3,7 +3,6 @@ import * as Styles from "~/common/styles";
|
||||
import * as SVG from "~/common/svg";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
import { useCollectionSharingModal } from "~/components/core/ShareModals/CollectionSharingModal";
|
||||
|
||||
const STYLES_BUTTON = (theme) => css`
|
||||
${Styles.BUTTON_RESET};
|
||||
@ -28,15 +27,14 @@ const STYLES_BUTTON = (theme) => css`
|
||||
`;
|
||||
|
||||
export default function ShareButton({ user, collection, preview, ...props }) {
|
||||
const { openModal } = useCollectionSharingModal();
|
||||
const handleOnClick = (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
openModal({
|
||||
user,
|
||||
collection,
|
||||
preview,
|
||||
});
|
||||
// openModal({
|
||||
// user,
|
||||
// collection,
|
||||
// preview,
|
||||
// });
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
@ -1,155 +0,0 @@
|
||||
import * as React from "react";
|
||||
import * as Events from "~/common/custom-events";
|
||||
import * as Styles from "~/common/styles";
|
||||
import * as SVG from "~/common/svg";
|
||||
import * as Utilities from "~/common/utilities";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
import { P3 } from "~/components/system/components/Typography";
|
||||
import { Divider } from "~/components/system";
|
||||
import { motion } from "framer-motion";
|
||||
import { useEventListener, useTimeout } from "~/common/hooks";
|
||||
import { ShareModalPrimitive } from "~/components/core/ShareModals/ShareModalPrimitive";
|
||||
|
||||
const STYLES_COPY_ACTIONS_WRAPPER = css`
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
`;
|
||||
|
||||
const STYLES_COPY_BUTTON = (theme) => css`
|
||||
${Styles.BUTTON_RESET};
|
||||
background-color: ${theme.system.white};
|
||||
width: 100%;
|
||||
padding: 9px 12px 11px;
|
||||
`;
|
||||
|
||||
const formatDataSafely = ({ collection, user }) => {
|
||||
if (typeof window === "undefined" || !collection || !user) return {};
|
||||
const rootUrl = window?.location?.origin;
|
||||
return {
|
||||
id: collection.id,
|
||||
title: collection?.name || collection?.slatename,
|
||||
link: `${rootUrl}/${user.username}/${collection.slatename}`,
|
||||
};
|
||||
};
|
||||
|
||||
export const CollectionSharingModal = () => {
|
||||
const [state, handlers] = useModalState();
|
||||
const { open, user, collection, view, preview } = state;
|
||||
const { closeModal, changeView, handleModalVisibility } = handlers;
|
||||
|
||||
const { id, title, link } = React.useMemo(() => formatDataSafely({ collection, user }), [
|
||||
user,
|
||||
collection,
|
||||
]);
|
||||
|
||||
useEventListener("collection-sharing-modal", handleModalVisibility, []);
|
||||
|
||||
const handleTwitterSharing = () =>
|
||||
window.open(
|
||||
`https://twitter.com/intent/tweet?text=${title} by ${user.username} on Slate%0D&url=${link}`,
|
||||
"_blank"
|
||||
);
|
||||
|
||||
const handleEmailSharing = () => {
|
||||
window.open(`mailto: ?subject=${title} by ${user.username} on Slate&body=${link}`, "_b");
|
||||
};
|
||||
|
||||
const handleLinkCopy = () => (Utilities.copyToClipboard(link), changeView("LINK_COPIED"));
|
||||
const handleIdCopy = () => (Utilities.copyToClipboard(id), changeView("ID_COPIED"));
|
||||
|
||||
return (
|
||||
<ShareModalPrimitive
|
||||
isOpen={open}
|
||||
closeModal={closeModal}
|
||||
title={title}
|
||||
preview={preview}
|
||||
description={`Collection @${user.username}`}
|
||||
onEmailSharing={handleEmailSharing}
|
||||
includeSocialSharing={!(view === "LINK_COPIED" || view === "ID_COPIED")}
|
||||
onTwitterSharing={handleTwitterSharing}
|
||||
>
|
||||
{view === "initial" ? (
|
||||
<div css={STYLES_COPY_ACTIONS_WRAPPER}>
|
||||
<button css={STYLES_COPY_BUTTON} onClick={handleLinkCopy}>
|
||||
<span css={Styles.HORIZONTAL_CONTAINER}>
|
||||
<SVG.Link width={16} height={16} />
|
||||
<P3 style={{ marginLeft: 8 }}>Copy Link</P3>
|
||||
</span>
|
||||
</button>
|
||||
<Divider height={1} color="bgGrayLight" />
|
||||
<button css={STYLES_COPY_BUTTON} onClick={handleIdCopy}>
|
||||
<span css={Styles.HORIZONTAL_CONTAINER}>
|
||||
<SVG.Hash width={16} height={16} />
|
||||
<P3 style={{ marginLeft: 8 }}>Copy ID</P3>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<LinkCopiedScene closeModal={closeModal}>
|
||||
{view === "LINK_COPIED" ? "Link copied to clipboard" : "ID copied to clipboard"}
|
||||
</LinkCopiedScene>
|
||||
)}
|
||||
</ShareModalPrimitive>
|
||||
);
|
||||
};
|
||||
|
||||
const LinkCopiedScene = ({ closeModal, children }) => {
|
||||
useTimeout(closeModal, 3000);
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 4 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ ease: "easeOut", duration: 0.3, delay: 0.4 }}
|
||||
style={{ marginTop: 24 }}
|
||||
css={Styles.CONTAINER_CENTERED}
|
||||
>
|
||||
<SVG.Clipboard />
|
||||
<P3 style={{ marginLeft: 8 }} color="textBlack">
|
||||
{children}
|
||||
</P3>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
const useModalState = () => {
|
||||
const [state, setState] = React.useState({
|
||||
open: false,
|
||||
// NOTE(amine): INITIAL || LINK_COPIED || ID_COPIED
|
||||
view: "initial",
|
||||
user: {},
|
||||
data: {},
|
||||
preview: {},
|
||||
});
|
||||
|
||||
const handlers = React.useMemo(
|
||||
() => ({
|
||||
closeModal: () => setState((prev) => ({ ...prev, open: false })),
|
||||
changeView: (view) => setState((prev) => ({ ...prev, view })),
|
||||
handleModalVisibility: (e) =>
|
||||
setState(() => ({
|
||||
view: "initial",
|
||||
open: e.detail.open,
|
||||
user: e.detail.user,
|
||||
collection: e.detail.collection,
|
||||
preview: e.detail.preview,
|
||||
})),
|
||||
}),
|
||||
[]
|
||||
);
|
||||
return [state, handlers];
|
||||
};
|
||||
|
||||
export const useCollectionSharingModal = () => {
|
||||
const openModal = ({ user, collection, preview }) =>
|
||||
Events.dispatchCustomEvent({
|
||||
name: "collection-sharing-modal",
|
||||
detail: { open: true, user, collection, preview },
|
||||
});
|
||||
const closeModal = () =>
|
||||
Events.dispatchCustomEvent({
|
||||
name: "collection-sharing-modal",
|
||||
detail: { open: false },
|
||||
});
|
||||
return { openModal, closeModal };
|
||||
};
|
||||
@ -1,185 +0,0 @@
|
||||
import * as React from "react";
|
||||
import * as Styles from "~/common/styles";
|
||||
import * as SVG from "~/common/svg";
|
||||
import * as Constants from "~/common/constants";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
import { H5, P3 } from "~/components/system/components/Typography";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import { useEscapeKey, useLockScroll } from "~/common/hooks";
|
||||
import { Preview } from "~/components/core/CollectionPreviewBlock/components";
|
||||
import { Symbol } from "~/common/logo";
|
||||
|
||||
const STYLES_OVERLAY = (theme) => css`
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
background-color: ${theme.semantic.bgBlurBlackTRN};
|
||||
${Styles.CONTAINER_CENTERED};
|
||||
z-index: ${theme.zindex.modal};
|
||||
`;
|
||||
|
||||
const STYLES_MODAL_WRAPPER = (theme) => css`
|
||||
min-width: 400px;
|
||||
padding: 24px;
|
||||
border: 1px solid ${theme.semantic.bgGrayLight};
|
||||
border-radius: 16px;
|
||||
background: ${theme.system.white};
|
||||
@supports ((-webkit-backdrop-filter: blur(75px)) or (backdrop-filter: blur(75px))) {
|
||||
-webkit-backdrop-filter: blur(75px);
|
||||
backdrop-filter: blur(75px);
|
||||
background: linear-gradient(
|
||||
120.84deg,
|
||||
rgba(255, 255, 255, 0.85) 5.24%,
|
||||
rgba(255, 255, 255, 0.544) 98.51%
|
||||
);
|
||||
}
|
||||
@media (max-width: ${theme.sizes.mobile}px) {
|
||||
min-width: auto;
|
||||
width: calc(100% - 32px);
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_PROFILE = css`
|
||||
display: block;
|
||||
${Styles.HORIZONTAL_CONTAINER};
|
||||
align-items: flex-start;
|
||||
`;
|
||||
|
||||
const STYLES_DISMISS_BUTTON = (theme) => css`
|
||||
${Styles.BUTTON_RESET};
|
||||
color: ${theme.semantic.textGray};
|
||||
`;
|
||||
|
||||
// NOTE(amine): social buttons styles
|
||||
const STYLES_SOCIAL_BUTTON = (theme) => css`
|
||||
${Styles.VERTICAL_CONTAINER_CENTERED}
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
box-shadow: ${theme.shadow.lightLarge};
|
||||
`;
|
||||
|
||||
const STYLES_TWITTER_BUTTON = css`
|
||||
background-color: #58aee7;
|
||||
`;
|
||||
|
||||
const STYLES_EMAIL_BUTTON = (theme) => css`
|
||||
background-color: ${theme.system.white};
|
||||
`;
|
||||
|
||||
const STYLES_TEXT_CENTER = css`
|
||||
text-align: center;
|
||||
`;
|
||||
|
||||
const STYLES_PREVIEW = (theme) => css`
|
||||
width: 48px;
|
||||
max-width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 12px;
|
||||
background-color: ${theme.semantic.bgLight};
|
||||
${Styles.CONTAINER_CENTERED}
|
||||
`;
|
||||
|
||||
const EmptyFallbackPreview = () => {
|
||||
return (
|
||||
<div css={STYLES_PREVIEW}>
|
||||
<Symbol style={{ height: 24, color: Constants.system.grayLight2 }} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// NOTE(amine): This modal will be a building block for both Object and Collection sharing modals
|
||||
export const ShareModalPrimitive = ({
|
||||
isOpen,
|
||||
closeModal,
|
||||
title,
|
||||
description,
|
||||
includeSocialSharing = true,
|
||||
onTwitterSharing,
|
||||
onEmailSharing,
|
||||
preview,
|
||||
children,
|
||||
}) => {
|
||||
useEscapeKey(closeModal);
|
||||
useLockScroll({ lock: isOpen });
|
||||
|
||||
const handleModalClick = (e) => (e.preventDefault(), e.stopPropagation());
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{isOpen ? (
|
||||
<motion.div
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.35 }}
|
||||
css={STYLES_OVERLAY}
|
||||
onClick={closeModal}
|
||||
>
|
||||
<motion.div
|
||||
layoutId
|
||||
exit={{ y: 50 }}
|
||||
transition={{ duration: 0.5, easings: "easeInOut" }}
|
||||
css={STYLES_MODAL_WRAPPER}
|
||||
onClick={handleModalClick}
|
||||
>
|
||||
<motion.div layout css={STYLES_PROFILE} style={{ alignItems: "flex-start" }}>
|
||||
{/**TODO(amine): add dynamic preview to support collection and object previews */}
|
||||
<Preview
|
||||
file={preview.object}
|
||||
type={preview.type}
|
||||
EmptyFallback={EmptyFallbackPreview}
|
||||
css={STYLES_PREVIEW}
|
||||
placeholderRatio={2}
|
||||
/>
|
||||
<div style={{ marginLeft: 12, flexGrow: 1 }}>
|
||||
<H5 color="textBlack" nbrOflines={1}>
|
||||
{title}
|
||||
</H5>
|
||||
<P3 style={{ marginTop: 3 }} color="textGrayDark" nbrOflines={1}>
|
||||
{description}
|
||||
</P3>
|
||||
</div>
|
||||
<button css={STYLES_DISMISS_BUTTON} style={{ marginLeft: 13 }} onClick={closeModal}>
|
||||
<span>
|
||||
<SVG.Dismiss height={20} />
|
||||
</span>
|
||||
</button>
|
||||
</motion.div>
|
||||
|
||||
{includeSocialSharing && (
|
||||
<div css={Styles.CONTAINER_CENTERED} style={{ marginTop: 24 }}>
|
||||
<button css={Styles.BUTTON_RESET} onClick={onTwitterSharing}>
|
||||
<span>
|
||||
<div css={[STYLES_SOCIAL_BUTTON, STYLES_TWITTER_BUTTON]}>
|
||||
<SVG.TwitterWhiteLogo style={{ display: "block" }} />
|
||||
</div>
|
||||
<P3 style={{ marginTop: 4 }} css={STYLES_TEXT_CENTER}>
|
||||
Twitter
|
||||
</P3>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
css={Styles.BUTTON_RESET}
|
||||
style={{ marginLeft: 24 }}
|
||||
onClick={onEmailSharing}
|
||||
>
|
||||
<span>
|
||||
<div css={[STYLES_SOCIAL_BUTTON, STYLES_EMAIL_BUTTON]}>
|
||||
<SVG.Mail style={{ display: "block" }} />
|
||||
</div>
|
||||
<P3 style={{ marginTop: 4 }} css={STYLES_TEXT_CENTER}>
|
||||
Email
|
||||
</P3>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
<div style={{ marginTop: 24 }}>{children}</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
) : null}
|
||||
</AnimatePresence>
|
||||
);
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user