Web: Files: Tile: refactoring
This commit is contained in:
parent
e7d9c9b9d5
commit
c6a462168c
@ -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";
|
||||
|
@ -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))));
|
@ -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))));
|
||||
*/
|
||||
|
@ -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,
|
||||
|
@ -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`
|
@ -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"
|
@ -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"
|
@ -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));
|
||||
};
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user