IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Ilya Oleshko 2020-07-10 11:39:55 +03:00
parent e07cfee5a9
commit 950eaf2d43
1 changed files with 239 additions and 240 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,6 +15,43 @@ import EditingWrapperComponent from "./EditingWrapperComponent";
const { FileAction } = constants; 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 { class FilesRowContent extends React.PureComponent {
constructor(props) { constructor(props) {
@ -191,15 +228,15 @@ class FilesRowContent extends React.PureComponent {
const { item, treeFolders, setTreeFolders, rootFolderId, newItems, filter } = this.props; const { item, treeFolders, setTreeFolders, rootFolderId, newItems, filter } = this.props;
if (item.fileExst) { if (item.fileExst) {
api.files api.files
.markAsRead([], [item.id]) .markAsRead([], [item.id])
.then(() => { .then(() => {
const data = treeFolders; const data = treeFolders;
const dataItem = data.find((x) => x.id === rootFolderId); const dataItem = data.find((x) => x.id === rootFolderId);
dataItem.newItems = newItems ? dataItem.newItems - 1 : 0;//////newItems dataItem.newItems = newItems ? dataItem.newItems - 1 : 0;//////newItems
setTreeFolders(data); setTreeFolders(data);
fetchFiles(this.props.selectedFolder.id, filter.clone(), store.dispatch); fetchFiles(this.props.selectedFolder.id, filter.clone(), store.dispatch);
}) })
.catch((err) => toastr.error(err)) .catch((err) => toastr.error(err))
} else { } else {
const newFolderId = this.props.selectedFolder.pathParts; const newFolderId = this.props.selectedFolder.pathParts;
newFolderId.push(item.id); newFolderId.push(item.id);
@ -212,39 +249,39 @@ class FilesRowContent extends React.PureComponent {
onShowNewFilesPanel = () => { onShowNewFilesPanel = () => {
const { showNewFilesPanel } = this.state; const { showNewFilesPanel } = this.state;
this.setState({showNewFilesPanel: !showNewFilesPanel}); this.setState({ showNewFilesPanel: !showNewFilesPanel });
}; };
setConvertDialogVisible = () => setConvertDialogVisible = () =>
this.setState({ showConvertDialog: !this.state.showConvertDialog }); this.setState({ showConvertDialog: !this.state.showConvertDialog });
getConvertProgress = fileId => { getConvertProgress = fileId => {
api.files.getConvertFile(fileId).then(res => { 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); this.props.setProgressValue(res[0].progress);
setTimeout(() => this.getConvertProgress(fileId), 1000); setTimeout(() => this.getConvertProgress(fileId), 1000);
} else {
const { selectedFolder, filter, onLoading, setProgressValue, finishFilesOperations } = this.props;
if (res[0].error) {
finishFilesOperations(res[0].error);
} else { } else {
const { selectedFolder, filter, onLoading, setProgressValue, finishFilesOperations } = this.props; setProgressValue(100);
if(res[0].error) { finishFilesOperations();
finishFilesOperations(res[0].error); const newFilter = filter.clone();
} else { fetchFiles(selectedFolder.id, newFilter, store.dispatch)
setProgressValue(100); .catch(err => toastr.error(err))
finishFilesOperations(); .finally(() => onLoading(false));
const newFilter = filter.clone();
fetchFiles(selectedFolder.id, newFilter, store.dispatch)
.catch(err => toastr.error(err))
.finally(() => onLoading(false));
}
} }
}); }
} });
}
onConvert = () => { onConvert = () => {
const { item, startFilesOperations, t } = this.props; const { item, startFilesOperations, t } = this.props;
startFilesOperations(t("Convert")); startFilesOperations(t("Convert"));
this.setState({showConvertDialog: false}, () => 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) { if (convertRes && convertRes[0] && convertRes[0].progress !== 100) {
this.getConvertProgress(item.id); this.getConvertProgress(item.id);
} }
}) })
@ -266,49 +303,12 @@ class FilesRowContent extends React.PureComponent {
versionGroup versionGroup
} = item; } = 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 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 updatedDate = updated && this.getStatusByDate();
const canEditFile = fileExst && canWebEdit(fileExst); const canEditFile = fileExst && canWebEdit(fileExst);
const canConvertFile = fileExst && canConvert(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 isEdit = (id === editingId) && (fileExst === fileAction.extension);
const linkStyles = isTrashFolder ? { noHover: true } : { onClick: this.onFilesClick }; const linkStyles = isTrashFolder ? { noHover: true } : { onClick: this.onFilesClick };
const showNew = item.new && item.new > 0; const showNew = item.new && item.new > 0;
@ -325,179 +325,178 @@ class FilesRowContent extends React.PureComponent {
cancelUpdateItem={this.cancelUpdateItem} cancelUpdateItem={this.cancelUpdateItem}
/> />
: ( : (
<> <>
{showConvertDialog && ( {showConvertDialog && (
<ConvertDialog <ConvertDialog
visible={showConvertDialog} visible={showConvertDialog}
onClose={this.setConvertDialogVisible} onClose={this.setConvertDialogVisible}
onConvert={this.onConvert} onConvert={this.onConvert}
/> />
)} )}
{showNewFilesPanel && ( {showNewFilesPanel && (
<NewFilesPanel <NewFilesPanel
visible={showNewFilesPanel} visible={showNewFilesPanel}
onClose={this.onShowNewFilesPanel} onClose={this.onShowNewFilesPanel}
onLoading={onLoading} onLoading={onLoading}
folderId={newFolderId} folderId={newFolderId}
folders={folders} folders={folders}
/> />
)} )}
<SimpleFilesRowContent <SimpleFilesRowContent
sideColor="#333" sideColor="#333"
isFile={fileExst} isFile={fileExst}
onClick={this.onMobileRowClick} onClick={this.onMobileRowClick}
>
<Link
containerWidth='100%'
type='page'
title={titleWithoutExt}
fontWeight="bold"
fontSize='15px'
{...linkStyles}
color="#333"
isTextOverflow
> >
{titleWithoutExt} <Link
</Link> containerWidth='100%'
<> type='page'
{fileExst ? title={titleWithoutExt}
<div className='badges'> fontWeight="bold"
<Text fontSize='15px'
className='badge-ext' {...linkStyles}
as="span" color="#333"
color="#A3A9AE" isTextOverflow
fontSize='15px' >
fontWeight={600} {titleWithoutExt}
title={fileExst} </Link>
truncate={true} <>
> {fileExst ?
{fileExst} <div className='badges'>
</Text> <Text
{canConvertFile && className='badge-ext'
<IconButton as="span"
onClick={this.setConvertDialogVisible} color="#A3A9AE"
iconName="FileActionsConvertIcon" fontSize='15px'
className='badge' fontWeight={600}
size='small' title={fileExst}
isfill={true} truncate={true}
color='#A3A9AE' >
/> {fileExst}
} </Text>
{canEditFile && {canConvertFile &&
<Icons.AccessEditIcon <IconButton
className='badge' onClick={this.setConvertDialogVisible}
size='small' iconName="FileActionsConvertIcon"
isfill={true} className='badge'
color='#A3A9AE' size='small'
/> isfill={true}
} color='#A3A9AE'
{fileStatus === 1 && />
<Icons.FileActionsConvertEditDocIcon }
className='badge' {canEditFile &&
size='small' <Icons.AccessEditIcon
isfill={true} className='badge'
color='#3B72A7' size='small'
/> isfill={true}
} color='#A3A9AE'
{false && />
<Icons.FileActionsLockedIcon }
className='badge' {fileStatus === 1 &&
size='small' <Icons.FileActionsConvertEditDocIcon
isfill={true} className='badge'
color='#3B72A7' size='small'
/> isfill={true}
} color='#3B72A7'
{versionGroup > 1 && />
<Badge }
className='badge-version' {false &&
backgroundColor="#A3A9AE" <Icons.FileActionsLockedIcon
borderRadius="11px" className='badge'
color="#FFFFFF" size='small'
fontSize="10px" isfill={true}
fontWeight={800} color='#3B72A7'
label={`Ver.${versionGroup}`} />
maxWidth="50px" }
onClick={this.onShowVersionHistory} {versionGroup > 1 &&
padding="0 5px" <Badge
data-id={id} className='badge-version'
/> backgroundColor="#A3A9AE"
} borderRadius="11px"
{fileStatus === 2 && color="#FFFFFF"
<Badge fontSize="10px"
className='badge-version' fontWeight={800}
backgroundColor="#ED7309" label={`Ver.${versionGroup}`}
borderRadius="11px" maxWidth="50px"
color="#FFFFFF" onClick={this.onShowVersionHistory}
fontSize="10px" padding="0 5px"
fontWeight={800} data-id={id}
label={`New`} />
maxWidth="50px" }
onClick={this.onBadgeClick} {fileStatus === 2 &&
padding="0 5px" <Badge
data-id={id} className='badge-version'
/> backgroundColor="#ED7309"
} borderRadius="11px"
</div> color="#FFFFFF"
: fontSize="10px"
<div className='badges'> fontWeight={800}
{ !!showNew && label={`New`}
<Badge maxWidth="50px"
className='badge-version' onClick={this.onBadgeClick}
backgroundColor="#ED7309" padding="0 5px"
borderRadius="11px" data-id={id}
color="#FFFFFF" />
fontSize="10px" }
fontWeight={800} </div>
label={newItems} :
maxWidth="50px" <div className='badges'>
onClick={this.onBadgeClick} {!!showNew &&
padding="0 5px" <Badge
data-id={id} className='badge-version'
/> backgroundColor="#ED7309"
} borderRadius="11px"
</div> color="#FFFFFF"
} fontSize="10px"
</> fontWeight={800}
<Text label={newItems}
containerMinWidth='120px' maxWidth="50px"
containerWidth='10%' onClick={this.onBadgeClick}
as="div" padding="0 5px"
color="#333" data-id={id}
fontSize='12px' />
fontWeight={600} }
title={fileOwner} </div>
truncate={true} }
> </>
{fileOwner} <Text
</Text> containerMinWidth='120px'
<Link containerWidth='10%'
containerMinWidth='190px' as="div"
containerWidth='15%' color="#333"
type='page' fontSize='12px'
title={updatedDate} fontWeight={600}
fontSize='12px' title={fileOwner}
fontWeight={400} truncate={true}
color="#333" >
onClick={() => { }} {fileOwner}
isTextOverflow={true} </Text>
> <Link
{updatedDate && updatedDate} containerMinWidth='190px'
</Link> containerWidth='15%'
<Text type='page'
containerMinWidth='90px' title={updatedDate}
containerWidth='8%' fontSize='12px'
as="div" fontWeight={400}
color="#333" color="#333"
fontSize='12px' isTextOverflow={true}
fontWeight={600} >
title='' {updatedDate && updatedDate}
truncate={true} </Link>
> <Text
{fileExst containerMinWidth='90px'
? contentLength containerWidth='8%'
: `${t("TitleDocuments")}: ${filesCount} / ${t("TitleSubfolders")}: ${foldersCount}`} as="div"
</Text> color="#333"
</SimpleFilesRowContent> fontSize='12px'
fontWeight={600}
title=''
truncate={true}
>
{fileExst
? contentLength
: `${t("TitleDocuments")}: ${filesCount} / ${t("TitleSubfolders")}: ${foldersCount}`}
</Text>
</SimpleFilesRowContent>
</> </>
) )
} }