Web:Files:Components: refactoring and redesign external link of sharing panel
This commit is contained in:
Timofey Boyko
parent
0da91aa337
commit
8cd3abdccd
@ -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 (
|
||||
<StyledExternalLink>
|
||||
<div className="external-link__unchecked">
|
||||
<div className="external-link__base-line">
|
||||
<Text className="external-link__text" noSelect={true} truncate={true}>
|
||||
{t("ExternalLink")}
|
||||
</Text>
|
||||
<ToggleButton
|
||||
className="external-link__toggler"
|
||||
label={linkText}
|
||||
isChecked={isChecked}
|
||||
onChange={onToggleLinkAction}
|
||||
/>
|
||||
|
||||
{isChecked && (
|
||||
<LinkWithDropdown
|
||||
className="external-link__share"
|
||||
dropdownType="alwaysDashed"
|
||||
data={options}
|
||||
fontSize="13px"
|
||||
fontWeight={600}
|
||||
directionX={"right"}
|
||||
directionY={"bottom"}
|
||||
isDefaultMode={false}
|
||||
>
|
||||
{shareText}
|
||||
</LinkWithDropdown>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isChecked && (
|
||||
<div className="external-link__checked">
|
||||
<InputBlock
|
||||
className="external-link__input-link"
|
||||
scale={true}
|
||||
isReadOnly={true}
|
||||
placeholder={shareLink}
|
||||
>
|
||||
<div className="external-link__buttons">
|
||||
<CodeIcon
|
||||
className="external-link__code"
|
||||
onClick={onShowEmbeddingPanelAction}
|
||||
/>
|
||||
<CopyIcon
|
||||
className="external-link__copy"
|
||||
onClick={onCopyLinkAction}
|
||||
/>
|
||||
</div>
|
||||
</InputBlock>
|
||||
<>
|
||||
<div className="external-link__checked">
|
||||
<InputBlock
|
||||
className="external-link__input-link"
|
||||
scale={true}
|
||||
isReadOnly={true}
|
||||
placeholder={shareLink}
|
||||
>
|
||||
<div ref={ref} className="external-link__buttons">
|
||||
<CodeIcon
|
||||
className="external-link__code-icon"
|
||||
onClick={onShowEmbeddingPanelAction}
|
||||
/>
|
||||
<ShareIcon
|
||||
className="external-link__share-icon"
|
||||
onClick={onToggleShareAction}
|
||||
/>
|
||||
<DropDownContainer
|
||||
className="external-link__share-dropdown"
|
||||
open={shareActionOpen}
|
||||
clickOutsideAction={closeShareAction}
|
||||
withBackdrop={false}
|
||||
isDefaultMode={false}
|
||||
>
|
||||
{options.map((option) => (
|
||||
<DropDownItem
|
||||
key={option.key}
|
||||
label={option.label}
|
||||
onClick={option.onClick}
|
||||
/>
|
||||
))}
|
||||
</DropDownContainer>
|
||||
</div>
|
||||
</InputBlock>
|
||||
|
||||
<AccessComboBox
|
||||
t={t}
|
||||
access={item.access}
|
||||
directionX="right"
|
||||
directionY="bottom"
|
||||
accessOptions={externalAccessOptions}
|
||||
onAccessChange={onChangeItemAccess}
|
||||
itemId={item.sharedTo.id}
|
||||
isDisabled={false}
|
||||
disableLink={false}
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
className={"external-link__copy"}
|
||||
label={t("Translations:Copy")}
|
||||
size={"small"}
|
||||
onClick={onCopyLinkAction}
|
||||
/>
|
||||
</div>
|
||||
<div className="external-link__access-rights">
|
||||
<Text className="external-link__access-rights_text">
|
||||
Access rights:
|
||||
</Text>
|
||||
<AccessComboBox
|
||||
t={t}
|
||||
access={externalItem?.access}
|
||||
directionX="right"
|
||||
directionY="bottom"
|
||||
accessOptions={externalAccessOptions}
|
||||
onAccessChange={onChangeItemAccess}
|
||||
itemId={externalItem?.sharedTo?.id}
|
||||
isDisabled={false}
|
||||
disableLink={false}
|
||||
isExternalLink={true}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</StyledExternalLink>
|
||||
);
|
||||
};
|
||||
|
||||
export default ExternalLink;
|
||||
export default React.memo(ExternalLink);
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user