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

Web: Files: fixed scrolling of hotkeys, fixed hotkeys when some dialog is open

Browse Source
This commit is contained in:
Nikita Gopienko 2022-03-11 16:57:35 +03:00
parent ac052a979d
commit 07e32b405f
5 changed files with 47 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
products/ASC.Files/Client/src/HOCs/withHotkeys.js
View File

@ -39,6 +39,7 @@ const withHotkeys = (Component) => {
hideArticle,
uploadFile,
someDialogIsOpen,
} = props;
const hotkeysFilter = {
@ -46,14 +47,24 @@ const withHotkeys = (Component) => {
ev.target?.type === "checkbox" || ev.target?.tagName !== "INPUT",
filterPreventDefault: false,
enableOnTags: ["INPUT"],
enabled: !someDialogIsOpen,
};
const onKeyDown = () => activateHotkeys();
const onKeyDown = (e) => {
activateHotkeys();
if (
["Space", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].indexOf(
e.code
) > -1
) {
e.preventDefault();
}
};
useEffect(() => {
document.addEventListener("keydown", onKeyDown);
window.addEventListener("keydown", onKeyDown);
return () => document.removeEventListener("keypress", onKeyDown);
return () => window.removeEventListener("keypress", onKeyDown);
});
//Select/deselect item
@ -260,6 +271,7 @@ const withHotkeys = (Component) => {
setHotkeyPanelVisible,
setDeleteDialogVisible,
setSelectFileDialogVisible,
someDialogIsOpen,
} = dialogsStore;
const {
isAvailableOption,
@ -300,6 +312,7 @@ const withHotkeys = (Component) => {
hideArticle,
uploadFile,
someDialogIsOpen,
};
}
)(observer(WithHotkeys));

2
products/ASC.Files/Client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js
View File

@ -219,7 +219,7 @@ const SimpleFilesRow = (props) => {
<DragAndDrop
data-title={item.title}
value={value}
className={`files-item ${className}`}
className={`files-item ${className} ${item.id}_${item.file}`}
onDrop={onDrop}
onMouseDown={onMouseDown}
dragging={dragging && isDragging}

2
products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableRow.js
View File

@ -320,7 +320,7 @@ const FilesTableRow = (props) => {
<StyledDragAndDrop
data-title={item.title}
value={value}
className={`files-item ${className} ${
className={`files-item ${className} ${item.id}_${item.fileExst} ${
showHotkeyBorder
? "table-hotkey-border"
: checkedProps || isActive

2
products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/FileTile.js
View File

@ -60,7 +60,7 @@ const FileTile = (props) => {
<DragAndDrop
data-title={item.title}
value={value}
className={`files-item ${className}`}
className={`files-item ${className} ${item.id}_${item.fileExst}`}
onDrop={onDrop}
onMouseDown={onMouseDown}
dragging={dragging && isDragging}

29
products/ASC.Files/Client/src/store/HotkeyStore.js
View File

@ -31,7 +31,7 @@ class HotkeyStore {
}
activateHotkeys = () => {
const { selection, hotkeyCaret } = this.filesStore;
const { selection, hotkeyCaret, viewAs } = this.filesStore;
if (!hotkeyCaret) {
const scroll = document.getElementsByClassName("section-scroll");
@ -42,6 +42,33 @@ class HotkeyStore {
this.filesStore.setHotkeyCaret(selection[0]);
this.filesStore.setHotkeyCaretStart(selection[0]);
}
if (!hotkeyCaret) return;
let item = document.getElementsByClassName(
`${hotkeyCaret.id}_${hotkeyCaret.fileExst}`
);
if (viewAs === "table") {
item = item[0].getElementsByClassName("table-container_cell");
}
if (item) {
const el = item[0];
const rect = el.getBoundingClientRect();
const scroll = document.getElementsByClassName("section-scroll")[0];
const scrollRect = scroll.getBoundingClientRect();
if (
scrollRect.top + scrollRect.height - rect.height > rect.top &&
scrollRect.top < rect.top + el.offsetHeight
) {
//console.log("element is visible");
} else {
el.scrollIntoView({ block: "center" });
//console.log("element is not visible");
}
}
};
selectFirstFile = () => {