diff --git a/starsky/starsky/clientapp/src/components/molecules/menu-option-selection-all/menu-option-selection-all.tsx b/starsky/starsky/clientapp/src/components/molecules/menu-option-selection-all/menu-option-selection-all.tsx
new file mode 100644
index 0000000000..2ca719c4cc
--- /dev/null
+++ b/starsky/starsky/clientapp/src/components/molecules/menu-option-selection-all/menu-option-selection-all.tsx
@@ -0,0 +1,36 @@
+import useGlobalSettings from "../../../hooks/use-global-settings";
+import { IArchiveProps } from "../../../interfaces/IArchiveProps";
+import localization from "../../../localization/localization.json";
+import { Language } from "../../../shared/language";
+
+export interface IMenuOptionUndoSelectionProps {
+ select: string[];
+ state: IArchiveProps;
+ allSelection: () => void;
+}
+
+export const MenuOptionSelectionAll: React.FunctionComponent<
+ IMenuOptionUndoSelectionProps
+> = ({ select, state, allSelection }) => {
+ const settings = useGlobalSettings();
+ const language = new Language(settings.language);
+ const MessageSelectAll = language.key(localization.MessageSelectAll);
+
+ return (
+ <>
+ {select.length !== state.fileIndexItems.length ? (
+
allSelection()}
+ tabIndex={0}
+ onKeyDown={(event) => {
+ event.key === "Enter" && allSelection();
+ }}
+ >
+ {MessageSelectAll}
+
+ ) : null}
+ >
+ );
+};
diff --git a/starsky/starsky/clientapp/src/components/molecules/menu-option-selection-undo/menu-option-selection-undo.tsx b/starsky/starsky/clientapp/src/components/molecules/menu-option-selection-undo/menu-option-selection-undo.tsx
new file mode 100644
index 0000000000..5d790a9d23
--- /dev/null
+++ b/starsky/starsky/clientapp/src/components/molecules/menu-option-selection-undo/menu-option-selection-undo.tsx
@@ -0,0 +1,36 @@
+import useGlobalSettings from "../../../hooks/use-global-settings";
+import { IArchiveProps } from "../../../interfaces/IArchiveProps";
+import localization from "../../../localization/localization.json";
+import { Language } from "../../../shared/language";
+
+export interface IMenuOptionSelectionUndoProps {
+ select: string[];
+ state: IArchiveProps;
+ undoSelection: () => void;
+}
+
+export const MenuOptionSelectionUndo: React.FunctionComponent<
+ IMenuOptionSelectionUndoProps
+> = ({ select, state, undoSelection }) => {
+ const settings = useGlobalSettings();
+ const language = new Language(settings.language);
+ const MessageUndoSelection = language.key(localization.MessageUndoSelection);
+
+ return (
+ <>
+ {select.length === state.fileIndexItems.length ? (
+ undoSelection()}
+ tabIndex={0}
+ onKeyDown={(event) => {
+ event.key === "Enter" && undoSelection();
+ }}
+ >
+ {MessageUndoSelection}
+
+ ) : null}
+ >
+ );
+};
diff --git a/starsky/starsky/clientapp/src/components/organisms/menu-archive/menu-archive.tsx b/starsky/starsky/clientapp/src/components/organisms/menu-archive/menu-archive.tsx
index 55bc42bb83..091e9a8c22 100644
--- a/starsky/starsky/clientapp/src/components/organisms/menu-archive/menu-archive.tsx
+++ b/starsky/starsky/clientapp/src/components/organisms/menu-archive/menu-archive.tsx
@@ -22,6 +22,8 @@ import MoreMenu from "../../atoms/more-menu/more-menu";
import MenuSearchBar from "../../molecules/menu-inline-search/menu-inline-search";
import MenuOptionMoveFolderToTrash from "../../molecules/menu-option-move-folder-to-trash/menu-option-move-folder-to-trash";
import MenuOptionMoveToTrash from "../../molecules/menu-option-move-to-trash/menu-option-move-to-trash";
+import { MenuOptionSelectionAll } from "../../molecules/menu-option-selection-all/menu-option-selection-all";
+import { MenuOptionSelectionUndo } from "../../molecules/menu-option-selection-undo/menu-option-selection-undo";
import { MenuSelectCount } from "../../molecules/menu-select-count/menu-select-count";
import ModalDropAreaFilesAdded from "../../molecules/modal-drop-area-files-added/modal-drop-area-files-added";
import ModalArchiveMkdir from "../modal-archive-mkdir/modal-archive-mkdir";
@@ -52,8 +54,6 @@ const MenuArchive: React.FunctionComponent = memo(() => {
"Verder selecteren",
"Select further"
);
- const MessageSelectAll = language.text("Alles selecteren", "Select all");
- const MessageUndoSelection = language.text("Undo selectie", "Undo selection");
const [hamburgerMenu, setHamburgerMenu] = React.useState(false);
const [enableMoreMenu, setEnableMoreMenu] = React.useState(false);
@@ -310,32 +310,18 @@ const MenuArchive: React.FunctionComponent = memo(() => {
setEnableMoreMenu={setEnableMoreMenu}
enableMoreMenu={enableMoreMenu}
>
- {select.length === state.fileIndexItems.length ? (
- undoSelection()}
- tabIndex={0}
- onKeyDown={(event) => {
- event.key === "Enter" && undoSelection();
- }}
- >
- {MessageUndoSelection}
-
- ) : null}
- {select.length !== state.fileIndexItems.length ? (
- allSelection()}
- tabIndex={0}
- onKeyDown={(event) => {
- event.key === "Enter" && allSelection();
- }}
- >
- {MessageSelectAll}
-
- ) : null}
+
+
+
+
{select.length >= 1 ? (
<>
= ({
// Content
const MessageSelectAction = language.text("Selecteer", "Select");
const MessageSelectAll = language.text("Alles selecteren", "Select all");
- const MessageUndoSelection = language.text("Undo selectie", "Undo selection");
const MessageSelectFurther = language.text(
"Verder selecteren",
"Select further"
@@ -187,32 +188,18 @@ export const MenuSearch: React.FunctionComponent = ({
setEnableMoreMenu={setEnableMoreMenu}
enableMoreMenu={enableMoreMenu}
>
- {select.length === state.fileIndexItems.length ? (
- undoSelection()}
- tabIndex={0}
- onKeyDown={(event) => {
- event.key === "Enter" && undoSelection();
- }}
- >
- {MessageUndoSelection}
-
- ) : null}
- {select.length !== state.fileIndexItems.length ? (
- allSelection()}
- onKeyDown={(event) => {
- event.key === "Enter" && allSelection();
- }}
- >
- {MessageSelectAll}
-
- ) : null}
+
+
+
+
= ({
// Content
const MessageSelectAction = language.text("Selecteer", "Select");
const MessageSelectAll = language.text("Alles selecteren", "Select all");
- const MessageUndoSelection = language.text("Undo selectie", "Undo selection");
const MessageRestoreFromTrash = language.text(
"Zet terug uit prullenmand",
"Restore from Trash"
@@ -190,32 +191,18 @@ const MenuTrash: React.FunctionComponent = ({
setEnableMoreMenu={setEnableMoreMenu}
enableMoreMenu={enableMoreMenu}
>
- {select.length === state.fileIndexItems.length ? (
- undoSelection()}
- tabIndex={0}
- onKeyDown={(event) => {
- event.key === "Enter" && undoSelection();
- }}
- >
- {MessageUndoSelection}
-
- ) : null}
- {select.length !== state.fileIndexItems.length ? (
- allSelection()}
- tabIndex={0}
- onKeyDown={(event) => {
- event.key === "Enter" && allSelection();
- }}
- >
- {MessageSelectAll}
-
- ) : null}
+
+
+
+