Web: Files: Home: Fixed init styled RowContent outside render

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

@@ -15,6 +15,43 @@ import EditingWrapperComponent from "./EditingWrapperComponent";
 
 const { FileAction } = constants;
 
+const SimpleFilesRowContent = styled(RowContent)`
+.badge-ext {
+  margin-left: -8px;
+  margin-right: 8px;
+}
+
+.badge {
+  height: 14px;
+  width: 14px;
+  margin-right: 8px;
+}
+
+.badges {
+  display: flex;
+  align-items: center;
+}
+
+.share-icon {
+  margin-top: -4px;
+  padding-right: 8px;
+}
+`;
+
+const okIcon = <Icons.CheckIcon
+  className='edit-ok-icon'
+  size='scale'
+  isfill={true}
+  color='#A3A9AE'
+/>;
+
+const cancelIcon = <Icons.CrossIcon
+  className='edit-cancel-icon'
+  size='scale'
+  isfill={true}
+  color='#A3A9AE'
+/>;
+
 class FilesRowContent extends React.PureComponent {
 
   constructor(props) {
@@ -212,7 +249,7 @@ class FilesRowContent extends React.PureComponent {
 
   onShowNewFilesPanel = () => {
     const { showNewFilesPanel } = this.state;
-    this.setState({showNewFilesPanel: !showNewFilesPanel});
+    this.setState({ showNewFilesPanel: !showNewFilesPanel });
   };
 
   setConvertDialogVisible = () =>
@@ -220,12 +257,12 @@ class FilesRowContent extends React.PureComponent {
 
   getConvertProgress = fileId => {
     api.files.getConvertFile(fileId).then(res => {
-        if(res && res[0] && res[0].progress !== 100) {
+      if (res && res[0] && res[0].progress !== 100) {
         this.props.setProgressValue(res[0].progress);
         setTimeout(() => this.getConvertProgress(fileId), 1000);
       } else {
         const { selectedFolder, filter, onLoading, setProgressValue, finishFilesOperations } = this.props;
-          if(res[0].error) {
+        if (res[0].error) {
           finishFilesOperations(res[0].error);
         } else {
           setProgressValue(100);
@@ -242,9 +279,9 @@ class FilesRowContent extends React.PureComponent {
   onConvert = () => {
     const { item, startFilesOperations, t } = this.props;
     startFilesOperations(t("Convert"));
-    this.setState({showConvertDialog: false}, () => 
+    this.setState({ showConvertDialog: false }, () =>
       api.files.convertFile(item.id).then(convertRes => {
-        if(convertRes && convertRes[0] && convertRes[0].progress !== 100) {
+        if (convertRes && convertRes[0] && convertRes[0].progress !== 100) {
           this.getConvertProgress(item.id);
         }
       })
@@ -266,49 +303,12 @@ class FilesRowContent extends React.PureComponent {
       versionGroup
     } = item;
 
-    const SimpleFilesRowContent = styled(RowContent)`
-    .badge-ext {
-      margin-left: -8px;
-      margin-right: 8px;
-    }
-
-    .badge {
-      height: 14px;
-      width: 14px;
-      margin-right: 8px;
-    }
-
-    .badges {
-      display: flex;
-      align-items: center;
-    }
-
-    .share-icon {
-      margin-top: -4px;
-      padding-right: 8px;
-    }
-    `;
-
     const titleWithoutExt = getTitleWithoutExst(item);
     const fileOwner = createdBy && ((this.props.viewer.id === createdBy.id && t("AuthorMe")) || createdBy.displayName);
     const updatedDate = updated && this.getStatusByDate();
     const canEditFile = fileExst && canWebEdit(fileExst);
     const canConvertFile = fileExst && canConvert(fileExst);
 
-    const okIcon = <Icons.CheckIcon
-      className='edit-ok-icon'
-      size='scale'
-      isfill={true}
-      color='#A3A9AE'
-    />;
-
-    const cancelIcon = <Icons.CrossIcon
-      className='edit-cancel-icon'
-      size='scale'
-      isfill={true}
-      color='#A3A9AE'
-    />;
-
     const isEdit = (id === editingId) && (fileExst === fileAction.extension);
     const linkStyles = isTrashFolder ? { noHover: true } : { onClick: this.onFilesClick };
     const showNew = item.new && item.new > 0;
@@ -440,7 +440,7 @@ class FilesRowContent extends React.PureComponent {
                 </div>
                 :
                 <div className='badges'>
-                { !!showNew &&
+                  {!!showNew &&
                     <Badge
                       className='badge-version'
                       backgroundColor="#ED7309"
@@ -478,7 +478,6 @@ class FilesRowContent extends React.PureComponent {
               fontSize='12px'
               fontWeight={400}
               color="#333"
-            onClick={() => { }}
               isTextOverflow={true}
             >
               {updatedDate && updatedDate}