Merge branch 'feature/files' of https://github.com/ONLYOFFICE/AppServer into feature/files

products/ASC.Files/Client/src/components/pages/Home/Section/Body/EditingWrapperComponent.js

@@ -1,45 +1,56 @@
-import React, { memo } from "react";
+import React, { memo, useState } from "react";
 import styled from "styled-components";
 import { TextInput, Button } from "asc-web-components";
 
 const EditingWrapper = styled.div`
-width: 100%;
+  width: 100%;
-display: inline-flex;
+  display: inline-flex;
-align-items: center;
+  align-items: center;
 
-@media (max-width: 1024px) {
+  @media (max-width: 1024px) {
-height: 56px;
+  height: 56px;
-}
+  }
-.edit-text {
+  .edit-text {
-  height: 30px;
+    height: 30px;
-  font-size: 15px;
+    font-size: 15px;
-  outline: 0 !important;
+    outline: 0 !important;
-  font-weight: bold;
+    font-weight: bold;
-  margin: 0;
+    margin: 0;
-  font-family: 'Open Sans',sans-serif,Arial;
+    font-family: 'Open Sans',sans-serif,Arial;
-  text-align: left;
+    text-align: left;
-  color: #333333;
+    color: #333333;
-}
+  }
-.edit-button {
+  .edit-button {
-  margin-left: 8px;
+    margin-left: 8px;
-  height: 30px;
+    height: 30px;
-}
+  }
 
-.edit-ok-icon {
+  .edit-ok-icon {
-  margin-top: -6px;
+    margin-top: -6px;
-  width: 16px;
+    width: 16px;
-  height: 16px;
+    height: 16px;
-}
+  }
 
-.edit-cancel-icon {
+  .edit-cancel-icon {
-  margin-top: -6px;
+    margin-top: -6px;
-  width: 14px;
+    width: 14px;
-  height: 14px;
+    height: 14px;
-}
+  }
 `;
 
 const EditingWrapperComponent = props => {
-    const { isLoading, itemTitle, okIcon, cancelIcon, renameTitle, onKeyUpUpdateItem, onClickUpdateItem, cancelUpdateItem } = props;
+    const { itemTitle, okIcon, cancelIcon, renameTitle, onKeyUpUpdateItem, onClickUpdateItem, cancelUpdateItem } = props;
+    const [loading, setLoading] = useState(false);
+
+    const onUpdate = () => {
+      setLoading(true);
+      onClickUpdateItem();
+    }
+
+    const onCancel = () => {
+      setLoading(true);
+      cancelUpdateItem();
+    }
 
     return(
       <EditingWrapper>
@@ -52,20 +63,20 @@ const EditingWrapperComponent = props => {
           isAutoFocussed={true}
           onChange={renameTitle}
           onKeyUp={onKeyUpUpdateItem}
-          isDisabled={isLoading}
+          isDisabled={loading}
         />
         <Button
           className='edit-button'
           size='medium'
-          isDisabled={isLoading}
+          isDisabled={loading}
-          onClick={onClickUpdateItem}
+          onClick={onUpdate}
           icon={okIcon}
         />
         <Button
           className='edit-button'
           size='medium'
-          isDisabled={isLoading}
+          isDisabled={loading}
-          onClick={cancelUpdateItem}
+          onClick={onCancel}
           icon={cancelIcon}
         />
       </EditingWrapper>

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

@@ -390,7 +390,7 @@ class SharingPanelComponent extends React.Component {
     const accessOptions = !this.props.selectedItems.length ? getAccessOption([this.props.selectedItems]) : getAccessOption(this.props.selectedItems);
 
     this.setState(
-      { baseShareData, shareDataItems: arrayItems, showPanel: true, accessOptions },
+      { baseShareData, shareDataItems: arrayItems, accessOptions },
       this.props.onLoading(false)
     );
   };
@@ -434,11 +434,16 @@ class SharingPanelComponent extends React.Component {
     const returnValue = this.getData();
     const folderId = returnValue[0];
     const fileId = returnValue[1];
+    let error = null;
 
     if (folderId.length !== 0 || fileId.length !== 0) {
       getShareUsers(folderId, fileId).then((res) => {
         this.getShareDataItems(res);
-      });
+      }).catch(err => {
+        this.props.onLoading(false);
+        error = err;
+        toastr.error(err);
+      }).finally(() => !error && this.setState({showPanel: true}));
     }
   };
 
@@ -464,7 +469,7 @@ class SharingPanelComponent extends React.Component {
 
   componentDidUpdate(prevProps, prevState) {
     if(this.state.showPanel !== prevState.showPanel && this.state.showPanel === false) {
-      setTimeout(() => this.props.onClose(), 1000);
+      this.props.onClose();
     }
   }
 
@@ -648,32 +653,39 @@ class SharingPanelComponent extends React.Component {
           </StyledContent>
         </Aside>
 
-        <AddUsersPanel
+        {showAddUsersPanel &&
-          onSharingPanelClose={this.onClose}
+          <AddUsersPanel
-          onClose={this.onShowUsersPanel}
+            onSharingPanelClose={this.onClose}
-          visible={showAddUsersPanel}
+            onClose={this.onShowUsersPanel}
-          embeddedComponent={accessOptionsComboBox}
+            visible={showAddUsersPanel}
-          accessRight={accessRight}
+            embeddedComponent={accessOptionsComboBox}
-          shareDataItems={shareDataItems}
+            accessRight={accessRight}
-          setShareDataItems={this.setShareDataItems}
+            shareDataItems={shareDataItems}
-        />
+            setShareDataItems={this.setShareDataItems}
+          />
+        }
 
-        <AddGroupsPanel
+        {showAddGroupsPanel &&
-          onSharingPanelClose={this.onClose}
+          <AddGroupsPanel
-          onClose={this.onShowGroupsPanel}
+            onSharingPanelClose={this.onClose}
-          visible={showAddGroupsPanel}
+            onClose={this.onShowGroupsPanel}
-          embeddedComponent={accessOptionsComboBox}
+            visible={showAddGroupsPanel}
-          accessRight={accessRight}
+            embeddedComponent={accessOptionsComboBox}
-          shareDataItems={shareDataItems}
+            accessRight={accessRight}
-          setShareDataItems={this.setShareDataItems}
+            shareDataItems={shareDataItems}
-        />
+            setShareDataItems={this.setShareDataItems}
+          />
+        }
+
+        {showEmbeddingPanel && 
+          <EmbeddingPanel
+            visible={showEmbeddingPanel}
+            onSharingPanelClose={this.onClose}
+            onClose={this.onShowEmbeddingPanel}
+            embeddingLink={shareLink}
+          />
+        }
 
-        <EmbeddingPanel
-          visible={showEmbeddingPanel}
-          onSharingPanelClose={this.onClose}
-          onClose={this.onShowEmbeddingPanel}
-          embeddingLink={shareLink}
-        />
       </StyledAsidePanel>
     );
   }