Web: Files : RowContent : Auto formatting, disable file actions inside recycle
This commit is contained in:
Ilya Oleshko
parent
5c4df62c77
commit
312856acf1
@ -1,11 +1,17 @@
|
||||
|
||||
import React from "react";
|
||||
import { connect } from "react-redux";
|
||||
import { withRouter } from "react-router";
|
||||
import { withTranslation } from "react-i18next";
|
||||
import styled from "styled-components";
|
||||
import { RowContent, Link, Text, Icons, IconButton, Badge } from "asc-web-components";
|
||||
import { constants, api, toastr, store as initStore } from 'asc-web-common';
|
||||
import {
|
||||
RowContent,
|
||||
Link,
|
||||
Text,
|
||||
Icons,
|
||||
IconButton,
|
||||
Badge,
|
||||
} from "asc-web-components";
|
||||
import { constants, api, toastr, store as initStore } from "asc-web-common";
|
||||
import {
|
||||
clearProgressData,
|
||||
createFile,
|
||||
@ -18,7 +24,7 @@ import {
|
||||
setTreeFolders,
|
||||
setUpdateTree,
|
||||
updateFile,
|
||||
} from '../../../../../store/files/actions';
|
||||
} from "../../../../../store/files/actions";
|
||||
import {
|
||||
canConvert,
|
||||
canWebEdit,
|
||||
@ -38,59 +44,62 @@ import {
|
||||
isImage,
|
||||
isSound,
|
||||
isVideo,
|
||||
} from '../../../../../store/files/selectors';
|
||||
} from "../../../../../store/files/selectors";
|
||||
import { NewFilesPanel } from "../../../../panels";
|
||||
import { ConvertDialog } from "../../../../dialogs";
|
||||
import EditingWrapperComponent from "./EditingWrapperComponent";
|
||||
|
||||
const { FileAction } = constants;
|
||||
const sideColor = '#A3A9AE';
|
||||
const sideColor = "#A3A9AE";
|
||||
const { getSettings } = initStore.auth.selectors;
|
||||
|
||||
const SimpleFilesRowContent = styled(RowContent)`
|
||||
.badge-ext {
|
||||
margin-left: -8px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.badge-ext {
|
||||
margin-left: -8px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.badge {
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.badges {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.badges {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.share-icon {
|
||||
margin-top: -4px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
.share-icon {
|
||||
margin-top: -4px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.row_update-text {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.row_update-text {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
`;
|
||||
|
||||
const okIcon = <Icons.CheckIcon
|
||||
className='edit-ok-icon'
|
||||
size='scale'
|
||||
isfill={true}
|
||||
color='#A3A9AE'
|
||||
/>;
|
||||
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 cancelIcon = (
|
||||
<Icons.CrossIcon
|
||||
className="edit-cancel-icon"
|
||||
size="scale"
|
||||
isfill={true}
|
||||
color="#A3A9AE"
|
||||
/>
|
||||
);
|
||||
|
||||
class FilesRowContent extends React.PureComponent {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
let titleWithoutExt = getTitleWithoutExst(props.item);
|
||||
@ -105,30 +114,37 @@ class FilesRowContent extends React.PureComponent {
|
||||
showNewFilesPanel: false,
|
||||
newFolderId: [],
|
||||
newItems: props.item.new || props.item.fileStatus === 2,
|
||||
showConvertDialog: false
|
||||
showConvertDialog: false,
|
||||
//loading: false
|
||||
};
|
||||
}
|
||||
|
||||
completeAction = (id) => {
|
||||
this.props.onEditComplete(id, !this.props.item.fileExst);
|
||||
}
|
||||
};
|
||||
|
||||
updateItem = (e) => {
|
||||
const { fileAction, updateFile, renameFolder, item, setIsLoading } = this.props;
|
||||
const {
|
||||
fileAction,
|
||||
updateFile,
|
||||
renameFolder,
|
||||
item,
|
||||
setIsLoading,
|
||||
} = this.props;
|
||||
|
||||
const { itemTitle } = this.state;
|
||||
const originalTitle = getTitleWithoutExst(item);
|
||||
|
||||
setIsLoading(true);
|
||||
if (originalTitle === itemTitle)
|
||||
return this.completeAction(fileAction.id);
|
||||
if (originalTitle === itemTitle) return this.completeAction(fileAction.id);
|
||||
|
||||
item.fileExst
|
||||
? updateFile(fileAction.id, itemTitle)
|
||||
.then(() => this.completeAction(fileAction.id)).finally(() => setIsLoading(false))
|
||||
.then(() => this.completeAction(fileAction.id))
|
||||
.finally(() => setIsLoading(false))
|
||||
: renameFolder(fileAction.id, itemTitle)
|
||||
.then(() => this.completeAction(fileAction.id)).finally(() => setIsLoading(false));
|
||||
.then(() => this.completeAction(fileAction.id))
|
||||
.finally(() => setIsLoading(false));
|
||||
};
|
||||
|
||||
createItem = (e) => {
|
||||
@ -139,29 +155,28 @@ class FilesRowContent extends React.PureComponent {
|
||||
|
||||
const itemId = e.currentTarget.dataset.itemid;
|
||||
|
||||
if (itemTitle.trim() === '')
|
||||
return this.completeAction(itemId);
|
||||
if (itemTitle.trim() === "") return this.completeAction(itemId);
|
||||
|
||||
let newTab = item.fileExst
|
||||
? window.open('about:blank', '_blank')
|
||||
: null;
|
||||
let newTab = item.fileExst ? window.open("about:blank", "_blank") : null;
|
||||
|
||||
!item.fileExst
|
||||
? createFolder(item.parentId, itemTitle)
|
||||
.then(() => this.completeAction(itemId)).finally(() => setIsLoading(false))
|
||||
.then(() => this.completeAction(itemId))
|
||||
.finally(() => setIsLoading(false))
|
||||
: createFile(item.parentId, `${itemTitle}.${item.fileExst}`)
|
||||
.then((file) => {
|
||||
newTab.location = file.webUrl;
|
||||
this.completeAction(itemId);
|
||||
}).finally(() => setIsLoading(false))
|
||||
}
|
||||
.then((file) => {
|
||||
newTab.location = file.webUrl;
|
||||
this.completeAction(itemId);
|
||||
})
|
||||
.finally(() => setIsLoading(false));
|
||||
};
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
const { fileAction, item, newRowItems, setNewRowItems } = this.props;
|
||||
const itemId = item.id.toString();
|
||||
|
||||
if (newRowItems.length && newRowItems.includes(itemId)) {
|
||||
const rowItems = newRowItems.filter(x => x !== itemId)
|
||||
const rowItems = newRowItems.filter((x) => x !== itemId);
|
||||
if (this.state.newItems !== 0) {
|
||||
this.setState({ newItems: 0 }, () => setNewRowItems(rowItems));
|
||||
}
|
||||
@ -169,27 +184,38 @@ class FilesRowContent extends React.PureComponent {
|
||||
|
||||
if (fileAction) {
|
||||
if (fileAction.id !== prevProps.fileAction.id) {
|
||||
this.setState({ editingId: fileAction.id })
|
||||
this.setState({ editingId: fileAction.id });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
renameTitle = e => {
|
||||
renameTitle = (e) => {
|
||||
this.setState({ itemTitle: e.target.value });
|
||||
}
|
||||
};
|
||||
|
||||
cancelUpdateItem = e => {
|
||||
cancelUpdateItem = (e) => {
|
||||
this.completeAction(e);
|
||||
}
|
||||
};
|
||||
|
||||
onClickUpdateItem = e => {
|
||||
(this.props.fileAction.type === FileAction.Create)
|
||||
onClickUpdateItem = (e) => {
|
||||
this.props.fileAction.type === FileAction.Create
|
||||
? this.createItem(e)
|
||||
: this.updateItem(e);
|
||||
}
|
||||
};
|
||||
|
||||
onFilesClick = () => {
|
||||
const { filter, parentFolder, setIsLoading, onMediaFileClick, fetchFiles, isImage, isSound, isVideo, canWebEdit, item } = this.props;
|
||||
const {
|
||||
filter,
|
||||
parentFolder,
|
||||
setIsLoading,
|
||||
onMediaFileClick,
|
||||
fetchFiles,
|
||||
isImage,
|
||||
isSound,
|
||||
isVideo,
|
||||
canWebEdit,
|
||||
item,
|
||||
} = this.props;
|
||||
const { id, fileExst, viewUrl } = item;
|
||||
|
||||
if (!fileExst) {
|
||||
@ -201,7 +227,7 @@ class FilesRowContent extends React.PureComponent {
|
||||
}
|
||||
|
||||
fetchFiles(id, newFilter)
|
||||
.catch(err => {
|
||||
.catch((err) => {
|
||||
toastr.error(err);
|
||||
setIsLoading(false);
|
||||
})
|
||||
@ -221,19 +247,21 @@ class FilesRowContent extends React.PureComponent {
|
||||
};
|
||||
|
||||
onMobileRowClick = (e) => {
|
||||
if (window.innerWidth > 1024)
|
||||
return;
|
||||
const { isTrashFolder } = this.props;
|
||||
|
||||
if (isTrashFolder || window.innerWidth > 1024) return;
|
||||
|
||||
this.onFilesClick();
|
||||
}
|
||||
};
|
||||
|
||||
getStatusByDate = () => {
|
||||
const { culture, t, item } = this.props;
|
||||
const { created, updated, version, fileExst } = item;
|
||||
|
||||
const title = version > 1
|
||||
? t("TitleModified")
|
||||
: fileExst
|
||||
const title =
|
||||
version > 1
|
||||
? t("TitleModified")
|
||||
: fileExst
|
||||
? t("TitleUploaded")
|
||||
: t("TitleCreated");
|
||||
|
||||
@ -247,11 +275,11 @@ class FilesRowContent extends React.PureComponent {
|
||||
const { t } = this.props;
|
||||
|
||||
switch (format) {
|
||||
case 'docx':
|
||||
case "docx":
|
||||
return t("NewDocument");
|
||||
case 'xlsx':
|
||||
case "xlsx":
|
||||
return t("NewSpreadsheet");
|
||||
case 'pptx':
|
||||
case "pptx":
|
||||
return t("NewPresentation");
|
||||
default:
|
||||
return t("NewFolder");
|
||||
@ -263,11 +291,19 @@ class FilesRowContent extends React.PureComponent {
|
||||
const fileId = e.currentTarget.dataset.id;
|
||||
|
||||
history.push(`${settings.homepage}/${fileId}/history`);
|
||||
}
|
||||
};
|
||||
|
||||
onBadgeClick = () => {
|
||||
const { showNewFilesPanel } = this.state;
|
||||
const { item, treeFolders, setTreeFolders, rootFolderId, newItems, setNewRowItems, setUpdateTree } = this.props;
|
||||
const {
|
||||
item,
|
||||
treeFolders,
|
||||
setTreeFolders,
|
||||
rootFolderId,
|
||||
newItems,
|
||||
setNewRowItems,
|
||||
setUpdateTree,
|
||||
} = this.props;
|
||||
if (item.fileExst) {
|
||||
api.files
|
||||
.markAsRead([], [item.id])
|
||||
@ -279,7 +315,7 @@ class FilesRowContent extends React.PureComponent {
|
||||
setTreeFolders(data);
|
||||
setNewRowItems([`${item.id}`]);
|
||||
})
|
||||
.catch((err) => toastr.error(err))
|
||||
.catch((err) => toastr.error(err));
|
||||
} else {
|
||||
const newFolderId = this.props.selectedFolder.pathParts;
|
||||
newFolderId.push(item.id);
|
||||
@ -288,7 +324,7 @@ class FilesRowContent extends React.PureComponent {
|
||||
newFolderId,
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
onShowNewFilesPanel = () => {
|
||||
const { showNewFilesPanel } = this.state;
|
||||
@ -298,39 +334,55 @@ class FilesRowContent extends React.PureComponent {
|
||||
setConvertDialogVisible = () =>
|
||||
this.setState({ showConvertDialog: !this.state.showConvertDialog });
|
||||
|
||||
getConvertProgress = fileId => {
|
||||
const { selectedFolder, filter, setIsLoading, setProgressBarData, t, clearProgressData, fetchFiles } = this.props;
|
||||
api.files.getConvertFile(fileId).then(res => {
|
||||
getConvertProgress = (fileId) => {
|
||||
const {
|
||||
selectedFolder,
|
||||
filter,
|
||||
setIsLoading,
|
||||
setProgressBarData,
|
||||
t,
|
||||
clearProgressData,
|
||||
fetchFiles,
|
||||
} = this.props;
|
||||
api.files.getConvertFile(fileId).then((res) => {
|
||||
if (res && res[0] && res[0].progress !== 100) {
|
||||
setProgressBarData({ visible: true, percent: res[0].progress, label: t("Convert") });
|
||||
setProgressBarData({
|
||||
visible: true,
|
||||
percent: res[0].progress,
|
||||
label: t("Convert"),
|
||||
});
|
||||
setTimeout(() => this.getConvertProgress(fileId), 1000);
|
||||
} else {
|
||||
if (res[0].error) {
|
||||
toastr.error(res[0].error);
|
||||
clearProgressData();
|
||||
} else {
|
||||
setProgressBarData({ visible: true, percent: 100, label: t("Convert") });
|
||||
setTimeout(() => clearProgressData(), 5000)
|
||||
setProgressBarData({
|
||||
visible: true,
|
||||
percent: 100,
|
||||
label: t("Convert"),
|
||||
});
|
||||
setTimeout(() => clearProgressData(), 5000);
|
||||
const newFilter = filter.clone();
|
||||
fetchFiles(selectedFolder.id, newFilter)
|
||||
.catch(err => toastr.error(err))
|
||||
.catch((err) => toastr.error(err))
|
||||
.finally(() => setIsLoading(false));
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
onConvert = () => {
|
||||
const { item, t, setProgressBarData } = this.props;
|
||||
setProgressBarData({ visible: true, percent: 0, label: t("Convert") });
|
||||
this.setState({ showConvertDialog: false }, () =>
|
||||
api.files.convertFile(item.id).then(convertRes => {
|
||||
api.files.convertFile(item.id).then((convertRes) => {
|
||||
if (convertRes && convertRes[0] && convertRes[0].progress !== 100) {
|
||||
this.getConvertProgress(item.id);
|
||||
}
|
||||
})
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const {
|
||||
@ -343,7 +395,7 @@ class FilesRowContent extends React.PureComponent {
|
||||
isLoading,
|
||||
isMobile,
|
||||
canWebEdit,
|
||||
canConvert
|
||||
canConvert,
|
||||
} = this.props;
|
||||
const {
|
||||
itemTitle,
|
||||
@ -351,7 +403,7 @@ class FilesRowContent extends React.PureComponent {
|
||||
showNewFilesPanel,
|
||||
newItems,
|
||||
newFolderId,
|
||||
showConvertDialog
|
||||
showConvertDialog,
|
||||
} = this.state;
|
||||
const {
|
||||
contentLength,
|
||||
@ -363,18 +415,23 @@ class FilesRowContent extends React.PureComponent {
|
||||
fileStatus,
|
||||
id,
|
||||
versionGroup,
|
||||
locked
|
||||
locked,
|
||||
} = item;
|
||||
const titleWithoutExt = getTitleWithoutExst(item);
|
||||
const fileOwner = createdBy && ((this.props.viewer.id === createdBy.id && t("AuthorMe")) || createdBy.displayName);
|
||||
const fileOwner =
|
||||
createdBy &&
|
||||
((this.props.viewer.id === createdBy.id && t("AuthorMe")) ||
|
||||
createdBy.displayName);
|
||||
const updatedDate = updated && this.getStatusByDate();
|
||||
|
||||
const isEdit = (id === editingId) && (fileExst === fileAction.extension);
|
||||
const linkStyles = isTrashFolder ? { noHover: true } : { onClick: this.onFilesClick };
|
||||
const isEdit = id === editingId && fileExst === fileAction.extension;
|
||||
const linkStyles = isTrashFolder
|
||||
? { noHover: true }
|
||||
: { onClick: this.onMobileRowClick };
|
||||
const showNew = !!newItems;
|
||||
|
||||
return isEdit
|
||||
? <EditingWrapperComponent
|
||||
return isEdit ? (
|
||||
<EditingWrapperComponent
|
||||
itemTitle={itemTitle}
|
||||
okIcon={okIcon}
|
||||
cancelIcon={cancelIcon}
|
||||
@ -384,183 +441,185 @@ class FilesRowContent extends React.PureComponent {
|
||||
itemId={id}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
: (
|
||||
<>
|
||||
{showConvertDialog && (
|
||||
<ConvertDialog
|
||||
visible={showConvertDialog}
|
||||
onClose={this.setConvertDialogVisible}
|
||||
onConvert={this.onConvert}
|
||||
/>
|
||||
)}
|
||||
{showNewFilesPanel && (
|
||||
<NewFilesPanel
|
||||
visible={showNewFilesPanel}
|
||||
onClose={this.onShowNewFilesPanel}
|
||||
folderId={newFolderId}
|
||||
folders={folders}
|
||||
/>
|
||||
)}
|
||||
<SimpleFilesRowContent
|
||||
widthProp={widthProp}
|
||||
isMobile={isMobile}
|
||||
sideColor={sideColor}
|
||||
isFile={fileExst}
|
||||
onClick={this.onMobileRowClick}
|
||||
) : (
|
||||
<>
|
||||
{showConvertDialog && (
|
||||
<ConvertDialog
|
||||
visible={showConvertDialog}
|
||||
onClose={this.setConvertDialogVisible}
|
||||
onConvert={this.onConvert}
|
||||
/>
|
||||
)}
|
||||
{showNewFilesPanel && (
|
||||
<NewFilesPanel
|
||||
visible={showNewFilesPanel}
|
||||
onClose={this.onShowNewFilesPanel}
|
||||
folderId={newFolderId}
|
||||
folders={folders}
|
||||
/>
|
||||
)}
|
||||
<SimpleFilesRowContent
|
||||
widthProp={widthProp}
|
||||
isMobile={isMobile}
|
||||
sideColor={sideColor}
|
||||
isFile={fileExst}
|
||||
onClick={this.onMobileRowClick}
|
||||
>
|
||||
<Link
|
||||
containerWidth="55%"
|
||||
type="page"
|
||||
title={titleWithoutExt}
|
||||
fontWeight="600"
|
||||
fontSize="15px"
|
||||
{...linkStyles}
|
||||
color="#333"
|
||||
isTextOverflow
|
||||
>
|
||||
<Link
|
||||
containerWidth='55%'
|
||||
type='page'
|
||||
title={titleWithoutExt}
|
||||
fontWeight="600"
|
||||
fontSize='15px'
|
||||
{...linkStyles}
|
||||
color="#333"
|
||||
isTextOverflow
|
||||
>
|
||||
{titleWithoutExt}
|
||||
</Link>
|
||||
<>
|
||||
{fileExst ?
|
||||
<div className='badges'>
|
||||
<Text
|
||||
className='badge-ext'
|
||||
as="span"
|
||||
{titleWithoutExt}
|
||||
</Link>
|
||||
<>
|
||||
{fileExst ? (
|
||||
<div className="badges">
|
||||
<Text
|
||||
className="badge-ext"
|
||||
as="span"
|
||||
color="#A3A9AE"
|
||||
fontSize="15px"
|
||||
fontWeight={600}
|
||||
title={fileExst}
|
||||
truncate={true}
|
||||
>
|
||||
{fileExst}
|
||||
</Text>
|
||||
{canConvert && (
|
||||
<IconButton
|
||||
onClick={this.setConvertDialogVisible}
|
||||
iconName="FileActionsConvertIcon"
|
||||
className="badge"
|
||||
size="small"
|
||||
isfill={true}
|
||||
color="#A3A9AE"
|
||||
fontSize='15px'
|
||||
fontWeight={600}
|
||||
title={fileExst}
|
||||
truncate={true}
|
||||
>
|
||||
{fileExst}
|
||||
</Text>
|
||||
{canConvert &&
|
||||
<IconButton
|
||||
onClick={this.setConvertDialogVisible}
|
||||
iconName="FileActionsConvertIcon"
|
||||
className='badge'
|
||||
size='small'
|
||||
isfill={true}
|
||||
color='#A3A9AE'
|
||||
/>
|
||||
}
|
||||
{canWebEdit &&
|
||||
<Icons.AccessEditIcon
|
||||
className='badge'
|
||||
size='small'
|
||||
isfill={true}
|
||||
color='#A3A9AE'
|
||||
/>
|
||||
}
|
||||
{fileStatus === 1 &&
|
||||
<Icons.FileActionsConvertEditDocIcon
|
||||
className='badge'
|
||||
size='small'
|
||||
isfill={true}
|
||||
color='#3B72A7'
|
||||
/>
|
||||
}
|
||||
{locked &&
|
||||
<Icons.FileActionsLockedIcon
|
||||
className='badge'
|
||||
size='small'
|
||||
isfill={true}
|
||||
color='#3B72A7'
|
||||
/>
|
||||
}
|
||||
{versionGroup > 1 &&
|
||||
<Badge
|
||||
className='badge-version'
|
||||
backgroundColor="#A3A9AE"
|
||||
borderRadius="11px"
|
||||
color="#FFFFFF"
|
||||
fontSize="10px"
|
||||
fontWeight={800}
|
||||
label={`Ver.${versionGroup}`}
|
||||
maxWidth="50px"
|
||||
onClick={this.onShowVersionHistory}
|
||||
padding="0 5px"
|
||||
data-id={id}
|
||||
/>
|
||||
}
|
||||
{showNew &&
|
||||
<Badge
|
||||
className='badge-version'
|
||||
backgroundColor="#ED7309"
|
||||
borderRadius="11px"
|
||||
color="#FFFFFF"
|
||||
fontSize="10px"
|
||||
fontWeight={800}
|
||||
label={`New`}
|
||||
maxWidth="50px"
|
||||
onClick={this.onBadgeClick}
|
||||
padding="0 5px"
|
||||
data-id={id}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
:
|
||||
<div className='badges'>
|
||||
{showNew &&
|
||||
<Badge
|
||||
className='badge-version'
|
||||
backgroundColor="#ED7309"
|
||||
borderRadius="11px"
|
||||
color="#FFFFFF"
|
||||
fontSize="10px"
|
||||
fontWeight={800}
|
||||
label={newItems}
|
||||
maxWidth="50px"
|
||||
onClick={this.onBadgeClick}
|
||||
padding="0 5px"
|
||||
data-id={id}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</>
|
||||
<Text
|
||||
containerMinWidth='120px'
|
||||
containerWidth='15%'
|
||||
as="div"
|
||||
color={sideColor}
|
||||
fontSize='12px'
|
||||
fontWeight={400}
|
||||
title={fileOwner}
|
||||
truncate={true}
|
||||
>
|
||||
{fileOwner}
|
||||
</Text>
|
||||
<Text
|
||||
containerMinWidth='200px'
|
||||
containerWidth='15%'
|
||||
title={updatedDate}
|
||||
fontSize='12px'
|
||||
fontWeight={400}
|
||||
color={sideColor}
|
||||
className="row_update-text"
|
||||
>
|
||||
{updatedDate && updatedDate}
|
||||
</Text>
|
||||
<Text
|
||||
containerMinWidth='90px'
|
||||
containerWidth='10%'
|
||||
as="div"
|
||||
color={sideColor}
|
||||
fontSize='12px'
|
||||
fontWeight={400}
|
||||
title=''
|
||||
truncate={true}
|
||||
>
|
||||
{fileExst
|
||||
? contentLength
|
||||
: `${t("TitleDocuments")}: ${filesCount} | ${t("TitleSubfolders")}: ${foldersCount}`}
|
||||
</Text>
|
||||
</SimpleFilesRowContent>
|
||||
</>
|
||||
)
|
||||
/>
|
||||
)}
|
||||
{canWebEdit && (
|
||||
<Icons.AccessEditIcon
|
||||
className="badge"
|
||||
size="small"
|
||||
isfill={true}
|
||||
color="#A3A9AE"
|
||||
/>
|
||||
)}
|
||||
{fileStatus === 1 && (
|
||||
<Icons.FileActionsConvertEditDocIcon
|
||||
className="badge"
|
||||
size="small"
|
||||
isfill={true}
|
||||
color="#3B72A7"
|
||||
/>
|
||||
)}
|
||||
{locked && (
|
||||
<Icons.FileActionsLockedIcon
|
||||
className="badge"
|
||||
size="small"
|
||||
isfill={true}
|
||||
color="#3B72A7"
|
||||
/>
|
||||
)}
|
||||
{versionGroup > 1 && (
|
||||
<Badge
|
||||
className="badge-version"
|
||||
backgroundColor="#A3A9AE"
|
||||
borderRadius="11px"
|
||||
color="#FFFFFF"
|
||||
fontSize="10px"
|
||||
fontWeight={800}
|
||||
label={`Ver.${versionGroup}`}
|
||||
maxWidth="50px"
|
||||
onClick={this.onShowVersionHistory}
|
||||
padding="0 5px"
|
||||
data-id={id}
|
||||
/>
|
||||
)}
|
||||
{showNew && (
|
||||
<Badge
|
||||
className="badge-version"
|
||||
backgroundColor="#ED7309"
|
||||
borderRadius="11px"
|
||||
color="#FFFFFF"
|
||||
fontSize="10px"
|
||||
fontWeight={800}
|
||||
label={`New`}
|
||||
maxWidth="50px"
|
||||
onClick={this.onBadgeClick}
|
||||
padding="0 5px"
|
||||
data-id={id}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="badges">
|
||||
{showNew && (
|
||||
<Badge
|
||||
className="badge-version"
|
||||
backgroundColor="#ED7309"
|
||||
borderRadius="11px"
|
||||
color="#FFFFFF"
|
||||
fontSize="10px"
|
||||
fontWeight={800}
|
||||
label={newItems}
|
||||
maxWidth="50px"
|
||||
onClick={this.onBadgeClick}
|
||||
padding="0 5px"
|
||||
data-id={id}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
<Text
|
||||
containerMinWidth="120px"
|
||||
containerWidth="15%"
|
||||
as="div"
|
||||
color={sideColor}
|
||||
fontSize="12px"
|
||||
fontWeight={400}
|
||||
title={fileOwner}
|
||||
truncate={true}
|
||||
>
|
||||
{fileOwner}
|
||||
</Text>
|
||||
<Text
|
||||
containerMinWidth="200px"
|
||||
containerWidth="15%"
|
||||
title={updatedDate}
|
||||
fontSize="12px"
|
||||
fontWeight={400}
|
||||
color={sideColor}
|
||||
className="row_update-text"
|
||||
>
|
||||
{updatedDate && updatedDate}
|
||||
</Text>
|
||||
<Text
|
||||
containerMinWidth="90px"
|
||||
containerWidth="10%"
|
||||
as="div"
|
||||
color={sideColor}
|
||||
fontSize="12px"
|
||||
fontWeight={400}
|
||||
title=""
|
||||
truncate={true}
|
||||
>
|
||||
{fileExst
|
||||
? contentLength
|
||||
: `${t("TitleDocuments")}: ${filesCount} | ${t(
|
||||
"TitleSubfolders"
|
||||
)}: ${foldersCount}`}
|
||||
</Text>
|
||||
</SimpleFilesRowContent>
|
||||
</>
|
||||
);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function mapStateToProps(state, props) {
|
||||
return {
|
||||
@ -583,7 +642,7 @@ function mapStateToProps(state, props) {
|
||||
isImage: isImage(props.item.fileExst)(state),
|
||||
isSound: isSound(props.item.fileExst)(state),
|
||||
isVideo: isVideo(props.item.fileExst)(state),
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps, {
|
||||
@ -597,5 +656,5 @@ export default connect(mapStateToProps, {
|
||||
setNewRowItems,
|
||||
setIsLoading,
|
||||
clearProgressData,
|
||||
fetchFiles
|
||||
})(withRouter(withTranslation()(FilesRowContent)));
|
||||
fetchFiles,
|
||||
})(withRouter(withTranslation()(FilesRowContent)));
|
||||
|
||||
Loading…
Reference in New Issue
Block a user