Web: Client: InvitePanel: Added ExternalLinks component
This commit is contained in:
parent
ae90b06577
commit
7ca2612de1
@ -8,6 +8,7 @@ import Text from "@docspace/components/text";
|
||||
import Button from "@docspace/components/button";
|
||||
import HelpButton from "@docspace/components/help-button";
|
||||
import Link from "@docspace/components/link";
|
||||
import ToggleButton from "@docspace/components/toggle-button";
|
||||
|
||||
import CheckIcon from "PUBLIC_DIR/images/check.edit.react.svg";
|
||||
import CrossIcon from "PUBLIC_DIR/images/cross.edit.react.svg";
|
||||
@ -49,6 +50,14 @@ const StyledSubHeader = styled(Heading)`
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
margin: 20px 0;
|
||||
|
||||
${(props) =>
|
||||
props.inline &&
|
||||
css`
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
`};
|
||||
`;
|
||||
|
||||
const StyledRow = styled.div`
|
||||
@ -109,6 +118,7 @@ const StyledInviteInputContainer = styled.div`
|
||||
|
||||
const StyledDropDown = styled(DropDown)`
|
||||
${(props) => props.width && `width: ${props.width}px`};
|
||||
|
||||
.list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -190,6 +200,11 @@ const StyledLink = styled(Link)`
|
||||
|
||||
StyledButtons.defaultProps = { theme: Base };
|
||||
|
||||
const StyledToggleButton = styled(ToggleButton)`
|
||||
right: 8px;
|
||||
margin-top: -4px;
|
||||
`;
|
||||
|
||||
export {
|
||||
StyledBlock,
|
||||
StyledHeading,
|
||||
@ -211,4 +226,5 @@ export {
|
||||
StyledLink,
|
||||
ScrollList,
|
||||
StyledAccessSelector,
|
||||
StyledToggleButton,
|
||||
};
|
||||
|
@ -6,18 +6,16 @@ import Backdrop from "@docspace/components/backdrop";
|
||||
import Aside from "@docspace/components/aside";
|
||||
import Button from "@docspace/components/button";
|
||||
|
||||
import { EmbeddingPanel } from "../index";
|
||||
|
||||
import {
|
||||
StyledBlock,
|
||||
StyledHeading,
|
||||
StyledInvitePanel,
|
||||
StyledSubHeader,
|
||||
StyledButtons,
|
||||
} from "./StyledInvitePanel";
|
||||
|
||||
import ItemsList from "./sub-components/ItemsList";
|
||||
import InviteInput from "./sub-components/InviteInput";
|
||||
import ExternalLinks from "./sub-components/ExternalLinks";
|
||||
|
||||
const InvitePanel = ({
|
||||
folders,
|
||||
@ -87,9 +85,7 @@ const InvitePanel = ({
|
||||
<StyledHeading>{t("InviteUsersToRoom")}</StyledHeading>
|
||||
</StyledBlock>
|
||||
|
||||
<StyledBlock noPadding>
|
||||
<StyledSubHeader>{t("SharingPanel:ExternalLink")}</StyledSubHeader>
|
||||
</StyledBlock>
|
||||
<ExternalLinks t={t} />
|
||||
|
||||
<InviteInput t={t} onClose={onClose} />
|
||||
|
||||
|
@ -4,13 +4,24 @@ import { getAccessOptions } from "../utils";
|
||||
|
||||
import { StyledAccessSelector } from "../StyledInvitePanel";
|
||||
|
||||
const AccessSelector = ({ t, roomType, onSelectAccess, containerRef }) => {
|
||||
const AccessSelector = ({
|
||||
t,
|
||||
roomType,
|
||||
onSelectAccess,
|
||||
containerRef,
|
||||
defaultAccess,
|
||||
}) => {
|
||||
const width = containerRef?.current?.offsetWidth - 32;
|
||||
const accessOptions = getAccessOptions(t, roomType, false, true);
|
||||
|
||||
const selectedOption = accessOptions.filter(
|
||||
(access) => access.access === defaultAccess
|
||||
)[0];
|
||||
|
||||
return (
|
||||
<StyledAccessSelector>
|
||||
<AccessRightSelect
|
||||
selectedOption={accessOptions[0]}
|
||||
selectedOption={selectedOption}
|
||||
onSelect={onSelectAccess}
|
||||
accessOptions={accessOptions}
|
||||
noBorder={false}
|
||||
|
@ -0,0 +1,159 @@
|
||||
import React, { useState, useEffect, useRef, memo, useCallback } from "react";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import copy from "copy-to-clipboard";
|
||||
|
||||
import toastr from "@docspace/components/toast/toastr";
|
||||
import { objectToGetParams } from "@docspace/common/utils";
|
||||
|
||||
import InputBlock from "@docspace/components/input-block";
|
||||
import IconButton from "@docspace/components/icon-button";
|
||||
import DropDown from "@docspace/components/drop-down";
|
||||
import DropDownItem from "@docspace/components/drop-down-item";
|
||||
|
||||
import AccessSelector from "./AccessSelector";
|
||||
|
||||
import {
|
||||
StyledBlock,
|
||||
StyledSubHeader,
|
||||
StyledInviteInput,
|
||||
StyledInviteInputContainer,
|
||||
StyledToggleButton,
|
||||
} from "../StyledInvitePanel";
|
||||
|
||||
const ExternalLinks = ({
|
||||
t,
|
||||
hideSelector,
|
||||
roomId,
|
||||
defaultAccess,
|
||||
getInvitationLinks,
|
||||
}) => {
|
||||
const [linksVisible, setLinksVisible] = useState(false);
|
||||
const [shareLinks, setShareLinks] = useState([]);
|
||||
const [actionLinksVisible, setActionLinksVisible] = useState(false);
|
||||
|
||||
const inputsRef = useRef();
|
||||
const actionLinkRef = useRef();
|
||||
|
||||
useEffect(() => {
|
||||
getInvitationLinks(roomId).then((links) => setShareLinks(links));
|
||||
}, [roomId]);
|
||||
|
||||
const toggleLinks = (e) => {
|
||||
setLinksVisible(!linksVisible);
|
||||
|
||||
if (!linksVisible) copyLink(shareLinks[0].shareLink);
|
||||
};
|
||||
|
||||
const onSelectAccess = (access) => {
|
||||
console.log(access);
|
||||
};
|
||||
|
||||
const copyLink = (link) => {
|
||||
toastr.success(t("Translations:LinkCopySuccess"));
|
||||
copy(link);
|
||||
};
|
||||
|
||||
const toggleActionLinks = () => {
|
||||
setActionLinksVisible(!actionLinksVisible);
|
||||
};
|
||||
|
||||
const closeActionLinks = () => {
|
||||
setActionLinksVisible(false);
|
||||
};
|
||||
|
||||
const shareEmail = useCallback(
|
||||
(link) => {
|
||||
const { title, shareLink } = link;
|
||||
const subject = t("SharingPanel:ShareEmailSubject", { title });
|
||||
const body = t("SharingPanel:ShareEmailBody", { title, shareLink });
|
||||
|
||||
const mailtoLink =
|
||||
"mailto:" +
|
||||
objectToGetParams({
|
||||
subject,
|
||||
body,
|
||||
});
|
||||
window.open(mailtoLink, "_self");
|
||||
|
||||
closeActionLinks();
|
||||
},
|
||||
[closeActionLinks, links, t]
|
||||
);
|
||||
|
||||
const links =
|
||||
!!shareLinks.length &&
|
||||
shareLinks?.map((link) => {
|
||||
return (
|
||||
<StyledInviteInputContainer key={link.id}>
|
||||
<StyledInviteInput>
|
||||
<InputBlock
|
||||
scale
|
||||
value={link.shareLink}
|
||||
isReadOnly
|
||||
iconName="/static/images/copy.react.svg"
|
||||
onIconClick={() => copyLink(link.shareLink)}
|
||||
hoverColor="#333333"
|
||||
iconColor="#A3A9AE"
|
||||
/>
|
||||
</StyledInviteInput>
|
||||
|
||||
{!hideSelector && (
|
||||
<AccessSelector
|
||||
t={t}
|
||||
roomType={5}
|
||||
defaultAccess={defaultAccess}
|
||||
onSelectAccess={onSelectAccess}
|
||||
containerRef={inputsRef}
|
||||
/>
|
||||
)}
|
||||
</StyledInviteInputContainer>
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<StyledBlock noPadding ref={inputsRef}>
|
||||
<StyledSubHeader inline>
|
||||
{t("SharingPanel:ExternalLink")}
|
||||
<div style={{ position: "relative" }}>
|
||||
<IconButton
|
||||
size={16}
|
||||
iconName="/static/images/media.download.react.svg"
|
||||
hoverColor="#333333"
|
||||
iconColor="#A3A9AE"
|
||||
onClick={toggleActionLinks}
|
||||
/>
|
||||
<DropDown
|
||||
open={actionLinksVisible}
|
||||
clickOutsideAction={closeActionLinks}
|
||||
withBackdrop={false}
|
||||
isDefaultMode={false}
|
||||
fixedDirection={true}
|
||||
>
|
||||
<DropDownItem
|
||||
label={`${t("SharingPanel:ShareVia")} e-mail`}
|
||||
onClick={() => shareEmail(links[0])}
|
||||
/>
|
||||
<DropDownItem
|
||||
label={`${t("SharingPanel:ShareVia")} Twitter`}
|
||||
onClick={closeActionLinks}
|
||||
/>
|
||||
</DropDown>
|
||||
</div>
|
||||
<StyledToggleButton isChecked={linksVisible} onChange={toggleLinks} />
|
||||
</StyledSubHeader>
|
||||
{linksVisible && links}
|
||||
</StyledBlock>
|
||||
);
|
||||
};
|
||||
|
||||
export default inject(({ dialogsStore, filesStore }) => {
|
||||
const { invitePanelOptions } = dialogsStore;
|
||||
const { getInvitationLinks } = filesStore;
|
||||
|
||||
return {
|
||||
roomId: invitePanelOptions.roomId,
|
||||
hideSelector: invitePanelOptions.hideSelector,
|
||||
defaultAccess: invitePanelOptions.defaultAccess,
|
||||
getInvitationLinks,
|
||||
};
|
||||
})(observer(ExternalLinks));
|
@ -218,6 +218,7 @@ const InviteInput = ({
|
||||
<AccessSelector
|
||||
t={t}
|
||||
roomType={5}
|
||||
defaultAccess={defaultAccess}
|
||||
onSelectAccess={onSelectAccess}
|
||||
containerRef={inputsRef}
|
||||
/>
|
||||
|
Loading…
Reference in New Issue
Block a user