Web: Files: added file loader

packages/asc-web-components/row/index.js

@@ -12,6 +12,7 @@ import {
   StyledContent,
   StyledRow,
 } from "./styled-row";
+import Loader from "../loader";
 
 class Row extends React.Component {
   constructor(props) {
@@ -71,19 +72,23 @@ class Row extends React.Component {
       this.cm.current.show(e);
     };
 
-    const { onRowClick, ...rest } = this.props;
+    const { onRowClick, isDisabled, ...rest } = this.props;
 
     return (
       <StyledRow ref={this.row} {...rest} onContextMenu={onContextMenu}>
-        {renderCheckbox && (
-          <StyledCheckbox className="not-selectable">
-            <Checkbox
-              className="checkbox"
-              isChecked={checked}
-              isIndeterminate={indeterminate}
-              onChange={changeCheckbox}
-            />
-          </StyledCheckbox>
+        {isDisabled ? (
+          <Loader className="row-loader" type="oval" size="16px" />
+        ) : (
+          renderCheckbox && (
+            <StyledCheckbox className="not-selectable">
+              <Checkbox
+                className="checkbox"
+                isChecked={checked}
+                isIndeterminate={indeterminate}
+                onChange={changeCheckbox}
+              />
+            </StyledCheckbox>
+          )
         )}
         {renderElement && (
           <StyledElement onClick={onRowClick} className="styled-element">
@@ -150,6 +155,7 @@ Row.propTypes = {
   /** Accepts css style  */
   style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
   sectionWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  isDisabled: PropTypes.bool,
 };
 
 Row.defaultProps = {

packages/asc-web-components/row/styled-row.js

@@ -27,6 +27,10 @@ const StyledRow = styled.div`
   justify-content: flex-start;
   align-items: center;
   align-content: center;
+
+  .row-loader {
+    padding: 16px 12px 12px 0px;
+  }
 `;
 StyledRow.defaultProps = { theme: Base };
 

products/ASC.Files/Client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js

@@ -60,6 +60,13 @@ const StyledSimpleFilesRow = styled(Row)`
     !props.isThirdPartyFolder &&
     (props.checked || props.isActive) &&
     "url(images/cursor.palm.svg), auto"};
+  ${(props) =>
+    props.isDisabled &&
+    css`
+      pointer-events: none;
+      /* cursor: wait; */
+    `}
+
   margin-top: -2px;
 
   ${(props) =>
@@ -119,6 +126,7 @@ const SimpleFilesRow = (props) => {
     isEdit,
     showShare,
     isActive,
+    isDisabled,
   } = props;
 
   const sharedButton =
@@ -162,6 +170,7 @@ const SimpleFilesRow = (props) => {
           contextButtonSpacerWidth={displayShareButton}
           dragging={dragging && isDragging}
           isActive={isActive}
+          isDisabled={isDisabled}
           isThirdPartyFolder={item.isThirdPartyFolder}
         >
           <FilesRowContent

products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableRow.js

@@ -61,6 +61,13 @@ const StyledTableRow = styled(TableRow)`
       !props.isThirdPartyFolder &&
       (props.checked || props.isActive) &&
       "url(images/cursor.palm.svg), auto"};
+
+    ${(props) =>
+      props.isDisabled &&
+      css`
+        pointer-events: none;
+        /* cursor: wait; */
+      `}
   }
 
   .table-container_element {

products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/FileTile.js

@@ -37,6 +37,7 @@ const FilesTile = (props) => {
     showShare,
     isActive,
     isEdit,
+    isDisabled,
   } = props;
 
   const temporaryExtension =
@@ -93,6 +94,7 @@ const FilesTile = (props) => {
           {...contextOptionsProps}
           contextButtonSpacerWidth={displayShareButton}
           isActive={isActive}
+          isDisabled={isDisabled}
           isEdit={isEdit}
         >
           <FilesTileContent

products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js

@@ -9,6 +9,7 @@ import { tablet } from "@appserver/components/utils/device";
 import { isDesktop, isMobile } from "react-device-detect";
 
 import Link from "@appserver/components/link";
+import Loader from "@appserver/components/loader";
 
 const svgLoader = () => <div style={{ width: "96px" }}></div>;
 
@@ -42,6 +43,12 @@ const checkedStyle = css`
 
 const StyledTile = styled.div`
   cursor: ${(props) => (!props.isRecycleBin ? "pointer" : "default")};
+  ${(props) =>
+    props.isDisabled &&
+    css`
+      pointer-events: none;
+      /* cursor: wait; */
+    `}
   min-height: 57px;
   width: 100%;
   border: 1px solid #d0d5da;
@@ -160,6 +167,10 @@ const StyledTile = styled.div`
     min-width: ${isMobile ? "36px" : "28px"};
   }
 
+  .tile-folder-loader {
+    padding-top: 4px;
+  }
+
   .styled-content {
     padding-left: 10px;
 
@@ -177,6 +188,7 @@ const StyledTile = styled.div`
     ${(props) =>
       !props.dragging &&
       props.isDesktop &&
+      !props.isDisabled &&
       css`
         .checkbox {
           opacity: 1;
@@ -223,6 +235,11 @@ const StyledFileTileBottom = styled.div`
   padding-right: 0;
   min-height: 56px;
   box-sizing: border-box;
+
+  .tile-file-loader {
+    padding-top: 4px;
+    padding-left: 3px;
+  }
 `;
 
 const StyledContent = styled.div`
@@ -338,6 +355,7 @@ class Tile extends React.PureComponent {
       isRecycleBin,
       item,
       isActive,
+      isDisabled,
       isEdit,
     } = this.props;
     const { isFolder, id, fileExst } = item;
@@ -381,25 +399,37 @@ class Tile extends React.PureComponent {
         isRecycleBin={isRecycleBin}
         checked={checked}
         isActive={isActive}
+        isDisabled={isDisabled}
         isDesktop={isDesktop}
       >
         {isFolder || (!fileExst && id === -1) ? (
           <>
             {renderElement && !(!fileExst && id === -1) && !isEdit && (
-              <div className="file-icon_container">
-                <StyledElement
-                  className="file-icon"
-                  onClick={this.onFileIconClick}
-                >
-                  {element}
-                </StyledElement>
-                <Checkbox
-                  className="checkbox file-checkbox"
-                  isChecked={checked}
-                  isIndeterminate={indeterminate}
-                  onChange={this.changeCheckbox}
-                />
-              </div>
+              <>
+                {!isDisabled ? (
+                  <div className="file-icon_container">
+                    <StyledElement
+                      className="file-icon"
+                      onClick={this.onFileIconClick}
+                    >
+                      {element}
+                    </StyledElement>
+
+                    <Checkbox
+                      className="checkbox file-checkbox"
+                      isChecked={checked}
+                      isIndeterminate={indeterminate}
+                      onChange={this.changeCheckbox}
+                    />
+                  </div>
+                ) : (
+                  <Loader
+                    className="tile-folder-loader"
+                    type="oval"
+                    size="16px"
+                  />
+                )}
+              </>
             )}
             <StyledContent
               className="styled-content"
@@ -431,17 +461,27 @@ class Tile extends React.PureComponent {
             </StyledFileTileTop>
             <StyledFileTileBottom>
               {id !== -1 && !isEdit && (
-                <div className="file-icon_container">
-                  <div className="file-icon" onClick={this.onFileIconClick}>
-                    {element}
-                  </div>
-                  <Checkbox
-                    className="file-checkbox"
-                    isChecked={checked}
-                    isIndeterminate={indeterminate}
-                    onChange={this.changeCheckbox}
-                  />
-                </div>
+                <>
+                  {!isDisabled ? (
+                    <div className="file-icon_container">
+                      <div className="file-icon" onClick={this.onFileIconClick}>
+                        {element}
+                      </div>
+                      <Checkbox
+                        className="file-checkbox"
+                        isChecked={checked}
+                        isIndeterminate={indeterminate}
+                        onChange={this.changeCheckbox}
+                      />
+                    </div>
+                  ) : (
+                    <Loader
+                      className="tile-file-loader"
+                      type="oval"
+                      size="16px"
+                    />
+                  )}
+                </>
               )}
               <StyledContent
                 className="styled-content"