Merge pull request #391 from ONLYOFFICE/bugfix/Bug-52897

Bugfix/bug 52897
This commit is contained in:
Alexey Safronov 2021-10-11 13:24:23 +03:00 committed by GitHub
commit dd3b65114c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 70 additions and 13 deletions

View File

@ -435,7 +435,8 @@ class ContextMenu extends Component {
bindDocumentClickListener() {
if (!this.documentClickListener) {
this.documentClickListener = (e) => {
if (this.isOutsideClicked(e) && e.button !== 2) {
if (this.isOutsideClicked(e)) {
//TODO: (&& e.button !== 2) restore after global usage
this.hide(e);
this.setState({
@ -445,6 +446,7 @@ class ContextMenu extends Component {
};
document.addEventListener("click", this.documentClickListener);
document.addEventListener("mousedown", this.documentClickListener);
}
}
@ -476,6 +478,7 @@ class ContextMenu extends Component {
unbindDocumentClickListener() {
if (this.documentClickListener) {
document.removeEventListener("click", this.documentClickListener);
document.removeEventListener("mousedown", this.documentClickListener);
this.documentClickListener = null;
}
}

View File

@ -9,6 +9,7 @@ import Checkbox from "../checkbox";
const TableRow = (props) => {
const {
fileContextClick,
onHideContextMenu,
children,
contextOptions,
checked,
@ -74,7 +75,11 @@ const TableRow = (props) => {
forwardedRef={row}
className={`${selectionProp?.className} table-container_row-context-menu-wrapper`}
>
<ContextMenu ref={cm} model={contextOptions}></ContextMenu>
<ContextMenu
onHide={onHideContextMenu}
ref={cm}
model={contextOptions}
></ContextMenu>
{renderContext ? (
<ContextMenuButton
color="#A3A9AE"
@ -105,6 +110,7 @@ TableRow.propTypes = {
checked: PropTypes.bool,
element: PropTypes.any,
onContentSelect: PropTypes.func,
onHideContextMenu: PropTypes.func,
item: PropTypes.object,
selectionProp: PropTypes.object,
className: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),

View File

@ -15,6 +15,7 @@ import config from "../../package.json";
import EditingWrapperComponent from "../components/EditingWrapperComponent";
import { getTitleWithoutExst } from "../helpers/files-helpers";
import { getDefaultFileName } from "../helpers/utils";
import ItemIcon from "../components/ItemIcon";
export default function withContent(WrappedContent) {
class WithContent extends React.Component {
constructor(props) {
@ -274,11 +275,16 @@ export default function withContent(WrappedContent) {
const newItems = item.new || fileStatus === 2;
const showNew = !!newItems;
const elementIcon = element ? (
element
) : (
<ItemIcon id={item.id} icon={item.icon} fileExst={item.fileExst} />
);
return isEdit ? (
<EditingWrapperComponent
className={"editing-wrapper-component"}
elementIcon={element}
elementIcon={elementIcon}
itemTitle={itemTitle}
itemId={id}
viewAs={viewAs}

View File

@ -26,6 +26,10 @@ export default function withFileActions(WrappedFileItem) {
id !== -1 && onSelectItem({ id, isFolder });
};
onHideContextMenu = () => {
//this.props.setBufferSelection(null);
};
onDropZoneUpload = (files, uploadToFolder) => {
const { t, dragging, setDragging, startUpload } = this.props;
@ -52,6 +56,8 @@ export default function withFileActions(WrappedFileItem) {
isTrashFolder,
onSelectItem,
item,
setBufferSelection,
isActive,
} = this.props;
const { id, isFolder } = item;
@ -59,15 +65,20 @@ export default function withFileActions(WrappedFileItem) {
const notSelectable = e.target.classList.contains("not-selectable");
const isFileName = e.target.classList.contains("item-file-name");
if (isPrivacy || isTrashFolder || (!draggable && !isFileName)) return e;
if (
isPrivacy ||
isTrashFolder ||
(!draggable && !isFileName && !isActive)
)
return e;
if (window.innerWidth < 1025 || notSelectable || isMobile) {
return e;
}
if (!draggable) {
id !== -1 && onSelectItem({ id, isFolder });
}
// if (!draggable) {
// id !== -1 && onSelectItem({ id, isFolder });
// }
const mouseButton = e.which
? e.which !== 1
@ -81,6 +92,7 @@ export default function withFileActions(WrappedFileItem) {
e.preventDefault();
setTooltipPosition(e.pageX, e.pageY);
setStartDrag(true);
setBufferSelection(null);
};
onMarkAsRead = (id) =>
@ -256,6 +268,7 @@ export default function withFileActions(WrappedFileItem) {
onMouseDown={this.onMouseDown}
onFilesClick={this.onFilesClick}
onMouseClick={this.onMouseClick}
onHideContextMenu={this.onHideContextMenu}
getClassName={this.getClassName}
className={className}
isDragging={isDragging}
@ -318,6 +331,8 @@ export default function withFileActions(WrappedFileItem) {
openDocEditor,
getFolderInfo,
viewAs,
bufferSelection,
setBufferSelection,
} = filesStore;
const { startUpload } = uploadDataStore;
const { type, extension, id } = fileActionStore;
@ -341,6 +356,12 @@ export default function withFileActions(WrappedFileItem) {
const canConvert = docserviceStore.canConvert(item.fileExst);
const canViewedDocs = docserviceStore.canViewedDocs(item.fileExst);
const isActive =
bufferSelection &&
bufferSelection.id === item.id &&
bufferSelection.fileExst === item.fileExst &&
!selection.length; // need for select row item
return {
t,
item,
@ -383,6 +404,9 @@ export default function withFileActions(WrappedFileItem) {
personal: auth.settingsStore.personal,
isItemsSelected: selection.length > 0,
setNewBadgeCount,
isActive,
setBufferSelection,
bufferSelection,
};
}
)(observer(WithFileActions));

View File

@ -53,7 +53,7 @@ const StyledWrapper = styled.div`
`;
const StyledSimpleFilesRow = styled(Row)`
${(props) => props.checked && checkedStyle};
${(props) => (props.checked || props.isActive) && checkedStyle};
${(props) => props.dragging && draggingStyle}
position: unset;
cursor: ${(props) => props.checked && `url(images/cursor.palm.svg), auto`};
@ -116,6 +116,7 @@ const SimpleFilesRow = (props) => {
onMouseClick,
isEdit,
showShare,
isActive,
} = props;
const sharedButton =
@ -158,6 +159,7 @@ const SimpleFilesRow = (props) => {
{...contextOptionsProps}
contextButtonSpacerWidth={displayShareButton}
dragging={dragging && isDragging}
isActive={isActive}
>
<FilesRowContent
item={item}

View File

@ -54,8 +54,10 @@ const contextMenuWrapperDraggingHoverStyle = css`
const StyledTableRow = styled(TableRow)`
.table-container_cell {
background: ${(props) => props.checked && "#F3F4F4 !important"};
cursor: ${(props) => props.checked && "url(images/cursor.palm.svg), auto"};
background: ${(props) =>
(props.checked || props.isActive) && "#F3F4F4 !important"};
cursor: ${(props) =>
(props.checked || props.isActive) && "url(images/cursor.palm.svg), auto"};
}
&:hover {
@ -158,6 +160,8 @@ const FilesTableRow = (props) => {
onMouseDown,
showShare,
personal,
isActive,
onHideContextMenu,
} = props;
const sharedButton =
@ -225,6 +229,8 @@ const FilesTableRow = (props) => {
onClick={onMouseClick}
{...contextOptionsProps}
checked={checkedProps}
isActive={isActive}
onHideContextMenu={onHideContextMenu}
>
<TableCell {...dragStyles} {...selectionProp}>
<FileNameCell {...props} />

View File

@ -35,6 +35,7 @@ const FilesTile = (props) => {
onFilesClick,
onMouseClick,
showShare,
isActive,
} = props;
const temporaryIcon = getIcon(
96,
@ -86,6 +87,7 @@ const FilesTile = (props) => {
checked={checkedProps}
{...contextOptionsProps}
contextButtonSpacerWidth={displayShareButton}
isActive={isActive}
>
<FilesTileContent
item={item}

View File

@ -50,7 +50,7 @@ const StyledTile = styled.div`
${(props) => props.isFolder && FlexBoxStyles}
${(props) => props.isFolder && FolderStyles}
${(props) => props.checked && checkedStyle}
${(props) => (props.checked || props.isActive) && checkedStyle}
${(props) =>
props.isFolder &&
css`
@ -91,7 +91,7 @@ const StyledTile = styled.div`
&:before,
&:after {
${(props) => props.checked && checkedStyle};
${(props) => (props.checked || props.isActive) && checkedStyle};
}
&:hover:before,
@ -293,6 +293,7 @@ class Tile extends React.PureComponent {
dragging,
isRecycleBin,
item,
isActive,
} = this.props;
const { isFolder, id, fileExst } = item;
@ -334,6 +335,7 @@ class Tile extends React.PureComponent {
isFolder={(isFolder && !fileExst) || (!fileExst && id === -1)}
isRecycleBin={isRecycleBin}
checked={checked}
isActive={isActive}
>
{isFolder || (!fileExst && id === -1) ? (
<>

View File

@ -28,6 +28,7 @@ const SectionBodyContent = (props) => {
moveDragItems,
viewAs,
setSelection,
setBufferSelection,
tooltipPageX,
tooltipPageY,
} = props;
@ -65,8 +66,10 @@ const SectionBodyContent = (props) => {
e.target.closest(".scroll-body") &&
!e.target.closest(".files-item") &&
!e.target.closest(".not-selectable")
)
) {
setSelection([]);
setBufferSelection(null);
}
};
const onMouseMove = (e) => {
@ -223,6 +226,7 @@ export default inject(
setSelection,
tooltipPageX,
tooltipPageY,
setBufferSelection,
} = filesStore;
return {
@ -240,6 +244,7 @@ export default inject(
moveDragItems: filesActionsStore.moveDragItems,
viewAs,
setSelection,
setBufferSelection,
tooltipPageX,
tooltipPageY,
};

View File

@ -439,6 +439,7 @@ class FilesActionStore {
openLocationAction = (locationId, isFolder) => {
const locationFilter = isFolder ? this.filesStore.filter : null;
this.filesStore.setBufferSelection(null);
return this.filesStore.fetchFiles(locationId, locationFilter);
/*.then(() =>
//isFolder ? null : this.selectRowAction(!checked, item)