Web:Files:Components: add internal and external item into scroll for mobile only devices

products/ASC.Files/Client/src/components/panels/SharingPanel/Body.js

@@ -1,6 +1,7 @@
 import React from "react";
 
 import { VariableSizeList as List } from "react-window";
+import { isMobileOnly } from "react-device-detect";
 
 import CustomScrollbarsVirtualList from "@appserver/components/scrollbar/custom-scrollbars-virtual-list";
 import { ShareAccessRights } from "@appserver/common/constants";
@@ -21,10 +22,40 @@ const Row = React.memo(({ data, index, style }) => {
     onRemoveUserClick,
     t,
     items,
+    selection,
+    onShowEmbeddingPanel,
+    externalLinkOpen,
+    onToggleExternalLinkOpen,
   } = data;
 
   if (items === undefined) return;
 
+  if (!!items[index]?.sharedTo?.shareLink) {
+    return (
+      <ExternalLink
+        t={t}
+        selection={selection}
+        externalItem={items[index]}
+        externalAccessOptions={externalAccessOptions}
+        onChangeItemAccess={onChangeItemAccess}
+        onShowEmbeddingPanel={onShowEmbeddingPanel}
+        isOpen={externalLinkOpen}
+        onToggleLink={onToggleExternalLinkOpen}
+        style={style}
+      />
+    );
+  }
+
+  if (!!items[index]?.internalLink) {
+    return (
+      <InternalLink
+        t={t}
+        internalLink={items[index]?.internalLink}
+        style={style}
+      />
+    );
+  }
+
   return (
     <Item
       t={t}
@@ -65,6 +96,7 @@ const Body = ({
   const [listData, setListData] = React.useState({});
 
   const bodyRef = React.useRef();
+  const listRef = React.useRef();
 
   const onToggleExternalLinkOpen = React.useCallback(() => {
     setExternalLinkOpen((oldState) => !oldState);
@@ -90,9 +122,13 @@ const Body = ({
     (index) => {
       if (itemList.length === 0) return;
       if (itemList[index].isSeparator) return 16;
+      if (itemList[index]?.internalLink) return 62;
+      if (!!itemList[index]?.sharedTo.shareLink) {
+        return externalLinkOpen ? 145 : 63;
+      }
       return 48;
     },
-    [itemList]
+    [itemList, externalLinkOpen]
   );
 
   React.useEffect(() => {
@@ -112,8 +148,6 @@ const Body = ({
       items.push(...shareUsers);
     }
 
-    setItemList(items);
-
     const newListData = {
       height: bodyRef?.current?.offsetHeight,
       width: "auto",
@@ -129,6 +163,22 @@ const Body = ({
       },
     };
 
+    if (isMobileOnly) {
+      if (!!internalLink) {
+        items.unshift({ internalLink: internalLink });
+      }
+      if (selection?.length === 1 && !!externalItem?.sharedTo?.shareLink) {
+        items.unshift(externalItem);
+      }
+
+      newListData.data.items = items;
+      newListData.data.selection = selection;
+      newListData.data.onShowEmbeddingPanel = onShowEmbeddingPanel;
+      newListData.data.externalLinkOpen = externalLinkOpen;
+      newListData.data.onToggleExternalLinkOpen = onToggleExternalLinkOpen;
+    }
+
+    setItemList(items);
     setListData(newListData);
   }, [
     bodyRef.current,
@@ -142,43 +192,77 @@ const Body = ({
     onShowChangeOwnerPanel,
     onRemoveUserClick,
     t,
+    externalItem,
+    internalLink,
+    selection,
+    onShowEmbeddingPanel,
+    externalLinkOpen,
+    onToggleExternalLinkOpen,
   ]);
 
+  React.useEffect(() => {
+    listRef?.current?.resetAfterIndex(0);
+  }, [externalLinkOpen]);
+
   return (
-    <StyledBodyContent
-      externalLinkOpen={externalLinkOpen}
-      externalLinkVisible={externalLinkVisible}
-    >
-      {externalLinkVisible && (
-        <ExternalLink
-          t={t}
-          selection={selection}
-          externalItem={externalItem}
-          externalAccessOptions={externalAccessOptions}
-          onChangeItemAccess={onChangeItemAccess}
-          onShowEmbeddingPanel={onShowEmbeddingPanel}
-          isOpen={externalLinkOpen}
-          onToggleLink={onToggleExternalLinkOpen}
-        />
+    <>
+      {!isMobileOnly ? (
+        <StyledBodyContent
+          externalLinkOpen={externalLinkOpen}
+          externalLinkVisible={externalLinkVisible}
+        >
+          {externalLinkVisible && (
+            <ExternalLink
+              t={t}
+              selection={selection}
+              externalItem={externalItem}
+              externalAccessOptions={externalAccessOptions}
+              onChangeItemAccess={onChangeItemAccess}
+              onShowEmbeddingPanel={onShowEmbeddingPanel}
+              isOpen={externalLinkOpen}
+              onToggleLink={onToggleExternalLinkOpen}
+            />
+          )}
+
+          {!!internalLink && <InternalLink t={t} internalLink={internalLink} />}
+
+          <div className="body-scroll-content-sharing-panel" ref={bodyRef}>
+            {listData?.height && listData?.data?.items?.length > 0 && (
+              <List
+                height={listData.height}
+                width={listData.width}
+                itemCount={itemList.length}
+                itemSize={getItemSize}
+                itemData={listData.data}
+                outerElementType={CustomScrollbarsVirtualList}
+              >
+                {Row}
+              </List>
+            )}
+          </div>
+        </StyledBodyContent>
+      ) : (
+        <>
+          <StyledBodyContent>
+            <div className="body-scroll-content-sharing-panel" ref={bodyRef}>
+              {listData?.height && listData?.data?.items?.length > 0 && (
+                <List
+                  height={listData.height}
+                  width={listData.width}
+                  itemCount={itemList.length}
+                  itemSize={getItemSize}
+                  itemData={listData.data}
+                  outerElementType={CustomScrollbarsVirtualList}
+                  ref={listRef}
+                >
+                  {Row}
+                </List>
+              )}
+            </div>
+          </StyledBodyContent>
+        </>
       )}
-
-      {!!internalLink && <InternalLink t={t} internalLink={internalLink} />}
-
-      <div className="body-scroll-content-sharing-panel" ref={bodyRef}>
-        {listData?.height && listData?.data?.items?.length > 0 && (
-          <List
-            height={listData.height}
-            width={listData.width}
-            itemCount={itemList.length}
-            itemSize={getItemSize}
-            itemData={listData.data}
-            outerElementType={CustomScrollbarsVirtualList}
-          >
-            {Row}
-          </List>
-        )}
-      </div>
-    </StyledBodyContent>
+    </>
   );
 };
 

products/ASC.Files/Client/src/components/panels/SharingPanel/ExternalLink.js

@@ -28,6 +28,7 @@ const ExternalLink = ({
   onShowEmbeddingPanel,
   isOpen,
   onChangeItemAccess,
+  style,
 }) => {
   const [shareLink, setShareLink] = React.useState("");
   const [shareActionOpen, setShareActionOpen] = React.useState(false);
@@ -44,7 +45,6 @@ const ExternalLink = ({
 
   const closeShareAction = React.useCallback(
     (e) => {
-      console.log("1");
       if (ref.current.contains(e.target)) return;
       setShareActionOpen((val) => !val);
     },
@@ -117,7 +117,7 @@ const ExternalLink = ({
   ];
 
   return (
-    <StyledExternalLink>
+    <StyledExternalLink style={style}>
       <div className="external-link__base-line">
         <Text className="external-link__text" noSelect={true} truncate={true}>
           {t("ExternalLink")}

products/ASC.Files/Client/src/components/panels/SharingPanel/InternalLink.js

@@ -6,14 +6,14 @@ import Text from "@appserver/components/text";
 
 import { StyledInternalLink } from "./StyledSharingPanel";
 
-const InternalLink = ({ t, internalLink }) => {
+const InternalLink = ({ t, internalLink, style }) => {
   const onCopyInternalLinkAction = React.useCallback(() => {
     copy(internalLink);
     toastr.success(t("Translations:LinkCopySuccess"));
   }, [internalLink]);
 
   return (
-    <StyledInternalLink>
+    <StyledInternalLink style={style}>
       <Text className={"internal-link__link-text"}>{t("InternalLink")}</Text>
       <Text
         className={"internal-link__copy-text"}

products/ASC.Files/Client/src/components/panels/SharingPanel/StyledSharingPanel.js

@@ -93,6 +93,12 @@ const StyledBodyContent = styled.div`
           ? "calc(100% - 125px)"
           : "calc(100% - 207px)"
         : "calc(100% - 62px)"};
+
+    ${isMobileOnly &&
+    css`
+      height: 100% !important;
+      max-height: 100% !important;
+    `}
   }
 `;