diff --git a/products/ASC.Files/Client/src/components/panels/SharingPanel/ExternalLink.js b/products/ASC.Files/Client/src/components/panels/SharingPanel/ExternalLink.js index 7cb06975d2..cc36fafa12 100644 --- a/products/ASC.Files/Client/src/components/panels/SharingPanel/ExternalLink.js +++ b/products/ASC.Files/Client/src/components/panels/SharingPanel/ExternalLink.js @@ -1,111 +1,202 @@ import React from "react"; +import copy from "copy-to-clipboard"; +import { objectToGetParams } from "@appserver/common/utils"; +import { ShareAccessRights } from "@appserver/common/constants"; + +import toastr from "@appserver/components/toast/toastr"; import ToggleButton from "@appserver/components/toggle-button"; import LinkWithDropdown from "@appserver/components/link-with-dropdown"; import InputBlock from "@appserver/components/input-block"; +import Button from "@appserver/components/button"; import IconButton from "@appserver/components/icon-button"; + import AccessComboBox from "./AccessComboBox"; -import { ShareAccessRights } from "@appserver/common/constants"; - -import CopyIcon from "../../../../../../../public/images/copy.react.svg"; +import ShareIcon from "../../../../../../../public/images/share.react.svg"; import CodeIcon from "../../../../../../../public/images/code.react.svg"; import { StyledExternalLink } from "./StyledSharingPanel"; +import Text from "@appserver/components/text"; +import DropDownContainer from "@appserver/components/drop-down"; +import DropDownItem from "@appserver/components/drop-down-item"; const ExternalLink = ({ t, - linkText, - shareText, - shareLink, - options, + selection, + externalItem, externalAccessOptions, onToggleLink, - onCopyLink, onShowEmbeddingPanel, onChangeItemAccess, - item, }) => { + const [shareLink, setShareLink] = React.useState(""); + const [shareActionOpen, setShareActionOpen] = React.useState(false); const [isChecked, setIsChecked] = React.useState(false); + const ref = React.useRef(null); + React.useEffect(() => { - setIsChecked(item.access !== ShareAccessRights.DenyAccess); - }, [item]); + setShareLink(externalItem.sharedTo.shareLink); + setIsChecked(externalItem.access !== ShareAccessRights.DenyAccess); + }, [externalItem]); const onToggleLinkAction = React.useCallback(() => { setIsChecked((val) => !val); - onToggleLink && onToggleLink(item); - }, [item, onToggleLink]); + onToggleLink && onToggleLink(externalItem); + }, [externalItem, onToggleLink]); + + const onToggleShareAction = React.useCallback(() => { + setShareActionOpen((val) => !val); + }, [ref.current]); + + const closeShareAction = React.useCallback( + (e) => { + if (ref.current.contains(e.target)) return; + setShareActionOpen((val) => !val); + }, + [ref.current] + ); const onCopyLinkAction = React.useCallback(() => { - onCopyLink && onCopyLink(); - }, [onCopyLink]); + toastr.success(t("Translations:LinkCopySuccess")); + copy(shareLink); + }, [shareLink]); const onShowEmbeddingPanelAction = React.useCallback(() => { onShowEmbeddingPanel && onShowEmbeddingPanel(); }, [onShowEmbeddingPanel]); + const onShareEmail = React.useCallback(() => { + const itemName = selection.title ? selection.title : selection[0].title; + const subject = t("ShareEmailSubject", { itemName }); + const body = t("ShareEmailBody", { itemName, shareLink }); + + const mailtoLink = + "mailto:" + + objectToGetParams({ + subject, + body, + }); + window.open(mailtoLink, "_self"); + }, [selection, t, shareLink]); + + // const onShareFacebook = () => { + // const facebookLink = + // "https://www.facebook.com/sharer/sharer.php" + + // objectToGetParams({ + // u: shareLink, + // t: selection.title ? selection.title : selection[0].title, + // }); + + // window.open(facebookLink); + // }; + + const onShareTwitter = React.useCallback(() => { + const twitterLink = + "https://twitter.com/intent/tweet" + + objectToGetParams({ + text: shareLink, + }); + + window.open(twitterLink, "", "width=1000,height=670"); + }, [shareLink]); + + const options = [ + { + key: "linkItem_0", + label: `${t("ShareVia")} e-mail`, + onClick: onShareEmail, + }, + // { + // key: "linkItem_1", + // label: `${t("ShareVia")} Facebook`, + // onClick: this.onShareFacebook, + // }, + { + key: "linkItem_2", + label: `${t("ShareVia")} Twitter`, + onClick: onShareTwitter, + }, + ]; + return ( -
+
+ + {t("ExternalLink")} + - - {isChecked && ( - - {shareText} - - )}
{isChecked && ( -
- -
- - -
- + <> +
+ +
+ + + + {options.map((option) => ( + + ))} + +
+ - -
+
+
+ + Access rights: + + +
+ )} ); }; -export default ExternalLink; +export default React.memo(ExternalLink); diff --git a/products/ASC.Files/Client/src/components/panels/SharingPanel/StyledSharingPanel.js b/products/ASC.Files/Client/src/components/panels/SharingPanel/StyledSharingPanel.js index 7d7c8cce6a..6642d99fb1 100644 --- a/products/ASC.Files/Client/src/components/panels/SharingPanel/StyledSharingPanel.js +++ b/products/ASC.Files/Client/src/components/panels/SharingPanel/StyledSharingPanel.js @@ -14,16 +14,14 @@ const StyledContent = styled.div` `; const StyledHeaderContent = styled.div` - width: calc(100% - 16px); - max-width: calc(100% - 16px); + width: calc(100% - 32px); + max-width: calc(100% - 32px); height: 53px; border-bottom: ${(props) => props.theme.filesPanels.sharing.borderBottom}; padding: 0 16px; - margin-right: -16px; - display: flex; align-items: center; justify-content: space-between; @@ -50,9 +48,6 @@ const StyledHeaderContent = styled.div` .sharing_panel-arrow { margin-right: 16px; } - - .sharing_panel-header { - } } .embedding_panel { @@ -72,68 +67,49 @@ const StyledHeaderContent = styled.div` StyledHeaderContent.defaultProps = { theme: Base }; const StyledBodyContent = styled.div` - width: calc(100%); + width: 100%; height: 100%; - margin-right: -16px; - display: flex; flex-direction: column; align-items: start; - - .panel-loader-wrapper { - display: flex; - align-items: center; - - span { - margin-left: 8px; - } - } `; const StyledExternalLink = styled.div` width: 100%; - padding: 12px; + padding: 20px 16px; margin-bottom: 32px; + border-bottom: ${(props) => props.theme.filesPanels.sharing.borderBottom}; + box-sizing: border-box; - background-color: ${(props) => - props.theme.filesPanels.sharing.externalLinkBackground}; - display: flex; flex-direction: column; - align-items: center; - - border-radius: 6px; - - .external-link__unchecked { - width: 100%; + align-items: start; + .external-link__base-line { display: flex; align-items: center; - justify-content: space-between; + justify-content: start; + flex-direction: row; + + .external-link__text { + font-weight: 700; + font-size: 16px; + line-height: 22px; + + margin-right: 16px; + } .external-link__toggler { position: relative; - - span { - font-weight: 600; - font-size: 14px; - line-height: 16px; - } - } - - .external-link__share { - .fixed-max-width { - top: 18px; - } } } .external-link__checked { - padding-top: 12px; + margin-top: 16px; width: 100%; display: flex; @@ -145,14 +121,16 @@ const StyledExternalLink = styled.div` padding-right: 0px; .external-link__buttons { + position: relative; + height: 100%; display: flex; align-items: center; - padding: 4px 16px 4px 24px; + padding: 4px 16px; - .external-link__code { + .external-link__code-icon { margin-right: 12px; cursor: pointer; @@ -162,13 +140,16 @@ const StyledExternalLink = styled.div` } } - .external-link__copy { + .external-link__share-icon { cursor: pointer; path { fill: ${(props) => props.theme.filesPanels.sharing.externalLinkSvg} !important; } } + + external-link__share-dropdown { + } } .append { @@ -176,6 +157,10 @@ const StyledExternalLink = styled.div` } } + .external-link__copy { + margin-left: 8px; + } + .panel_combo-box { .combo-button { min-width: 46px; @@ -191,6 +176,20 @@ const StyledExternalLink = styled.div` } } } + + .external-link__access-rights { + display: flex; + align-items: center; + justify-content: start; + flex-direction: row; + + margin-top: 16px; + + .external-link__access-rights_text { + color: #a3a9ae; + margin-right: 8px; + } + } `; StyledExternalLink.defaultProps = { theme: Base }; @@ -277,7 +276,7 @@ const StyledItem = styled.div` StyledItem.defaultProps = { theme: Base }; const StyledFooterContent = styled.div` - width: calc(100% - 16px); + width: calc(100% - 32px); border-top: ${(props) => props.theme.filesPanels.sharing.borderTop}; padding: 16px;