Skip to content

Dnd-tab #5879

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 10 commits into
base: master
Choose a base branch
from
Open

Dnd-tab #5879

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
c59a54c
file dropping on the tab area
iamsethsamuel Mar 13, 2025
cbdc6ef
file explorer now supports drag and drop
iamsethsamuel Mar 13, 2025
2bed7ef
fixed some unaware changes
iamsethsamuel Mar 13, 2025
365e960
list.json reverted back
iamsethsamuel Mar 13, 2025
da2fe0c
last version removed
iamsethsamuel Mar 13, 2025
582bde9
the temp folder is hidden
iamsethsamuel Mar 13, 2025
8c68bd8
added support for dropping multiple files
iamsethsamuel Mar 13, 2025
6446b43
Merge branch 'master' into dnd-tab
iamsethsamuel Mar 24, 2025
6d57625
Merge branch 'master' into dnd-tab
iamsethsamuel Mar 26, 2025
a372989
Merge branch 'master' into dnd-tab
iamsethsamuel Mar 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
90 changes: 43 additions & 47 deletions libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ const tabsReducer = (state: ITabsState, action: ITabsAction) => {
return {
...state,
currentExt: action.ext,
selectedIndex: action.payload
selectedIndex: action.payload,
}
case 'SET_FILE_DECORATIONS':
return {
Expand Down Expand Up @@ -155,7 +155,7 @@ export const TabsUI = (props: TabsUIProps) => {
}

const setFileDecorations = (fileStates: fileDecoration[]) => {
getAI().then(value => setAI_switch(value)).catch(error => console.log(error))
getAI().then((value) => setAI_switch(value)).catch((error) => console.log(error))
dispatch({ type: 'SET_FILE_DECORATIONS', payload: fileStates })
}

Expand Down Expand Up @@ -187,8 +187,31 @@ export const TabsUI = (props: TabsUIProps) => {
else return ''
}

const handleFileDrop = (event: React.DragEvent) => {
event.preventDefault()
if (event.dataTransfer?.files.length > 0) {
const files = event.dataTransfer.files

for (const file of files) {
const reader = new FileReader()
reader.readAsText(file)

reader.onload = (e) => {
props.plugin.call('fileManager', 'writeFile', '/tmp/' + file.name, e.target?.result)
}
}
}
}

return (
<div className="remix-ui-tabs d-flex justify-content-between border-0 header nav-tabs" data-id="tabs-component">
<div
className="remix-ui-tabs d-flex justify-content-between border-0 header nav-tabs"
data-id="tabs-component"
onDrop={handleFileDrop}
onDragOver={(e) => {
e.preventDefault()
}}
>
<div className="d-flex flex-row" style={{ maxWidth: 'fit-content', width: '99%' }}>
<div className="d-flex flex-row justify-content-center align-items-center m-1 mt-1">
<CustomTooltip
Expand All @@ -203,9 +226,7 @@ export const TabsUI = (props: TabsUIProps) => {
) : (
<FormattedMessage id="remixUiTabs.tooltipText3" />
)}
</span>
}
>
</span>}>
<button
data-id="play-editor"
className="btn text-success pr-0 py-0 d-flex"
Expand All @@ -225,8 +246,7 @@ export const TabsUI = (props: TabsUIProps) => {
await props.plugin.call('noir-compiler', 'compile', path)
}
_paq.push(['trackEvent', 'editor', 'clickRunFromEditor', tabsState.currentExt])
}}
>
}}>
<i className="fas fa-play"></i>
</button>
</CustomTooltip>
Expand All @@ -238,7 +258,8 @@ export const TabsUI = (props: TabsUIProps) => {
<span>
<FormattedMessage id="remixUiTabs.tooltipText9" />
</span>
}><button
}
><button
data-id="script-config"
className="btn text-dark border-left ml-2 pr-0 py-0 d-flex"
onClick={async () => {
Expand All @@ -247,30 +268,19 @@ export const TabsUI = (props: TabsUIProps) => {
}}
>
<i className="fa-kit fa-solid-gear-circle-play"></i>
</button></CustomTooltip>
<div className="d-flex border-left ml-2 align-items-center" style={{ height: "3em" }}>
<CustomTooltip
placement="bottom"
tooltipId="overlay-tooltip-explanation"
tooltipText={
<span>
{((tabsState.currentExt === 'sol') || (tabsState.currentExt === 'vy') || (tabsState.currentExt === 'circom')) ? (
<FormattedMessage id="remixUiTabs.tooltipText5" />
) : (
<FormattedMessage id="remixUiTabs.tooltipText4" />
)}
</span>
}
>
</button>
</CustomTooltip>
<div className="d-flex border-left ml-2 align-items-center" style={{ height: '3em' }}>
<CustomTooltip placement="bottom" tooltipId="overlay-tooltip-explanation" tooltipText={<span>{tabsState.currentExt === 'sol' || tabsState.currentExt === 'vy' || tabsState.currentExt === 'circom' ? <FormattedMessage id="remixUiTabs.tooltipText5" /> : <FormattedMessage id="remixUiTabs.tooltipText4" />}</span>}>
<button
data-id="explain-editor"
id='explain_btn'
className='btn text-ai pl-2 pr-0 py-0'
disabled={!((tabsState.currentExt === 'sol') || (tabsState.currentExt === 'vy') || (tabsState.currentExt === 'circom')) || explaining}
id="explain_btn"
className="btn text-ai pl-2 pr-0 py-0"
disabled={!(tabsState.currentExt === 'sol' || tabsState.currentExt === 'vy' || tabsState.currentExt === 'circom') || explaining}
onClick={async () => {
const path = active().substr(active().indexOf('/') + 1, active().length)
const content = await props.plugin.call('fileManager', 'readFile', path)
if ((tabsState.currentExt === 'sol') || (tabsState.currentExt === 'vy') || (tabsState.currentExt === 'circom')) {
if (tabsState.currentExt === 'sol' || tabsState.currentExt === 'vy' || tabsState.currentExt === 'circom') {
setExplaining(true)
// if plugin is pinned,
await props.plugin.call('popupPanel', 'showPopupPanel', true)
Expand All @@ -285,24 +295,10 @@ export const TabsUI = (props: TabsUIProps) => {
<i className={`fas fa-user-robot ${explaining ? 'loadingExplanation' : ''}`}></i>
</button>
</CustomTooltip>
<CustomTooltip
placement="bottom"
tooltipId="overlay-tooltip-copilot"
tooltipText={
<span>
{tabsState.currentExt === 'sol' ? (
!ai_switch ? (
<FormattedMessage id="remixUiTabs.tooltipText6" />
) : (<FormattedMessage id="remixUiTabs.tooltipText7" />)
) : (
<FormattedMessage id="remixUiTabs.tooltipTextDisabledCopilot" />
)}
</span>
}
>
<CustomTooltip placement="bottom" tooltipId="overlay-tooltip-copilot" tooltipText={<span>{tabsState.currentExt === 'sol' ? !ai_switch ? <FormattedMessage id="remixUiTabs.tooltipText6" /> : <FormattedMessage id="remixUiTabs.tooltipText7" /> : <FormattedMessage id="remixUiTabs.tooltipTextDisabledCopilot" />}</span>}>
<button
data-id="remix_ai_switch"
id='remix_ai_switch'
id="remix_ai_switch"
className="btn ai-switch text-ai pl-2 pr-0 py-0"
disabled={!((tabsState.currentExt === 'sol') || (tabsState.currentExt === 'vy') || (tabsState.currentExt === 'circom') )}
onClick={async () => {
Expand All @@ -311,12 +307,12 @@ export const TabsUI = (props: TabsUIProps) => {
ai_switch ? _paq.push(['trackEvent', 'ai', 'remixAI', 'copilot_enabled']) : _paq.push(['trackEvent', 'ai', 'remixAI', 'copilot_disabled'])
}}
>
<i className={ai_switch ? "fas fa-toggle-on fa-lg" : "fas fa-toggle-off fa-lg"}></i>
<i className={ai_switch ? 'fas fa-toggle-on fa-lg' : 'fas fa-toggle-off fa-lg'}></i>
</button>
</CustomTooltip>
</div>

<div className="d-flex border-left ml-2 align-items-center" style={{ height: "3em" }}>
<div className="d-flex border-left ml-2 align-items-center" style={{ height: '3em' }}>
<CustomTooltip placement="bottom" tooltipId="overlay-tooltip-zoom-out" tooltipText={<FormattedMessage id="remixUiTabs.zoomOut" />}>
<span data-id="tabProxyZoomOut" className="btn fas fa-search-minus text-dark pl-2 pr-0 py-0 d-flex" onClick={() => props.onZoomOut()}></span>
</CustomTooltip>
Expand All @@ -339,7 +335,7 @@ export const TabsUI = (props: TabsUIProps) => {
dispatch({
type: 'SELECT_INDEX',
payload: index,
ext: getExt(props.tabs[currentIndexRef.current].name)
ext: getExt(props.tabs[currentIndexRef.current].name),
})
}}
>
Expand Down
1 change: 1 addition & 0 deletions libs/remix-ui/workspace/src/lib/components/file-explorer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -640,6 +640,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
handleClickFolder={handleClickFolder}
createNewFile={props.createNewFile}
createNewFolder={props.createNewFolder}
plugin={plugin}
deletePath={deletePath}
editPath={props.editModeOn}
fileTarget={feTarget}
Expand Down
32 changes: 23 additions & 9 deletions libs/remix-ui/workspace/src/lib/components/flat-tree-drop.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { extractParentFromKey } from '@remix-ui/helper'
import { FileSystemContext } from '../contexts'

export const FlatTreeDrop = (props: FlatTreeDropProps) => {

const { getFlatTreeItem, dragSource, handleClickFolder, expandPath } = props
// delay timer
const [timer, setTimer] = useState<NodeJS.Timeout>()
Expand All @@ -29,7 +28,6 @@ export const FlatTreeDrop = (props: FlatTreeDropProps) => {
setFolderToOpen(null)
}
if (dragDestination && dragDestination.isDirectory && !expandPath.includes(dragDestination.path) && folderToOpen !== dragDestination.path && props.handleClickFolder) {

setFolderToOpen(dragDestination.path)
timer && clearTimeout(timer)
setTimer(
Expand All @@ -41,7 +39,7 @@ export const FlatTreeDrop = (props: FlatTreeDropProps) => {
}
}

const onDrop = async (event: SyntheticEvent) => {
const onDrop = async (event: React.DragEvent) => {
event.preventDefault()

const target = await getEventTarget(event)
Expand All @@ -51,12 +49,26 @@ export const FlatTreeDrop = (props: FlatTreeDropProps) => {
if (!target || !target.path) {
dragDestination = {
path: '/',
isDirectory: true
isDirectory: true,
}
} else {
dragDestination = getFlatTreeItem(target.path)
}

if (event.dataTransfer?.files.length > 0) {
const files = event.dataTransfer.files

for (const file of files){
const reader = new FileReader()
reader.readAsText(file)

reader.onload = (e) => {
props.plugin.call('fileManager', 'writeFile', `${dragDestination.path}/${file.name}`, e.target?.result)
}
}
return
}

props.selectedItems.forEach((item) => filePaths.push(item.path))
props.setFilesSelected(filePaths)

Expand All @@ -77,7 +89,8 @@ export const FlatTreeDrop = (props: FlatTreeDropProps) => {
* @returns Promise<void>
*/
const moveItemsSilently = async (items: DragStructure[], targetPath: string) => {
const promises = items.filter(item => item.path !== targetPath)
const promises = items
.filter((item) => item.path !== targetPath)
.map(async (item) => {
if (item.type === 'file') {
await props.moveFileSilently(targetPath, item.path)
Expand All @@ -89,8 +102,9 @@ export const FlatTreeDrop = (props: FlatTreeDropProps) => {
props.resetMultiselect()
}

return (<div
onDrop={onDrop} onDragOver={onDragOver}
className="d-flex h-100"
>{props.children}</div>)
return (
<div onDrop={onDrop} onDragOver={onDragOver} className="d-flex h-100">
{props.children}
</div>
)
}
10 changes: 9 additions & 1 deletion libs/remix-ui/workspace/src/lib/components/flat-tree.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ interface FlatTreeProps {
deletePath?: (path: string | string[]) => void | Promise<void>
editPath?: (path: string, type: string, isNew?: boolean) => void
warnMovingItems: (srcs: string[], dests: string) => Promise<void>
plugin: any
}

let mouseTimer: any = {
Expand Down Expand Up @@ -143,12 +144,13 @@ export const FlatTree = (props: FlatTreeProps) => {
}
}

const onDragStart = async (event: SyntheticEvent) => {
const onDragStart = async (event: React.DragEvent<HTMLDivElement>) => {
const target = await getEventTarget(event)
setDragSource(flatTree.find((item) => item.path === target.path))
setIsDragging(true)
buildMultiSelectedItemProfiles(target)
setFilesSelected(selectedItems.map((item) => item.path))
event.dataTransfer.setData('text/plain', target.path)
}

useEffect(() => {
Expand Down Expand Up @@ -252,6 +254,11 @@ export const FlatTree = (props: FlatTreeProps) => {
const Row = (index: number) => {
const node = Object.keys(flatTree)[index]
const file = flatTree[node]

if (file.path.startsWith("tmp")){
return <div style={{ display:'none' }}>Temp File</div>
}

return (
<li
className={`${labelClass(file)} li_tv`}
Expand Down Expand Up @@ -308,6 +315,7 @@ export const FlatTree = (props: FlatTreeProps) => {
expandPath={expandPath}
selectedItems={selectedItems}
setSelectedItems={setSelectedItems}
plugin={props.plugin}
>
<div data-id="treeViewUltreeViewMenu"
className='d-flex h-100 w-100 pb-2'
Expand Down
1 change: 1 addition & 0 deletions libs/remix-ui/workspace/src/lib/types/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -378,6 +378,7 @@ export interface FlatTreeDropProps {
selectedItems: DragStructure[]
setSelectedItems: Dispatch<React.SetStateAction<DragStructure[]>>
warnMovingItems: (srcs: string[], dest: string) => Promise<void>
plugin: any
}

export type DragStructure = {
Expand Down