Web: Components: LinkRow: fixed types

packages/client/src/pages/Home/InfoPanel/Body/views/Members/sub-components/LinkRow.tsx

@@ -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}
     />

packages/shared/components/access-right-select/AccessRightSelect.types.ts

@@ -46,6 +46,7 @@ type PropsFromCombobox = Pick<
   | "withBlur"
   | "type"
   | "noBorder"
+  | "isDisabled"
 >;
 
 export type AccessRightSelectProps = PropsFromCombobox & {

packages/shared/components/share/Share.styled.ts

@@ -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 };

packages/shared/components/share/Share.types.ts

@@ -39,21 +39,48 @@ 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;
+      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 = {
   link: TFileLink;
@@ -62,6 +89,7 @@ export type ExpiredComboBoxProps = {
     expirationDate: moment.Moment | null,
   ) => Promise<void>;
   isDisabled?: boolean;
+  isRoomsLink?: boolean;
 };
 
 export type ShareProps = {

packages/shared/components/share/sub-components/ExpiredComboBox.tsx

@@ -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>

packages/shared/components/share/sub-components/LinkRow.tsx

@@ -64,10 +64,8 @@ const LinkRow = ({
   changeExpirationOption,
   availableExternalRights,
   loadingLinks,
-
+  isRoomsLink,
-  isRoom,
   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

packages/shared/components/share/sub-components/ShareCalendar.tsx

@@ -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;