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} + + + +