feat(FilePicker): Emit close event when a button is pressed with sele…

…cted files as payload Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
nextcloud-libraries · Aug 24, 2023 · f27e663 · f27e663
1 parent a4657be
commit f27e663
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 28 deletions.
diff --git a/l10n/messages.pot b/l10n/messages.pot
@@ -18,19 +18,27 @@ msgstr ""
 msgid "All files"
 msgstr ""
 
-#: lib/filepicker.ts:182
+#: lib/filepicker.ts:188
 msgid "Choose"
 msgstr ""
 
-#: lib/filepicker.ts:170
+#: lib/filepicker.ts:188
+msgid "Choose {file}"
+msgstr ""
+
+#: lib/filepicker.ts:195
 msgid "Copy"
 msgstr ""
 
-#: lib/components/FilePicker/FilePicker.vue:241
+#: lib/filepicker.ts:195
+msgid "Copy to {target}"
+msgstr ""
+
+#: lib/components/FilePicker/FilePicker.vue:248
 msgid "Could not create the new folder"
 msgstr ""
 
-#: lib/components/FilePicker/FilePicker.vue:151
+#: lib/components/FilePicker/FilePicker.vue:158
 #: lib/components/FilePicker/FilePickerNavigation.vue:65
 msgid "Favorites"
 msgstr ""
@@ -39,28 +47,31 @@ msgstr ""
 msgid "File name cannot be empty."
 msgstr ""
 
-#: lib/components/FilePicker/FilePicker.vue:227
+#: lib/components/FilePicker/FilePicker.vue:234
 msgid "Files and folders you mark as favorite will show up here."
 msgstr ""
 
-#: lib/components/FilePicker/FilePicker.vue:225
+#: lib/components/FilePicker/FilePicker.vue:232
 msgid "Files and folders you recently modified will show up here."
 msgstr ""
 
 #: lib/components/FilePicker/FileList.vue:39
 msgid "Modified"
 msgstr ""
 
-#: lib/filepicker.ts:176
-#: lib/filepicker.ts:190
+#: lib/filepicker.ts:203
 msgid "Move"
 msgstr ""
 
+#: lib/filepicker.ts:203
+msgid "Move to {target}"
+msgstr ""
+
 #: lib/components/FilePicker/FileList.vue:19
 msgid "Name"
 msgstr ""
 
-#: lib/components/FilePicker/FilePicker.vue:151
+#: lib/components/FilePicker/FilePicker.vue:158
 #: lib/components/FilePicker/FilePickerNavigation.vue:61
 msgid "Recent"
 msgstr ""
@@ -77,6 +88,6 @@ msgstr ""
 msgid "Undo"
 msgstr ""
 
-#: lib/components/FilePicker/FilePicker.vue:223
+#: lib/components/FilePicker/FilePicker.vue:230
 msgid "Upload some content or sync with your devices!"
 msgstr ""
diff --git a/lib/components/FilePicker/FilePicker.vue b/lib/components/FilePicker/FilePicker.vue
@@ -114,7 +114,7 @@ const props = withDefaults(defineProps<{
 })
 
 const emit = defineEmits<{
-	(e: 'close'): void
+	(e: 'close', v?: Node[]): void
 }>()
 
 /**
@@ -142,6 +142,7 @@ const dialogButtons = computed(() => {
 		callback: async () => {
 			const nodes = selectedFiles.value.length === 0 && props.allowPickDirectory ? [await getFile(currentPath.value)] : selectedFiles.value as Node[]
 			button.callback(nodes)
+			emit('close', selectedFiles.value as Node[])
 		},
 	} as IFilePickerButton))
 })

diff --git a/lib/filepicker.ts b/lib/filepicker.ts
@@ -75,27 +75,22 @@ export class FilePicker<IsMultiSelect extends boolean> {
 	 */
 	public async pick(): Promise<IsMultiSelect extends true ? string[] : string> {
 		return new Promise((resolve, reject) => {
-			const buttons = this.buttons.map((button) => ({
-				...button,
-				callback: (nodes: Node[]) => {
-					button.callback(nodes)
-					if (this.multiSelect) {
-						resolve(nodes.map((node) => node.path) as (IsMultiSelect extends true ? string[] : string))
-					} else {
-						resolve((nodes[0]?.path || '/') as (IsMultiSelect extends true ? string[] : string))
-					}
-				},
-			}))
-
 			spawnDialog(FilePickerVue, {
 				allowPickDirectory: this.directoriesAllowed,
-				buttons,
+				buttons: this.buttons,
 				name: this.title,
 				path: this.path,
 				mimetypeFilter: this.mimeTypeFilter,
 				multiselect: this.multiSelect,
 				filterFn: this.filter,
-			}, reject)
+			}, (...nodes: unknown[]) => {
+				if (!nodes) reject(new Error('Nothing selected'))
+				if (this.multiSelect) {
+					resolve((nodes as Node[]).map((node) => node.path) as (IsMultiSelect extends true ? string[] : string))
+				} else {
+					resolve(((nodes as Node[])[0]?.path || '/') as (IsMultiSelect extends true ? string[] : string))
+				}
+			})
 		})
 	}
 

diff --git a/lib/utils/dialogs.ts b/lib/utils/dialogs.ts
@@ -30,7 +30,7 @@ import Vue from 'vue'
  * @param props Properties to pass to the dialog
  * @param onClose Callback when the dialog is closed
  */
-export const spawnDialog = (dialog: Component | AsyncComponent, props: any, onClose: () => void = () => {}) => {
+export const spawnDialog = (dialog: Component | AsyncComponent, props: any, onClose: (...rest: unknown[]) => void = () => {}) => {
 	const el = document.createElement('div')
 
 	const container: HTMLElement = document.querySelector(props?.container) || document.body
@@ -43,8 +43,8 @@ export const spawnDialog = (dialog: Component | AsyncComponent, props: any, onCl
 			h(dialog, {
 				props,
 				on: {
-					close: () => {
-						onClose()
+					close: (...rest: unknown[]) => {
+						onClose(rest)
 						vue.$destroy()
 					},
 				},