feat: allow to disable file picker navigation

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

Author: skjnldsv

lib/components/FilePicker/FilePicker.vue

@@ -11,7 +11,8 @@
 		<template #navigation="{ isCollapsed }">
 			<FilePickerNavigation :is-collapsed="isCollapsed"
 				:current-view.sync="currentView"
-				:filter-string.sync="filterString" />
+				:filter-string.sync="filterString"
+				:disabled-navigation="disabledNavigation" />
 		</template>
 
 		<div class="file-picker__main">
@@ -89,6 +90,11 @@ const props = withDefaults(defineProps<{
 	 */
 	allowPickDirectory?: boolean
 
+	/**
+	 * Is the navigation disabled
+	 */
+	 disabledNavigation?: boolean
+
 	/**
 	 * Where to mount the dialog
 	 * @default 'body'
@@ -121,6 +127,7 @@ const props = withDefaults(defineProps<{
 	 path?: string
 }>(), {
 	allowPickDirectory: false,
+	disabledNavigation: false,
 	container: 'body',
 	filterFn: undefined,
 	mimetypeFilter: () => [],

lib/components/FilePicker/FilePickerNavigation.vue

@@ -12,7 +12,7 @@
 				<IconClose :size="16" />
 			</template>
 		</NcTextField>
-		<template v-if="availableViews.length > 1">
+		<template v-if="availableViews.length > 1 && !disabledNavigation">
 			<!-- On non collapsed dialogs show the tablist, otherwise a dropdown is shown -->
 			<ul v-if="!isCollapsed"
 				class="file-picker__side">
@@ -52,7 +52,8 @@ import { useViews } from '../../composables/views'
 const props = defineProps<{
 	currentView: 'files' | 'recent' | 'favorites',
 	filterString: string,
-	isCollapsed: boolean
+	isCollapsed: boolean,
+	disabledNavigation: boolean,
 }>()
 
 interface INavigationEvents {

lib/filepicker-builder.ts

@@ -56,6 +56,7 @@ export class FilePicker<IsMultiSelect extends boolean> {
 	private path?: string
 	private filter?: IFilePickerFilter
 	private container?: string
+	private disabledNavigation: boolean
 
 	public constructor(title: string,
 		multiSelect: IsMultiSelect,
@@ -64,7 +65,9 @@ export class FilePicker<IsMultiSelect extends boolean> {
 		buttons: IFilePickerButton[] | IFilePickerButtonFactory,
 		path?: string,
 		filter?: IFilePickerFilter,
-		container?: string) {
+		container?: string,
+		disabledNavigation = false,
+	) {
 		this.title = title
 		this.multiSelect = multiSelect
 		this.mimeTypeFilter = mimeTypeFilter
@@ -73,6 +76,7 @@ export class FilePicker<IsMultiSelect extends boolean> {
 		this.filter = filter
 		this.buttons = buttons
 		this.container = container
+		this.disabledNavigation = disabledNavigation
 	}
 
 	/**
@@ -93,6 +97,7 @@ export class FilePicker<IsMultiSelect extends boolean> {
 				mimetypeFilter: this.mimeTypeFilter,
 				multiselect: this.multiSelect,
 				filterFn: this.filter,
+				disabledNavigation: this.disabledNavigation,
 			}, (...rest: unknown[]) => {
 				const [nodes] = rest as [nodes: Node[]]
 				if (!Array.isArray(nodes) || nodes.length === 0) {
@@ -120,6 +125,7 @@ export class FilePickerBuilder<IsMultiSelect extends boolean> {
 	private filter?: IFilePickerFilter
 	private buttons: IFilePickerButton[] | IFilePickerButtonFactory = []
 	private container?: string
+	private disabledNavigation = false
 
 	/**
 	 * Construct a new FilePicker
@@ -273,6 +279,16 @@ export class FilePickerBuilder<IsMultiSelect extends boolean> {
 		return this
 	}
 
+	/**
+	 * Allow to pick directories besides files
+	 *
+	 * @param allow True to allow picking directories
+	 */
+	public disableNavigation() {
+		this.disabledNavigation = true
+		return this
+	}
+
 	/**
 	 * Construct the configured FilePicker
 	 */
@@ -285,6 +301,8 @@ export class FilePickerBuilder<IsMultiSelect extends boolean> {
 			this.buttons,
 			this.path,
 			this.filter,
+			this.container,
+			this.disabledNavigation,
 		)
 	}