Web:Files:Components: refactoring and delete useless code for item of sharing panel

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

@@ -11,46 +11,61 @@ const Item = ({
   canShareOwnerChange,
   externalAccessOptions,
   onChangeItemAccess,
-  label,
-  avatarUrl,
-  isOwner,
-  ownerText,
   onShowChangeOwnerPanel,
-  changeOwnerText,
   access,
   onRemoveUserClick,
+  isMyId,
+  isSeparator,
 }) => {
   const onShowChangeOwnerPanelAction = React.useCallback(() => {
     onShowChangeOwnerPanel && onShowChangeOwnerPanel();
   }, [onShowChangeOwnerPanel]);
 
-  return (
-    <StyledItem isEndOfBlock={isOwner || item?.isEndOfBlock}>
+  let itemName = "";
+  let avatarUrl = "";
+
+  if (!isSeparator) {
+    itemName =
+      item.sharedTo.id === isMyId
+        ? t("Common:MeLabel")
+        : !!item.sharedTo.displayName
+        ? item.sharedTo.displayName
+        : !!item.sharedTo.name
+        ? item.sharedTo.name
+        : item.sharedTo.label;
+
+    avatarUrl = !!item.avatarSmall ? item.avatarSmall : item.avatarUrl;
+  }
+
+  return isSeparator ? (
+    <StyledItem isSeparator={isSeparator} />
+  ) : (
+    <StyledItem>
       <div className="item__info-block">
         <Avatar
           className="info-block__avatar"
           size={"min"}
           role={"user"}
           source={avatarUrl}
-          userName={label}
+          userName={itemName}
         />
-        <Text className="info-block__text">{label}</Text>
+        <Text className="info-block__text">{itemName}</Text>
       </div>
-      {isOwner ? (
+      {item.isOwner ? (
         canShareOwnerChange ? (
           <Text
             className="item__change-owner"
             onClick={onShowChangeOwnerPanelAction}
           >
-            {changeOwnerText}
+            {t("ChangeOwnerPanel:ChangeOwner").replace("()", "")}
           </Text>
         ) : (
-          <Text className="item__owner">{ownerText}</Text>
+          <Text className="item__owner">{t("Common:Owner")}</Text>
         )
       ) : (
         <AccessComboBox
           t={t}
-          access={access}
+          access={item.access}
           directionX="right"
           directionY="bottom"
           accessOptions={externalAccessOptions}

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

@@ -14,27 +14,29 @@ const StyledContent = styled.div`
 `;
 
 const StyledHeaderContent = styled.div`
-  width: calc(100% - 32px);
-  max-width: calc(100% - 32px);
+  width: 100%;
+  max-width: 100%;
   height: 53px;
 
   border-bottom: ${(props) => props.theme.filesPanels.sharing.borderBottom};
 
   padding: 0 16px;
 
+  box-sizing: border-box;
+
   display: flex;
   align-items: center;
   justify-content: space-between;
 
-  @media (max-width: 480px) {
-    width: calc(100vw - 32px);
-    max-width: calc(100vw - 32px);
+  @media (max-width: 500px) {
+    width: 100vw;
+    max-width: 100vw;
   }
 
   ${isMobileOnly &&
   css`
-    width: calc(100vw - 32px);
-    max-width: calc(100vw - 32px);
+    width: 100vw;
+    max-width: 100vw;
   `}
 
   .sharing_panel-header-info {
@@ -230,13 +232,9 @@ const StyledItem = styled.div`
   align-items: center;
   justify-content: space-between;
 
-  padding: 8px 0;
+  padding: 8px 16px;
 
-  ${(props) =>
-    props.isEndOfBlock &&
-    css`
-      margin-bottom: 16px;
-    `}
+  box-sizing: border-box;
 
   .item__info-block {
     display: flex;
@@ -277,9 +275,11 @@ const StyledItem = styled.div`
 StyledItem.defaultProps = { theme: Base };
 
 const StyledFooterContent = styled.div`
-  width: calc(100% - 32px);
+  width: 100%;
   border-top: ${(props) => props.theme.filesPanels.sharing.borderTop};
 
+  box-sizing: border-box;
+
   padding: 16px;
 
   display: flex;
@@ -293,6 +293,9 @@ const StyledFooterContent = styled.div`
   .sharing_panel-checkbox {
     margin-bottom: 16px;
   }
+  .sharing_panel-button {
+    min-height: 40px;
+  }
 `;
 
 StyledFooterContent.defaultProps = { theme: Base };