Web: Files: refactoring: moved onFilesClick to withFileActions HOC

This commit is contained in:
Artem Tarasov 2021-04-23 16:21:09 +03:00
parent 9f7bc2d3f2
commit 02f16eb2e1
5 changed files with 101 additions and 90 deletions

View File

@ -8,8 +8,7 @@ import Link from "@appserver/components/link";
import Text from "@appserver/components/text";
import RowContent from "@appserver/components/row-content";
import withContentActions from "../hoc/withContentActions";
import Badges from "../sub-components/Badges";
import withContent from "../hoc/withContent";
import withBadges from "../hoc/withBadges";
const sideColor = "#A3A9AE";
@ -161,5 +160,5 @@ const FilesRowContent = ({
};
export default withRouter(
withTranslation("Home")(withContentActions(withBadges(FilesRowContent)))
withTranslation("Home")(withContent(withBadges(FilesRowContent)))
);

View File

@ -64,6 +64,7 @@ const SimpleFilesRow = createSelectable((props) => {
contextOptionsProps,
checkedProps,
element,
onFilesClick,
} = props;
return (
@ -90,7 +91,11 @@ const SimpleFilesRow = createSelectable((props) => {
{...contextOptionsProps}
contextButtonSpacerWidth={displayShareButton}
>
<FilesRowContent item={item} sectionWidth={sectionWidth} />
<FilesRowContent
item={item}
sectionWidth={sectionWidth}
onFilesClick={onFilesClick}
/>
</StyledSimpleFilesRow>
</DragAndDrop>
</div>

View File

@ -162,7 +162,7 @@ export default function withBadges(WrappedComponent) {
canWebEdit,
isTrashFolder,
canConvert,
onFilesClick, // from withContentAction HOC
onFilesClick, // from withFileAction HOC
} = this.props;
const { fileStatus, access } = item;

View File

@ -69,54 +69,6 @@ export default function withContentActions(WrappedContent) {
editCompleteAction(id, item, isCancel);
};
onFilesClick = () => {
const {
filter,
parentFolder,
setIsLoading,
fetchFiles,
isImage,
isSound,
isVideo,
canWebEdit,
item,
isTrashFolder,
openDocEditor,
expandedKeys,
addExpandedKeys,
setMediaViewerData,
} = this.props;
const { id, fileExst, viewUrl, providerKey, contentLength } = item;
if (isTrashFolder) return;
if (!fileExst && !contentLength) {
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);
}
if (isImage || isSound || isVideo) {
setMediaViewerData({ visible: true, id });
return;
}
return window.open(viewUrl, "_blank");
}
};
updateItem = () => {
const {
updateFile,
@ -292,6 +244,7 @@ export default function withContentActions(WrappedContent) {
viewer,
t,
isTrashFolder,
onFilesClick,
} = this.props;
const { id, fileExst, updated, createdBy, access, fileStatus } = item;
@ -312,7 +265,7 @@ export default function withContentActions(WrappedContent) {
const linkStyles = isTrashFolder //|| window.innerWidth <= 1024
? { noHover: true }
: { onClick: this.onFilesClick };
: { onClick: onFilesClick };
const newItems = item.new || fileStatus === 2;
const showNew = !!newItems;
@ -345,22 +298,12 @@ export default function withContentActions(WrappedContent) {
return inject(
(
{
filesActionsStore,
filesStore,
selectedFolderStore,
formatsStore,
treeFoldersStore,
mediaViewerDataStore,
auth,
},
{ item, t, history }
{ filesActionsStore, filesStore, treeFoldersStore, auth },
{ t, history }
) => {
const { editCompleteAction } = filesActionsStore;
const {
filter,
setIsLoading,
fetchFiles,
openDocEditor,
updateFile,
renameFolder,
@ -368,18 +311,12 @@ export default function withContentActions(WrappedContent) {
createFolder,
isLoading,
} = filesStore;
const {
iconFormatsStore,
mediaViewersFormatsStore,
docserviceStore,
} = formatsStore;
const {
isRecycleBinFolder,
expandedKeys,
addExpandedKeys,
isPrivacyFolder,
} = treeFoldersStore;
const { setMediaViewerData } = mediaViewerDataStore;
const {
type: fileActionType,
extension: fileActionExt,
@ -388,26 +325,12 @@ export default function withContentActions(WrappedContent) {
const { replaceFileStream, setEncryptionAccess } = auth;
const { culture, isDesktopClient } = auth.settingsStore;
const isImage = iconFormatsStore.isImage(item.fileExst);
const isSound = iconFormatsStore.isSound(item.fileExst);
const isVideo = mediaViewersFormatsStore.isVideo(item.fileExst);
const canWebEdit = docserviceStore.canWebEdit(item.fileExst);
return {
t,
editCompleteAction,
filter,
parentFolder: selectedFolderStore.parentId,
setIsLoading,
fetchFiles,
isImage,
isSound,
isVideo,
canWebEdit,
isTrashFolder: isRecycleBinFolder,
openDocEditor,
expandedKeys,
addExpandedKeys,
setMediaViewerData,
updateFile,
renameFolder,
fileActionId,

View File

@ -119,6 +119,54 @@ export default function withFileActions(WrappedFileItem) {
setStartDrag(true);
};
onFilesClick = () => {
const {
filter,
parentFolder,
setIsLoading,
fetchFiles,
isImage,
isSound,
isVideo,
canWebEdit,
item,
isTrashFolder,
openDocEditor,
expandedKeys,
addExpandedKeys,
setMediaViewerData,
} = this.props;
const { id, fileExst, viewUrl, providerKey, contentLength } = item;
if (isTrashFolder) return;
if (!fileExst && !contentLength) {
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);
}
if (isImage || isSound || isVideo) {
setMediaViewerData({ visible: true, id });
return;
}
return window.open(viewUrl, "_blank");
}
};
render() {
const {
item,
@ -169,6 +217,7 @@ export default function withFileActions(WrappedFileItem) {
rowContextClick={this.rowContextClick}
onDrop={this.onDrop}
onMouseDown={this.onMouseDown}
onFilesClick={this.onFilesClick}
getClassName={this.getClassName}
className={className}
isDragging={isDragging}
@ -194,12 +243,19 @@ export default function withFileActions(WrappedFileItem) {
selectedFolderStore,
filesStore,
uploadDataStore,
formatsStore,
mediaViewerDataStore,
},
{ item, t, history }
) => {
const { selectRowAction, onSelectItem } = filesActionsStore;
const { setSharingPanelVisible } = dialogsStore;
const { isPrivacyFolder, isRecycleBinFolder } = treeFoldersStore;
const {
isPrivacyFolder,
isRecycleBinFolder,
expandedKeys,
addExpandedKeys,
} = treeFoldersStore;
const { id: selectedFolderId, isRootFolder } = selectedFolderStore;
const {
dragging,
@ -210,9 +266,19 @@ export default function withFileActions(WrappedFileItem) {
fileActionStore,
canShare,
isFileSelected,
filter,
setIsLoading,
fetchFiles,
openDocEditor,
} = filesStore;
const { startUpload } = uploadDataStore;
const { type, extension, id } = fileActionStore;
const {
iconFormatsStore,
mediaViewersFormatsStore,
docserviceStore,
} = formatsStore;
const { setMediaViewerData } = mediaViewerDataStore;
const selectedItem = selection.find(
(x) => x.id === item.id && x.fileExst === item.fileExst
@ -227,6 +293,11 @@ export default function withFileActions(WrappedFileItem) {
? false
: true;
const isImage = iconFormatsStore.isImage(item.fileExst);
const isSound = iconFormatsStore.isSound(item.fileExst);
const isVideo = mediaViewersFormatsStore.isVideo(item.fileExst);
const canWebEdit = docserviceStore.canWebEdit(item.fileExst);
return {
t,
item,
@ -243,12 +314,25 @@ export default function withFileActions(WrappedFileItem) {
setStartDrag,
history,
isFolder,
isRootFolder, //??
isRootFolder,
canShare,
actionType: type,
actionExtension: extension,
actionId: id,
checked: isFileSelected(item.id, item.parentId),
filter,
parentFolder: selectedFolderStore.parentId,
setIsLoading,
fetchFiles,
isImage,
isSound,
isVideo,
canWebEdit,
isTrashFolder: isRecycleBinFolder,
openDocEditor,
expandedKeys,
addExpandedKeys,
setMediaViewerData,
};
}
)(observer(WithFileActions));