Web: Files: added hotkeys support for tile view
This commit is contained in:
parent
20474796c5
commit
3016c191d4
@ -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));
|
||||
};
|
||||
|
@ -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,
|
||||
};
|
||||
}
|
||||
)(
|
||||
|
@ -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);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user