Web: Files: refactoring FilesTileContent
This commit is contained in:
parent
6381a0c524
commit
0bf59a8c98
@ -1,23 +1,14 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import { withRouter } from "react-router";
|
import { withRouter } from "react-router";
|
||||||
import { Trans, withTranslation } from "react-i18next";
|
import { withTranslation } from "react-i18next";
|
||||||
import styled from "styled-components";
|
import styled from "styled-components";
|
||||||
|
|
||||||
import Badge from "@appserver/components/badge";
|
import Badge from "@appserver/components/badge";
|
||||||
import Link from "@appserver/components/link";
|
import Link from "@appserver/components/link";
|
||||||
import Text from "@appserver/components/text";
|
import Text from "@appserver/components/text";
|
||||||
import { markAsRead } from "@appserver/common/api/files";
|
|
||||||
import { FileAction, AppServerConfig } from "@appserver/common/constants";
|
|
||||||
import toastr from "studio/toastr";
|
|
||||||
import { getTitleWithoutExst } from "../../../../../helpers/files-helpers";
|
|
||||||
import { NewFilesPanel } from "../../../../panels";
|
|
||||||
import EditingWrapperComponent from "../sub-components/EditingWrapperComponent";
|
|
||||||
import TileContent from "./TileContent";
|
import TileContent from "./TileContent";
|
||||||
import { isMobile } from "react-device-detect";
|
import withContentActions from "../hoc/withContentActions";
|
||||||
import { inject, observer } from "mobx-react";
|
|
||||||
import CheckIcon from "../../../../../../public/images/check.react.svg";
|
|
||||||
import CrossIcon from "../../../../../../../../../public/images/cross.react.svg";
|
|
||||||
import config from "../../../../../../package.json";
|
|
||||||
import { combineUrl } from "@appserver/common/utils";
|
|
||||||
|
|
||||||
const SimpleFilesTileContent = styled(TileContent)`
|
const SimpleFilesTileContent = styled(TileContent)`
|
||||||
.rowMainContainer {
|
.rowMainContainer {
|
||||||
@ -63,438 +54,104 @@ const SimpleFilesTileContent = styled(TileContent)`
|
|||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const okIcon = (
|
const FilesTileContent = ({
|
||||||
<CheckIcon
|
t,
|
||||||
className="edit-ok-icon"
|
item,
|
||||||
size="scale"
|
sectionWidth,
|
||||||
isfill={true}
|
titleWithoutExt,
|
||||||
color="#A3A9AE"
|
updatedDate,
|
||||||
/>
|
fileOwner,
|
||||||
);
|
accessToEdit,
|
||||||
|
linkStyles,
|
||||||
|
newItems,
|
||||||
|
showNew,
|
||||||
|
canWebEdit,
|
||||||
|
/* canConvert,*/
|
||||||
|
isTrashFolder,
|
||||||
|
onFilesClick,
|
||||||
|
onShowVersionHistory,
|
||||||
|
onBadgeClick,
|
||||||
|
onClickLock,
|
||||||
|
onClickFavorite,
|
||||||
|
/*setConvertDialogVisible*/
|
||||||
|
}) => {
|
||||||
|
const {
|
||||||
|
contentLength,
|
||||||
|
fileExst,
|
||||||
|
filesCount,
|
||||||
|
foldersCount,
|
||||||
|
fileStatus,
|
||||||
|
id,
|
||||||
|
versionGroup,
|
||||||
|
locked,
|
||||||
|
providerKey,
|
||||||
|
} = item;
|
||||||
|
|
||||||
const cancelIcon = (
|
const onMobileRowClick = () => {
|
||||||
<CrossIcon
|
if (isTrashFolder || window.innerWidth > 1024) return;
|
||||||
className="edit-cancel-icon"
|
onFilesClick();
|
||||||
size="scale"
|
|
||||||
isfill={true}
|
|
||||||
color="#A3A9AE"
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
|
|
||||||
class FilesTileContent extends React.PureComponent {
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
let titleWithoutExt = getTitleWithoutExst(props.item);
|
|
||||||
|
|
||||||
if (props.fileAction.id === -1) {
|
|
||||||
titleWithoutExt = this.getDefaultName(props.fileAction.extension);
|
|
||||||
}
|
|
||||||
|
|
||||||
this.state = {
|
|
||||||
itemTitle: titleWithoutExt,
|
|
||||||
editingId: props.fileAction.id,
|
|
||||||
showNewFilesPanel: false,
|
|
||||||
newFolderId: [],
|
|
||||||
newItems: props.item.new,
|
|
||||||
//loading: false
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
completeAction = (e) => {
|
|
||||||
//this.setState({ loading: false }, () =>)
|
|
||||||
this.props.onEditComplete(e);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
updateItem = (e) => {
|
return (
|
||||||
const {
|
<>
|
||||||
fileAction,
|
<SimpleFilesTileContent
|
||||||
updateFile,
|
sideColor="#333"
|
||||||
renameFolder,
|
isFile={fileExst}
|
||||||
item,
|
//onClick={onMobileRowClick}
|
||||||
setIsLoading,
|
//disableSideInfo
|
||||||
} = this.props;
|
>
|
||||||
|
<Link
|
||||||
const { itemTitle } = this.state;
|
containerWidth="100%"
|
||||||
const originalTitle = getTitleWithoutExst(item);
|
type="page"
|
||||||
|
title={titleWithoutExt}
|
||||||
setIsLoading(true);
|
fontWeight="bold"
|
||||||
if (originalTitle === itemTitle) return this.completeAction(e);
|
fontSize="15px"
|
||||||
|
{...linkStyles}
|
||||||
item.fileExst
|
color="#333"
|
||||||
? updateFile(fileAction.id, itemTitle)
|
isTextOverflow
|
||||||
.then(() => this.completeAction(e))
|
|
||||||
.finally(() => setIsLoading(false))
|
|
||||||
: renameFolder(fileAction.id, itemTitle)
|
|
||||||
.then(() => this.completeAction(e))
|
|
||||||
.finally(() => setIsLoading(false));
|
|
||||||
};
|
|
||||||
|
|
||||||
createItem = (e) => {
|
|
||||||
const { createFile, item, setIsLoading, createFolder, t } = this.props;
|
|
||||||
const { itemTitle } = this.state;
|
|
||||||
|
|
||||||
setIsLoading(true);
|
|
||||||
|
|
||||||
if (itemTitle.trim() === "") return this.completeAction();
|
|
||||||
|
|
||||||
!item.fileExst
|
|
||||||
? createFolder(item.parentId, itemTitle)
|
|
||||||
.then(() => this.completeAction(e))
|
|
||||||
.finally(() => {
|
|
||||||
toastr.success(
|
|
||||||
<Trans t={t} i18nKey="FolderCreated" ns="Home">
|
|
||||||
New folder {{ itemTitle }} is created
|
|
||||||
</Trans>
|
|
||||||
);
|
|
||||||
return setIsLoading(false);
|
|
||||||
})
|
|
||||||
: createFile(item.parentId, `${itemTitle}.${item.fileExst}`)
|
|
||||||
.then(() => this.completeAction(e))
|
|
||||||
.finally(() => {
|
|
||||||
const exst = item.fileExst;
|
|
||||||
toastr.success(
|
|
||||||
<Trans t={t} i18nKey="FileCreated" ns="Home">
|
|
||||||
New file {{ itemTitle }}.{{ exst }} is created
|
|
||||||
</Trans>
|
|
||||||
);
|
|
||||||
return setIsLoading(false);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
componentDidUpdate(prevProps) {
|
|
||||||
const { fileAction } = this.props;
|
|
||||||
if (fileAction) {
|
|
||||||
if (fileAction.id !== prevProps.fileAction.id) {
|
|
||||||
this.setState({ editingId: fileAction.id });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
renameTitle = (e) => {
|
|
||||||
this.setState({ itemTitle: e.target.value });
|
|
||||||
};
|
|
||||||
|
|
||||||
cancelUpdateItem = (e) => {
|
|
||||||
//this.setState({ loading: false });
|
|
||||||
this.completeAction(e);
|
|
||||||
};
|
|
||||||
|
|
||||||
onClickUpdateItem = () => {
|
|
||||||
this.props.fileAction.type === FileAction.Create
|
|
||||||
? this.createItem()
|
|
||||||
: this.updateItem();
|
|
||||||
};
|
|
||||||
|
|
||||||
onKeyUpUpdateItem = (e) => {
|
|
||||||
if (e.keyCode === 13) {
|
|
||||||
this.props.fileAction.type === FileAction.Create
|
|
||||||
? this.createItem()
|
|
||||||
: this.updateItem();
|
|
||||||
}
|
|
||||||
|
|
||||||
if (e.keyCode === 27) return this.cancelUpdateItem();
|
|
||||||
};
|
|
||||||
|
|
||||||
onFilesClick = () => {
|
|
||||||
const { id, fileExst, viewUrl, providerKey } = this.props.item;
|
|
||||||
const {
|
|
||||||
filter,
|
|
||||||
parentFolder,
|
|
||||||
setIsLoading,
|
|
||||||
onMediaFileClick,
|
|
||||||
fetchFiles,
|
|
||||||
canWebEdit,
|
|
||||||
openDocEditor,
|
|
||||||
isVideo,
|
|
||||||
isImage,
|
|
||||||
isSound,
|
|
||||||
expandedKeys,
|
|
||||||
addExpandedKeys,
|
|
||||||
} = this.props;
|
|
||||||
if (!fileExst) {
|
|
||||||
setIsLoading(true);
|
|
||||||
|
|
||||||
if (!expandedKeys.includes(parentFolder + "")) {
|
|
||||||
addExpandedKeys(parentFolder + "");
|
|
||||||
}
|
|
||||||
|
|
||||||
fetchFiles(id, filter)
|
|
||||||
.catch((err) => {
|
|
||||||
toastr.error(err);
|
|
||||||
setIsLoading(false);
|
|
||||||
})
|
|
||||||
.finally(() => setIsLoading(false));
|
|
||||||
} else {
|
|
||||||
if (canWebEdit) {
|
|
||||||
return openDocEditor(id, providerKey);
|
|
||||||
}
|
|
||||||
|
|
||||||
const isOpenMedia = isImage || isSound || isVideo;
|
|
||||||
|
|
||||||
if (isOpenMedia) {
|
|
||||||
onMediaFileClick(id);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
return window.open(viewUrl, "_blank");
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
onMobileRowClick = (e) => {
|
|
||||||
if (!isMobile) return;
|
|
||||||
|
|
||||||
this.onFilesClick();
|
|
||||||
};
|
|
||||||
|
|
||||||
getStatusByDate = () => {
|
|
||||||
const { culture, t, item, sectionWidth } = this.props;
|
|
||||||
const { created, updated, version, fileExst } = item;
|
|
||||||
|
|
||||||
const title =
|
|
||||||
version > 1
|
|
||||||
? t("TitleModified")
|
|
||||||
: fileExst
|
|
||||||
? t("TitleUploaded")
|
|
||||||
: t("TitleCreated");
|
|
||||||
|
|
||||||
const date = fileExst ? updated : created;
|
|
||||||
const dateLabel = new Date(date).toLocaleString(culture);
|
|
||||||
const mobile = (sectionWidth && sectionWidth <= 375) || isMobile;
|
|
||||||
|
|
||||||
return mobile ? dateLabel : `${title}: ${dateLabel}`;
|
|
||||||
};
|
|
||||||
|
|
||||||
getDefaultName = (format) => {
|
|
||||||
const { t } = this.props;
|
|
||||||
|
|
||||||
switch (format) {
|
|
||||||
case "docx":
|
|
||||||
return t("NewDocument");
|
|
||||||
case "xlsx":
|
|
||||||
return t("NewSpreadsheet");
|
|
||||||
case "pptx":
|
|
||||||
return t("NewPresentation");
|
|
||||||
default:
|
|
||||||
return t("NewFolder");
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
onShowVersionHistory = (e) => {
|
|
||||||
const { homepage, history } = this.props;
|
|
||||||
const fileId = e.currentTarget.dataset.id;
|
|
||||||
|
|
||||||
history.push(
|
|
||||||
combineUrl(AppServerConfig.proxyURL, homepage, `/${fileId}/history`)
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
onBadgeClick = () => {
|
|
||||||
const { showNewFilesPanel } = this.state;
|
|
||||||
const {
|
|
||||||
item,
|
|
||||||
treeFolders,
|
|
||||||
setTreeFolders,
|
|
||||||
rootFolderId,
|
|
||||||
newItems,
|
|
||||||
filter,
|
|
||||||
fetchFiles,
|
|
||||||
} = this.props;
|
|
||||||
if (item.fileExst) {
|
|
||||||
markAsRead([], [item.id])
|
|
||||||
.then(() => {
|
|
||||||
const data = treeFolders;
|
|
||||||
const dataItem = data.find((x) => x.id === rootFolderId);
|
|
||||||
dataItem.newItems = newItems ? dataItem.newItems - 1 : 0; //////newItems
|
|
||||||
setTreeFolders(data);
|
|
||||||
fetchFiles(this.props.selectedFolderId, filter.clone());
|
|
||||||
})
|
|
||||||
.catch((err) => toastr.error(err));
|
|
||||||
} else {
|
|
||||||
const newFolderId = this.props.selectedFolderPathParts;
|
|
||||||
newFolderId.push(item.id);
|
|
||||||
this.setState({
|
|
||||||
showNewFilesPanel: !showNewFilesPanel,
|
|
||||||
newFolderId,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
onShowNewFilesPanel = () => {
|
|
||||||
const { showNewFilesPanel } = this.state;
|
|
||||||
this.setState({ showNewFilesPanel: !showNewFilesPanel });
|
|
||||||
};
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { item, fileAction, isTrashFolder, folders } = this.props;
|
|
||||||
const {
|
|
||||||
itemTitle,
|
|
||||||
editingId,
|
|
||||||
showNewFilesPanel,
|
|
||||||
newItems,
|
|
||||||
newFolderId,
|
|
||||||
} = this.state;
|
|
||||||
const { fileExst, id } = item;
|
|
||||||
|
|
||||||
const titleWithoutExt = getTitleWithoutExst(item);
|
|
||||||
|
|
||||||
const isEdit = id === editingId && fileExst === fileAction.extension;
|
|
||||||
const linkStyles = isTrashFolder
|
|
||||||
? { noHover: true }
|
|
||||||
: { onClick: this.onFilesClick };
|
|
||||||
const showNew = item.new && item.new > 0;
|
|
||||||
|
|
||||||
return isEdit ? (
|
|
||||||
<EditingWrapperComponent
|
|
||||||
itemTitle={itemTitle}
|
|
||||||
okIcon={okIcon}
|
|
||||||
cancelIcon={cancelIcon}
|
|
||||||
renameTitle={this.renameTitle}
|
|
||||||
onKeyUpUpdateItem={this.onKeyUpUpdateItem}
|
|
||||||
onClickUpdateItem={this.onClickUpdateItem}
|
|
||||||
cancelUpdateItem={this.cancelUpdateItem}
|
|
||||||
itemId={id}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
{showNewFilesPanel && (
|
|
||||||
<NewFilesPanel
|
|
||||||
visible={showNewFilesPanel}
|
|
||||||
onClose={this.onShowNewFilesPanel}
|
|
||||||
folderId={newFolderId}
|
|
||||||
folders={folders}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<SimpleFilesTileContent
|
|
||||||
sideColor="#333"
|
|
||||||
isFile={fileExst}
|
|
||||||
onClick={this.onMobileRowClick}
|
|
||||||
disableSideInfo
|
|
||||||
>
|
>
|
||||||
<Link
|
{titleWithoutExt}
|
||||||
containerWidth="100%"
|
</Link>
|
||||||
type="page"
|
<>
|
||||||
title={titleWithoutExt}
|
{fileExst ? (
|
||||||
fontWeight="bold"
|
<div className="badges">
|
||||||
fontSize="15px"
|
<Text
|
||||||
{...linkStyles}
|
className="badge-ext"
|
||||||
color="#333"
|
as="span"
|
||||||
isTextOverflow
|
color="#A3A9AE"
|
||||||
>
|
fontSize="15px"
|
||||||
{titleWithoutExt}
|
fontWeight={600}
|
||||||
</Link>
|
title={fileExst}
|
||||||
<>
|
truncate={true}
|
||||||
{fileExst ? (
|
>
|
||||||
<div className="badges">
|
{fileExst}
|
||||||
<Text
|
</Text>
|
||||||
className="badge-ext"
|
</div>
|
||||||
as="span"
|
) : (
|
||||||
color="#A3A9AE"
|
<div className="badges">
|
||||||
fontSize="15px"
|
{!!showNew && (
|
||||||
fontWeight={600}
|
<Badge
|
||||||
title={fileExst}
|
className="badge-version"
|
||||||
truncate={true}
|
backgroundColor="#ED7309"
|
||||||
>
|
borderRadius="11px"
|
||||||
{fileExst}
|
color="#FFFFFF"
|
||||||
</Text>
|
fontSize="10px"
|
||||||
</div>
|
fontWeight={800}
|
||||||
) : (
|
label={newItems}
|
||||||
<div className="badges">
|
maxWidth="50px"
|
||||||
{!!showNew && (
|
onClick={onBadgeClick}
|
||||||
<Badge
|
padding="0 5px"
|
||||||
className="badge-version"
|
data-id={id}
|
||||||
backgroundColor="#ED7309"
|
/>
|
||||||
borderRadius="11px"
|
)}
|
||||||
color="#FFFFFF"
|
</div>
|
||||||
fontSize="10px"
|
)}
|
||||||
fontWeight={800}
|
</>
|
||||||
label={newItems}
|
</SimpleFilesTileContent>
|
||||||
maxWidth="50px"
|
</>
|
||||||
onClick={this.onBadgeClick}
|
);
|
||||||
padding="0 5px"
|
};
|
||||||
data-id={id}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
</SimpleFilesTileContent>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default inject(
|
export default withRouter(
|
||||||
(
|
withTranslation("Home")(withContentActions(FilesTileContent))
|
||||||
{ auth, filesStore, formatsStore, treeFoldersStore, selectedFolderStore },
|
);
|
||||||
{ item }
|
|
||||||
) => {
|
|
||||||
const { culture } = auth.settingsStore;
|
|
||||||
const {
|
|
||||||
iconFormatsStore,
|
|
||||||
mediaViewersFormatsStore,
|
|
||||||
docserviceStore,
|
|
||||||
} = formatsStore;
|
|
||||||
const {
|
|
||||||
folders,
|
|
||||||
fetchFiles,
|
|
||||||
filter,
|
|
||||||
newRowItems,
|
|
||||||
createFile,
|
|
||||||
updateFile,
|
|
||||||
renameFolder,
|
|
||||||
createFolder,
|
|
||||||
setIsLoading,
|
|
||||||
isLoading,
|
|
||||||
dragging,
|
|
||||||
} = filesStore;
|
|
||||||
|
|
||||||
const {
|
|
||||||
treeFolders,
|
|
||||||
setTreeFolders,
|
|
||||||
isRecycleBinFolder,
|
|
||||||
expandedKeys,
|
|
||||||
addExpandedKeys,
|
|
||||||
} = treeFoldersStore;
|
|
||||||
|
|
||||||
const { type, extension, id } = filesStore.fileActionStore;
|
|
||||||
|
|
||||||
const fileAction = { type, extension, id };
|
|
||||||
|
|
||||||
const canWebEdit = docserviceStore.canWebEdit(item.fileExst);
|
|
||||||
const isVideo = mediaViewersFormatsStore.isVideo(item.fileExst);
|
|
||||||
const isImage = iconFormatsStore.isImage(item.fileExst);
|
|
||||||
const isSound = iconFormatsStore.isSound(item.fileExst);
|
|
||||||
|
|
||||||
return {
|
|
||||||
culture,
|
|
||||||
homepage: config.homepage,
|
|
||||||
fileAction,
|
|
||||||
folders,
|
|
||||||
rootFolderId: selectedFolderStore.pathParts,
|
|
||||||
selectedFolderId: selectedFolderStore.id,
|
|
||||||
selectedFolderPathParts: selectedFolderStore.pathParts,
|
|
||||||
newItems: selectedFolderStore.new,
|
|
||||||
parentFolder: selectedFolderStore.parentId,
|
|
||||||
isLoading,
|
|
||||||
treeFolders,
|
|
||||||
isTrashFolder: isRecycleBinFolder,
|
|
||||||
filter,
|
|
||||||
dragging,
|
|
||||||
canWebEdit,
|
|
||||||
isVideo,
|
|
||||||
isImage,
|
|
||||||
isSound,
|
|
||||||
newRowItems,
|
|
||||||
expandedKeys,
|
|
||||||
|
|
||||||
setIsLoading,
|
|
||||||
fetchFiles,
|
|
||||||
setTreeFolders,
|
|
||||||
createFile,
|
|
||||||
createFolder,
|
|
||||||
updateFile,
|
|
||||||
renameFolder,
|
|
||||||
addExpandedKeys,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
)(withRouter(withTranslation("Home")(observer(FilesTileContent))));
|
|
||||||
|
Loading…
Reference in New Issue
Block a user