diff --git a/services/web/frontend/js/features/file-tree/contexts/file-tree-selectable.js b/services/web/frontend/js/features/file-tree/contexts/file-tree-selectable.js index 0431c48696..c4be87f103 100644 --- a/services/web/frontend/js/features/file-tree/contexts/file-tree-selectable.js +++ b/services/web/frontend/js/features/file-tree/contexts/file-tree-selectable.js @@ -15,6 +15,7 @@ import { findInTree } from '../util/find-in-tree' import { useFileTreeData } from '../../../shared/context/file-tree-data-context' import { useProjectContext } from '../../../shared/context/project-context' import { useEditorContext } from '../../../shared/context/editor-context' +import { useLayoutContext } from '../../../shared/context/layout-context' import usePersistedState from '../../../shared/hooks/use-persisted-state' import usePreviousValue from '../../../shared/hooks/use-previous-value' @@ -193,7 +194,9 @@ const projectContextPropTypes = { const editorContextPropTypes = { permissionsLevel: PropTypes.oneOf(['readOnly', 'readAndWrite', 'owner']), } + export function useSelectableEntity(id) { + const { view, setView } = useLayoutContext(layoutContextPropTypes) const { selectedEntityIds, selectOrMultiSelectEntity } = useContext( FileTreeSelectableContext ) @@ -203,8 +206,9 @@ export function useSelectableEntity(id) { const handleEvent = useCallback( ev => { selectOrMultiSelectEntity(id, ev.ctrlKey || ev.metaKey) + setView('editor') }, - [id, selectOrMultiSelectEntity] + [id, selectOrMultiSelectEntity, setView] ) const handleClick = useCallback( @@ -233,20 +237,26 @@ export function useSelectableEntity(id) { [id, handleEvent, selectedEntityIds] ) + const isVisuallySelected = isSelected && view !== 'pdf' const props = useMemo( () => ({ - className: classNames({ selected: isSelected }), - 'aria-selected': isSelected, + className: classNames({ selected: isVisuallySelected }), + 'aria-selected': isVisuallySelected, onClick: handleClick, onContextMenu: handleContextMenu, onKeyPress: handleKeyPress, }), - [handleClick, handleContextMenu, handleKeyPress, isSelected] + [handleClick, handleContextMenu, handleKeyPress, isVisuallySelected] ) return { isSelected, props } } +const layoutContextPropTypes = { + view: PropTypes.string, + setView: PropTypes.func.isRequired, +} + export function useFileTreeSelectable() { const context = useContext(FileTreeSelectableContext)