@ -2,13 +2,14 @@ import React, {useState, useEffect, useRef, useContext, ChangeEvent} from 'react
import { FormattedMessage , useIntl } from 'react-intl' import { FormattedMessage , useIntl } from 'react-intl'
import { Dropdown } from 'react-bootstrap' import { Dropdown } from 'react-bootstrap'
import { CustomIconsToggle , CustomMenu , CustomToggle , CustomTooltip , extractNameFromKey , extractParentFromKey } from '@remix-ui/helper' import { CustomIconsToggle , CustomMenu , CustomToggle , CustomTooltip , extractNameFromKey , extractParentFromKey } from '@remix-ui/helper'
import { CopyToClipboard } from '@remix-ui/clipboard'
import { FileExplorer } from './components/file-explorer' // eslint-disable-line
import { FileExplorer } from './components/file-explorer' // eslint-disable-line
import { FileSystemContext } from './contexts' import { FileSystemContext } from './contexts'
import './css/remix-ui-workspace.css' import './css/remix-ui-workspace.css'
import { ROOT_PATH , TEMPLATE_NAMES } from './utils/constants' import { ROOT_PATH , TEMPLATE_NAMES } from './utils/constants'
import { HamburgerMenu } from './components/workspace-hamburger' import { HamburgerMenu } from './components/workspace-hamburger'
import { MenuItems , WorkSpaceState } from './types' import { MenuItems , WorkSpaceState , WorkspaceMetadata } from './types'
import { contextMenuActions } from './utils' import { contextMenuActions } from './utils'
import FileExplorerContextMenu from './components/file-explorer-context-menu' import FileExplorerContextMenu from './components/file-explorer-context-menu'
import { customAction } from '@remixproject/plugin-api' import { customAction } from '@remixproject/plugin-api'
@ -26,13 +27,7 @@ export function Workspace() {
const LOCALHOST = ' - connect to localhost - ' const LOCALHOST = ' - connect to localhost - '
const NO_WORKSPACE = ' - none - ' const NO_WORKSPACE = ' - none - '
const [ currentWorkspace , setCurrentWorkspace ] = useState < string > ( NO_WORKSPACE ) const [ currentWorkspace , setCurrentWorkspace ] = useState < string > ( NO_WORKSPACE )
const [ selectedWorkspace , setSelectedWorkspace ] = useState < { const [ selectedWorkspace , setSelectedWorkspace ] = useState < WorkspaceMetadata > ( null )
name : string
isGitRepo : boolean
hasGitSubmodules? : boolean
branches ? : { remote : any ; name : string } [ ]
currentBranch? : string
} > ( null )
const [ showDropdown , setShowDropdown ] = useState < boolean > ( false ) const [ showDropdown , setShowDropdown ] = useState < boolean > ( false )
const [ showIconsMenu , hideIconsMenu ] = useState < boolean > ( false ) const [ showIconsMenu , hideIconsMenu ] = useState < boolean > ( false )
const [ showBranches , setShowBranches ] = useState < boolean > ( false ) const [ showBranches , setShowBranches ] = useState < boolean > ( false )
@ -73,7 +68,7 @@ export function Workspace() {
} , } ,
mouseOverElement : null , mouseOverElement : null ,
showContextMenu : false , showContextMenu : false ,
reservedKeywords : [ ROOT_PATH , 'gist-' ] , reservedKeywords : [ ROOT_PATH ] ,
copyElement : [ ] , copyElement : [ ] ,
dragStatus : false dragStatus : false
} ) } )
@ -437,7 +432,7 @@ export function Workspace() {
} }
} }
const handleCopyClick = ( path : string , type : 'folder' | 'gist' | ' file' | 'workspace' ) = > { const handleCopyClick = ( path : string , type : 'folder' | 'file' | 'workspace' ) = > {
setState ( ( prevState ) = > { setState ( ( prevState ) = > {
return { . . . prevState , copyElement : [ { key : path , type } ] } return { . . . prevState , copyElement : [ { key : path , type } ] }
} ) } )
@ -506,7 +501,6 @@ export function Workspace() {
const focusElement = global . fs . focusElement const focusElement = global . fs . focusElement
if ( focusElement [ 0 ] ) { if ( focusElement [ 0 ] ) {
if ( focusElement [ 0 ] . type === 'folder' && focusElement [ 0 ] . key ) return focusElement [ 0 ] . key if ( focusElement [ 0 ] . type === 'folder' && focusElement [ 0 ] . key ) return focusElement [ 0 ] . key
else if ( focusElement [ 0 ] . type === 'gist' && focusElement [ 0 ] . key ) return focusElement [ 0 ] . key
else if ( focusElement [ 0 ] . type === 'file' && focusElement [ 0 ] . key ) return extractParentFromKey ( focusElement [ 0 ] . key ) ? extractParentFromKey ( focusElement [ 0 ] . key ) : ROOT_PATH else if ( focusElement [ 0 ] . type === 'file' && focusElement [ 0 ] . key ) return extractParentFromKey ( focusElement [ 0 ] . key ) ? extractParentFromKey ( focusElement [ 0 ] . key ) : ROOT_PATH
else return ROOT_PATH else return ROOT_PATH
} }
@ -570,34 +564,34 @@ export function Workspace() {
} }
} }
const pushChangesToGist = ( path? : string , type ? : string ) = > { const pushChangesToGist = ( path? : string ) = > {
global . modal ( global . modal (
intl . formatMessage ( { id : 'filePanel.createPublicGist' } ) , intl . formatMessage ( { id : 'filePanel.createPublicGist' } ) ,
intl . formatMessage ( { id : 'filePanel.createPublicGistMsg1' } ) , intl . formatMessage ( { id : 'filePanel.createPublicGistMsg1' } ) ,
intl . formatMessage ( { id : 'filePanel.ok' } ) , intl . formatMessage ( { id : 'filePanel.ok' } ) ,
( ) = > toGist ( path , type ) , ( ) = > toGist ( path ) ,
intl . formatMessage ( { id : 'filePanel.cancel' } ) , intl . formatMessage ( { id : 'filePanel.cancel' } ) ,
( ) = > { } ( ) = > { }
) )
} }
const publishFolderToGist = ( path? : string , type ? : string ) = > { const publishFolderToGist = ( path? : string ) = > {
global . modal ( global . modal (
intl . formatMessage ( { id : 'filePanel.createPublicGist' } ) , intl . formatMessage ( { id : 'filePanel.createPublicGist' } ) ,
intl . formatMessage ( { id : 'filePanel.createPublicGistMsg2' } , { path } ) , intl . formatMessage ( { id : 'filePanel.createPublicGistMsg2' } , { path } ) ,
intl . formatMessage ( { id : 'filePanel.ok' } ) , intl . formatMessage ( { id : 'filePanel.ok' } ) ,
( ) = > toGist ( path , type ) , ( ) = > toGist ( path ) ,
intl . formatMessage ( { id : 'filePanel.cancel' } ) , intl . formatMessage ( { id : 'filePanel.cancel' } ) ,
( ) = > { } ( ) = > { }
) )
} }
const publishFileToGist = ( path? : string , type ? : string ) = > { const publishFileToGist = ( path? : string ) = > {
global . modal ( global . modal (
intl . formatMessage ( { id : 'filePanel.createPublicGist' } ) , intl . formatMessage ( { id : 'filePanel.createPublicGist' } ) ,
intl . formatMessage ( { id : 'filePanel.createPublicGistMsg3' } , { path } ) , intl . formatMessage ( { id : 'filePanel.createPublicGistMsg3' } , { path } ) ,
intl . formatMessage ( { id : 'filePanel.ok' } ) , intl . formatMessage ( { id : 'filePanel.ok' } ) ,
( ) = > toGist ( path , type ) , ( ) = > toGist ( path ) ,
intl . formatMessage ( { id : 'filePanel.cancel' } ) , intl . formatMessage ( { id : 'filePanel.cancel' } ) ,
( ) = > { } ( ) = > { }
) )
@ -632,8 +626,8 @@ export function Workspace() {
) )
} }
const toGist = ( path? : string , type ? : string ) = > { const toGist = ( path? : string ) = > {
global . dispatchPublishToGist ( path , type ) global . dispatchPublishToGist ( path )
} }
const editModeOn = ( path : string , type : string , isNew = false ) = > { const editModeOn = ( path : string , type : string , isNew = false ) = > {
@ -922,7 +916,6 @@ export function Workspace() {
< / > < / >
) )
} }
return ( return (
< div className = "d-flex flex-column justify-content-between h-100" > < div className = "d-flex flex-column justify-content-between h-100" >
< div < div
@ -952,11 +945,13 @@ export function Workspace() {
> < / Dropdown.Toggle > > < / Dropdown.Toggle >
< Dropdown.Menu as = { CustomMenu } data - id = "wsdropdownMenu" className = "custom-dropdown-items remixui_menuwidth" rootCloseEvent = "click" > < Dropdown.Menu as = { CustomMenu } data - id = "wsdropdownMenu" className = "custom-dropdown-items remixui_menuwidth" rootCloseEvent = "click" >
< HamburgerMenu < HamburgerMenu
selectedWorkspace = { selectedWorkspace }
createWorkspace = { createWorkspace } createWorkspace = { createWorkspace }
renameCurrentWorkspace = { renameCurrentWorkspace } renameCurrentWorkspace = { renameCurrentWorkspace }
downloadCurrentWorkspace = { downloadCurrentWorkspace } downloadCurrentWorkspace = { downloadCurrentWorkspace }
deleteCurrentWorkspace = { deleteCurrentWorkspace } deleteCurrentWorkspace = { deleteCurrentWorkspace }
deleteAllWorkspaces = { deleteAllWorkspaces } deleteAllWorkspaces = { deleteAllWorkspaces }
pushChangesToGist = { pushChangesToGist }
cloneGitRepository = { cloneGitRepository } cloneGitRepository = { cloneGitRepository }
downloadWorkspaces = { downloadWorkspaces } downloadWorkspaces = { downloadWorkspaces }
restoreBackup = { restoreBackup } restoreBackup = { restoreBackup }
@ -988,6 +983,12 @@ export function Workspace() {
> >
< i onClick = { ( ) = > saveSampleCodeWorkspace ( ) } className = "far fa-exclamation-triangle text-warning ml-2 align-self-center" aria - hidden = "true" > < / i > < i onClick = { ( ) = > saveSampleCodeWorkspace ( ) } className = "far fa-exclamation-triangle text-warning ml-2 align-self-center" aria - hidden = "true" > < / i >
< / CustomTooltip > } < / CustomTooltip > }
{ selectedWorkspace && selectedWorkspace . isGist && < CopyToClipboard tip = { 'Copy Gist ID to clipboard' } getContent = { ( ) = > selectedWorkspace . isGist } direction = "bottom" icon = "far fa-copy" >
< i className = "remixui_copyIcon ml-2 fab fa-github text-info" aria - hidden = "true" style = { { fontSize : '1.1rem' , cursor : 'pointer' } } > < / i >
< / CopyToClipboard >
}
< / span > < / span >
< / div > < / div >
< div className = 'mx-2' > < div className = 'mx-2' >
@ -1077,11 +1078,10 @@ export function Workspace() {
< / div > < / div >
) } ) }
{ ! ( global . fs . browser . isRequestingWorkspace || global . fs . browser . isRequestingCloning ) && global . fs . mode === 'browser' && currentWorkspace !== NO_WORKSPACE && ( { ! ( global . fs . browser . isRequestingWorkspace || global . fs . browser . isRequestingCloning ) && global . fs . mode === 'browser' && currentWorkspace !== NO_WORKSPACE && (
< FileExplorer < FileExplorer
fileState = { global . fs . browser . fileState } fileState = { global . fs . browser . fileState }
name = { currentWorkspace } name = { currentWorkspace }
menuItems = { [ 'createNewFile' , 'createNewFolder' , , canUpload ? 'uploadFile' : '' , canUpload ? 'uploadFolder' : '' ] } menuItems = { [ 'createNewFile' , 'createNewFolder' , selectedWorkspace && selectedWorkspace . isGist ? 'updateGist' : , canUpload ? 'uploadFile' : '' , canUpload ? 'uploadFolder' : '' ] }
contextMenuItems = { global . fs . browser . contextMenu . registeredMenuItems } contextMenuItems = { global . fs . browser . contextMenu . registeredMenuItems }
removedContextMenuItems = { global . fs . browser . contextMenu . removedMenuItems } removedContextMenuItems = { global . fs . browser . contextMenu . removedMenuItems }
files = { global . fs . browser . files } files = { global . fs . browser . files }
yann300
9 months ago
committed by
GitHub