Skip to content
This repository was archived by the owner on Aug 21, 2024. It is now read-only.

Commit 8cf614b

Browse files
achen5671SYBIOTEaditya-mitra
authored
studio: open context menu on file menu right click (#10908)
* open context menu on file menu right click * remove console log * set clickable height to full --------- Co-authored-by: Rahul Ghosh <ghoshr698@gmail.com> Co-authored-by: aditya-mitra <55396651+aditya-mitra@users.noreply.github.com>
1 parent 5e3ed4f commit 8cf614b

File tree

1 file changed

+138
-93
lines changed
  • packages/ui/src/components/editor/panels/Files/container

1 file changed

+138
-93
lines changed

‎packages/ui/src/components/editor/panels/Files/container/index.tsx‎

Lines changed: 138 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@ import Input from '../../../../../primitives/tailwind/Input'
7979
import LoadingView from '../../../../../primitives/tailwind/LoadingView'
8080
import Slider from '../../../../../primitives/tailwind/Slider'
8181
import Tooltip from '../../../../../primitives/tailwind/Tooltip'
82+
import { ContextMenu } from '../../../../tailwind/ContextMenu'
8283
import { Popup } from '../../../../tailwind/Popup'
8384
import BooleanInput from '../../../input/Boolean'
8485
import InputGroup from '../../../input/Group'
@@ -543,111 +544,155 @@ const FileBrowserContentPanel: React.FC<FileBrowserContentPanelProps> = (props)
543544
ClickPlacementState.resetSelectedAsset()
544545
}
545546

547+
const [anchorEvent, setAnchorEvent] = React.useState<undefined | React.MouseEvent<HTMLDivElement>>(undefined)
548+
const handleClose = () => {
549+
setAnchorEvent(undefined)
550+
}
551+
552+
const pasteContent = async () => {
553+
handleClose()
554+
if (isLoading) return
555+
556+
fileService.update(null, {
557+
oldProject: projectName,
558+
newProject: projectName,
559+
oldName: currentContentRef.current.item.fullName,
560+
newName: currentContentRef.current.item.fullName,
561+
oldPath: currentContentRef.current.item.path,
562+
newPath: currentContentRef.current.item.path,
563+
isCopy: currentContentRef.current.isCopy
564+
})
565+
}
566+
546567
return (
547568
<div
548-
ref={fileDropRef}
549-
className={twMerge(
550-
'mb-2 h-auto px-3 pb-6 text-gray-400 ',
551-
isListView ? '' : 'flex py-8',
552-
isFileDropOver ? 'border-2 border-gray-300' : ''
553-
)}
554-
onClick={(event) => {
569+
className="h-full"
570+
onContextMenu={(event) => {
571+
event.preventDefault()
555572
event.stopPropagation()
556-
resetSelection()
573+
setAnchorEvent(event)
557574
}}
558575
>
559-
<div className={twMerge(!isListView && 'flex flex-wrap gap-2')}>
560-
<FileTableWrapper wrap={isListView}>
561-
<>
562-
{unique(files, (file) => file.key).map((file) => (
563-
<FileBrowserItem
564-
key={file.key}
565-
item={file}
566-
disableDnD={props.disableDnD}
567-
projectName={projectName}
568-
onClick={(event) => {
569-
handleFileBrowserItemClick(event, file)
570-
onSelect(event, file)
571-
}}
572-
onContextMenu={(event, currentFile) => {
573-
if (!fileProperties.value.length) {
574-
fileProperties.set([file])
575-
}
576-
}}
577-
currentContent={currentContentRef}
578-
handleDropItemsOnPanel={(data, dropOn) =>
579-
dropItemsOnPanel(
580-
data,
581-
dropOn,
582-
fileProperties.value.map((file) => file.key)
583-
)
584-
}
585-
openFileProperties={(item) => {
586-
/** If the file is not in the list of files, add it */
587-
if (!(fileProperties.get(NO_PROXY) as FileDataType[]).includes(item)) {
588-
if (fileProperties.value.length > 1) {
589-
fileProperties.merge([item])
590-
} else {
591-
fileProperties.set([item])
576+
<div
577+
ref={fileDropRef}
578+
className={twMerge(
579+
'mb-2 h-auto px-3 pb-6 text-gray-400 ',
580+
isListView ? '' : 'flex py-8',
581+
isFileDropOver ? 'border-2 border-gray-300' : ''
582+
)}
583+
onClick={(event) => {
584+
event.stopPropagation()
585+
resetSelection()
586+
}}
587+
>
588+
<div className={twMerge(!isListView && 'flex flex-wrap gap-2')}>
589+
<FileTableWrapper wrap={isListView}>
590+
<>
591+
{unique(files, (file) => file.key).map((file) => (
592+
<FileBrowserItem
593+
key={file.key}
594+
item={file}
595+
disableDnD={props.disableDnD}
596+
projectName={projectName}
597+
onClick={(event) => {
598+
handleFileBrowserItemClick(event, file)
599+
onSelect(event, file)
600+
}}
601+
onContextMenu={(event, currentFile) => {
602+
if (!fileProperties.value.length) {
603+
fileProperties.set([file])
592604
}
605+
}}
606+
currentContent={currentContentRef}
607+
handleDropItemsOnPanel={(data, dropOn) =>
608+
dropItemsOnPanel(
609+
data,
610+
dropOn,
611+
fileProperties.value.map((file) => file.key)
612+
)
593613
}
594-
PopoverState.showPopupover(
595-
<FilePropertiesModal projectName={projectName} files={fileProperties.value} />
596-
)
597-
}}
598-
openDeleteFileModal={() => {
599-
PopoverState.showPopupover(
600-
<DeleteFileModal
601-
files={fileProperties.value as FileDataType[]}
602-
onComplete={(err) => {
603-
resetSelection()
604-
}}
605-
/>
606-
)
607-
}}
608-
openImageCompress={() => {
609-
if (filesConsistOfContentType(fileProperties.value, 'image')) {
614+
openFileProperties={(item) => {
615+
/** If the file is not in the list of files, add it */
616+
if (!(fileProperties.get(NO_PROXY) as FileDataType[]).includes(item)) {
617+
if (fileProperties.value.length > 1) {
618+
fileProperties.merge([item])
619+
} else {
620+
fileProperties.set([item])
621+
}
622+
}
610623
PopoverState.showPopupover(
611-
<ImageCompressionPanel
612-
selectedFiles={fileProperties.value}
613-
refreshDirectory={refreshDirectory}
614-
/>
624+
<FilePropertiesModal projectName={projectName} files={fileProperties.value} />
615625
)
616-
}
617-
}}
618-
openModelCompress={() => {
619-
if (filesConsistOfContentType(fileProperties.value, 'model')) {
626+
}}
627+
openDeleteFileModal={() => {
620628
PopoverState.showPopupover(
621-
<ModelCompressionPanel
622-
selectedFiles={fileProperties.value}
623-
refreshDirectory={refreshDirectory}
629+
<DeleteFileModal
630+
files={fileProperties.value as FileDataType[]}
631+
onComplete={(err) => {
632+
resetSelection()
633+
}}
624634
/>
625635
)
626-
}
627-
}}
628-
isFilesLoading={isLoading}
629-
addFolder={createNewFolder}
630-
isListView={isListView}
631-
staticResourceModifiedDates={staticResourceModifiedDates.value}
632-
isSelected={fileProperties.value.some(({ key }) => key === file.key)}
633-
refreshDirectory={refreshDirectory}
634-
selectedFileKeys={fileProperties.value.map((file) => file.key)}
635-
/>
636-
))}
637-
</>
638-
</FileTableWrapper>
639-
{/*
640-
{total > 0 && validFiles.value.length < total && (
641-
<TablePagination
642-
className={styles.pagination}
643-
component="div"
644-
count={total}
645-
page={page}
646-
rowsPerPage={FILES_PAGE_LIMIT}
647-
rowsPerPageOptions={[]}
648-
onPageChange={handlePageChange}
649-
/>
650-
)}*/}
636+
}}
637+
openImageCompress={() => {
638+
if (filesConsistOfContentType(fileProperties.value, 'image')) {
639+
PopoverState.showPopupover(
640+
<ImageCompressionPanel
641+
selectedFiles={fileProperties.value}
642+
refreshDirectory={refreshDirectory}
643+
/>
644+
)
645+
}
646+
}}
647+
openModelCompress={() => {
648+
if (filesConsistOfContentType(fileProperties.value, 'model')) {
649+
PopoverState.showPopupover(
650+
<ModelCompressionPanel
651+
selectedFiles={fileProperties.value}
652+
refreshDirectory={refreshDirectory}
653+
/>
654+
)
655+
}
656+
}}
657+
isFilesLoading={isLoading}
658+
addFolder={createNewFolder}
659+
isListView={isListView}
660+
staticResourceModifiedDates={staticResourceModifiedDates.value}
661+
isSelected={fileProperties.value.some(({ key }) => key === file.key)}
662+
refreshDirectory={refreshDirectory}
663+
selectedFileKeys={fileProperties.value.map((file) => file.key)}
664+
/>
665+
))}
666+
</>
667+
</FileTableWrapper>
668+
{/*
669+
{total > 0 && validFiles.value.length < total && (
670+
<TablePagination
671+
className={styles.pagination}
672+
component="div"
673+
count={total}
674+
page={page}
675+
rowsPerPage={FILES_PAGE_LIMIT}
676+
rowsPerPageOptions={[]}
677+
onPageChange={handlePageChange}
678+
/>
679+
)}*/}
680+
</div>
681+
682+
<ContextMenu anchorEvent={anchorEvent} onClose={handleClose}>
683+
<Button variant="outline" size="small" fullWidth onClick={() => createNewFolder()}>
684+
{t('editor:layout.filebrowser.addNewFolder')}
685+
</Button>
686+
<Button
687+
variant="outline"
688+
size="small"
689+
fullWidth
690+
disabled={!currentContentRef.current}
691+
onClick={pasteContent}
692+
>
693+
{t('editor:layout.filebrowser.pasteAsset')}
694+
</Button>
695+
</ContextMenu>
651696
</div>
652697
</div>
653698
)

0 commit comments

Comments
 (0)