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

Web: Files: added hotkeys support for tile view

Browse Source
This commit is contained in:
Nikita Gopienko 2022-02-02 17:41:29 +03:00
parent 20474796c5
commit 3016c191d4
4 changed files with 188 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,17 +17,27 @@ const withHotkeys = (Component) => {
nextForTileDown,
prevForTileUp,
viewAs,
selectionsDown,
selectionsUp,
hotkeyCaretStart,
setHotkeyCaretStart,
setHotkeyPanelVisible,
} = props;
//Select item
useHotkeys(
"x",
() => (selection.length ? setSelection([]) : setSelection([firstFile])),
[selection]
() => {
if (selection.length) setSelection([]);
else {
setSelection([firstFile]);
setHotkeyCaretStart(null);
}
},
[selection, firstFile]
);
//Select bottom element
// TODO: tile view
useHotkeys(
"j, DOWN",
() => {
@ -39,7 +49,6 @@ const withHotkeys = (Component) => {
);
//Select upper item
// TODO: tile view
useHotkeys(
"k, UP",
() => {
@ -54,8 +63,13 @@ const withHotkeys = (Component) => {
useHotkeys(
"h, LEFT",
() => {
if (!selection.length) setSelection([firstFile]);
else if (prevFile) setSelection([prevFile]);
if (!selection.length) {
setSelection([firstFile]);
setHotkeyCaretStart(firstFile);
} else if (prevFile) {
setSelection([prevFile]);
setHotkeyCaretStart(prevFile);
}
},
[prevFile, selection, firstFile]
);
@ -64,8 +78,13 @@ const withHotkeys = (Component) => {
useHotkeys(
"l, RIGHT",
() => {
if (!selection.length) setSelection([firstFile]);
else if (nextFile) setSelection([nextFile]);
if (!selection.length) {
setSelection([firstFile]);
setHotkeyCaretStart(firstFile);
} else if (nextFile) {
setSelection([nextFile]);
setHotkeyCaretStart(nextFile);
}
},
[nextFile, selection, firstFile]
);
@ -74,8 +93,17 @@ const withHotkeys = (Component) => {
useHotkeys(
"shift+DOWN",
() => {
if (!hotkeyCaretStart) setHotkeyCaretStart(hotkeyCaret);
if (!selection.length) setSelection([firstFile]);
else if (nextFile) {
if (viewAs === "tile") {
if (nextForTileDown.id === hotkeyCaret.id) return;
setSelection([
...selectionsDown,
...[hotkeyCaretStart ? hotkeyCaretStart : hotkeyCaret],
]);
setHotkeyCaret(nextForTileDown);
} else if (nextFile) {
if (selection.findIndex((f) => f.id === nextFile.id) !== -1) {
deselectFile(hotkeyCaret);
} else {
@ -84,15 +112,33 @@ const withHotkeys = (Component) => {
setHotkeyCaret(nextFile);
}
},
[nextFile, selection, firstFile]
[
viewAs,
nextFile,
selection,
firstFile,
nextForTileDown,
selectionsDown,
hotkeyCaretStart,
hotkeyCaret,
]
);
//Expand Selection UP
useHotkeys(
"shift+UP",
() => {
if (!hotkeyCaretStart) setHotkeyCaretStart(hotkeyCaret);
if (!selection.length) setSelection([firstFile]);
else if (prevFile) {
if (viewAs === "tile") {
if (prevForTileUp.id === hotkeyCaret.id) return;
setSelection([
...selectionsUp,
...[hotkeyCaretStart ? hotkeyCaretStart : hotkeyCaret],
]);
setHotkeyCaret(prevForTileUp);
} else if (prevFile) {
if (selection.findIndex((f) => f.id === prevFile.id) !== -1) {
deselectFile(hotkeyCaret);
} else {
@ -102,11 +148,19 @@ const withHotkeys = (Component) => {
setHotkeyCaret(prevFile);
}
},
[prevFile, selection, firstFile]
[
viewAs,
prevFile,
selection,
firstFile,
prevForTileUp,
selectionsUp,
hotkeyCaret,
hotkeyCaretStart,
]
);
//Expand Selection RIGHT
// TODO: tile view
useHotkeys(
"shift+RIGHT",
() => {
@ -124,7 +178,6 @@ const withHotkeys = (Component) => {
);
//Expand Selection LEFT
// TODO: tile view
useHotkeys(
"shift+LEFT",
() => {
@ -152,10 +205,13 @@ const withHotkeys = (Component) => {
setSelected("none");
});
//Open hotkeys panel
useHotkeys("Ctrl+num_divide, Ctrl+/", () => setHotkeyPanelVisible(true));
return <Component {...props} />;
};
return inject(({ filesStore }, { sectionWidth }) => {
return inject(({ filesStore, dialogsStore }, { sectionWidth }) => {
const {
selection,
setSelection,
@ -163,6 +219,8 @@ const withHotkeys = (Component) => {
setSelected,
hotkeyCaret,
setHotkeyCaret,
setHotkeyCaretStart,
hotkeyCaretStart,
deselectFile,
viewAs,
files,
@ -176,6 +234,7 @@ const withHotkeys = (Component) => {
let caretIndex = -1;
let prevCaretIndex, nextCaretIndex, prevFile, nextFile;
let indexForNextTile, indexForPrevTile;
let nextForTileDown, prevForTileUp;
if (filesList.length && selection.length && hotkeyCaret) {
@ -211,8 +270,7 @@ const withHotkeys = (Component) => {
//Next tile
if (nextForTileDown.isFolder !== isFolder) {
const indexForNextTile =
caretIndex + countTilesInRow - countOfMissingFiles;
indexForNextTile = caretIndex + countTilesInRow - countOfMissingFiles;
nextForTileDown =
foldersLength - caretIndex - 1 <= division || division === 0
@ -220,21 +278,111 @@ const withHotkeys = (Component) => {
? filesList[indexForNextTile]
: files[0]
: folders[foldersLength - 1];
} else if (!nextTileFile) {
// const pp = filesList.findIndex((f) => f.id === nextForTileDown?.id);
// if (pp < caretIndex + countTilesInRow) {
// nextForTileDown = hotkeyCaret;
// }
}
//Prev tile
if (prevForTileUp.isFolder !== isFolder) {
const indexForPrevTile =
caretIndex - countTilesInRow + countOfMissingFiles;
indexForPrevTile = caretIndex - countTilesInRow + countOfMissingFiles;
prevForTileUp = filesList[indexForPrevTile]
? filesList[indexForPrevTile].isFolder
? filesList[indexForPrevTile]
: folders[foldersLength - 1]
: folders[foldersLength - 1];
} else if (!prevTileFile) {
prevForTileUp = hotkeyCaret;
}
}
//shift
const hotkeyCaretStartIndex = filesList.findIndex(
(f) => f.id === hotkeyCaretStart?.id
);
const selectionsDown = [];
const selectionsUp = [];
const firstSelectionIndex = filesList.findIndex(
(f) => f.id === selection[0]?.id
);
//shift select down
const nextForTileDownIndex = filesList.findIndex(
(f) => f.id === nextForTileDown?.id
);
let nextForTileDownItemIndex = nextForTileDownIndex;
const itemIndexDown =
hotkeyCaretStartIndex !== -1 &&
hotkeyCaretStartIndex < firstSelectionIndex
? hotkeyCaretStartIndex
: firstSelectionIndex;
if (itemIndexDown !== -1 && viewAs === "tile") {
if (nextForTileDownItemIndex === -1)
nextForTileDownItemIndex = itemIndexDown + countTilesInRow;
if (nextForTileDownItemIndex > itemIndexDown) {
while (nextForTileDownItemIndex !== itemIndexDown) {
if (hotkeyCaretStartIndex - nextForTileDownItemIndex <= 0)
selectionsDown.push(filesList[nextForTileDownItemIndex]);
nextForTileDownItemIndex--;
}
}
let counterToDown = 0;
if (nextForTileDownIndex < hotkeyCaretStartIndex) {
counterToDown = hotkeyCaretStartIndex - nextForTileDownIndex;
}
while (counterToDown !== 0) {
selectionsDown.push(filesList[hotkeyCaretStartIndex - counterToDown]);
counterToDown--;
}
//console.log("selectionsDown", selectionsDown);
}
const prevForTileUpIndex = filesList.findIndex(
(f) => f.id === prevForTileUp?.id
);
let prevForTileUpItemIndex = prevForTileUpIndex;
const itemIndexUp =
hotkeyCaretStartIndex !== -1 &&
hotkeyCaretStartIndex > firstSelectionIndex
? hotkeyCaretStartIndex
: firstSelectionIndex;
//shift select up
if (itemIndexUp !== -1 && viewAs === "tile") {
if (prevForTileUpItemIndex === -1)
prevForTileUpItemIndex = itemIndexUp - countTilesInRow;
if (prevForTileUpItemIndex < itemIndexUp) {
while (prevForTileUpItemIndex !== itemIndexUp) {
if (prevForTileUpItemIndex - hotkeyCaretStartIndex <= 0)
selectionsUp.push(filesList[prevForTileUpItemIndex]);
prevForTileUpItemIndex++;
}
let counterToUp = 0;
if (prevForTileUpIndex > hotkeyCaretStartIndex) {
counterToUp = prevForTileUpIndex - hotkeyCaretStartIndex;
}
while (counterToUp !== 0) {
selectionsUp.push(filesList[hotkeyCaretStartIndex + counterToUp]);
counterToUp--;
}
}
}
//console.log("selectionsUp", selectionsUp);
return {
selection,
setSelection,
@ -248,6 +396,12 @@ const withHotkeys = (Component) => {
nextForTileDown,
prevForTileUp,
viewAs,
selectionsDown,
selectionsUp,
setHotkeyCaretStart,
hotkeyCaretStart,
setHotkeyPanelVisible: dialogsStore.setHotkeyPanelVisible,
};
})(observer(WithHotkeys));
};

4
products/ASC.Files/Client/src/pages/Home/Section/Body/index.js
View File

@ -31,6 +31,7 @@ const SectionBodyContent = (props) => {
setBufferSelection,
tooltipPageX,
tooltipPageY,
setHotkeyCaretStart,
} = props;
useEffect(() => {
@ -70,6 +71,7 @@ const SectionBodyContent = (props) => {
) {
setSelection([]);
setBufferSelection(null);
setHotkeyCaretStart(null);
}
};
@ -212,6 +214,7 @@ export default inject(
tooltipPageX,
tooltipPageY,
setBufferSelection,
setHotkeyCaretStart,
} = filesStore;
return {
@ -232,6 +235,7 @@ export default inject(
setBufferSelection,
tooltipPageX,
tooltipPageY,
setHotkeyCaretStart,
};
}
)(

7
products/ASC.Files/Client/src/store/FilesActionsStore.js
View File

@ -342,6 +342,7 @@ class FilesActionStore {
selected,
setSelected,
setSelection,
setHotkeyCaretStart,
} = this.filesStore;
/* selected === "close" && */ setSelected("none");
@ -353,7 +354,11 @@ class FilesActionStore {
if (item) {
item.isFolder = isFolder;
isBuffer ? setBufferSelection(item) : setSelection([item]);
if (isBuffer) setBufferSelection(item);
else {
setSelection([item]);
setHotkeyCaretStart(item);
}
}
};

5
products/ASC.Files/Client/src/store/FilesStore.js
View File

@ -51,6 +51,7 @@ class FilesStore {
filter = FilesFilter.getDefault(); //TODO: FILTER
loadTimeout = null;
hotkeyCaret = null;
hotkeyCaretStart = null;
constructor(
authStore,
@ -240,6 +241,10 @@ class FilesStore {
this.hotkeyCaret = hotkeyCaret;
};
setHotkeyCaretStart = (hotkeyCaretStart) => {
this.hotkeyCaretStart = hotkeyCaretStart;
};
setSelection = (selection) => {
if (selection.length === 1) this.setHotkeyCaret(selection[0]);
this.selection = selection;