Web: Files: Tiles: added file selection when clicking on a tile
This commit is contained in:
parent
9f0c5c186b
commit
52b4f0e1f0
@ -44,6 +44,7 @@ const FileItem = createSelectable((props) => {
|
||||
viewAs,
|
||||
setTooltipPosition,
|
||||
getIcon,
|
||||
startDrag,
|
||||
} = props;
|
||||
|
||||
const {
|
||||
@ -56,7 +57,6 @@ const FileItem = createSelectable((props) => {
|
||||
providerKey,
|
||||
contentLength,
|
||||
} = item;
|
||||
|
||||
const isMobile = sectionWidth < 500;
|
||||
const getItemIcon = (isEdit) => {
|
||||
return (
|
||||
@ -176,6 +176,8 @@ const FileItem = createSelectable((props) => {
|
||||
|
||||
let className = isDragging ? " droppable" : "";
|
||||
if (draggable) className += " draggable not-selectable";
|
||||
/*if (draggable)
|
||||
className += ` draggable ${startDrag ? " not-selectable " : ""}`;*/
|
||||
|
||||
const sharedButton =
|
||||
!canShare || (isPrivacy && !fileExst) || isEdit || id <= 0 || isMobile
|
||||
@ -208,7 +210,11 @@ const FileItem = createSelectable((props) => {
|
||||
temporaryIcon={temporaryIcon}
|
||||
isPrivacy={isPrivacy}
|
||||
>
|
||||
<FilesContent item={item} viewAs={viewAs} />
|
||||
<FilesContent
|
||||
item={item}
|
||||
viewAs={viewAs}
|
||||
onLinkClick={fileContextClick}
|
||||
/>
|
||||
</Tile>
|
||||
) : (
|
||||
<SimpleFilesRow
|
||||
@ -274,6 +280,7 @@ export default inject(
|
||||
setStartDrag,
|
||||
setTooltipPosition,
|
||||
viewAs,
|
||||
startDrag,
|
||||
} = filesStore;
|
||||
const { isRootFolder, id: selectedFolderId } = selectedFolderStore;
|
||||
|
||||
@ -322,6 +329,7 @@ export default inject(
|
||||
setTooltipPosition,
|
||||
viewAs,
|
||||
getIcon,
|
||||
startDrag,
|
||||
};
|
||||
}
|
||||
)(withRouter(withTranslation("Home")(observer(FileItem))));
|
||||
|
@ -244,6 +244,8 @@ class FilesContent extends React.Component {
|
||||
|
||||
if (isTrashFolder) return;
|
||||
|
||||
this.props.onLinkClick();
|
||||
|
||||
if (!fileExst && !contentLength) {
|
||||
setIsLoading(true);
|
||||
|
||||
@ -463,10 +465,6 @@ class FilesContent extends React.Component {
|
||||
id,
|
||||
fileExst,
|
||||
access,
|
||||
locked,
|
||||
fileStatus,
|
||||
title,
|
||||
versionGroup,
|
||||
createdBy,
|
||||
updated,
|
||||
providerKey,
|
||||
@ -481,7 +479,7 @@ class FilesContent extends React.Component {
|
||||
access === ShareAccessRights.FullAccess ||
|
||||
access === ShareAccessRights.None; // TODO: fix access type for owner (now - None)
|
||||
|
||||
const showNew = !!newItems; // in tile const showNew = item.new && item.new > 0;
|
||||
const showNew = !!newItems;
|
||||
|
||||
const fileOwner =
|
||||
createdBy &&
|
||||
|
@ -159,9 +159,13 @@ class Tile extends React.Component {
|
||||
|
||||
this.cm = React.createRef();
|
||||
this.tile = React.createRef();
|
||||
|
||||
this.state = {
|
||||
checkedCheckbox: false,
|
||||
};
|
||||
}
|
||||
|
||||
getIconFile() {
|
||||
getIconFile = () => {
|
||||
const { item, temporaryIcon } = this.props;
|
||||
|
||||
const icon = item.thumbnail ? item.thumbnail : temporaryIcon;
|
||||
@ -169,7 +173,21 @@ class Tile extends React.Component {
|
||||
if (!item.thumbnail) className += " temporary-icon";
|
||||
|
||||
return <ReactSVG className={className} src={icon} loading={svgLoader} />;
|
||||
}
|
||||
};
|
||||
|
||||
onClickHandler = (e) => {
|
||||
const { onSelect, item } = this.props;
|
||||
if (e.target.closest(".checkbox") || e.target.tagName === "INPUT") return;
|
||||
|
||||
this.setState({ checkedCheckbox: !this.state.checkedCheckbox });
|
||||
onSelect && onSelect(!this.state.checkedCheckbox, item);
|
||||
};
|
||||
|
||||
changeCheckbox = (e) => {
|
||||
const { onSelect, item } = this.props;
|
||||
this.setState({ checkedCheckbox: e.target.checked });
|
||||
onSelect && onSelect(e.target.checked, item);
|
||||
};
|
||||
|
||||
render() {
|
||||
//console.log("Row render");
|
||||
@ -202,10 +220,6 @@ class Tile extends React.Component {
|
||||
Object.prototype.hasOwnProperty.call(this.props, "contextOptions") &&
|
||||
contextOptions.length > 0;
|
||||
|
||||
const changeCheckbox = (e) => {
|
||||
onSelect && onSelect(e.target.checked, item);
|
||||
};
|
||||
|
||||
const getOptions = () => {
|
||||
rowContextClick && rowContextClick();
|
||||
return contextOptions;
|
||||
@ -227,6 +241,7 @@ class Tile extends React.Component {
|
||||
{...this.props}
|
||||
onContextMenu={onContextMenu}
|
||||
dragging={dragging && isFolder}
|
||||
onClick={this.onClickHandler}
|
||||
>
|
||||
{isFolder ? (
|
||||
<>
|
||||
@ -235,7 +250,7 @@ class Tile extends React.Component {
|
||||
<Checkbox
|
||||
isChecked={checked}
|
||||
isIndeterminate={indeterminate}
|
||||
onChange={changeCheckbox}
|
||||
onChange={this.changeCheckbox}
|
||||
/>
|
||||
</StyledCheckbox>
|
||||
)}
|
||||
@ -264,7 +279,7 @@ class Tile extends React.Component {
|
||||
<Checkbox
|
||||
isChecked={checked}
|
||||
isIndeterminate={indeterminate}
|
||||
onChange={changeCheckbox}
|
||||
onChange={this.changeCheckbox}
|
||||
/>
|
||||
</StyledCheckbox>
|
||||
)}
|
||||
|
Loading…
Reference in New Issue
Block a user