feat(FilePicker): Expose canNavigate option

This will gray out nodes and prevent navigation

Signed-off-by: Louis Chmn <louis@chmn.me>

Author: artonge

lib/components/FilePicker/FileList.vue

@@ -68,6 +68,7 @@
 						:allow-pick-directory="allowPickDirectory"
 						:show-checkbox="multiselect"
 						:can-pick="(multiselect || selectedFiles.length === 0 || selectedFiles.includes(file)) && (canPick === undefined || canPick(file))"
+						:can-navigate="file.type === FileType.Folder && (canNavigate === undefined || canNavigate(file))"
 						:selected="selectedFiles.includes(file)"
 						:node="file"
 						:crop-image-previews="cropImagePreviews"
@@ -82,7 +83,7 @@
 <script setup lang="ts">
 import type { FilesSortingMode, INode } from '@nextcloud/files'
 import type { FileListViews } from '../../composables/filesSettings.ts'
-import type { IFilePickerCanPick } from '../types.ts'
+import type { IFilePickerCanNavigate, IFilePickerCanPick } from '../types.ts'
 
 import { FileType, sortNodes } from '@nextcloud/files'
 import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'
@@ -130,6 +131,10 @@ const props = defineProps<{
 	 * Custom function to decide if a node can be picked
 	 */
 	canPick?: IFilePickerCanPick
+	/**
+	 * Custom function to decide if a node can be navigated into
+	 */
+	canNavigate?: IFilePickerCanNavigate
 }>()
 
 /// sorting related stuff

lib/components/FilePicker/FileListRow.vue

@@ -10,6 +10,7 @@
 		:class="[
 			{
 				'file-picker__row--selected': selected && !showCheckbox,
+				'file-picker__row--not-navigatable': isDirectory && !canNavigate,
 			},
 		]"
 		:data-filename="node.basename"
@@ -62,6 +63,8 @@ const props = defineProps<{
 	showCheckbox: boolean
 	/** Whether the node can be picked */
 	canPick: boolean
+	/** Whether the node can be navigated into */
+	canNavigate: boolean
 	/** The current node */
 	node: INode
 	/** Whether the preview should be cropped */
@@ -113,7 +116,9 @@ function toggleSelected() {
  */
 function handleClick() {
 	if (isDirectory.value) {
-		emit('enterDirectory', props.node)
+		if (props.canNavigate) {
+			emit('enterDirectory', props.node)
+		}
 	} else {
 		toggleSelected()
 	}
@@ -143,6 +148,16 @@ function handleKeyDown(event: KeyboardEvent) {
 		&--selected {
 			background-color: var(--color-background-dark);
 		}
+
+		&--not-navigatable {
+			filter: saturate(0.7);
+			opacity: 0.7;
+
+			* {
+				cursor: default !important;
+			}
+		}
+
 		&:hover {
 			background-color: var(--color-background-hover);
 		}

lib/components/FilePicker/FilePicker.vue

@@ -44,6 +44,7 @@
 				:loading="isLoading"
 				:name="viewHeadline"
 				:can-pick="canPickFn"
+				:can-navigate="canNavigateFn"
 				@update:path="currentView = 'files'" />
 			<NcEmptyContent
 				v-else-if="filterString"
@@ -68,7 +69,7 @@
 <script setup lang="ts">
 import type { Node } from '@nextcloud/files'
 import type { IFilesViewId } from '../../composables/views.ts'
-import type { IDialogButton, IFilePickerButton, IFilePickerButtonFactory, IFilePickerCanPick, IFilePickerFilter } from '../types.ts'
+import type { IDialogButton, IFilePickerButton, IFilePickerButtonFactory, IFilePickerCanNavigate, IFilePickerCanPick, IFilePickerFilter } from '../types.ts'
 
 import { emit as emitOnEventBus } from '@nextcloud/event-bus'
 import { computed, onMounted, ref, shallowRef, toRef, watch } from 'vue'
@@ -114,6 +115,11 @@ const props = withDefaults(defineProps<{
 	 */
 	canPickFn?: IFilePickerCanPick
 
+	/**
+	 * Custom function to decide if a node can be navigated into
+	 */
+	canNavigateFn?: IFilePickerCanNavigate
+
 	/**
 	 * List of allowed mime types
 	 * You can use placeholders for e.g. allowing all subtypes of images `['image/*']`.
@@ -139,6 +145,7 @@ const props = withDefaults(defineProps<{
 	disabledNavigation: false,
 	filterFn: undefined,
 	canPickFn: undefined,
+	canNavigateFn: undefined,
 	mimetypeFilter: () => [],
 	multiselect: false,
 	path: undefined,

lib/components/types.ts

@@ -63,3 +63,8 @@ export type IFilePickerFilter = (node: Node) => boolean
  * Type of functions to allow or not picking a node
  */
 export type IFilePickerCanPick = (node: INode) => boolean
+
+/**
+ * Type of functions to allow or not navigating to node
+ */
+export type IFilePickerCanNavigate = (node: INode) => boolean

lib/filepicker-builder.ts

@@ -4,7 +4,7 @@
  */
 
 import type { Node } from '@nextcloud/files'
-import type { IFilePickerButton, IFilePickerButtonFactory, IFilePickerCanPick, IFilePickerFilter } from './components/types.ts'
+import type { IFilePickerButton, IFilePickerButtonFactory, IFilePickerCanNavigate, IFilePickerCanPick, IFilePickerFilter } from './components/types.ts'
 
 import IconMove from '@mdi/svg/svg/folder-move.svg?raw'
 import IconCopy from '@mdi/svg/svg/folder-multiple.svg?raw'
@@ -38,6 +38,7 @@ export class FilePicker<IsMultiSelect extends boolean> {
 	private path?: string
 	private filter?: IFilePickerFilter
 	private canPick?: IFilePickerCanPick
+	private canNavigate?: IFilePickerCanNavigate
 	private container?: string
 	private disabledNavigation: boolean
 
@@ -50,6 +51,7 @@ export class FilePicker<IsMultiSelect extends boolean> {
 		path?: string,
 		filter?: IFilePickerFilter,
 		canPick?: IFilePickerCanPick,
+		canNavigate?: IFilePickerCanNavigate,
 		container?: string,
 		disabledNavigation = false,
 	) {
@@ -60,6 +62,7 @@ export class FilePicker<IsMultiSelect extends boolean> {
 		this.path = path
 		this.filter = filter
 		this.canPick = canPick
+		this.canNavigate = canNavigate
 		this.buttons = buttons
 		this.container = container
 		this.disabledNavigation = disabledNavigation
@@ -82,6 +85,7 @@ export class FilePicker<IsMultiSelect extends boolean> {
 			multiselect: this.multiSelect,
 			filterFn: this.filter,
 			canPickFn: this.canPick,
+			canNavigateFn: this.canNavigate,
 			disabledNavigation: this.disabledNavigation,
 		}, {
 			container: this.container,
@@ -117,6 +121,7 @@ export class FilePickerBuilder<IsMultiSelect extends boolean> {
 	private path?: string
 	private filter?: IFilePickerFilter
 	private canPick?: IFilePickerCanPick
+	private canNavigate?: IFilePickerCanNavigate
 	private buttons: IFilePickerButton[] | IFilePickerButtonFactory = []
 	private container?: string
 	private disabledNavigation = false
@@ -284,6 +289,16 @@ export class FilePickerBuilder<IsMultiSelect extends boolean> {
 		return this
 	}
 
+	/**
+	 * Add function to allow or not picking a node
+	 *
+	 * @param canNavigate Function to decide if a node can be navigated into
+	 */
+	public setCanNavigate(canNavigate: IFilePickerCanNavigate) {
+		this.canNavigate = canNavigate
+		return this
+	}
+
 	/**
 	 * Disable navigation (view selection)
 	 */
@@ -305,6 +320,7 @@ export class FilePickerBuilder<IsMultiSelect extends boolean> {
 			this.path,
 			this.filter,
 			this.canPick,
+			this.canNavigate,
 			this.container,
 			this.disabledNavigation,
 		)