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