From ea02409324c5a4f0f5981bf6b42495fb4913ec12 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Wed, 19 May 2021 10:52:03 +0100 Subject: [PATCH] Implement workflow for copy and paster --- .../src/lib/file-explorer-context-menu.tsx | 8 +- .../file-explorer/src/lib/file-explorer.tsx | 76 ++++++++++++++++--- .../file-explorer/src/lib/types/index.ts | 4 +- 3 files changed, 74 insertions(+), 14 deletions(-) diff --git a/libs/remix-ui/file-explorer/src/lib/file-explorer-context-menu.tsx b/libs/remix-ui/file-explorer/src/lib/file-explorer-context-menu.tsx index 13915aab02..a63633e3b2 100644 --- a/libs/remix-ui/file-explorer/src/lib/file-explorer-context-menu.tsx +++ b/libs/remix-ui/file-explorer/src/lib/file-explorer-context-menu.tsx @@ -4,7 +4,7 @@ import { FileExplorerContextMenuProps } from './types' import './css/file-explorer-context-menu.css' export const FileExplorerContextMenu = (props: FileExplorerContextMenuProps) => { - const { actions, createNewFile, createNewFolder, deletePath, renamePath, hideContextMenu, pushChangesToGist, publishFileToGist, publishFolderToGist, runScript, emit, pageX, pageY, path, type, ...otherProps } = props + const { actions, createNewFile, createNewFolder, deletePath, renamePath, hideContextMenu, pushChangesToGist, publishFileToGist, publishFolderToGist, copy, paste, runScript, emit, pageX, pageY, path, type, ...otherProps } = props const contextMenuRef = useRef(null) useEffect(() => { @@ -61,6 +61,12 @@ export const FileExplorerContextMenu = (props: FileExplorerContextMenuProps) => case 'Run': runScript(path) break + case 'Copy': + copy(path, type) + break + case 'Paste': + paste(path) + break default: emit && emit(item.id, path) break diff --git a/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx b/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx index 29d1f5955e..6135c6ecc6 100644 --- a/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx +++ b/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx @@ -23,7 +23,6 @@ export const FileExplorer = (props: FileExplorerProps) => { key: '', type: 'folder' }], - focusPath: null, files: [], fileManager: null, ctrlKey: false, @@ -56,6 +55,13 @@ export const FileExplorer = (props: FileExplorerProps) => { path: [], extension: [], pattern: [] + }, { + id: 'run', + name: 'Run', + type: [], + path: [], + extension: ['.js'], + pattern: [] }, { id: 'pushChangesToGist', name: 'Push changes to gist', @@ -78,11 +84,11 @@ export const FileExplorer = (props: FileExplorerProps) => { extension: [], pattern: [] }, { - id: 'run', - name: 'Run', - type: [], + id: 'copy', + name: 'Copy', + type: ['folder', 'file'], path: [], - extension: ['.js'], + extension: [], pattern: [] }], focusContext: { @@ -112,8 +118,10 @@ export const FileExplorer = (props: FileExplorerProps) => { toasterMsg: '', mouseOverElement: null, showContextMenu: false, - reservedKeywords: [name, 'gist-'] + reservedKeywords: [name, 'gist-'], + copyElement: [] }) + const [canPaste, setcanPaste] = useState(false) const [fileSystem, dispatch] = useReducer(fileSystemReducer, fileSystemInitialState) const editRef = useRef(null) @@ -176,12 +184,7 @@ export const FileExplorer = (props: FileExplorerProps) => { useEffect(() => { if (contextMenuItems) { - setState(prevState => { - // filter duplicate items - const items = contextMenuItems.filter(({ name }) => prevState.actions.findIndex(action => action.name === name) === -1) - - return { ...prevState, actions: [...prevState.actions, ...items] } - }) + addMenuItems(contextMenuItems) } }, [contextMenuItems]) @@ -223,6 +226,38 @@ export const FileExplorer = (props: FileExplorerProps) => { } }, [state.modals]) + useEffect(() => { + if (canPaste) { + addMenuItems([{ + id: 'paste', + name: 'Paste', + type: ['folder', 'file'], + path: [], + extension: [], + pattern: [] + }]) + } else { + removeMenuItems(['paste']) + } + }, [canPaste]) + + const addMenuItems = (items: { id: string, name: string, type: string[], path: string[], extension: string[], pattern: string[] }[]) => { + setState(prevState => { + // filter duplicate items + const actions = items.filter(({ name }) => prevState.actions.findIndex(action => action.name === name) === -1) + + return { ...prevState, actions: [...prevState.actions, ...actions] } + }) + } + + const removeMenuItems = (ids: string[]) => { + setState(prevState => { + const actions = prevState.actions.filter(({ id }) => ids.findIndex(value => value === id) === -1) + + return { ...prevState, actions } + }) + } + const extractNameFromKey = (key: string):string => { const keyPath = key.split('/') @@ -695,6 +730,21 @@ export const FileExplorer = (props: FileExplorerProps) => { }) } + const handleCopyClick = (path: string, type: string) => { + setState(prevState => { + return { ...prevState, copyElement: [...prevState.copyElement, { key: path, type }] } + }) + setcanPaste(true) + } + + const handlePasteClick = (dest: string) => { + console.log('destination: ', dest) + setState(prevState => { + return { ...prevState, copyElement: [] } + }) + setcanPaste(false) + } + const label = (file: File) => { return (
{ deletePath={deletePath} renamePath={editModeOn} runScript={runScript} + copy={handleCopyClick} + paste={handlePasteClick} emit={emitContextMenuEvent} pageX={state.focusContext.x} pageY={state.focusContext.y} diff --git a/libs/remix-ui/file-explorer/src/lib/types/index.ts b/libs/remix-ui/file-explorer/src/lib/types/index.ts index 3234818913..5c29ebac8e 100644 --- a/libs/remix-ui/file-explorer/src/lib/types/index.ts +++ b/libs/remix-ui/file-explorer/src/lib/types/index.ts @@ -46,5 +46,7 @@ export interface FileExplorerContextMenuProps { pageY: number, path: string, type: string, - onMouseOver?: (...args) => void + onMouseOver?: (...args) => void, + copy?: (path: string, type: string) => void + paste?: (destination: string) => void }