Web:Files:Components: refactoring header of sharing panel and remove margin-bottom

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

@@ -7,79 +7,92 @@ import DropDownItem from "@appserver/components/drop-down-item";
 
 import { StyledHeaderContent } from "./StyledSharingPanel";
 
-const Header = React.forwardRef(
-  (
-    {
-      forwardRef,
-      headerText,
-      addUsers,
-      addGroups,
-      uploadPanelVisible,
-      onPlusClickProp,
-      isLoading,
-      isPersonal,
-      isEncrypted,
-      showActionPanel,
-      onShowUsersPanel,
-      onShowGroupsPanel,
-      onClose,
-      onCloseActionPanel,
+const Header = ({
+  t,
+  isPersonal,
+  isEncrypted,
+  uploadPanelVisible,
+  onShowUsersPanel,
+  onShowGroupsPanel,
+  onClose,
+}) => {
+  const [showActionPanel, setShowActionPanel] = React.useState(false);
+
+  const ref = React.useRef(null);
+
+  const onPlusClick = React.useCallback(() => {
+    setShowActionPanel((val) => !val);
+  }, []);
+
+  const onCloseActionPanel = React.useCallback(
+    (e) => {
+      if (ref.current.contains(e.target)) return;
+      setShowActionPanel((val) => !val);
     },
-    ref
-  ) => {
-    return (
-      <StyledHeaderContent className="sharing_panel-header-container">
-        <div className="sharing_panel-header-info">
-          {uploadPanelVisible && (
+    [ref.current]
+  );
+
+  const onShowUsersPanelAction = React.useCallback(() => {
+    setShowActionPanel(false);
+    onShowUsersPanel && onShowUsersPanel();
+  }, [onShowUsersPanel]);
+
+  const onShowGroupsPanelAction = React.useCallback(() => {
+    setShowActionPanel(false);
+    onShowGroupsPanel && onShowGroupsPanel();
+  }, [onShowGroupsPanel]);
+
+  return (
+    <StyledHeaderContent className="sharing_panel-header-container">
+      <div className="sharing_panel-header-info">
+        {uploadPanelVisible && (
+          <IconButton
+            size="15"
+            iconName="/static/images/arrow.path.react.svg"
+            className="sharing_panel-arrow"
+            onClick={onClose}
+          />
+        )}
+        <Heading className="sharing_panel-header" size="medium" truncate>
+          {t("SharingSettingsTitle")}
+        </Heading>
+      </div>
+
+      {!isPersonal && (
+        <div className="sharing_panel-icons-container">
+          <div ref={ref} className="sharing_panel-drop-down-wrapper">
             <IconButton
               size="15"
-              iconName="/static/images/arrow.path.react.svg"
-              className="sharing_panel-arrow"
-              onClick={onClose}
+              iconName="/static/images/actions.header.touch.react.svg"
+              className="sharing_panel-plus-icon"
+              onClick={onPlusClick}
             />
-          )}
-          <Heading className="sharing_panel-header" size="medium" truncate>
-            {headerText}
-          </Heading>
-        </div>
 
-        {!isPersonal && (
-          <div className="sharing_panel-icons-container">
-            <div ref={ref} className="sharing_panel-drop-down-wrapper">
-              <IconButton
-                size="15"
-                iconName="/static/images/actions.header.touch.react.svg"
-                className="sharing_panel-plus-icon"
-                {...onPlusClickProp}
-                isDisabled={isLoading}
+            <DropDown
+              forwardedRef={ref}
+              directionX="right"
+              className="sharing_panel-drop-down"
+              open={showActionPanel}
+              manualY="30px"
+              clickOutsideAction={onCloseActionPanel}
+            >
+              <DropDownItem
+                label={t("LinkText")}
+                onClick={onShowUsersPanelAction}
               />
 
-              <DropDown
-                forwardedRef={forwardRef}
-                directionX="right"
-                className="sharing_panel-drop-down"
-                open={showActionPanel}
-                manualY="30px"
-                clickOutsideAction={onCloseActionPanel}
-              >
-                <DropDownItem label={addUsers} onClick={onShowUsersPanel} />
-
-                {!isEncrypted && (
-                  <DropDownItem label={addGroups} onClick={onShowGroupsPanel} />
-                )}
-              </DropDown>
-            </div>
-
-            {/*<IconButton
-      size="16"
-      iconName="images/key.react.svg"
-      onClick={onKeyClick}
-    />*/}
+              {!isEncrypted && (
+                <DropDownItem
+                  label={t("AddGroupsForSharingButton")}
+                  onClick={onShowGroupsPanelAction}
+                />
+              )}
+            </DropDown>
           </div>
-        )}
-      </StyledHeaderContent>
-    );
-  }
-);
+        </div>
+      )}
+    </StyledHeaderContent>
+  );
+};
 
 export default React.memo(Header);

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

@@ -1,6 +1,8 @@
 import { Base } from "@appserver/components/themes";
 import styled, { css } from "styled-components";
 
+import { isMobile, isMobileOnly } from "react-device-detect";
+
 const StyledContent = styled.div`
   width: 100%;
   height: 100%;
@@ -14,13 +16,12 @@ const StyledContent = styled.div`
 const StyledHeaderContent = styled.div`
   width: calc(100% - 16px);
   max-width: calc(100% - 16px);
-  height: 52px;
+  height: 53px;
 
   border-bottom: ${(props) => props.theme.filesPanels.sharing.borderBottom};
 
   padding: 0 16px;
 
-  margin-bottom: 24px;
   margin-right: -16px;
 
   display: flex;
@@ -32,6 +33,12 @@ const StyledHeaderContent = styled.div`
     max-width: calc(100vw - 32px);
   }
 
+  ${isMobileOnly &&
+  css`
+    width: calc(100vw - 32px);
+    max-width: calc(100vw - 32px);
+  `}
+
   .sharing_panel-header-info {
     display: flex;
     align-items: center;
@@ -53,6 +60,7 @@ const StyledHeaderContent = styled.div`
     display: flex;
     align-items: center;
     justify-content: start;
+    margin-bottom: 16px;
   }
 
   .sharing_panel-icons-container {
@@ -67,7 +75,6 @@ const StyledBodyContent = styled.div`
   width: calc(100%);
   height: 100%;
 
-  padding: 0 0 0 16px;
   margin-right: -16px;
 
   display: flex;

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

@@ -20,7 +20,6 @@ import { isMobile, isMobileOnly } from "react-device-detect";
 import Loaders from "@appserver/common/components/Loaders";
 import withLoader from "../../../HOCs/withLoader";
 import ModalDialog from "@appserver/components/modal-dialog";
-import EmbeddingBody from "../EmbeddingPanel/EmbeddingBody";
 
 import { StyledContent, StyledBodyContent } from "./StyledSharingPanel";
 
@@ -33,7 +32,6 @@ class SharingPanelComponent extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      showActionPanel: false,
       isNotifyUsers: false,
       shareDataItems: [],
       baseShareData: [],
@@ -47,24 +45,14 @@ class SharingPanelComponent extends React.Component {
       showPanel: false,
       accessOptions: [],
       filesOwnerId: null,
-      showEmbeddingContent: false,
       isUpdated: false,
       isLoading: false,
       baseExternalAccess: null,
     };
 
-    this.ref = React.createRef();
     this.scrollRef = React.createRef();
   }
 
-  onPlusClick = () =>
-    this.setState({ showActionPanel: !this.state.showActionPanel });
-
-  onCloseActionPanel = (e) => {
-    if (this.ref.current.contains(e.target)) return;
-    this.setState({ showActionPanel: !this.state.showActionPanel });
-  };
-
   isUpdateAccessInfo = (selectedAccess) => {
     const { baseExternalAccess, isUpdated } = this.state;
 
@@ -87,7 +75,6 @@ class SharingPanelComponent extends React.Component {
 
     this.setState({
       shareDataItems: newDataItems,
-      showEmbeddingContent: false,
     });
   };
 
@@ -245,7 +232,23 @@ class SharingPanelComponent extends React.Component {
   onShowUsersPanel = () =>
     this.setState({
       showAddUsersPanel: !this.state.showAddUsersPanel,
-      showActionPanel: false,
+    });
+
+  onShowGroupsPanel = () =>
+    this.setState({
+      showAddGroupsPanel: !this.state.showAddGroupsPanel,
+    });
+
+  onShowChangeOwnerPanel = () => {
+    this.setState({
+      showChangeOwnerPanel: !this.state.showChangeOwnerPanel,
+    });
+  };
+
+  onShowEmbeddingPanel = (link) =>
+    this.setState({
+      showEmbeddingPanel: !this.state.showEmbeddingPanel,
+      shareLink: link,
     });
 
   onChangeItemAccess = (e) => {
@@ -377,40 +380,19 @@ class SharingPanelComponent extends React.Component {
       : `${window.location.origin + homepage}/filter?folder=${item?.id}`;
   };
 
-  onShowEmbeddingPanel = (link) =>
-    this.setState({
-      showEmbeddingPanel: !this.state.showEmbeddingPanel,
-      shareLink: link,
-    });
+  onChangeMessage = (e) => {
+    this.setState({ message: e.target.value });
+  };
 
-  onShowEmbeddingContainer = (link) =>
-    this.setState({
-      showEmbeddingContent: !this.state.showEmbeddingContent,
-      shareLink: link,
-    });
-
-  onShowGroupsPanel = () =>
-    this.setState({
-      showAddGroupsPanel: !this.state.showAddGroupsPanel,
-      showActionPanel: false,
-    });
-
-  onShowChangeOwnerPanel = () =>
-    this.setState({
-      showChangeOwnerPanel: !this.state.showChangeOwnerPanel,
-      showActionPanel: false,
-    });
-
-  onChangeMessage = (e) => this.setState({ message: e.target.value });
-
-  setShareDataItems = (shareDataItems) => this.setState({ shareDataItems });
+  setShareDataItems = (shareDataItems) => {
+    this.setState({ shareDataItems });
+  };
 
   onClose = () => {
     const {
       onCancel,
       setSharingPanelVisible,
       selectUploadedFile,
-      setIsFolderActions,
       setSelection,
       setBufferSelection,
     } = this.props;
@@ -481,7 +463,6 @@ class SharingPanelComponent extends React.Component {
       isPrivacy,
     } = this.props;
     const {
-      showActionPanel,
       isNotifyUsers,
       shareDataItems,
       message,
@@ -493,7 +474,6 @@ class SharingPanelComponent extends React.Component {
       //showPanel,
       accessOptions,
       externalAccessOptions,
-      showEmbeddingContent,
       isUpdated,
       isLoading,
     } = this.state;
@@ -551,21 +531,13 @@ class SharingPanelComponent extends React.Component {
         <Aside className="header_aside-panel" visible={visible}>
           <StyledContent>
             <Header
-              headerText={t("SharingSettingsTitle")}
-              addUsers={t("LinkText")}
-              addGroups={t("AddGroupsForSharingButton")}
+              t={t}
               uploadPanelVisible={uploadPanelVisible}
               isPersonal={isPersonal}
-              onPlusClickProp={onPlusClickProp}
-              isLoading={isLoading}
               isEncrypted={isEncrypted}
-              showActionPanel={showActionPanel}
               onClose={this.onClose}
-              onCloseActionPanel={this.onCloseActionPanel}
               onShowUsersPanel={this.onShowUsersPanel}
               onShowGroupsPanel={this.onShowGroupsPanel}
-              forwardRef={this.ref}
-              ref={this.ref}
             />
             <StyledBodyContent>
               <Scrollbar ref={this.scrollRef} stype="mediumBlack">