fix arrow keys not working with showCurrentFolder === true

packages/asc-web-common/components/Loaders/InfoPanelLoader/InfoPanelLoader.js

@@ -0,0 +1,111 @@
+import PropTypes from "prop-types";
+import React from "react";
+
+import RectangleLoader from "../RectangleLoader";
+import {
+    StyledAccessRow,
+    StyledInfoRoomBody,
+    StyledPropertiesTable,
+    StyledPropertyRow,
+    StyledSubtitle,
+    StyledThumbnail,
+    StyledTitle,
+} from "./StyledInfoPanelLoader";
+
+const InfoPanelLoader = ({
+    id,
+    className,
+    style,
+    isFolder,
+    hasThumbnail,
+    ...rest
+}) => {
+    const {} = rest;
+
+    const randomNumber = (min, max) => Math.random() * (max - min) + min;
+
+    const customRectangleLoader = (width, height, rounded) => (
+        <RectangleLoader
+            width={"" + width}
+            height={"" + height}
+            borderRadius={"" + rounded}
+        />
+    );
+
+    const properties = isFolder
+        ? [
+              { Owner: 19 },
+              { Location: 19 },
+              { Type: 17.6 },
+              { Size: 17.6 },
+              { "Date modified": 17.6 },
+              { "Last modified by": 19 },
+              { "Date creation": 17.6 },
+          ]
+        : [
+              { Owner: 19 },
+              { Location: 19 },
+              { Type: 17.6 },
+              { "File Extension": 17.6 },
+              { Size: 17.6 },
+              { "Date modified": 17.6 },
+              { "Last modified by": 19 },
+              { "Date creation": 17.6 },
+              { Versions: 17.6 },
+              { Comments: 17.6 },
+          ];
+
+    return (
+        <StyledInfoRoomBody id={id} className={className} style={style}>
+            <StyledTitle>
+                {customRectangleLoader(32, 32)}
+                {customRectangleLoader(250, 22)}
+            </StyledTitle>
+
+            <StyledSubtitle>System Properties</StyledSubtitle>
+
+            {hasThumbnail && (
+                <StyledThumbnail>
+                    {customRectangleLoader(320.2, 200)}
+                </StyledThumbnail>
+            )}
+
+            <StyledPropertiesTable>
+                {properties.map((property) => (
+                    <StyledPropertyRow>
+                        <div className="property-title">
+                            {Object.keys(property)[0]}
+                        </div>
+                        {customRectangleLoader(
+                            randomNumber(125, 150),
+                            Object.values(property)[0]
+                        )}
+                    </StyledPropertyRow>
+                ))}
+            </StyledPropertiesTable>
+
+            <StyledSubtitle>Who has access</StyledSubtitle>
+
+            <StyledAccessRow>
+                {customRectangleLoader(32, 32, 16)}
+                <div className="divider"></div>
+                {customRectangleLoader(32, 32, 16)}
+                {customRectangleLoader(32, 32, 16)}
+            </StyledAccessRow>
+        </StyledInfoRoomBody>
+    );
+};
+
+InfoPanelLoader.propTypes = {
+    id: PropTypes.string,
+    className: PropTypes.string,
+    style: PropTypes.object,
+};
+
+InfoPanelLoader.defaultProps = {
+    id: undefined,
+    className: undefined,
+    style: undefined,
+};
+
+export default InfoPanelLoader;

packages/asc-web-common/components/Loaders/InfoPanelLoader/StyledInfoPanelLoader.js

@@ -0,0 +1,114 @@
+import styled from "styled-components";
+
+const StyledInfoRoomBody = styled.div``;
+
+const StyledTitle = styled.div`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+    height: 80px;
+    gap: 8px;
+`;
+
+const StyledThumbnail = styled.div`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 200px;
+    padding: 4px;
+    border: solid 1px #eceef1;
+    border-radius: 6px;
+    margin-bottom: 24px;
+`;
+
+const StyledSubtitle = styled.div`
+    margin-bottom: 24px;
+    height: 19.2px;
+    font-weight: 600;
+    font-size: 14px;
+    color: #000000;
+`;
+
+const StyledPropertiesTable = styled.div`
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    margin-bottom: 24px;
+    gap: 8px;
+`;
+
+const StyledPropertyRow = styled.div`
+    width: 100%;
+    display: grid;
+    grid-template-columns: 110px 1fr;
+    grid-column-gap: 24px;
+
+    .property-title {
+        font-size: 13px;
+        color: #333333;
+    }
+`;
+
+const StyledAccessRow = styled.div`
+    width: 100%;
+    height: 32px;
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    align-items: center;
+
+    .divider {
+        background: #eceef1;
+        margin: 2px 4px;
+        width: 1px;
+        height: 28px;
+    }
+`;
+
+////////////////////////////////////////////////////////////////////////////////////////
+////////////////////////////////////////////////////////////////////////////////////////
+
+export {
+    StyledInfoRoomBody,
+    StyledSubtitle,
+    StyledTitle,
+    StyledThumbnail,
+    StyledPropertiesTable,
+    StyledPropertyRow,
+    StyledAccessRow,
+};
+
+////////////////////////////////////////////////////////////////////////////////////////
+////////////////////////////////////////////////////////////////////////////////////////
+////////////////////////////////////////////////////////////////////////////////////////
+////////////////////////////////////////////////////////////////////////////////////////
+////////////////////////////////////////////////////////////////////////////////////////
+
+const StyledItemAccess = styled.div`
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    align-items: center;
+    .divider {
+        background: #eceef1;
+        margin: 2px 4px;
+        width: 1px;
+        height: 28px;
+    }
+`;
+
+const StyleditemAccessUser = styled.div`
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+
+    a {
+        img {
+            border-radius: 50%;
+            width: 100%;
+            height: 100%;
+        }
+    }
+`;

packages/asc-web-common/components/Loaders/InfoPanelLoader/index.js

@@ -0,0 +1 @@
+export default from "./InfoPanelLoader";

products/ASC.Files/Client/src/pages/Home/InfoPanel/Body/index.js

@@ -70,7 +70,7 @@ const InfoPanelBodyContent = ({
 
   return (
     <StyledInfoRoomBody>
-      {showCurrentFolder ? (
+      {showCurrentFolder && selectedItems.length === 0 ? (
         <>
           {currentFolderLoading ? <>Loading ...</> : singleItem(currentFolder)}
         </>