Fix after merge
This commit is contained in:
parent
0c652ed1e5
commit
e953fc7c04
@ -1,138 +0,0 @@
|
||||
import PlusIcon from "PUBLIC_DIR/images/plus.react.svg?url";
|
||||
import UniverseIcon from "PUBLIC_DIR/images/universe.react.svg?url";
|
||||
import PeopleIcon from "PUBLIC_DIR/images/people.react.svg?url";
|
||||
import CopyIcon from "PUBLIC_DIR/images/copy.react.svg?url";
|
||||
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { isMobileOnly } from "react-device-detect";
|
||||
import copy from "copy-to-clipboard";
|
||||
|
||||
import { Avatar } from "@docspace/shared/components/avatar";
|
||||
import { Link } from "@docspace/shared/components/link";
|
||||
import { ComboBox } from "@docspace/shared/components/combobox";
|
||||
import { IconButton } from "@docspace/shared/components/icon-button";
|
||||
import { toastr } from "@docspace/shared/components/toast";
|
||||
import { Loader } from "@docspace/shared/components/loader";
|
||||
|
||||
import { StyledLinkRow } from "./StyledShare";
|
||||
import { getShareOptions, getAccessOptions } from "./optionsHelper";
|
||||
import ExpiredComboBox from "./ExpiredComboBox";
|
||||
import { RowLoader } from "./ShareLoader";
|
||||
|
||||
const LinkRow = ({
|
||||
onAddClick,
|
||||
links,
|
||||
changeShareOption,
|
||||
changeAccessOption,
|
||||
changeExpirationOption,
|
||||
availableExternalRights,
|
||||
loadingLinks,
|
||||
}) => {
|
||||
const { t } = useTranslation([
|
||||
"SharingPanel",
|
||||
"Files",
|
||||
"Translations",
|
||||
"Common",
|
||||
]);
|
||||
|
||||
const shareOptions = getShareOptions(t);
|
||||
const accessOptions = getAccessOptions(t, availableExternalRights);
|
||||
|
||||
const onCopyLink = (link) => {
|
||||
copy(link.sharedTo.shareLink);
|
||||
toastr.success(t("Common:LinkSuccessfullyCopied"));
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{!links?.length ? (
|
||||
<StyledLinkRow>
|
||||
<Avatar size="min" source={PlusIcon} />
|
||||
<Link
|
||||
type="action"
|
||||
isHovered={true}
|
||||
fontWeight={600}
|
||||
onClick={onAddClick}
|
||||
>
|
||||
{t("Common:CreateAndCopy")}
|
||||
</Link>
|
||||
</StyledLinkRow>
|
||||
) : (
|
||||
links.map((link, index) => {
|
||||
if (link.isLoaded) return <RowLoader />;
|
||||
|
||||
const shareOption = shareOptions.find(
|
||||
(option) => option.internal === link.sharedTo.internal,
|
||||
);
|
||||
const accessOption = accessOptions.find(
|
||||
(option) => option.access === link.access,
|
||||
);
|
||||
const avatar =
|
||||
shareOption.key === "anyone" ? UniverseIcon : PeopleIcon;
|
||||
|
||||
const isExpiredLink = link.sharedTo.isExpired;
|
||||
|
||||
const isLoaded = loadingLinks.includes(link.sharedTo.id);
|
||||
|
||||
return (
|
||||
<StyledLinkRow key={`share-link-row-${index}`}>
|
||||
{isLoaded ? (
|
||||
<Loader className="loader" size="20px" type="track" />
|
||||
) : (
|
||||
<Avatar size="min" source={avatar} />
|
||||
)}
|
||||
<div className="link-options">
|
||||
<ComboBox
|
||||
className="internal-combobox"
|
||||
directionY={"both"}
|
||||
options={shareOptions}
|
||||
selectedOption={shareOption}
|
||||
onSelect={(item) => changeShareOption(item, link)}
|
||||
scaled={false}
|
||||
scaledOptions={false}
|
||||
showDisabledItems={true}
|
||||
size="content"
|
||||
fillIcon={false}
|
||||
withBlur={isMobileOnly}
|
||||
modernView={true}
|
||||
isDisabled={isExpiredLink || isLoaded}
|
||||
/>
|
||||
<ExpiredComboBox
|
||||
link={link}
|
||||
changeExpirationOption={changeExpirationOption}
|
||||
isDisabled={isLoaded}
|
||||
/>
|
||||
</div>
|
||||
<div className="link-actions">
|
||||
<IconButton
|
||||
size={16}
|
||||
iconName={CopyIcon}
|
||||
onClick={() => onCopyLink(link)}
|
||||
title={t("Common:CreateAndCopy")}
|
||||
isDisabled={isExpiredLink || isLoaded}
|
||||
/>
|
||||
<ComboBox
|
||||
directionY={"both"}
|
||||
options={accessOptions}
|
||||
selectedOption={accessOption}
|
||||
onSelect={(item) => changeAccessOption(item, link)}
|
||||
scaled={false}
|
||||
scaledOptions={false}
|
||||
showDisabledItems={true}
|
||||
size="content"
|
||||
fillIcon={true}
|
||||
withBlur={isMobileOnly}
|
||||
modernView={true}
|
||||
type="onlyIcon"
|
||||
isDisabled={isExpiredLink || isLoaded}
|
||||
/>
|
||||
</div>
|
||||
</StyledLinkRow>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default LinkRow;
|
@ -1,280 +0,0 @@
|
||||
import InfoIcon from "PUBLIC_DIR/images/info.outline.react.svg?url";
|
||||
import LinksToViewingIconUrl from "PUBLIC_DIR/images/links-to-viewing.react.svg?url";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import copy from "copy-to-clipboard";
|
||||
|
||||
import { Text } from "@docspace/shared/components/text";
|
||||
import { IconButton } from "@docspace/shared/components/icon-button";
|
||||
import { toastr } from "@docspace/shared/components/toast";
|
||||
import { ShareAccessRights } from "@docspace/shared/enums";
|
||||
|
||||
import PublicRoomBar from "../Members/sub-components/PublicRoomBar";
|
||||
import LinkRow from "./LinkRow";
|
||||
import ShareLoader from "./ShareLoader";
|
||||
|
||||
import { StyledLinks } from "./StyledShare";
|
||||
|
||||
const Share = (props) => {
|
||||
const {
|
||||
isRooms,
|
||||
setView,
|
||||
infoPanelSelection,
|
||||
getPrimaryFileLink,
|
||||
getFileLinks,
|
||||
editFileLink,
|
||||
addFileLink,
|
||||
shareChanged,
|
||||
setShareChanged,
|
||||
} = props;
|
||||
const { t } = useTranslation(["SharingPanel", "Files", "Common"]);
|
||||
const [primaryFileLink, setPrimaryFileLink] = useState([]);
|
||||
const [additionalFileLinks, setAdditionalFileLinks] = useState([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [loadingLinks, setLoadingLinks] = useState([]);
|
||||
|
||||
const hideSharePanel = isRooms || !infoPanelSelection?.canShare;
|
||||
|
||||
useEffect(() => {
|
||||
if (hideSharePanel) {
|
||||
setView("info_details");
|
||||
}
|
||||
fetchLinks();
|
||||
}, [infoPanelSelection]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchLinks();
|
||||
setShareChanged(false);
|
||||
}, [shareChanged]);
|
||||
|
||||
const fetchLinks = async () => {
|
||||
const res = await getFileLinks(infoPanelSelection.id);
|
||||
const primaryLink = res.items.filter(
|
||||
(item) => item.sharedTo.primary === true,
|
||||
);
|
||||
const additionalLinks = res.items.filter(
|
||||
(item) => item.sharedTo.primary !== true,
|
||||
);
|
||||
|
||||
setPrimaryFileLink(primaryLink);
|
||||
setAdditionalFileLinks(additionalLinks);
|
||||
setIsLoading(false);
|
||||
};
|
||||
|
||||
const addGeneralLink = async () => {
|
||||
addLoaderLink(true);
|
||||
const link = await getPrimaryFileLink(infoPanelSelection.id);
|
||||
setPrimaryFileLink([link]);
|
||||
copy(link.sharedTo.shareLink);
|
||||
toastr.success(t("Common:GeneralAccessLinkCopied"));
|
||||
};
|
||||
|
||||
const addAdditionalLinks = async () => {
|
||||
addLoaderLink(false);
|
||||
const newLink = await addFileLink(
|
||||
infoPanelSelection.id,
|
||||
ShareAccessRights.ReadOnly,
|
||||
false,
|
||||
false,
|
||||
);
|
||||
setAdditionalFileLinks([...additionalFileLinks, ...[newLink]]);
|
||||
};
|
||||
|
||||
const addLoaderLink = (primary) => {
|
||||
const link = { isLoaded: true };
|
||||
if (primary) {
|
||||
setPrimaryFileLink([link]);
|
||||
} else {
|
||||
setAdditionalFileLinks([...additionalFileLinks, ...[link]]);
|
||||
}
|
||||
};
|
||||
|
||||
const changeShareOption = async (item, link) => {
|
||||
try {
|
||||
setLoadingLinks([...loadingLinks, link.sharedTo.id]);
|
||||
|
||||
const res = await editFileLink(
|
||||
infoPanelSelection.id,
|
||||
link.sharedTo.id,
|
||||
link.access,
|
||||
link.sharedTo.primary,
|
||||
item.internal,
|
||||
link.sharedTo.expirationDate,
|
||||
);
|
||||
updateLink(link, res);
|
||||
|
||||
copy(link.sharedTo.shareLink);
|
||||
toastr.success(t("Common:LinkSuccessfullyCopied"));
|
||||
} catch (e) {
|
||||
toastr.error(e);
|
||||
}
|
||||
};
|
||||
|
||||
const changeAccessOption = async (item, link) => {
|
||||
try {
|
||||
setLoadingLinks([...loadingLinks, link.sharedTo.id]);
|
||||
|
||||
const res = await editFileLink(
|
||||
infoPanelSelection.id,
|
||||
link.sharedTo.id,
|
||||
item.access,
|
||||
link.sharedTo.primary,
|
||||
link.sharedTo.internal,
|
||||
link.sharedTo.expirationDate,
|
||||
);
|
||||
if (item.access === ShareAccessRights.None) {
|
||||
deleteLink(link, link.sharedTo.id);
|
||||
if (link.sharedTo.primary) {
|
||||
toastr.success(t("Common:GeneralAccessLinkRemove"));
|
||||
} else {
|
||||
toastr.success(t("Common:AdditionalLinkRemove"));
|
||||
}
|
||||
} else {
|
||||
updateLink(link, res);
|
||||
if (item.access === ShareAccessRights.DenyAccess) {
|
||||
toastr.success(t("Common:LinkAccessDenied"));
|
||||
} else {
|
||||
copy(link.sharedTo.shareLink);
|
||||
toastr.success(t("Common:LinkSuccessfullyCopied"));
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
toastr.error(e);
|
||||
}
|
||||
};
|
||||
|
||||
const changeExpirationOption = async (link, expirationDate) => {
|
||||
try {
|
||||
setLoadingLinks([...loadingLinks, link.sharedTo.id]);
|
||||
|
||||
const res = await editFileLink(
|
||||
infoPanelSelection.id,
|
||||
link.sharedTo.id,
|
||||
link.access,
|
||||
link.sharedTo.primary,
|
||||
link.sharedTo.internal,
|
||||
expirationDate,
|
||||
);
|
||||
updateLink(link, res);
|
||||
|
||||
copy(link.sharedTo.shareLink);
|
||||
toastr.success(t("Common:LinkSuccessfullyCopied"));
|
||||
} catch (e) {
|
||||
toastr.error(e);
|
||||
}
|
||||
};
|
||||
|
||||
const updateLink = (link, newItem) => {
|
||||
if (link.sharedTo.primary) {
|
||||
setPrimaryFileLink([newItem]);
|
||||
} else {
|
||||
const newArr = additionalFileLinks.map((item) => {
|
||||
if (item.sharedTo.id === newItem.sharedTo.id) {
|
||||
return newItem || null;
|
||||
}
|
||||
return item;
|
||||
});
|
||||
setAdditionalFileLinks(newArr);
|
||||
}
|
||||
const newLoadingLinks = loadingLinks.filter(
|
||||
(item) => item !== link.sharedTo.id,
|
||||
);
|
||||
setLoadingLinks(newLoadingLinks);
|
||||
};
|
||||
|
||||
const deleteLink = (link, id) => {
|
||||
if (link.sharedTo.primary) {
|
||||
setPrimaryFileLink(null);
|
||||
} else {
|
||||
const newArr = additionalFileLinks.filter(
|
||||
(item) => item.sharedTo.id !== id,
|
||||
);
|
||||
setAdditionalFileLinks(newArr);
|
||||
}
|
||||
};
|
||||
|
||||
if (hideSharePanel) return <></>;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<PublicRoomBar
|
||||
headerText={t("Common:ShareDocument")}
|
||||
bodyText={t("Common:ShareDocumentDescription")}
|
||||
iconName={InfoIcon}
|
||||
/>
|
||||
{isLoading ? (
|
||||
<ShareLoader t={t} />
|
||||
) : (
|
||||
<>
|
||||
<StyledLinks>
|
||||
<Text fontSize="14px" fontWeight={600} className="title-link">
|
||||
{t("Common:GeneralAccessLink")}
|
||||
</Text>
|
||||
<LinkRow
|
||||
onAddClick={addGeneralLink}
|
||||
links={primaryFileLink}
|
||||
changeShareOption={changeShareOption}
|
||||
changeAccessOption={changeAccessOption}
|
||||
changeExpirationOption={changeExpirationOption}
|
||||
availableExternalRights={
|
||||
infoPanelSelection.availableExternalRights
|
||||
}
|
||||
loadingLinks={loadingLinks}
|
||||
/>
|
||||
</StyledLinks>
|
||||
|
||||
{(primaryFileLink?.length > 0 || additionalFileLinks?.length > 0) && (
|
||||
<StyledLinks>
|
||||
<div className="additional-link">
|
||||
<Text fontSize="14px" fontWeight={600} className="title-link">
|
||||
{t("Common:AdditionalLinks")}
|
||||
</Text>
|
||||
<IconButton
|
||||
className="link-to-viewing-icon"
|
||||
iconName={LinksToViewingIconUrl}
|
||||
onClick={addAdditionalLinks}
|
||||
size={16}
|
||||
/>
|
||||
</div>
|
||||
<LinkRow
|
||||
onAddClick={addAdditionalLinks}
|
||||
links={additionalFileLinks}
|
||||
changeShareOption={changeShareOption}
|
||||
changeAccessOption={changeAccessOption}
|
||||
changeExpirationOption={changeExpirationOption}
|
||||
availableExternalRights={
|
||||
infoPanelSelection.availableExternalRights
|
||||
}
|
||||
loadingLinks={loadingLinks}
|
||||
/>
|
||||
</StyledLinks>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default inject(({ infoPanelStore }) => {
|
||||
const {
|
||||
setView,
|
||||
getPrimaryFileLink,
|
||||
getFileLinks,
|
||||
editFileLink,
|
||||
addFileLink,
|
||||
shareChanged,
|
||||
setShareChanged,
|
||||
} = infoPanelStore;
|
||||
|
||||
return {
|
||||
setView,
|
||||
getPrimaryFileLink,
|
||||
getFileLinks,
|
||||
editFileLink,
|
||||
addFileLink,
|
||||
shareChanged,
|
||||
setShareChanged,
|
||||
};
|
||||
})(observer(Share));
|
@ -40,7 +40,7 @@ const Share = (props: ShareProps) => {
|
||||
shareChanged,
|
||||
setShareChanged,
|
||||
} = props;
|
||||
const { t } = useTranslation(["SharingPanel", "Files"]);
|
||||
const { t } = useTranslation(["Common"]);
|
||||
const [primaryFileLink, setPrimaryFileLink] = useState<TLink[] | null>([]);
|
||||
const [additionalFileLinks, setAdditionalFileLinks] = useState<TLink[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
@ -49,7 +49,6 @@ const Share = (props: ShareProps) => {
|
||||
const requestRunning = React.useRef(false);
|
||||
|
||||
const hideSharePanel = isRooms || !infoPanelSelection?.canShare;
|
||||
console.log(additionalFileLinks);
|
||||
|
||||
const fetchLinks = React.useCallback(async () => {
|
||||
if (requestRunning.current) return;
|
||||
@ -98,7 +97,7 @@ const Share = (props: ShareProps) => {
|
||||
|
||||
setPrimaryFileLink([link]);
|
||||
copy(link.sharedTo.shareLink);
|
||||
toastr.success(t("SharingPanel:GeneralAccessLinkCopied"));
|
||||
toastr.success(t("Common:GeneralAccessLinkCopied"));
|
||||
};
|
||||
|
||||
const addAdditionalLinks = async () => {
|
||||
@ -117,7 +116,11 @@ const Share = (props: ShareProps) => {
|
||||
false,
|
||||
);
|
||||
setAdditionalFileLinks((links) => {
|
||||
const newLinks: TLink[] = [...links, ...[newLink]];
|
||||
const newLinks: TLink[] = [...links];
|
||||
|
||||
const idx = newLinks.findIndex((l) => "isLoaded" in l && l.isLoaded);
|
||||
|
||||
if (typeof idx !== "undefined") newLinks[idx] = { ...newLink };
|
||||
|
||||
return newLinks;
|
||||
});
|
||||
@ -178,7 +181,7 @@ const Share = (props: ShareProps) => {
|
||||
updateLink(link, res);
|
||||
|
||||
copy(link.sharedTo.shareLink);
|
||||
toastr.success(t("Files:LinkSuccessfullyCopied"));
|
||||
toastr.success(t("Common:LinkSuccessfullyCopied"));
|
||||
} catch (e) {
|
||||
toastr.error(e as TData);
|
||||
}
|
||||
@ -221,7 +224,7 @@ const Share = (props: ShareProps) => {
|
||||
toastr.success(t("LinkAccessDenied"));
|
||||
} else {
|
||||
copy(link.sharedTo.shareLink);
|
||||
toastr.success(t("Files:LinkSuccessfullyCopied"));
|
||||
toastr.success(t("Common:LinkSuccessfullyCopied"));
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
@ -259,7 +262,7 @@ const Share = (props: ShareProps) => {
|
||||
updateLink(link, res);
|
||||
|
||||
copy(link.sharedTo.shareLink);
|
||||
toastr.success(t("Files:LinkSuccessfullyCopied"));
|
||||
toastr.success(t("Common:LinkSuccessfullyCopied"));
|
||||
} catch (e) {
|
||||
toastr.error(e as TData);
|
||||
}
|
||||
|
@ -17,7 +17,7 @@ const ExpiredComboBox = ({
|
||||
changeExpirationOption,
|
||||
isDisabled,
|
||||
}: ExpiredComboBoxProps) => {
|
||||
const { t, i18n } = useTranslation(["SharingPanel", "Settings", "Common"]);
|
||||
const { t, i18n } = useTranslation(["Common"]);
|
||||
const calendarRef = useRef<HTMLDivElement | null>(null);
|
||||
const bodyRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
|
@ -31,19 +31,14 @@ const LinkRow = ({
|
||||
availableExternalRights,
|
||||
loadingLinks,
|
||||
}: LinkRowProps) => {
|
||||
const { t } = useTranslation([
|
||||
"SharingPanel",
|
||||
"Files",
|
||||
"Translations",
|
||||
"Common",
|
||||
]);
|
||||
const { t } = useTranslation(["Common"]);
|
||||
|
||||
const shareOptions = getShareOptions(t);
|
||||
const accessOptions = getAccessOptions(t, availableExternalRights);
|
||||
|
||||
const onCopyLink = (link: TFileLink) => {
|
||||
copy(link.sharedTo.shareLink);
|
||||
toastr.success(t("Files:LinkSuccessfullyCopied"));
|
||||
toastr.success(t("Common:LinkSuccessfullyCopied"));
|
||||
};
|
||||
|
||||
return !links?.length ? (
|
||||
@ -55,13 +50,13 @@ const LinkRow = ({
|
||||
fontWeight={600}
|
||||
onClick={onAddClick}
|
||||
>
|
||||
{t("CreateAndCopy")}
|
||||
{t("Common:CreateAndCopy")}
|
||||
</Link>
|
||||
</StyledLinkRow>
|
||||
) : (
|
||||
links.map((link, index) => {
|
||||
if (("isLoaded" in link && link.isLoaded) || "isLoaded" in link)
|
||||
return <RowSkeleton />;
|
||||
return <RowSkeleton key="loading-link" />;
|
||||
|
||||
const shareOption = shareOptions.find(
|
||||
(option) => option.internal === link.sharedTo.internal,
|
||||
@ -114,7 +109,7 @@ const LinkRow = ({
|
||||
size={16}
|
||||
iconName={CopyIcon}
|
||||
onClick={() => onCopyLink(link)}
|
||||
title={t("CreateAndCopy")}
|
||||
title={t("Common:CreateAndCopy")}
|
||||
isDisabled={isExpiredLink || isLoaded}
|
||||
/>
|
||||
<ComboBox
|
||||
|
Loading…
Reference in New Issue
Block a user