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

Web: Files: Tile: refactoring

Browse Source
This commit is contained in:
Artem Tarasov 2021-04-01 10:08:07 +03:00
parent e7d9c9b9d5
commit c6a462168c
10 changed files with 207 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -27,7 +27,7 @@ import { TIMEOUT } from "../../../../../../helpers/constants";
import { getTitleWithoutExst } from "../../../../../../helpers/files-helpers";
import { NewFilesPanel } from "../../../../../panels";
import { ConvertDialog } from "../../../../../dialogs";
import EditingWrapperComponent from "../FilesTile/EditingWrapperComponent";
import EditingWrapperComponent from "../sub-components/EditingWrapperComponent";
import { isMobile } from "react-device-detect";
import { observer, inject } from "mobx-react";
import config from "../../../../../../../package.json";

152
products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesTile/FileTIle.js Normal file
View File

@ -0,0 +1,152 @@
import React from "react";
import { ReactSVG } from "react-svg";
import styled from "styled-components";
import { inject, observer } from "mobx-react";
import { withTranslation } from "react-i18next";
import DragAndDrop from "@appserver/components/drag-and-drop";
import { withRouter } from "react-router-dom";
import Tile from "./sub-components/Tile";
import FilesTileContent from "./FilesTileContent";
const FileTile = (props) => {
const {
t,
history,
item,
actionType,
actionExtension,
dragging,
getContextOptions,
checked,
selectRowAction,
} = props;
const {
id,
isFolder,
access,
draggable,
icon,
fileExst,
isPrivacy,
actionId,
contextOptions,
} = item;
const getItemIcon = (isEdit) => {
const svgLoader = () => <div style={{ width: "24px" }}></div>;
return (
<>
<ReactSVG
className={`react-svg-icon${isEdit ? " is-edit" : ""}`}
src={icon}
loading={svgLoader}
/>
{isPrivacy && fileExst && <EncryptedFileIcon isEdit={isEdit} />}
</>
);
};
const onDrop = (items) => {
if (!fileExst) {
onDropZoneUpload(items, item.id);
} else {
onDropZoneUpload(items, selectedFolderId);
}
};
const onContentRowSelect = (checked, file) => {
if (!file) return;
selectRowAction(checked, file);
};
let classNameProp =
isFolder && access < 2 && !props.isRecycleBin
? { className: " dropable" }
: {};
if (draggable) classNameProp.className += " draggable";
const isEdit =
!!actionType && actionId === id && fileExst === actionExtension;
const element = getItemIcon(isEdit || id <= 0, item);
const contextOptionsProps =
!isEdit && contextOptions && contextOptions.length > 0
? {
contextOptions: getContextOptions(item, t, history),
}
: {};
let value = fileExst ? `file_${id}` : `folder_${id}`;
value += draggable ? "_draggable" : "";
const checkedProps = isEdit || id <= 0 ? {} : { checked };
console.log(isFolder);
return (
<DragAndDrop
{...classNameProp}
onDrop={onDrop} //this.onDrop.bind(this, item)}
//onMouseDown={this.onMouseDown}
dragging={dragging && isFolder && access < 2}
key={`dnd-key_${id}`}
{...contextOptionsProps}
value={value}
isFolder={isFolder}
>
<Tile
key={id}
item={item}
isFolder={isFolder}
element={element}
onSelect={onContentRowSelect}
//editing={editingId}
//viewAs={viewAs}
{...checkedProps}
{...contextOptionsProps}
//needForUpdate={this.needForUpdate}
>
<FilesTileContent
item={item}
//viewer={viewer}
//culture={culture}
//onEditComplete={this.onEditComplete} !!!
//onMediaFileClick={this.onMediaFileClick} !!!
//openDocEditor={this.openDocEditor}
/>
</Tile>
</DragAndDrop>
);
};
export default inject(
(
{ filesStore, initFilesStore, contextOptionsStore, filesActionsStore },
{ item }
) => {
const {
type: actionType,
extension: actionExtension,
} = filesStore.fileActionStore;
const { dragging, setDragging } = initFilesStore;
const { getContextOptions } = contextOptionsStore;
const { selectRowAction } = filesActionsStore;
const { selection } = filesStore;
return {
actionType,
actionExtension,
dragging,
setDragging,
getContextOptions,
checked: selection.some((el) => el.id === item.id),
selectRowAction,
};
}
)(withTranslation("Home")(observer(withRouter(FileTile))));

71
products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesTile/FilesTileContainer.js
View File

@ -4,16 +4,19 @@ import { withRouter } from "react-router-dom";
import { ReactSVG } from "react-svg";
import { Consumer } from "@appserver/components/utils/context";
import { withTranslation } from "react-i18next";
import TileContainer from "./TileContainer";
import TileContainer from "./sub-components/TileContainer";
import FilesTileContent from "./FilesTileContent";
import Tile from "./Tile";
import Tile from "./sub-components/Tile";
import DragAndDrop from "@appserver/components/drag-and-drop";
import FileTile from "./FileTile";
const FilesTileContainer = ({
t,
filesList,
fileActionType,
history,
getContextOptions,
...props
}) => {
const getItemIcon = (isEdit, item) => {
@ -44,20 +47,50 @@ const FilesTileContainer = ({
headingFiles={t("Files")}
>
{filesList.map((item) => {
const { checked, isFolder, value, contextOptions } = item;
return <FileTile key={item.id} item={item} />;
})}
</TileContainer>
)}
</Consumer>
);
};
export default inject(
({ filesStore, contextOptionsStore, treeFoldersStore }) => {
const { filesList, fileActionStore } = filesStore;
const { type: fileActionType } = fileActionStore; //
const { getContextOptions } = contextOptionsStore;
const { isRecycleBinFolder, isPrivacyFolder } = treeFoldersStore;
return {
filesList,
fileActionType,
getContextOptions,
isPrivacy: isPrivacyFolder,
isRecycleBin: isRecycleBinFolder,
};
}
)(withTranslation("Home")(observer(withRouter(FilesTileContainer))));
/**
* const { checked, isFolder, value, contextOptions } = item;
console.log(value);//
const isEdit =
!!fileActionType &&
editingId === item.id &&
item.fileExst === fileActionExtension;
item.fileExst === fileActionExtension; //
const contextOptionsProps =
!isEdit && contextOptions && contextOptions.length > 0
? {
contextOptions: props.getContextOptions(item, t, history),
contextOptions: getContextOptions(item, t, history),
}
: {};
const checkedProps = isEdit || item.id <= 0 ? {} : { checked };
const element = getItemIcon(isEdit || item.id <= 0, item);
const checkedProps = isEdit || item.id <= 0 ? {} : { checked };
const element = getItemIcon(isEdit || item.id <= 0, item); //
//
let classNameProp =
isFolder && item.access < 2 && !props.isRecycleBin
? { className: " dropable" }
@ -99,26 +132,4 @@ const FilesTileContainer = ({
</Tile>
</DragAndDrop>
);
})}
</TileContainer>
)}
</Consumer>
);
};
export default inject(
({ filesStore, contextOptionsStore, treeFoldersStore }) => {
const { filesList, fileActionStore } = filesStore;
const { type: fileActionType } = fileActionStore;
const { getContextOptions } = contextOptionsStore;
const { isRecycleBinFolder, isPrivacyFolder } = treeFoldersStore;
return {
filesList,
fileActionType,
getContextOptions,
isPrivacy: isPrivacyFolder,
isRecycleBin: isRecycleBinFolder,
};
}
)(withTranslation("Home")(observer(withRouter(FilesTileContainer))));
*/

6
products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesTile/FilesTileContent.js
View File

@ -10,8 +10,8 @@ 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 "./EditingWrapperComponent";
import TileContent from "./TileContent";
import EditingWrapperComponent from "../sub-components/EditingWrapperComponent";
import TileContent from "./sub-components/TileContent";
import { isMobile } from "react-device-detect";
import { inject, observer } from "mobx-react";
import CheckIcon from "../../../../../../../public/images/check.react.svg";
@ -90,6 +90,8 @@ class FilesTileContent extends React.PureComponent {
titleWithoutExt = this.getDefaultName(props.fileAction.extension);
}
console.log(props.item);
this.state = {
itemTitle: titleWithoutExt,
editingId: props.fileAction.id,

8
products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesTile/BadgesFileTile.js → products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesTile/sub-components/BadgesFileTile.js
View File

@ -3,10 +3,10 @@ import { withRouter } from "react-router";
import styled from "styled-components";
import Badge from "@appserver/components/badge";
import { inject, observer } from "mobx-react";
import FileActionsConvertEditDocIcon from "../../../../../../../public/images/file.actions.convert.edit.doc.react.svg";
import FileActionsLockedIcon from "../../../../../../../public/images/file.actions.locked.react.svg";
import AccessEditIcon from "../../../../../../../public/images/access.edit.react.svg";
import FileActionsConvertIcon from "../../../../../../../public/images/access.edit.react.svg";
import FileActionsConvertEditDocIcon from "../../../../../../../../public/images/file.actions.convert.edit.doc.react.svg";
import FileActionsLockedIcon from "../../../../../../../../public/images/file.actions.locked.react.svg";
import AccessEditIcon from "../../../../../../../../public/images/access.edit.react.svg";
import FileActionsConvertIcon from "../../../../../../../../public/images/access.edit.react.svg";
import commonIconsStyles from "@appserver/components/utils/common-icons-style";
const StyledBadgesFileTile = styled.div`

2
products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesTile/Tile.js → products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesTile/sub-components/Tile.js
View File

@ -129,6 +129,8 @@ class Tile extends React.Component {
isFolder,
} = this.props;
console.log(isFolder, "tile");
const renderCheckbox = Object.prototype.hasOwnProperty.call(
this.props,
"checked"

3
products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesTile/TileContainer.js → products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesTile/sub-components/TileContainer.js
View File

@ -128,7 +128,8 @@ class TileContainer extends React.PureComponent {
const Files = [];
children.forEach((item, index) => {
if (item.props.isFolder) {
console.log(item.props);
if (item.props.item.isFolder) {
Folders.push(
<div
className="tileItemWrapper folder"

0
products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesTile/TileContent.js → products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesTile/sub-components/TileContent.js
View File

0
products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesTile/EditingWrapperComponent.js → products/ASC.Files/Client/src/components/pages/Home/Section/Body/sub-components/EditingWrapperComponent.js
View File

2
products/ASC.Files/Client/src/store/ContextOptionsStore.js
View File

@ -93,7 +93,7 @@ class ContextOptionsStore {
};
lockFile = () => {
const { id } = filesStore.selection[0];
const { id, locked } = filesStore.selection[0];
lockFileAction(id, !locked).catch((err) => toastr.error(err));
};