Web: Files: Tiles: refactoring

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

@@ -444,6 +444,24 @@ class FilesContent extends React.Component {
       .catch((err) => toastr.error(err));
   };
 
+  renderFileExst = () => {
+    const { item } = this.props;
+    const { fileExst } = item;
+    return (
+      <Text
+        className="badge-ext"
+        as="span"
+        color="#A3A9AE"
+        fontSize="15px"
+        fontWeight={600}
+        title={fileExst}
+        truncate={true}
+      >
+        {fileExst}
+      </Text>
+    );
+  };
+
   render() {
     const { itemTitle, showConvertDialog, newItems } = this.state;
 
@@ -463,10 +481,6 @@ class FilesContent extends React.Component {
       id,
       fileExst,
       access,
-      locked,
-      fileStatus,
-      title,
-      versionGroup,
       createdBy,
       updated,
       providerKey,
@@ -497,6 +511,8 @@ class FilesContent extends React.Component {
         ? { noHover: true }
         : { onClick: this.onFilesClick };
 
+    const fileExstElement = this.renderFileExst();
+
     return isEdit ? (
       <EditingWrapperComponent
         itemTitle={itemTitle}
@@ -533,34 +549,10 @@ class FilesContent extends React.Component {
             isTextOverflow
           >
             {titleWithoutExt}
-            {fileExst && viewAs === "tile" ? (
+            {fileExst && viewAs === "tile" ? fileExstElement : null}
-              <Text
-                className="badge-ext"
-                as="span"
-                color="#A3A9AE"
-                fontSize="15px"
-                fontWeight={600}
-                title={fileExst}
-                truncate={true}
-              >
-                {fileExst}
-              </Text>
-            ) : null}
           </Link>
           <div className="badges">
-            {fileExst && viewAs !== "tile" ? (
+            {fileExst && viewAs !== "tile" ? fileExstElement : null}
-              <Text
-                className="badge-ext"
-                as="span"
-                color="#A3A9AE"
-                fontSize="15px"
-                fontWeight={600}
-                title={fileExst}
-                truncate={true}
-              >
-                {fileExst}
-              </Text>
-            ) : null}
             <Badges
               item={item}
               newItems={this.state.newItems}

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

@@ -1,11 +1,13 @@
 import Checkbox from "@appserver/components/checkbox";
 import ContextMenuButton from "@appserver/components/context-menu-button";
 import PropTypes from "prop-types";
+import { ReactSVG } from "react-svg";
 import React from "react";
 //import equal from "fast-deep-equal/react";
 import styled, { css } from "styled-components";
 import ContextMenu from "@appserver/components/context-menu";
 
+const svgLoader = () => <div style={{ width: "96px" }}></div>;
 const FlexBoxStyles = css`
   display: flex;
   flex-direction: row;
@@ -39,19 +41,19 @@ const StyledFileTileTop = styled.div`
   padding: 13px;
   height: 157px;
   position: relative;
-  user-select: none;
 
   .thumbnailImage {
+    & > .injected-svg {
       position: absolute;
-    bottom: 0;
       left: 0;
       right: 0;
-    display: block;
+      bottom: 0;
       margin: auto;
       z-index: 0;
     }
+  }
 
-  .temporary-icon {
+  .temporary-icon > .injected-svg {
     margin-bottom: 16px;
   }
 `;
@@ -127,6 +129,16 @@ class Tile extends React.Component {
     this.tile = React.createRef();
   }
 
+  getIconFile() {
+    const { item, temporaryIcon } = this.props;
+
+    const icon = item.thumbnail ? item.thumbnail : temporaryIcon;
+    let className = "thumbnailImage";
+    if (!item.thumbnail) className += " temporary-icon";
+
+    return <ReactSVG className={className} src={icon} loading={svgLoader} />;
+  }
+
   render() {
     //console.log("Row render");
     const {
@@ -140,7 +152,6 @@ class Tile extends React.Component {
       onSelect,
       isFolder,
       rowContextClick,
-      temporaryIcon,
     } = this.props;
 
     const renderCheckbox = Object.prototype.hasOwnProperty.call(
@@ -174,6 +185,8 @@ class Tile extends React.Component {
       this.cm.current.show(e);
     };
 
+    const icon = this.getIconFile();
+
     return (
       <StyledTile ref={this.tile} {...this.props} onContextMenu={onContextMenu}>
         {isFolder ? (
@@ -207,19 +220,6 @@ class Tile extends React.Component {
         ) : (
           <>
             <StyledFileTileTop>
-              {item.thumbnail ? (
-                <img
-                  className="thumbnailImage"
-                  src={item.thumbnail}
-                  alt="thumbnail"
-                />
-              ) : (
-                <img
-                  className="thumbnailImage temporary-icon"
-                  src={temporaryIcon}
-                  alt="thumbnail"
-                />
-              )}
               {renderCheckbox && (
                 <StyledCheckbox>
                   <Checkbox
@@ -229,9 +229,7 @@ class Tile extends React.Component {
                   />
                 </StyledCheckbox>
               )}
-              {
+              {icon}
-                //<BadgesFileTile item={item} />
-              }
             </StyledFileTileTop>
             <StyledFileTileBottom>
               <StyledElement>{element}</StyledElement>