Files
spacedrive/interface/app/$libraryId/Explorer/ContextMenu/FilePath/CutCopyItems.tsx
nikec 717e01ef1f [ENG-300] Explorer multi-select (#1197)
* grid

* Improved multi-select, grid list & view offset. Added gap option & app frame.

* List view multi-select

* Include multi-select in overview, fix page ref type

* Add gap to options panel

* Fix drag

* Update categories z-index

* going pretty well

* fix a couple bugs

* fix another bug :)

* minor improvements

* Separate grid activeItem

* extra comments

* um akshully don't ref during render

* show thumbnails yay

* cleanup

* Clean up

* Fix ranges

* here it is

* fix cols drag

* don't enforce selecto context

* explorer view selectable

* Update index.tsx

* Context menu support for multi-select (#1187)

* here it is

* stopPropagation

* cut copy multiple

---------

Co-authored-by: nikec <nikec.job@gmail.com>

* explorer view selectable

* Update index.tsx

* items Map

* fix renamable

* Update inspector

* Hide tag assign if empty

* fix merge

* cleanup

* fix un-rendered drag select

* fix double click quick preview

* update thumbnail

* mostly handle multiple select in keybindings

* fix ts

* remove another todo

* move useItemAs hooks to @sd/client

* fix thumb controls

* multi-select double click

* cleaner?

* smaller gap

---------

Co-authored-by: Jamie Pine <ijamespine@me.com>
Co-authored-by: Brendan Allan <brendonovich@outlook.com>
Co-authored-by: Jamie Pine <32987599+jamiepine@users.noreply.github.com>
Co-authored-by: Utku <74243531+utkubakir@users.noreply.github.com>
Co-authored-by: Ericson "Fogo" Soares <ericson.ds999@gmail.com>
2023-08-15 08:23:41 +00:00

82 lines
2.4 KiB
TypeScript

import { Copy, Scissors } from 'phosphor-react';
import { useLibraryMutation } from '@sd/client';
import { ContextMenu, ModifierKeys } from '@sd/ui';
import { showAlertDialog } from '~/components';
import { useKeybindFactory } from '~/hooks/useKeybindFactory';
import { isNonEmpty } from '~/util';
import { useExplorerContext } from '../../Context';
import { getExplorerStore } from '../../store';
import { useExplorerSearchParams } from '../../util';
import { ConditionalItem } from '../ConditionalItem';
import { useContextMenuContext } from '../context';
export const CutCopyItems = new ConditionalItem({
useCondition: () => {
const { parent } = useExplorerContext();
const { selectedFilePaths } = useContextMenuContext();
if (parent?.type !== 'Location' || !isNonEmpty(selectedFilePaths)) return null;
return { locationId: parent.location.id, selectedFilePaths };
},
Component: ({ locationId, selectedFilePaths }) => {
const keybind = useKeybindFactory();
const [{ path }] = useExplorerSearchParams();
const copyFiles = useLibraryMutation('files.copyFiles');
return (
<>
<ContextMenu.Item
label="Cut"
keybind={keybind([ModifierKeys.Control], ['X'])}
onClick={() => {
getExplorerStore().cutCopyState = {
sourceParentPath: path ?? '/',
sourceLocationId: locationId,
sourcePathIds: selectedFilePaths.map((p) => p.id),
type: 'Cut'
};
}}
icon={Scissors}
/>
<ContextMenu.Item
label="Copy"
keybind={keybind([ModifierKeys.Control], ['C'])}
onClick={() => {
getExplorerStore().cutCopyState = {
sourceParentPath: path ?? '/',
sourceLocationId: locationId,
sourcePathIds: selectedFilePaths.map((p) => p.id),
type: 'Copy'
};
}}
icon={Copy}
/>
<ContextMenu.Item
label="Duplicate"
keybind={keybind([ModifierKeys.Control], ['D'])}
onClick={async () => {
try {
await copyFiles.mutateAsync({
source_location_id: locationId,
sources_file_path_ids: selectedFilePaths.map((p) => p.id),
target_location_id: locationId,
target_location_relative_directory_path: path ?? '/',
target_file_name_suffix: ' copy'
});
} catch (error) {
showAlertDialog({
title: 'Error',
value: `Failed to duplcate file, due to an error: ${error}`
});
}
}}
/>
</>
);
}
});