mirror of
https://github.com/overleaf/overleaf.git
synced 2025-04-23 03:06:24 +00:00
Merge pull request #3970 from overleaf/ae-remove-filetreereactbridge
Remove showReactAddFilesModal, showReactFileTree, useFileTreeAngularListener and FileTreeReactBridge GitOrigin-RevId: 61fc54efe761922137b032b9b532975fc101264d
This commit is contained in:
Alf Eaton
Copybot
parent
f1f8c4e152
commit
dbc909ae54
8 changed files with 9 additions and 615 deletions
|
|
@ -739,12 +739,8 @@ const ProjectController = {
|
|||
const allowedImageNames = ProjectHelper.getAllowedImagesForUser(
|
||||
sessionUser
|
||||
)
|
||||
const wantsOldFileTreeUI =
|
||||
req.query && req.query.new_file_tree_ui === 'false'
|
||||
const wantsOldShareModalUI =
|
||||
req.query && req.query.new_share_modal_ui === 'false'
|
||||
const wantsOldAddFilesModalUI =
|
||||
req.query && req.query.new_add_files_modal_ui === 'false'
|
||||
const wantsOldGithubSyncUI =
|
||||
req.query && req.query.new_github_sync_ui === 'false'
|
||||
|
||||
|
|
@ -862,9 +858,7 @@ const ProjectController = {
|
|||
logsUISubvariant: logsUIVariant.subvariant,
|
||||
showNewNavigationUI:
|
||||
req.query && req.query.new_navigation_ui === 'true',
|
||||
showReactFileTree: !wantsOldFileTreeUI,
|
||||
showReactShareModal: !wantsOldShareModalUI,
|
||||
showReactAddFilesModal: !wantsOldAddFilesModalUI,
|
||||
showReactGithubSync: !wantsOldGithubSyncUI && user.alphaProgram,
|
||||
showNewBinaryFileUI:
|
||||
req.query && req.query.new_binary_file === 'true',
|
||||
|
|
|
|||
|
|
@ -99,11 +99,8 @@ block content
|
|||
custom-toggler-msg-when-closed=hasFeature('custom-togglers') ? translate("tooltip_show_filetree") : false
|
||||
)
|
||||
.ui-layout-west
|
||||
if showReactFileTree
|
||||
include ./editor/file-tree-react
|
||||
include ./editor/file-tree-history
|
||||
else
|
||||
include ./editor/file-tree
|
||||
include ./editor/file-tree-react
|
||||
include ./editor/file-tree-history
|
||||
include ./editor/history/fileTreeV2
|
||||
|
||||
.ui-layout-center
|
||||
|
|
@ -187,8 +184,6 @@ block append meta
|
|||
//- used in public/js/libs/sharejs.js
|
||||
meta(name="ol-useShareJsHash" data-type="boolean" content=true)
|
||||
meta(name="ol-wsRetryHandshake" data-type="json" content=settings.wsRetryHandshake)
|
||||
meta(name="ol-showReactFileTree" data-type="boolean" content=showReactFileTree)
|
||||
meta(name="ol-showReactAddFilesModal" data-type="boolean" content=showReactAddFilesModal)
|
||||
meta(name="ol-showNewLogsUI" data-type="boolean" content=showNewLogsUI)
|
||||
meta(name="ol-logsUISubvariant" content=logsUISubvariant)
|
||||
|
||||
|
|
|
|||
|
|
@ -1,424 +0,0 @@
|
|||
aside.editor-sidebar.full-size(
|
||||
ng-controller="FileTreeController"
|
||||
ng-class="{ 'multi-selected': multiSelectedCount > 0 }"
|
||||
ng-show="ui.view != 'history' || !history.isV2"
|
||||
vertical-resizable-panes="outline-resizer"
|
||||
vertical-resizable-panes-toggled-externally-on="outline-toggled"
|
||||
vertical-resizable-panes-min-size="32"
|
||||
vertical-resizable-panes-max-size="75%"
|
||||
)
|
||||
.file-tree(
|
||||
vertical-resizable-top
|
||||
)
|
||||
.toolbar.toolbar-filetree(ng-if="permissions.write")
|
||||
a(
|
||||
href,
|
||||
ng-click="openNewDocModal()",
|
||||
tooltip-html="'"+translate('new_file').replace(' ', '<br>')+"'",
|
||||
tooltip-placement="bottom"
|
||||
)
|
||||
i.fa.fa-fw.fa-file
|
||||
a(
|
||||
href,
|
||||
ng-click="openNewFolderModal()",
|
||||
tooltip-html="'"+translate('new_folder').replace(' ', '<br>')+"'",
|
||||
tooltip-placement="bottom"
|
||||
)
|
||||
i.fa.fa-fw.fa-folder
|
||||
a(
|
||||
href,
|
||||
ng-click="openUploadFileModal()",
|
||||
tooltip=translate('upload'),
|
||||
tooltip-placement="bottom"
|
||||
)
|
||||
i.fa.fa-fw.fa-upload
|
||||
|
||||
.toolbar-right
|
||||
a(
|
||||
href,
|
||||
ng-click="startRenamingSelected()",
|
||||
tooltip=translate('rename'),
|
||||
tooltip-placement="bottom",
|
||||
ng-show="multiSelectedCount == 0"
|
||||
)
|
||||
i.fa.fa-fw.fa-pencil
|
||||
a(
|
||||
href,
|
||||
ng-click="openDeleteModalForSelected()",
|
||||
tooltip=translate('delete'),
|
||||
tooltip-placement="bottom",
|
||||
tooltip-append-to-body="true"
|
||||
)
|
||||
i.fa.fa-fw.fa-trash-o
|
||||
|
||||
|
||||
.file-tree-inner(
|
||||
ng-if="rootFolder",
|
||||
ng-controller="FileTreeRootFolderController",
|
||||
ng-class="{ 'no-toolbar': !permissions.write }"
|
||||
)
|
||||
ul.list-unstyled.file-tree-list(
|
||||
droppable="permissions.write"
|
||||
accept=".entity-name"
|
||||
on-drop-callback="onDrop"
|
||||
)
|
||||
li(
|
||||
ng-show="ui.pdfLayout == 'flat' && (ui.view == 'editor' || ui.view == 'pdf' || ui.view == 'file')"
|
||||
ng-class="{ 'selected': ui.view == 'pdf' }"
|
||||
ng-controller="PdfViewToggleController"
|
||||
)
|
||||
.entity
|
||||
.entity-name(
|
||||
ng-click="togglePdfView()"
|
||||
)
|
||||
i.fa.fa-fw.toggle
|
||||
i.fa.fa-fw.fa-file-pdf-o
|
||||
| PDF
|
||||
|
||||
file-entity(
|
||||
entity="entity",
|
||||
permissions="permissions",
|
||||
ng-repeat="entity in rootFolder.children | orderBy:[orderByFoldersFirst, 'name']"
|
||||
)
|
||||
|
||||
li(ng-show="deletedDocs.length > 0 && ui.view == 'history'")
|
||||
h3 #{translate("deleted_files")}
|
||||
li(
|
||||
ng-class="{ 'selected': entity.selected }",
|
||||
ng-repeat="entity in deletedDocs | orderBy:'name'",
|
||||
ng-controller="FileTreeEntityController",
|
||||
ng-show="ui.view == 'history'"
|
||||
)
|
||||
.entity
|
||||
.entity-name(
|
||||
ng-click="select($event)"
|
||||
)
|
||||
//- Just a spacer to align with folders
|
||||
i.fa.fa-fw.toggle
|
||||
i.fa.fa-fw.fa-file
|
||||
|
||||
span {{ entity.name }}
|
||||
|
||||
.outline-container(
|
||||
vertical-resizable-bottom
|
||||
ng-controller="OutlineController"
|
||||
)
|
||||
outline-pane(
|
||||
is-tex-file="isTexFile"
|
||||
outline="outline"
|
||||
project-id="project_id"
|
||||
jump-to-line="jumpToLine"
|
||||
on-toggle="onToggle"
|
||||
event-tracking="eventTracking"
|
||||
highlighted-line="highlightedLine"
|
||||
)
|
||||
|
||||
|
||||
script(type='text/ng-template', id='entityListItemTemplate')
|
||||
li(
|
||||
ng-class="{ 'selected': entity.selected, 'multi-selected': entity.multiSelected }",
|
||||
ng-controller="FileTreeEntityController"
|
||||
)
|
||||
.entity(ng-if="entity.type != 'folder'")
|
||||
.entity-name(
|
||||
ng-click="select($event)"
|
||||
ng-dblclick="permissions.write && startRenaming()"
|
||||
draggable="permissions.write"
|
||||
draggable-helper="draggableHelper"
|
||||
context-menu
|
||||
data-target="context-menu-{{ entity.id }}"
|
||||
context-menu-container="body"
|
||||
context-menu-disabled="!permissions.write"
|
||||
)
|
||||
//- Just a spacer to align with folders
|
||||
i.fa.fa-fw.toggle(ng-if="entity.type != 'folder'")
|
||||
|
||||
i.fa.fa-fw(ng-if="entity.type != 'folder'", ng-class="'fa-' + iconTypeFromName(entity.name)")
|
||||
i.fa.fa-external-link-square.fa-rotate-180.linked-file-highlight(
|
||||
ng-if="entity.linkedFileData.provider"
|
||||
)
|
||||
span(
|
||||
ng-hide="entity.renaming"
|
||||
) {{ entity.renamingToName || entity.name }}
|
||||
span.rename-input
|
||||
input(
|
||||
ng-if="permissions.write",
|
||||
ng-show="entity.renaming",
|
||||
ng-model="inputs.name",
|
||||
ng-blur="finishRenaming()",
|
||||
select-name-when="entity.renaming",
|
||||
on-enter="finishRenaming()"
|
||||
valid-file
|
||||
)
|
||||
|
||||
span.dropdown.entity-menu-toggle(
|
||||
dropdown,
|
||||
ng-if="permissions.write"
|
||||
)
|
||||
a.dropdown-toggle.file-tree-dropdown-toggle(href, dropdown-toggle, stop-propagation="click")
|
||||
|
||||
ul.dropdown-menu.dropdown-menu-right
|
||||
li
|
||||
a(
|
||||
href
|
||||
ng-click="startRenaming()"
|
||||
right-click="startRenaming()"
|
||||
ng-show="!entity.multiSelected"
|
||||
) #{translate("rename")}
|
||||
li
|
||||
a(
|
||||
href
|
||||
ng-click="openDeleteModal()"
|
||||
right-click="openDeleteModal()"
|
||||
stop-propagation="click"
|
||||
) #{translate("delete")}
|
||||
|
||||
div.dropdown.context-menu(
|
||||
id="context-menu-{{ entity.id }}",
|
||||
ng-if="permissions.write"
|
||||
)
|
||||
ul.dropdown-menu
|
||||
li
|
||||
a(
|
||||
href
|
||||
ng-click="startRenaming()"
|
||||
right-click="startRenaming()"
|
||||
ng-show="!entity.multiSelected"
|
||||
) #{translate("rename")}
|
||||
li
|
||||
a(
|
||||
href
|
||||
ng-click="openDeleteModal()"
|
||||
right-click="openDeleteModal()"
|
||||
stop-propagation="click"
|
||||
) #{translate("delete")}
|
||||
|
||||
|
||||
.entity(ng-if="entity.type == 'folder'", ng-controller="FileTreeFolderController")
|
||||
.entity-name(
|
||||
ng-click="select($event)"
|
||||
ng-dblclick="permissions.write && startRenaming()"
|
||||
draggable="permissions.write"
|
||||
draggable-helper="draggableHelper"
|
||||
droppable="permissions.write"
|
||||
accept=".entity-name"
|
||||
on-drop-callback="onDrop"
|
||||
)
|
||||
div(
|
||||
context-menu
|
||||
data-target="context-menu-{{ entity.id }}"
|
||||
context-menu-container="body"
|
||||
context-menu-disabled="!permissions.write"
|
||||
)
|
||||
i.fa.fa-fw.toggle(
|
||||
ng-if="entity.type == 'folder'"
|
||||
ng-class="{'fa-angle-right': !expanded, 'fa-angle-down': expanded}"
|
||||
ng-click="toggleExpanded()"
|
||||
)
|
||||
|
||||
i.fa.fa-fw(
|
||||
ng-if="entity.type == 'folder'"
|
||||
ng-class="{\
|
||||
'fa-folder': !expanded, \
|
||||
'fa-folder-open': expanded \
|
||||
}"
|
||||
ng-click="select($event)"
|
||||
)
|
||||
|
||||
span(
|
||||
ng-hide="entity.renaming"
|
||||
) {{ entity.renamingToName || entity.name }}
|
||||
span.rename-input
|
||||
input(
|
||||
ng-if="permissions.write",
|
||||
ng-show="entity.renaming",
|
||||
ng-model="inputs.name",
|
||||
ng-blur="finishRenaming()",
|
||||
select-name-when="entity.renaming",
|
||||
on-enter="finishRenaming()"
|
||||
valid-file
|
||||
)
|
||||
|
||||
span.dropdown.entity-menu-toggle(
|
||||
dropdown,
|
||||
ng-if="permissions.write"
|
||||
)
|
||||
a.dropdown-toggle.file-tree-dropdown-toggle(href, dropdown-toggle, stop-propagation="click")
|
||||
|
||||
ul.dropdown-menu.dropdown-menu-right
|
||||
li
|
||||
a(
|
||||
href
|
||||
ng-click="startRenaming()"
|
||||
right-click="startRenaming()"
|
||||
ng-show="!entity.multiSelected"
|
||||
) #{translate("rename")}
|
||||
li
|
||||
a(
|
||||
href
|
||||
ng-click="openDeleteModal()"
|
||||
right-click="openDeleteModal()"
|
||||
stop-propagation="click"
|
||||
) #{translate("delete")}
|
||||
li.divider
|
||||
li
|
||||
a(
|
||||
href
|
||||
ng-click="openNewDocModal()"
|
||||
right-click="openNewDocModal()"
|
||||
) #{translate("new_file")}
|
||||
li
|
||||
a(
|
||||
href
|
||||
ng-click="openNewFolderModal()"
|
||||
right-click="openNewFolderModal()"
|
||||
) #{translate("new_folder")}
|
||||
li
|
||||
a(
|
||||
href
|
||||
ng-click="openUploadFileModal()"
|
||||
right-click="openUploadFileModal()"
|
||||
) #{translate("upload_file")}
|
||||
|
||||
.dropdown.context-menu(
|
||||
ng-if="permissions.write"
|
||||
id="context-menu-{{ entity.id }}"
|
||||
)
|
||||
ul.dropdown-menu
|
||||
li
|
||||
a(
|
||||
href
|
||||
ng-click="startRenaming()"
|
||||
right-click="startRenaming()"
|
||||
ng-show="!entity.multiSelected"
|
||||
) #{translate("rename")}
|
||||
li
|
||||
a(
|
||||
href
|
||||
ng-click="openDeleteModal()"
|
||||
right-click="openDeleteModal()"
|
||||
stop-propagation="click"
|
||||
) #{translate("delete")}
|
||||
li.divider
|
||||
li
|
||||
a(
|
||||
href
|
||||
ng-click="openNewDocModal()"
|
||||
right-click="openNewDocModal()"
|
||||
) #{translate("new_file")}
|
||||
li
|
||||
a(
|
||||
href
|
||||
ng-click="openNewFolderModal()"
|
||||
right-click="openNewFolderModal()"
|
||||
) #{translate("new_folder")}
|
||||
li
|
||||
a(
|
||||
href
|
||||
ng-click="openUploadFileModal()"
|
||||
right-click="openUploadFileModal()"
|
||||
) #{translate("upload_file")}
|
||||
|
||||
ul.list-unstyled(
|
||||
ng-if="entity.type == 'folder' && (depth == null || depth < MAX_DEPTH)"
|
||||
ng-show="expanded"
|
||||
droppable="permissions.write"
|
||||
accept=".entity-name"
|
||||
on-drop-callback="onDrop"
|
||||
)
|
||||
file-entity(
|
||||
entity="child",
|
||||
permissions="permissions",
|
||||
ng-repeat="child in entity.children | orderBy:[orderByFoldersFirst, 'name']"
|
||||
depth="(depth || 0) + 1"
|
||||
)
|
||||
|
||||
.entity-limit-hit(
|
||||
ng-if="depth === MAX_DEPTH"
|
||||
ng-show="expanded"
|
||||
)
|
||||
i.fa.fa-fw
|
||||
span.entity-limit-hit-message
|
||||
| Some files might be hidden
|
||||
|
|
||||
i.fa.fa-question-circle.entity-limit-hit-tooltip-trigger(
|
||||
tooltip="Your project has hit Overleaf's maximum file depth limit. Files within this folder won't be visible."
|
||||
tooltip-append-to-body="true"
|
||||
aria-hidden="true"
|
||||
)
|
||||
span.sr-only
|
||||
| Your project has hit Overleaf's maximum file depth limit. Files within this folder won't be visible.
|
||||
|
||||
script(type='text/ng-template', id='newFolderModalTemplate')
|
||||
.modal-header
|
||||
h3 #{translate("new_folder")}
|
||||
.modal-body
|
||||
form(novalidate, name="newFolderForm")
|
||||
input.form-control(
|
||||
type="text",
|
||||
placeholder="Folder Name",
|
||||
required,
|
||||
ng-model="inputs.name",
|
||||
on-enter="create()",
|
||||
select-name-on="open",
|
||||
valid-file,
|
||||
name="name"
|
||||
)
|
||||
div.alert.alert-danger.row-spaced-small(ng-show="newFolderForm.name.$error.validFile")
|
||||
| #{translate('files_cannot_include_invalid_characters')}
|
||||
div.alert.alert-danger.row-spaced-small(ng-if="error")
|
||||
div(ng-switch="error")
|
||||
span(ng-switch-when="already exists") #{translate("file_already_exists")}
|
||||
span(ng-switch-default) {{error}}
|
||||
.modal-footer
|
||||
button.btn.btn-default(
|
||||
ng-disabled="state.inflight"
|
||||
ng-click="cancel()"
|
||||
) #{translate("cancel")}
|
||||
button.btn.btn-primary(
|
||||
ng-disabled="newFolderForm.$invalid || state.inflight"
|
||||
ng-click="create()"
|
||||
)
|
||||
span(ng-hide="state.inflight") #{translate("create")}
|
||||
span(ng-show="state.inflight") #{translate("creating")}…
|
||||
|
||||
script(type='text/ng-template', id='duplicateFileModalTemplate')
|
||||
.modal-header
|
||||
h3 #{translate("duplicate_file")}
|
||||
.modal-body
|
||||
p #{translate("file_already_exists_in_this_location", { fileName: "'{{ fileName }}'" })}
|
||||
.modal-footer
|
||||
button.btn.btn-default(
|
||||
ng-click="cancel()"
|
||||
) #{translate("dismiss")}
|
||||
|
||||
include ./new-file-modal
|
||||
|
||||
script(type='text/ng-template', id='deleteEntityModalTemplate')
|
||||
.modal-header
|
||||
h3 #{translate("delete")} {{ entity.name }}
|
||||
.modal-body
|
||||
p !{translate("sure_you_want_to_delete")}
|
||||
ul
|
||||
li(ng-repeat="entity in entities") {{entity.name}}
|
||||
.modal-footer
|
||||
button.btn.btn-default(
|
||||
ng-disabled="state.inflight"
|
||||
ng-click="cancel()"
|
||||
) #{translate("cancel")}
|
||||
button.btn.btn-danger(
|
||||
ng-disabled="state.inflight"
|
||||
ng-click="delete()"
|
||||
)
|
||||
span(ng-hide="state.inflight") #{translate("delete")}
|
||||
span(ng-show="state.inflight") #{translate("deleting")}…
|
||||
|
||||
script(type='text/ng-template', id='invalidFileNameModalTemplate')
|
||||
.modal-header
|
||||
h3 #{translate('invalid_file_name')}
|
||||
.modal-body
|
||||
p #{translate('files_cannot_include_invalid_characters')}
|
||||
.modal-footer
|
||||
button.btn.btn-default(
|
||||
ng-click="$close()"
|
||||
) #{translate('ok')}
|
||||
|
|
@ -15,7 +15,6 @@ import FileTreeError from './file-tree-error'
|
|||
import { useFileTreeMutable } from '../contexts/file-tree-mutable'
|
||||
import { useDroppable } from '../contexts/file-tree-draggable'
|
||||
|
||||
import { useFileTreeAngularListener } from '../hooks/file-tree-angular-listener'
|
||||
import { useFileTreeSocketListener } from '../hooks/file-tree-socket-listener'
|
||||
import FileTreeModalCreateFile from './modals/file-tree-modal-create-file'
|
||||
|
||||
|
|
@ -60,7 +59,7 @@ function FileTreeRoot({
|
|||
<FileTreeRootFolder />
|
||||
</div>
|
||||
<FileTreeModalDelete />
|
||||
{window.showReactAddFilesModal && <FileTreeModalCreateFile />}
|
||||
<FileTreeModalCreateFile />
|
||||
<FileTreeModalCreateFolder />
|
||||
<FileTreeModalError />
|
||||
</FileTreeContext>
|
||||
|
|
@ -69,7 +68,6 @@ function FileTreeRoot({
|
|||
|
||||
function FileTreeRootFolder() {
|
||||
useFileTreeSocketListener()
|
||||
useFileTreeAngularListener()
|
||||
const { fileTreeData } = useFileTreeMutable()
|
||||
|
||||
const { isOver, dropRef } = useDroppable(fileTreeData._id)
|
||||
|
|
|
|||
|
|
@ -312,44 +312,12 @@ export function useFileTreeActionable() {
|
|||
)
|
||||
|
||||
const startCreatingDocOrFile = useCallback(() => {
|
||||
if (window.showReactAddFilesModal) {
|
||||
startCreatingFile('doc')
|
||||
} else {
|
||||
const parentFolderId = getSelectedParentFolderId(
|
||||
fileTreeData,
|
||||
selectedEntityIds
|
||||
)
|
||||
|
||||
window.dispatchEvent(
|
||||
new CustomEvent('FileTreeReactBridge.openNewDocModal', {
|
||||
detail: {
|
||||
mode: 'doc',
|
||||
parentFolderId,
|
||||
},
|
||||
})
|
||||
)
|
||||
}
|
||||
}, [fileTreeData, selectedEntityIds, startCreatingFile])
|
||||
startCreatingFile('doc')
|
||||
}, [startCreatingFile])
|
||||
|
||||
const startUploadingDocOrFile = useCallback(() => {
|
||||
if (window.showReactAddFilesModal) {
|
||||
startCreatingFile('upload')
|
||||
} else {
|
||||
const parentFolderId = getSelectedParentFolderId(
|
||||
fileTreeData,
|
||||
selectedEntityIds
|
||||
)
|
||||
|
||||
window.dispatchEvent(
|
||||
new CustomEvent('FileTreeReactBridge.openNewDocModal', {
|
||||
detail: {
|
||||
mode: 'upload',
|
||||
parentFolderId,
|
||||
},
|
||||
})
|
||||
)
|
||||
}
|
||||
}, [fileTreeData, selectedEntityIds, startCreatingFile])
|
||||
startCreatingFile('upload')
|
||||
}, [startCreatingFile])
|
||||
|
||||
const finishCreatingDocOrFile = useCallback(
|
||||
entity => {
|
||||
|
|
@ -357,34 +325,10 @@ export function useFileTreeActionable() {
|
|||
|
||||
return finishCreatingEntity(entity)
|
||||
.then(() => {
|
||||
if (window.showReactAddFilesModal) {
|
||||
dispatch({ type: ACTION_TYPES.CLEAR })
|
||||
} else {
|
||||
// dispatch FileTreeReactBridge event to update the Angular modal
|
||||
window.dispatchEvent(
|
||||
new CustomEvent('FileTreeReactBridge.openNewFileModal', {
|
||||
detail: {
|
||||
done: true,
|
||||
},
|
||||
})
|
||||
)
|
||||
}
|
||||
dispatch({ type: ACTION_TYPES.CLEAR })
|
||||
})
|
||||
.catch(error => {
|
||||
if (window.showReactAddFilesModal) {
|
||||
dispatch({ type: ACTION_TYPES.ERROR, error })
|
||||
} else {
|
||||
// dispatch FileTreeReactBridge event to update the Angular modal with
|
||||
// an error
|
||||
window.dispatchEvent(
|
||||
new CustomEvent('FileTreeReactBridge.openNewFileModal', {
|
||||
detail: {
|
||||
error: true,
|
||||
data: error.message,
|
||||
},
|
||||
})
|
||||
)
|
||||
}
|
||||
dispatch({ type: ACTION_TYPES.ERROR, error })
|
||||
})
|
||||
},
|
||||
[dispatch, finishCreatingEntity]
|
||||
|
|
|
|||
|
|
@ -1,44 +0,0 @@
|
|||
import { useEffect } from 'react'
|
||||
|
||||
import { useFileTreeActionable } from '../contexts/file-tree-actionable'
|
||||
|
||||
// A temporary hack to listen to events dispatched from the Angular and update
|
||||
// the React file tree accordingly
|
||||
export function useFileTreeAngularListener() {
|
||||
const {
|
||||
finishCreatingDoc,
|
||||
finishCreatingLinkedFile,
|
||||
} = useFileTreeActionable()
|
||||
|
||||
useEffect(() => {
|
||||
function handleDispatchCreateDoc(ev) {
|
||||
const { ...doc } = ev.detail
|
||||
finishCreatingDoc(doc)
|
||||
}
|
||||
window.addEventListener(
|
||||
'FileTreeReactBridge.createDoc',
|
||||
handleDispatchCreateDoc
|
||||
)
|
||||
return () =>
|
||||
window.removeEventListener(
|
||||
'FileTreeReactBridge.createDoc',
|
||||
handleDispatchCreateDoc
|
||||
)
|
||||
}, [finishCreatingDoc])
|
||||
|
||||
useEffect(() => {
|
||||
function handleDispatchCreateLinkedFile(ev) {
|
||||
const { ...file } = ev.detail
|
||||
finishCreatingLinkedFile(file)
|
||||
}
|
||||
window.addEventListener(
|
||||
'FileTreeReactBridge.createLinkedFile',
|
||||
handleDispatchCreateLinkedFile
|
||||
)
|
||||
return () =>
|
||||
window.removeEventListener(
|
||||
'FileTreeReactBridge.createLinkedFile',
|
||||
handleDispatchCreateLinkedFile
|
||||
)
|
||||
}, [finishCreatingLinkedFile])
|
||||
}
|
||||
|
|
@ -563,22 +563,6 @@ export default FileTreeManager = class FileTreeManager {
|
|||
}
|
||||
|
||||
createDoc(name, parent_folder) {
|
||||
if (window.showReactFileTree) {
|
||||
const promise = new Promise((resolve, reject) => {
|
||||
this.$scope.FileTreeReactBridgePromise = {
|
||||
resolve,
|
||||
reject,
|
||||
}
|
||||
})
|
||||
window.dispatchEvent(
|
||||
new CustomEvent('FileTreeReactBridge.createDoc', {
|
||||
detail: {
|
||||
name,
|
||||
},
|
||||
})
|
||||
)
|
||||
return promise
|
||||
}
|
||||
// check if a doc/file/folder already exists with this name
|
||||
if (parent_folder == null) {
|
||||
parent_folder = this.getCurrentFolder()
|
||||
|
|
@ -613,24 +597,6 @@ export default FileTreeManager = class FileTreeManager {
|
|||
}
|
||||
|
||||
createLinkedFile(name, parent_folder, provider, data) {
|
||||
if (window.showReactFileTree) {
|
||||
const promise = new Promise((resolve, reject) => {
|
||||
this.$scope.FileTreeReactBridgePromise = {
|
||||
resolve,
|
||||
reject,
|
||||
}
|
||||
})
|
||||
window.dispatchEvent(
|
||||
new CustomEvent('FileTreeReactBridge.createLinkedFile', {
|
||||
detail: {
|
||||
name,
|
||||
provider,
|
||||
data,
|
||||
},
|
||||
})
|
||||
)
|
||||
return promise
|
||||
}
|
||||
// check if a doc/file/folder already exists with this name
|
||||
if (parent_folder == null) {
|
||||
parent_folder = this.getCurrentFolder()
|
||||
|
|
|
|||
|
|
@ -78,23 +78,6 @@ App.controller(
|
|||
},
|
||||
})
|
||||
|
||||
if (
|
||||
window.showReactFileTree &&
|
||||
!window.FileTreeReactBridgeOpenNewDocModalListened
|
||||
) {
|
||||
window.FileTreeReactBridgeOpenNewDocModalListened = true
|
||||
window.addEventListener(
|
||||
'FileTreeReactBridge.openNewDocModal',
|
||||
({ detail }) => {
|
||||
if (detail.mode === 'upload') {
|
||||
$scope.openUploadFileModal(detail.parentFolderId)
|
||||
} else {
|
||||
$scope.openNewDocModal(detail.parentFolderId)
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
$scope.orderByFoldersFirst = function (entity) {
|
||||
if ((entity != null ? entity.type : undefined) === 'folder') {
|
||||
return '0'
|
||||
|
|
@ -207,24 +190,6 @@ App.controller(
|
|||
}
|
||||
$modalInstance.dismiss('done')
|
||||
})
|
||||
|
||||
if (
|
||||
window.showReactFileTree &&
|
||||
!window.FileTreeReactBridgeOpenNewFileModalListened
|
||||
) {
|
||||
window.FileTreeReactBridgeOpenNewFileModalListened = true
|
||||
window.addEventListener(
|
||||
'FileTreeReactBridge.openNewFileModal',
|
||||
({ detail }) => {
|
||||
if (detail.done) {
|
||||
ide.$scope.FileTreeReactBridgePromise.resolve()
|
||||
}
|
||||
if (detail.error) {
|
||||
ide.$scope.FileTreeReactBridgePromise.reject(detail)
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue