Web: Components: LinkRow: fixed types
This commit is contained in:
parent
c2fc3eada7
commit
f03a8ac9ec
@ -85,7 +85,7 @@ const LinkRow = (props: LinkRowProps) => {
|
||||
setExternalLink,
|
||||
} = props;
|
||||
|
||||
const { title, shareLink, password, isExpired, primary } = link.sharedTo;
|
||||
const { shareLink, password, isExpired, primary } = link.sharedTo;
|
||||
|
||||
const isLocked = !!password;
|
||||
const isDisabled = isExpired;
|
||||
@ -226,9 +226,8 @@ const LinkRow = (props: LinkRowProps) => {
|
||||
getData={getData}
|
||||
onOpenContextMenu={onOpenContextMenu}
|
||||
onCloseContextMenu={onCloseContextMenu}
|
||||
isRoom
|
||||
isRoomsLink
|
||||
isPrimaryLink={isPrimaryLink}
|
||||
linkTitle={title}
|
||||
onAccessRightsSelect={onAccessRightsSelect}
|
||||
changeExpirationOption={changeExpirationOption}
|
||||
/>
|
||||
|
@ -46,6 +46,7 @@ type PropsFromCombobox = Pick<
|
||||
| "withBlur"
|
||||
| "type"
|
||||
| "noBorder"
|
||||
| "isDisabled"
|
||||
>;
|
||||
|
||||
export type AccessRightSelectProps = PropsFromCombobox & {
|
||||
|
@ -25,6 +25,7 @@
|
||||
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
|
||||
|
||||
import styled, { css } from "styled-components";
|
||||
import { DropDown } from "../drop-down";
|
||||
|
||||
const StyledLinks = styled.div`
|
||||
margin-top: 20px;
|
||||
@ -56,15 +57,6 @@ const StyledLinkRow = styled.div<{ isExpired?: boolean }>`
|
||||
height: 68px;
|
||||
|
||||
.avatar_role-wrapper {
|
||||
/* svg {
|
||||
path {
|
||||
fill: ${({ isExpired, theme }) =>
|
||||
isExpired
|
||||
? theme.infoPanel.links.iconErrorColor
|
||||
: theme.infoPanel.links.iconColor};
|
||||
}
|
||||
} */
|
||||
|
||||
svg {
|
||||
path:nth-child(3) {
|
||||
fill: ${({ theme }) => theme.backgroundColor};
|
||||
@ -163,4 +155,10 @@ const StyledSquare = styled.div`
|
||||
}
|
||||
`;
|
||||
|
||||
export { StyledLinks, StyledLinkRow, StyledSquare };
|
||||
const StyledDropDown = styled(DropDown)`
|
||||
.share-link_calendar {
|
||||
position: fixed;
|
||||
}
|
||||
`;
|
||||
|
||||
export { StyledLinks, StyledLinkRow, StyledSquare, StyledDropDown };
|
||||
|
@ -39,10 +39,13 @@ export type ShareCalendarProps = {
|
||||
closeCalendar: (formattedDate: moment.Moment) => void;
|
||||
calendarRef: React.RefObject<HTMLDivElement>;
|
||||
locale: string;
|
||||
bodyRef?: React.MutableRefObject<HTMLDivElement | null>;
|
||||
useDropDown?: boolean;
|
||||
};
|
||||
export type TLink = TFileLink | { isLoaded: boolean };
|
||||
|
||||
export type LinkRowProps = {
|
||||
export type LinkRowProps =
|
||||
| {
|
||||
onAddClick: () => Promise<void>;
|
||||
links: TLink[] | null;
|
||||
changeShareOption: (item: TOption, link: TFileLink) => Promise<void>;
|
||||
@ -53,6 +56,30 @@ export type LinkRowProps = {
|
||||
) => Promise<void>;
|
||||
availableExternalRights: TAvailableExternalRights;
|
||||
loadingLinks: (string | number)[];
|
||||
isRoomsLink?: undefined;
|
||||
isPrimaryLink?: undefined;
|
||||
getData: () => undefined;
|
||||
onOpenContextMenu?: undefined;
|
||||
onCloseContextMenu?: undefined;
|
||||
onAccessRightsSelect?: undefined;
|
||||
}
|
||||
| {
|
||||
onAddClick: () => Promise<void>;
|
||||
links: TLink[] | null;
|
||||
changeShareOption: (item: TOption, link: TFileLink) => Promise<void>;
|
||||
changeAccessOption: (item: TOption, link: TFileLink) => Promise<void>;
|
||||
changeExpirationOption: (
|
||||
link: TFileLink,
|
||||
expirationDate: moment.Moment | null,
|
||||
) => Promise<void>;
|
||||
availableExternalRights: TAvailableExternalRights;
|
||||
loadingLinks: (string | number)[];
|
||||
isRoomsLink?: boolean;
|
||||
isPrimaryLink?: boolean;
|
||||
getData: () => ContextMenuModel[];
|
||||
onOpenContextMenu: (e: React.MouseEvent) => void;
|
||||
onCloseContextMenu: () => void;
|
||||
onAccessRightsSelect: (option: TOption) => void;
|
||||
};
|
||||
|
||||
export type ExpiredComboBoxProps = {
|
||||
@ -62,6 +89,7 @@ export type ExpiredComboBoxProps = {
|
||||
expirationDate: moment.Moment | null,
|
||||
) => Promise<void>;
|
||||
isDisabled?: boolean;
|
||||
isRoomsLink?: boolean;
|
||||
};
|
||||
|
||||
export type ShareProps = {
|
||||
|
@ -42,6 +42,7 @@ const ExpiredComboBox = ({
|
||||
link,
|
||||
changeExpirationOption,
|
||||
isDisabled,
|
||||
isRoomsLink,
|
||||
}: ExpiredComboBoxProps) => {
|
||||
const { t, i18n } = useTranslation(["Common"]);
|
||||
const calendarRef = useRef<HTMLDivElement | null>(null);
|
||||
@ -193,10 +194,12 @@ const ExpiredComboBox = ({
|
||||
)}
|
||||
{showCalendar && (
|
||||
<ShareCalendar
|
||||
bodyRef={bodyRef}
|
||||
onDateSet={setDateFromCalendar}
|
||||
calendarRef={calendarRef}
|
||||
closeCalendar={onCalendarClose}
|
||||
locale={i18n.language}
|
||||
useDropDown={isRoomsLink}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
@ -64,10 +64,8 @@ const LinkRow = ({
|
||||
changeExpirationOption,
|
||||
availableExternalRights,
|
||||
loadingLinks,
|
||||
|
||||
isRoom,
|
||||
isRoomsLink,
|
||||
isPrimaryLink,
|
||||
linkTitle,
|
||||
getData,
|
||||
onOpenContextMenu,
|
||||
onCloseContextMenu,
|
||||
@ -80,7 +78,7 @@ const LinkRow = ({
|
||||
? getAccessOptions(t, availableExternalRights)
|
||||
: [];
|
||||
|
||||
const roomAccessOptions = isRoom ? getRoomAccessOptions(t) : [];
|
||||
const roomAccessOptions = isRoomsLink ? getRoomAccessOptions(t) : [];
|
||||
|
||||
const onCopyLink = (link: TFileLink) => {
|
||||
copyShareLink(link.sharedTo.shareLink);
|
||||
@ -118,6 +116,7 @@ const LinkRow = ({
|
||||
|
||||
const isExpiredLink = link.sharedTo.isExpired;
|
||||
const isLocked = !!link.sharedTo.password;
|
||||
const linkTitle = link.sharedTo.title;
|
||||
|
||||
const isLoaded = loadingLinks.includes(link.sharedTo.id);
|
||||
|
||||
@ -137,7 +136,7 @@ const LinkRow = ({
|
||||
/>
|
||||
)}
|
||||
<div className="link-options">
|
||||
{isRoom ? (
|
||||
{isRoomsLink ? (
|
||||
<Text className="link-options_title">{linkTitle}</Text>
|
||||
) : !isExpiredLink ? (
|
||||
<ComboBox
|
||||
@ -162,6 +161,7 @@ const LinkRow = ({
|
||||
link={link}
|
||||
changeExpirationOption={changeExpirationOption}
|
||||
isDisabled={isLoaded}
|
||||
isRoomsLink={isRoomsLink}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
@ -174,10 +174,10 @@ const LinkRow = ({
|
||||
title={t("Common:CreateAndCopy")}
|
||||
isDisabled={isExpiredLink || isLoaded}
|
||||
/>
|
||||
{isRoom ? (
|
||||
{isRoomsLink ? (
|
||||
<>
|
||||
<AccessRightSelect
|
||||
selectedOption={roomSelectedOptions}
|
||||
selectedOption={roomSelectedOptions ?? ({} as TOption)}
|
||||
onSelect={onAccessRightsSelect}
|
||||
accessOptions={roomAccessOptions}
|
||||
noBorder
|
||||
|
@ -31,6 +31,7 @@ import { isMobile } from "../../../utils/device";
|
||||
|
||||
import { Calendar } from "../../calendar";
|
||||
import { ShareCalendarProps } from "../Share.types";
|
||||
import { StyledDropDown } from "../Share.styled";
|
||||
|
||||
const StyledCalendar = styled(Calendar)`
|
||||
position: absolute;
|
||||
@ -50,12 +51,15 @@ const ShareCalendar = ({
|
||||
closeCalendar,
|
||||
calendarRef,
|
||||
locale,
|
||||
bodyRef,
|
||||
useDropDown,
|
||||
}: ShareCalendarProps) => {
|
||||
const selectedDate = moment();
|
||||
const maxDate = moment().add(10, "years");
|
||||
|
||||
return (
|
||||
const calendarComponent = (
|
||||
<StyledCalendar
|
||||
className="share-link_calendar"
|
||||
selectedDate={selectedDate}
|
||||
setSelectedDate={onDateSet}
|
||||
onChange={closeCalendar}
|
||||
@ -66,6 +70,19 @@ const ShareCalendar = ({
|
||||
maxDate={maxDate}
|
||||
/>
|
||||
);
|
||||
|
||||
return useDropDown ? (
|
||||
<StyledDropDown
|
||||
open
|
||||
isDefaultMode
|
||||
forwardedRef={bodyRef}
|
||||
eventTypes={["mousedown"]}
|
||||
>
|
||||
{calendarComponent}
|
||||
</StyledDropDown>
|
||||
) : (
|
||||
calendarComponent
|
||||
);
|
||||
};
|
||||
|
||||
export default ShareCalendar;
|
||||
|
Loading…
Reference in New Issue
Block a user